/* ============================================================
   Una Skujina — Photography section
   Level 2: all-projects overview (photography.html)
   Level 3: individual project page (rave-the-planet.html, …)
   Loaded after the Webflow CSS + nav.css. Single breakpoint at
   767/768px, matching nav.css. Class-based, no inline styles.
   ============================================================ */

:root{
  /* Overview grid measure. Full-bleed on any built-in Mac laptop display,
     including "More Space" scaling (14"/16" top out at ~2056pt logical).
     Only genuinely wide external monitors (27" 5K, 34" ultrawide) get the
     centred white margins the brief asked for. */
  --usk-photo-max: 2100px;
}

/* ---------------- Level 2 — overview ---------------- */

/* nav scrim: keeps the white --over nav legible over the first tiles.
   Follows the same measure as the grid so it sits over imagery, not the margins. */
.usk-photo-scrim{
  position:absolute; top:0; left:0; right:0;
  max-width:var(--usk-photo-max); margin:0 auto;
  height:140px; z-index:15; pointer-events:none;
  background-image:linear-gradient(to bottom,#08080699,#0808061f 60%,#08080600);
}

.usk-photo-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0;
  width:100%; max-width:var(--usk-photo-max); margin:0 auto;
}

.usk-photo-tile{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:1 / 1; background:#f1efe8; color:inherit; text-decoration:none;
}
.usk-photo-tile.is-feature{ grid-column:span 2; aspect-ratio:2 / 1; }

/* project without a cover yet — dark stone tile so the caption stays legible */
.usk-photo-tile:not(:has(img)){ background:#3c3b38; }

.usk-photo-tile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; filter:brightness(.82);
}

