/* Portfolio: photo-led cards, category filters and an accessible full-screen viewer. */
.gallery { background: #f3f3f3; }
.gallery-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-bottom: 2.5rem; }
.gallery .section-tag { background: transparent; padding: 0; color: #585858; margin-bottom: .8rem; }
.gallery .section-title { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.045em; line-height: 1.15; }
.gallery .section-subtitle { max-width: 390px; font-size: 1rem; color: #616161; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid #d9d9d9; margin-bottom: 1.1rem; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-filter { border: 1px solid transparent; background: transparent; color: #595959; border-radius: 999px; padding: .65rem 1rem; font: inherit; font-size: .83rem; font-weight: 600; cursor: pointer; transition: background 180ms, color 180ms; }
.gallery-filter:hover { background: #e6e6e6; color: #161616; }
.gallery-filter.is-active { background: #1a1a1a; color: #fff; }
.gallery-count { font-size: .8rem; color: #616161; white-space: nowrap; }
.gallery .gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 1.25rem; max-width: none; margin: 0; }
.gallery-item { min-width: 0; cursor: auto; }
.gallery-item[hidden] { display: none; }
.gallery-item--featured { grid-column: span 2; }
.gallery-open { display: block; width: 100%; height: 100%; padding: 0; text-align: left; font: inherit; color: #242424; cursor: pointer; border: 0; background: transparent; border-radius: 12px; }
.gallery .gallery-img-wrapper { display: block; position: relative; aspect-ratio: 1; border-radius: 12px; background: #dddddd; box-shadow: none; transition: box-shadow 200ms; }
.gallery-grid[data-filter="all"] .gallery-item--lead .gallery-img-wrapper { aspect-ratio: auto; height: clamp(240px, 31vw, 390px); }
.gallery .gallery-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms; }
.gallery .gallery-item:hover .gallery-img-wrapper { transform: none; box-shadow: 0 6px 20px #00000014; }
.gallery .gallery-item:hover img, .gallery-open:focus-visible img { transform: scale(1.035); }
.gallery-view { display: flex; gap: 1rem; align-items: center; position: absolute; right: 14px; bottom: 14px; background: #ffffffee; color: #202020; border: 1px solid #fff; border-radius: 999px; padding: .5rem .85rem; font-size: .72rem; font-weight: 600; box-shadow: 0 2px 12px #00000015; }
.gallery-view span { font-size: 1rem; line-height: 1; }
.gallery-details { display: block; padding: 1rem .2rem .2rem; }
.gallery-category { display: block; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; color: #696969; margin-bottom: .3rem; }
.gallery .gallery-caption { display: block; position: static; color: #242424; font-size: .97rem; font-weight: 600; line-height: 1.4; }
.gallery-grid:not([data-filter="all"]) .gallery-item--featured { grid-column: auto; }
.gallery-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid #d9d9d9; margin-top: 2.7rem; padding-top: 1.5rem; }
.gallery-footer p { font-size: .95rem; color: #616161; }
.gallery-quote-link { font-size: .9rem; font-weight: 600; color: #242424; display: inline-flex; align-items: center; gap: 1.25rem; }
.gallery-quote-link:hover { text-decoration: underline; }
.gallery-open:focus-visible, .gallery-filter:focus-visible, .gallery-quote-link:focus-visible { outline: 3px solid #515151; outline-offset: 5px; }

.lightbox { margin: 0; padding: 60px 80px; border: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: #111111f5; color: #fff; opacity: 1; visibility: visible; transition: none; }
.lightbox:not([open]) { display: none; }
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: #111; }
.lightbox-content { max-width: 100%; max-height: 100%; width: 100%; }
.lightbox-img { max-width: 100%; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); width: auto; object-fit: contain; border-radius: 6px; }
.lightbox-caption { margin-top: 1rem; font-size: 1rem; color: #f5f5f5; }
.lightbox-count { color: #a3a3a3; font-size: .75rem; margin-top: .25rem; }
.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (max-width: 1024px) {
  .gallery .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item--featured { grid-column: span 2; }
  .gallery-grid[data-filter="all"] .gallery-item--featured .gallery-img-wrapper { height: auto; aspect-ratio: 16/10; }
  .gallery-grid[data-filter="all"] .gallery-item--lead:not(.gallery-item--featured) .gallery-img-wrapper { height: auto; aspect-ratio: 1; }
  .gallery-header { gap: 2rem; }
}
@media (max-width: 600px) {
  .gallery .container { padding-left: 20px; padding-right: 20px; }
  .gallery-header { display: block; margin-bottom: 1.7rem; }
  .gallery .section-subtitle { margin-top: 1.1rem; font-size: .92rem; }
  .gallery-toolbar { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .gallery-filter { padding: .6rem .8rem; font-size: .75rem; }
  .gallery .gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }
  .gallery-item--featured { grid-column: auto; }
  .gallery .gallery-caption { font-size: 1rem; }
  .gallery-footer { align-items: flex-start; flex-direction: column; }
  .lightbox { padding: 70px 16px 100px; }
  .lightbox-img { max-height: calc(100dvh - 260px); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 24px; transform: none; }
  .lightbox-prev { left: calc(50% - 60px); }
  .lightbox-next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery .gallery-item:hover img, .gallery-open:focus-visible img { transform: none; }
}
@media print {
  .gallery-filters, .gallery-view, .lightbox { display: none !important; }
}