/* ============================================================
   LaBellaCasting — service detail + gallery
   Uses the tokens already declared in site.css; nothing new is
   invented here so a palette change still propagates from one place.
   ============================================================ */

.shell--narrow{ max-width:840px; margin-inline:auto; }

/* ------------------------------------------------------------ hero bits */
.svc-hero{ min-height:clamp(520px,78vh,820px); }
.svc-hero--short{ min-height:clamp(420px,58vh,640px); }

.svc-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--body); font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--silver); margin-bottom:18px;
}
.svc-crumb a{ color:var(--silver); text-decoration:none; border-bottom:1px solid transparent; }
.svc-crumb a:hover{ color:var(--gold); border-bottom-color:var(--gold-deep); }
.svc-crumb span[aria-hidden]{ color:var(--mute); }
.svc-crumb [aria-current]{ color:var(--pearl); }

/* --------------------------------------------------------------- intro */
.svc-lead{ max-width:76ch; }
.svc-lead__p{
  font-family:var(--display);
  font-size:clamp(1.18rem,2.4vw,1.72rem);
  line-height:1.5; color:var(--pearl); font-weight:400; margin:0;
}

/* --------------------------------------------------------------- scope */
.svc-scope{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.svc-scope li{
  border:1px solid var(--line); border-radius:2px;
  background:var(--plate); padding:18px 20px;
  display:flex; align-items:center; gap:12px;
  color:var(--pearl); font-family:var(--body); font-size:.95rem;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.svc-scope li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--gold); opacity:.8;
}
.svc-scope li:hover{ border-color:var(--gold-deep); background:var(--raise); }

/* -------------------------------------------------------------- mosaic */
.svc-mosaic{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
.svc-mosaic figure{ margin:0; overflow:hidden; border-radius:2px; background:var(--plate); }
.svc-mosaic img{
  display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;
  transition:transform .8s var(--ease), filter .8s var(--ease);
  filter:saturate(.94);
}
.svc-mosaic figure:hover img{ transform:scale(1.04); filter:saturate(1.02); }

/* ----------------------------------------------------------------- FAQ */
.svc-faq{ border-top:1px solid var(--line); }
.svc-faq__i{ border-bottom:1px solid var(--line); }
.svc-faq__i summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-size:clamp(1rem,1.7vw,1.16rem);
  color:var(--pearl); transition:color .3s var(--ease);
}
.svc-faq__i summary::-webkit-details-marker{ display:none; }
.svc-faq__i summary:hover{ color:var(--gold); }
.svc-faq__i summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--body); font-size:1.4rem; color:var(--gold); line-height:1;
  transition:transform .35s var(--ease);
}
.svc-faq__i[open] summary::after{ content:"–"; }
.svc-faq__i p{
  margin:0; padding:0 0 24px; max-width:70ch;
  color:var(--silver); font-family:var(--body); line-height:1.72; font-size:.97rem;
}

/* ------------------------------------------------------------- related */
.svc-rel{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.svc-rel__c{
  position:relative; display:block; overflow:hidden; border-radius:2px;
  border:1px solid var(--line); background:var(--plate);
  text-decoration:none; min-height:300px;
}
.svc-rel__c img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.5; transition:transform .9s var(--ease), opacity .5s var(--ease);
}
.svc-rel__c::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,10,11,.94) 12%,rgba(10,10,11,.15) 70%);
}
.svc-rel__c:hover img{ transform:scale(1.06); opacity:.66; }
.svc-rel__c:hover{ border-color:var(--gold-deep); }
.svc-rel__t,.svc-rel__s{ position:relative; z-index:2; display:block; }
.svc-rel__t{
  font-family:var(--display); color:var(--pearl); font-size:1.14rem;
  padding:0 20px; margin-top:calc(300px - 96px);
}
.svc-rel__s{
  font-family:var(--body); color:var(--silver); font-size:.86rem;
  padding:6px 20px 22px; line-height:1.5;
}

/* --------------------------------------------------------- play button */
.svc-play{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:pointer; color:inherit; font:inherit; text-align:left;
}
.svc-play:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ------------------------------------------------------------- gallery */
.gal-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px;
}
.gal-chip{
  border:1px solid var(--line); background:transparent; color:var(--silver);
  border-radius:999px; padding:8px 16px; cursor:pointer;
  font-family:var(--body); font-size:.8rem; letter-spacing:.06em;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.gal-chip:hover{ color:var(--pearl); border-color:var(--gold-deep); }
.gal-chip.is-on{ color:var(--ink); background:var(--gold); border-color:var(--gold); }
.gal-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.gal-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.gal-mosaic{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.gal-mosaic figure{ margin:0; position:relative; overflow:hidden; border-radius:2px; background:var(--plate); }
.gal-mosaic img{
  display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;
  transition:transform .8s var(--ease); filter:saturate(.94);
}
.gal-mosaic figure:hover img{ transform:scale(1.05); }
.gal-mosaic figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 12px 10px;
  font-family:var(--body); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pearl);
  background:linear-gradient(to top,rgba(10,10,11,.9),transparent);
  opacity:0; transition:opacity .35s var(--ease);
}
.gal-mosaic figure:hover figcaption{ opacity:1; }

.gal-cap{ margin:10px 2px 0; }
.gal-cap__t{
  display:block; font-family:var(--body); font-size:.88rem; color:var(--pearl);
  line-height:1.4;
}
.gal-cap__m{
  display:block; margin-top:3px;
  font-family:var(--body); font-size:.72rem; letter-spacing:.05em; color:var(--mute);
}
.gal-empty{
  color:var(--silver); font-family:var(--body); text-align:center; padding:40px 0;
}

/* ------------------------------------------------------------ lightbox */
.lbc-lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,6,7,.95);
  display:grid; place-items:center; padding:clamp(12px,4vw,48px);
  backdrop-filter:blur(6px);
}
.lbc-lb[hidden]{ display:none; }
body.lbc-lb-on{ overflow:hidden; }
.lbc-lb__f{ margin:0; max-width:min(560px,92vw); width:100%; }
.lbc-lb__v{
  display:block; width:100%; max-height:82vh; border-radius:3px;
  background:#000; box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.lbc-lb__c{
  margin-top:12px; text-align:center; color:var(--silver);
  font-family:var(--body); font-size:.85rem; letter-spacing:.04em;
}
.lbc-lb__x{
  position:absolute; top:clamp(10px,3vw,26px); right:clamp(10px,3vw,26px);
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:rgba(18,18,20,.85); color:var(--pearl);
  font-size:1.6rem; line-height:1; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.lbc-lb__x:hover{ border-color:var(--gold); color:var(--gold); }
.lbc-lb__x:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* --------------------------------------------------------------- small */
@media (max-width:640px){
  .svc-rel__c{ min-height:250px; }
  .svc-rel__t{ margin-top:calc(250px - 92px); }
  .gal-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .gal-mosaic{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  .svc-mosaic img,.gal-mosaic img,.svc-rel__c img{ transition:none; }
  .svc-mosaic figure:hover img,.gal-mosaic figure:hover img,.svc-rel__c:hover img{ transform:none; }
}