/* =========================================================
   Pascal Diering – style.css (Unified / CLEAN)
   - Dark premium layout
   - Cards + Gallery grid
   - Tiles mode (mode-tiles) for category pages
   - One Lightbox (premium, iOS-safe)
   ========================================================= */

/* -------------------------
   CSS Variables / Tokens
   ------------------------- */
:root{
  --bg:#0b0b0c;
  --panel: rgba(255,255,255,.03);
  --text:#f4f4f5;
  --border: rgba(255,255,255,.10);

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
  --font-brand: "Cinzel", serif;

  --headerH: 74px;

  --h1: clamp(30px, 3.1vw, 44px);
  --h2: clamp(18px, 1.55vw, 22px);
  --lead: clamp(1.02rem, .35vw + 1rem, 1.12rem);

  --textStrong: rgba(244,244,245,.94);
  --textBody: rgba(244,244,245,.82);
  --textMuted: rgba(244,244,245,.62);

  --rCard: 18px;
  --rTile: 18px;
  --shadowHover: 0 18px 40px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.06) inset;
}

/* -------------------------
   Base
   ------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a{ color:inherit; text-decoration:none; }

.container{
  width:min(1120px, calc(100% - 44px));
  margin:0 auto;
}

main{
  padding-top: calc(var(--headerH) + 34px);
  padding-bottom: 34px;
}

/* -------------------------
   HEADER (fixed)
   ------------------------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  height: var(--headerH);
  background: rgba(11,11,12,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  z-index: 1000;
}

.header-inner{
  height:var(--headerH);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}

.brand{
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.0;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:#fff;
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
}

.nav a{
  padding:10px 12px;
  border-radius:999px;
  color: rgba(244,244,245,.70);
}
.nav a:hover{
  background:rgba(255,255,255,.06);
  color: rgba(244,244,245,.94);
}

.nav-cta{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: transparent;
  color: rgba(244,244,245,.92);
  font-weight:800;
}
.nav-cta:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
}

.nav-ig{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color: rgba(244,244,245,.92);
  padding:0;
  line-height:0;
}
.nav-ig:hover{ background:rgba(255,255,255,.08); }
.nav-ig svg{ display:block; width:22px; height:22px; }

/* -------------------------
   Typography
   ------------------------- */
p{
  margin:0 0 14px;
  color:var(--textBody);
  line-height:1.72;
  max-width:74ch;
  font-size:1rem;
}

.lead{
  font-size:var(--lead);
  line-height:1.75;
  color:rgba(244,244,245,.86);
  max-width:78ch;
}

h1{
  margin:0 0 10px;
  font-size:var(--h1);
  line-height:1.06;
  letter-spacing:-.35px;
  font-weight:700;
  color:var(--textStrong);
}

h2{
  margin:34px 0 10px;
  font-size:var(--h2);
  line-height:1.2;
  letter-spacing:-.18px;
  font-weight:650;
  color:rgba(244,244,245,.90);
}

.muted{
  color:var(--textMuted);
  font-size:14px;
  line-height:1.55;
}

/* -------------------------
   Breadcrumb
   ------------------------- */
.breadcrumb{
  margin: 8px 0 14px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(244,244,245,.55);
}
.breadcrumb .crumb{ color: rgba(244,244,245,.70); }
.breadcrumb a.crumb:hover{ color: rgba(244,244,245,.92); }
.breadcrumb .crumb-sep{ margin: 0 10px; opacity: .55; }
.breadcrumb .crumb-last-hide-mobile{ display:inline; }

/* -------------------------
   HERO
   ------------------------- */
.hero{
  position:relative;
  height:clamp(380px,62vh,720px);
  background:#000;
  overflow:hidden;
}

.hero .slides{ position:absolute; inset:0; }
.hero .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .85s ease;
}
.hero .slide.is-active{ opacity:1; }

.hero img,
.hero video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero .overlay{
  position:absolute;
  left:0;right:0;bottom:0;
  height:42%;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  pointer-events:none;
}

.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.20);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
}
.hero-arrow:hover{
  background:rgba(0,0,0,.30);
  border-color:rgba(255,255,255,.30);
}
.hero-arrow.prev{ left:24px; }
.hero-arrow.next{ right:24px; }
.hero-arrow svg{ display:block; }

