/* ==========================================================================
   WORK-001 — Justified Editorial Grid
   Every tile keeps the photo's native aspect ratio (3:2 landscape, 2:3
   portrait). Rows are flex containers; each tile's flex-grow equals its
   ratio, so all tiles in a row share one height and nothing is cropped
   or letterboxed. Row rhythm (desktop):

     Row 1  ┌────────────────────┬────────┐  tall opener       h = W/2.166
            │ 01 landscape       │ 02 P   │
     Row 2  ┌──────┬─────────────┬────────┐  triptych          h = W/3.665
            │ 03 P │ 04 L        │ 05 L   │
     Row 3  ┌──────┬─────────────────────┐   tall, P leads     h = W/2.166
            │ 06 P │ 07 landscape        │
     Row 4  ┌───────────────┬────────────┐   even pair         h = W/2.998
            │ 08 L          │ 09 L       │
     Row 5  ┌────────────────────────────┐   full-bleed closer h = W/1.499
            │ 10 landscape               │
     Row 6  ┌──────┬─────────────┬──────┐   hidden             h = W/2.832
            │ 11 P │ 12 L        │ 13 P │
     Row 7  ┌────────────┬────────────┬──┐   hidden finale     h = W/3.665
            │ 14 L       │ 15 L       │16P│
   ========================================================================== */

/* ── Navbar solid on inner pages ── */
.navbar {
  background: rgba(8,9,13,0.98) !important;
  border-bottom: 1px solid var(--color-border);
}

/* ── Page shell ── */
.work-main {
  padding: 118px 56px 100px;
  max-width: 1520px;
  margin: 0 auto;
}

/* ── Breadcrumb ── */
.work-breadcrumb { margin-bottom: 52px; }
.work-breadcrumb a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  transition: color .2s;
}
.work-breadcrumb a:hover { color: var(--color-accent); }

/* ── Title row ── */
.work-title-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 80px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.work-title-left { display: flex; flex-direction: column; }
.work-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 14px;
}
.work-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 7.5vw, 108px);
  font-weight: 700;
  color: #fff;
  line-height: .86;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.work-title-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 4px;
}
.work-about-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.work-about-text {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255,255,255,.55);
  max-width: 460px;
  margin-bottom: 28px;
}
.work-meta-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.work-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.12);
  padding: 5px 13px;
  border-radius: 2px;
  transition: border-color .2s, color .2s;
}
.work-tag:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ══════════════════════════════════════════════
   GRID
   ══════════════════════════════════════════════ */
.film-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.g-row {
  display: flex;
  gap: 12px;
}

/* Tiles: flex-grow = aspect ratio → equal row height, exact ratios */
.bc {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(255,255,255,.03);
  outline: none;
  min-width: 0;
  opacity: 0;
  animation: bc-in .55s cubic-bezier(.22,1,.36,1) forwards;
}
.is-land { flex: 1.4993 1 0%; aspect-ratio: 2000 / 1334; }
.is-port { flex: 0.667  1 0%; aspect-ratio: 1334 / 2000; }

/* stagger visible cards */
.bc-01 { animation-delay: .04s; }
.bc-02 { animation-delay: .10s; }
.bc-03 { animation-delay: .16s; }
.bc-04 { animation-delay: .22s; }
.bc-05 { animation-delay: .28s; }
.bc-06 { animation-delay: .34s; }
.bc-07 { animation-delay: .40s; }
.bc-08 { animation-delay: .46s; }
.bc-09 { animation-delay: .52s; }
.bc-10 { animation-delay: .58s; }

@keyframes bc-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.bc img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* tile ratio == image ratio, so no real crop */
  display: block;
  transition: transform .55s cubic-bezier(.25,1,.5,1), filter .55s ease;
  will-change: transform;
}
.bc:hover img,
.bc:focus-visible img {
  transform: scale(1.04);
  filter: brightness(1.07) contrast(1.02);
}
.bc:focus-visible { box-shadow: 0 0 0 2px var(--color-accent); }

.bc-veil {
  position: absolute;
  inset: 0;
  background: rgba(8,9,13,.28);
  pointer-events: none;
  transition: background .4s ease;
}
.bc:hover .bc-veil,
.bc:focus-visible .bc-veil { background: rgba(8,9,13,.04); }

.bc-num {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,.7);
  font-family: var(--font-display, 'Oswald', sans-serif);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.bc:hover .bc-num,
.bc:focus-visible .bc-num { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════
   SHOW MORE — hidden ROWS, class toggle only
   ══════════════════════════════════════════════ */
.bento-hidden { display: none; }
.bento-hidden.is-visible {
  display: flex;
  animation: row-reveal .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes row-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
/* cards inside revealed rows run bc-in on first display */
.bc-11 { animation-delay: .05s; }
.bc-12 { animation-delay: .11s; }
.bc-13 { animation-delay: .17s; }
.bc-14 { animation-delay: .23s; }
.bc-15 { animation-delay: .29s; }
.bc-16 { animation-delay: .35s; }

/* ── Show More button row ── */
.work-show-more-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}
.work-show-more-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .25s, border-color .25s;
}
.work-show-more-btn:hover { background: var(--color-accent); border-color: var(--color-accent); }
.work-show-more-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.show-more-icon { transition: transform .35s ease; pointer-events: none; }
.work-show-more-btn.expanded .show-more-icon { transform: rotate(180deg); }
.show-more-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,4,7,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.lightbox-stage {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 85vh;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 83vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  box-shadow: 0 40px 100px rgba(0,0,0,.85);
  transition: opacity .18s ease;
}
.lightbox-footer {
  position: relative;
  z-index: 10;
  margin-top: 18px;
}
.lightbox-counter {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
}
.lightbox-close {
  position: fixed;
  top: 22px; right: 26px;
  z-index: 20;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.lightbox-close:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.lightbox-nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  z-index: 20;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.lightbox-nav:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   Rows scale fluidly; only paddings/gaps step down.
   Below 640px the rows stack into a single column,
   each photo keeping its native ratio.
   ══════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .work-main { padding: 100px 40px 80px; }
}

@media (max-width: 1024px) {
  .work-main { padding: 88px 32px 72px; }
  .work-title-row { gap: 48px; }
  .film-grid, .g-row { gap: 10px; }
}

@media (max-width: 768px) {
  .work-main { padding: 80px 20px 60px; }
  .work-title-row { grid-template-columns: 1fr; gap: 32px; }
  .film-grid, .g-row { gap: 8px; }
}

@media (max-width: 640px) {
  .work-main { padding: 76px 12px 52px; }
  .work-title { font-size: clamp(38px, 11vw, 52px); }
  .work-about-text { font-size: 13px; }
  .g-row { flex-direction: column; }
  .bento-hidden.is-visible { flex-direction: column; }
  .is-land, .is-port { flex: none; width: 100%; }
}