.usk-photo-tint{
  position:absolute; inset:0;
  background-image:linear-gradient(to top,#080806a3,#08080647 55%,#08080659);
}
.usk-photo-tile.is-feature .usk-photo-tint{
  background-image:linear-gradient(to top,#080806a8,#08080685 55%,#08080699);
}

.usk-photo-cap{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:16px;
}
.usk-photo-cap h2{
  margin:0; font-weight:400; color:#fff;
  font-size:20px; line-height:1.1; letter-spacing:-.01em;
}

.usk-photo-year{
  color:#ffffffd9; font-size:10px; letter-spacing:.26em;
  font-variant-numeric:tabular-nums;
}

/* per-tile counter — desktop only (dropped on mobile per spec) */
.usk-photo-counter{ display:none; }

@media (min-width:768px){
  .usk-photo-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .usk-photo-scrim{ height:180px; }
  .usk-photo-cap{ gap:10px; padding:24px; }
  .usk-photo-cap h2{ font-size:30px; line-height:1.05; letter-spacing:-.015em; }
  .usk-photo-year{ font-size:11px; letter-spacing:.3em; }
  .usk-photo-counter{
    display:block; position:absolute; bottom:16px; right:16px;
    color:#ffffffd9; font-size:10px; letter-spacing:.2em;
    font-variant-numeric:tabular-nums;
  }
}

/* ---------------- shared footer (overview + project pages) ---------------- */
.usk-photo-foot{ text-align:center; padding:36px 20px; }
.usk-photo-foot .icons{ display:inline-flex; align-items:center; gap:4px; }
.usk-photo-foot .text-block{ font-family:Montserrat,sans-serif; font-size:13px; color:#333; }

/* ---------------- Level 3 — project page ---------------- */
/* mobile-first, single 768px breakpoint (matches nav.css). Capped containers
   follow --usk-photo-max like the overview so the section behaves the same on
   every screen. */

.usk-proj-head{ max-width:var(--usk-photo-max); margin:0 auto; padding:96px 20px 0; }

.usk-proj-eyebrow{
  font-family:Montserrat,sans-serif; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:#888780; margin-bottom:18px;
}
.usk-proj-eyebrow a,
.usk-proj-eyebrow a:link,
.usk-proj-eyebrow a:visited{ color:inherit; text-decoration:none; }
.usk-proj-eyebrow a:hover,
.usk-proj-eyebrow a:focus{ color:#0e0e0c; }

.usk-proj-title{
  margin:0 0 0 -3px; color:#0e0e0c; font-weight:400;
  font-size:40px; line-height:.98; letter-spacing:-.015em;
}
.usk-proj-rule{ border-top:.5px solid #0e0e0c2e; width:100%; margin-top:20px; }

.usk-proj-meta{
  display:flex; flex-direction:column; gap:18px;
  margin-top:20px; padding-bottom:28px;
}
.usk-proj-count{
  font-family:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:#888780;
}

/* project switcher — scrolls horizontally on mobile (bleeds to the edge),
   wraps on desktop. Same mechanic as the paintings year row. */
.usk-proj-switch{
  display:flex; align-items:baseline; gap:24px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin:0 -20px; padding:0 20px 2px;
}
.usk-proj-switch::-webkit-scrollbar{ display:none; }
.usk-proj-switch a,
.usk-proj-switch a:link,
.usk-proj-switch a:visited{
  flex:none; white-space:nowrap; font-size:13px; text-transform:uppercase;
  color:#5f5e5a; text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:4px; transition:color .25s;
}
.usk-proj-switch a.is-current{ color:#0e0e0c; border-bottom-color:#0e0e0c; }
.usk-proj-switch a:hover,
.usk-proj-switch a:focus{ color:#0e0e0c; }

.usk-proj-body{ max-width:var(--usk-photo-max); margin:0 auto; padding:0 20px 64px; }

/* mosaic — column span encodes each frame's own orientation.
   Mobile grid = 2 cols (rows sum to 2), desktop grid = 6 cols (rows sum to 6). */
.usk-frame-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px; }
.usk-frame-cell{
  position:relative; overflow:hidden; background:#f1efe8;
  aspect-ratio:2 / 3;                         /* portrait — the default */
}
.usk-frame-cell.is-wide{ grid-column:span 2; aspect-ratio:3 / 2; }   /* landscape */
.usk-frame-cell.is-full{ grid-column:span 2; aspect-ratio:3 / 2; }   /* full-bleed landscape */
.usk-frame-cell img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

.usk-proj-empty{
  border-top:.5px solid #0e0e0c2e; padding:64px 0;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#888780;
}

/* prev / next above the footer */
.usk-proj-nav{
  display:flex; flex-direction:column; gap:14px;
  border-top:.5px solid #0e0e0c2e; margin-top:32px; padding-top:18px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.usk-proj-nav a,
.usk-proj-nav a:link,
.usk-proj-nav a:visited{ text-decoration:none; transition:color .25s; }
.usk-proj-nav .back{ color:#5f5e5a; }
.usk-proj-nav .next{ color:#0e0e0c; }
.usk-proj-nav a:hover{ color:#0e0e0c; }

@media (min-width:768px){
  .usk-proj-head{ padding:120px 24px 0; }
  .usk-proj-title{ margin-left:-5px; font-size:72px; line-height:.95; letter-spacing:-.018em; }
  .usk-proj-rule{ margin-top:28px; }
  .usk-proj-meta{
    flex-direction:row; align-items:baseline; justify-content:space-between;
    gap:16px 48px; flex-wrap:wrap; margin-top:24px; padding-bottom:56px;
  }
  .usk-proj-switch{ overflow:visible; flex-wrap:wrap; gap:28px; margin:0; padding:0; }
  .usk-proj-body{ padding:0 24px 96px; }

  .usk-frame-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .usk-frame-cell{ grid-column:span 2; }          /* portraits — three per row */
  .usk-frame-cell.is-wide{ grid-column:span 3; }  /* landscapes — two per row */
  .usk-frame-cell.is-full{ grid-column:span 6; }

  .usk-proj-nav{ flex-direction:row; justify-content:space-between; margin-top:48px; padding-top:20px; }
}