.hero-dots{
  position:absolute;
  left:22px;
  bottom:18px;
  display:flex;
  gap:10px;
  align-items:center;
}
.hero-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.40);
  background:rgba(255,255,255,.12);
  opacity:.7;
  cursor:pointer;
}
.hero-dot.is-active{
  background:rgba(255,255,255,.95);
  opacity:1;
}

.hero-counter{
  position:absolute;
  right:22px;
  bottom:14px;
  font-size:14px;
  color:rgba(255,255,255,.80);
}

/* -------------------------
   Cards (Work index + category projects)
   ------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:14px;
}

.card{
  border-radius:var(--rCard);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--panel);
  display:block;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  will-change: transform;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--shadowHover);
}

/* ✅ always rounded media like Hotels */
.card .media{
  height:220px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
  border-radius: var(--rCard) var(--rCard) 0 0;
}
.card .media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s ease, filter .55s ease;
}
.card:hover .media img{
  transform:scale(1.03);
  filter:saturate(1.04) contrast(1.02);
}
.card .body{ padding:14px; }
.card .title{ font-weight:650; letter-spacing:-.12px; color:rgba(244,244,245,.92); }
.card .sub{ margin-top:6px; color:rgba(244,244,245,.62); font-size:14px; line-height:1.55; }

/* -------------------------
   Gallery Grid (.grid + .tile)
   - default: 12col gallery (journal/work project galleries)
   ------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:10px;
  margin-top:18px;
}

a.tile{
  grid-column: span 4;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  display:block;
  background:var(--panel);
}

a.tile img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

/* -------------------------
   MODE-TILES (category overview like Brands)
   - when WorkBuilder sets body_class="mode-tiles"
   - makes a real 3-col tile grid (same look as cards)
   ------------------------- */
body.mode-tiles .cards{ display:none !important; }

/* Accept these containers (content or builder): */
.tile-grid,
.brand-tiles,
body.mode-tiles .grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}

/* In mode-tiles, stop 12-col spanning rules */
body.mode-tiles a.tile{ grid-column:auto; }

/* Tile look (premium) */
.tile-grid a,
.brand-tiles a,
body.mode-tiles a.tile{
  position:relative; /* ✅ needed for label overlay */
  border-radius: var(--rTile);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--panel);
  display:block;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.tile-grid a:hover,
.brand-tiles a:hover,
body.mode-tiles a.tile:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--shadowHover);
}
.tile-grid img,
.brand-tiles img,
body.mode-tiles a.tile img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
  transition:transform .55s ease, filter .55s ease;
}
.tile-grid a:hover img,
.brand-tiles a:hover img,
body.mode-tiles a.tile:hover img{
  transform:scale(1.03);
  filter:saturate(1.04) contrast(1.02);
}

/* Hide any accidental text inside tiles (safe) */
.tile-grid a, .brand-tiles a, body.mode-tiles a.tile{
  font-size:0;
  line-height:0;
}

/* ✅ Brand label (works even if parent font-size is 0) */
.brand-name{
  position:absolute;
  left:14px;
  bottom:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
  color: rgba(244,244,245,.92);
  font-size:13px;   /* ✅ overrides parent font-size:0 */
  line-height:1;    /* ✅ overrides parent line-height:0 */
  letter-spacing:.02em;
  font-weight:650;
}

/* optional: subtle gradient for readability on bright images */
.brand-tile::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:42%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
  opacity:.45;
}

/* -------------------------
   Journal helpers
   ------------------------- */

.journal-opener{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  overflow:hidden;
  border-radius:18px;
}
.journal-opener img{
  width:100%;
  height:64vh;
  min-height:420px;
  max-height:820px;
  object-fit:cover;
  display:block;
}

.journal-story{
  width:min(100%, 1040px);
  margin-top:24px;
}

.journal-story p,
.journal-story .lead{
  max-width:none;
}

.journal-story p{
  width:100%;
  line-height:1.82;
  font-size:1.04rem;
}

/* -------------------------
   About page
   ------------------------- */
.about-wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:26px;
  align-items:start;
}
.about-media{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.about-media img{
  width:100%;
  height:520px;
  object-fit:cover;
  display:block;
}

/* -------------------------
   Footer
   ------------------------- */
.site-footer{ position:relative; z-index:50; }
.site-footer a{ position:relative; z-index:51; }

footer{
  margin-top:96px;
  padding:32px 0;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(to bottom, rgba(255,255,255,.02), rgba(0,0,0,0));
  color:rgba(244,244,245,.62);
  font-size:14px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}
footer a{ color:rgba(244,244,245,.70); }
footer a:hover{ color:rgba(244,244,245,.95); }
footer .sep{ opacity:.45; padding:0 10px; }

/* -------------------------
   Lightbox (premium)
   ------------------------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  color-scheme: dark;
}
.lightbox.is-open{ display:block; }

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
  z-index: 1;
}

.lightbox-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px;
  z-index: 2;
}

.lightbox-img{
  max-width: min(1200px, calc(100vw - 56px));
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 26px 70px rgba(0,0,0,.70);
  display:block;
}

.lightbox-ui{
  position:absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index: 3;
}

/* clickable path (acts like "back") */
.lightbox-path{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  color: rgba(244,244,245,.78);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor:pointer;
  user-select:none;
}
.lightbox-path:hover{
  border-color: rgba(255,255,255,.26);
  background: rgba(0,0,0,.30);
  color: rgba(244,244,245,.92);
}

.lightbox-meta{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(244,244,245,.70);
  opacity: .9;
  user-select:none;
  margin-left: 12px;
}

/* ✅ HARD: buttons never black */
.lightbox-btn{
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  color: #fff !important;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  line-height:0;
}
.lightbox-btn:hover{
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.30);
}
.lightbox-btn:active{ transform: translateY(1px); }

.lightbox-btn svg{
  width: 22px;
  height: 22px;
  display:block;
}
.lightbox-btn svg path{
  stroke: currentColor !important;
}

/* nav buttons */
.lightbox-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  z-index: 4;
}
.lightbox-prev{ left: 16px; }
.lightbox-next{ right: 16px; }

@media (max-width:720px){
  .lightbox-stage{ padding: 16px; }
  .lightbox-img{
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 90px);
    border-radius: 16px;
  }
  .lightbox-nav{ width: 46px; height: 46px; }
  .lightbox-prev{ left: 10px; }
  .lightbox-next{ right: 10px; }
  .lightbox-btn{ width: 42px; height: 42px; }
  .lightbox-btn svg{ width:20px; height:20px; }
  .lightbox-meta{ font-size: 11px; letter-spacing: .07em; }
}

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width:960px){
  .cards{ grid-template-columns:1fr; }
  a.tile{ grid-column: span 6; }
  body.mode-tiles .grid,
  .tile-grid,
  .brand-tiles{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .tile-grid img,
  .brand-tiles img,
  body.mode-tiles a.tile img{ height:300px; }
  .about-wrap{ grid-template-columns:1fr; }
  .about-media img{ height:420px; }
}

@media (max-width:720px){
  :root{ --headerH: 106px; }

  .container{ width: min(1120px, calc(100% - 28px)); }
  header{ height: var(--headerH); }

  .header-inner{
    height: var(--headerH);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .brand{
    text-align:center;
    font-size: 18px;
    letter-spacing: 0.10em;
    line-height: 1.0;
    margin:0;
  }

  .nav{
    justify-content: center;
    gap:10px;
    flex-wrap: nowrap;
  }

  .nav a{ padding: 8px 10px; font-size: 14px; line-height: 1; }
  .nav-cta{ padding: 8px 12px; font-size: 14px; }

  .nav-ig{ width: 40px; height: 40px; }
  .nav-ig svg{ width: 20px; height: 20px; }

  .breadcrumb{
    font-size: 11px;
    letter-spacing: .07em;
    margin: 6px 0 10px;
  }
  .breadcrumb .crumb-last-hide-mobile{ display:none; }

  main{
    padding-top: calc(var(--headerH) + 18px);
    padding-bottom: 28px;
  }

  .hero-arrow{ width: 48px; height: 48px; }
  .hero-arrow.prev{ left: 12px; }
  .hero-arrow.next{ right: 12px; }

  .hero-dots{ left: 14px; bottom: 14px; gap: 8px; }
  .hero-dot{ width: 7px; height: 7px; }

  .hero-counter{ right: 14px; bottom: 12px; font-size: 13px; }

  body.mode-tiles .grid,
  .tile-grid,
  .brand-tiles{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  :root{ --headerH: 112px; }
  .nav{ gap:8px; }
  .nav a{ font-size:13px; padding:7px 9px; }
  .nav-cta{ font-size:13px; padding:7px 10px; }
  .nav-ig{ width:38px; height:38px; }
  .nav-ig svg{ width:19px; height:19px; }
  a.tile{ grid-column: span 12; }
}