/* Refined Performing Arts — services page (services.html) only.
   Loads after brand.css + site.css and adds only what this page needs.
   Colours come from brand tokens; gold is structure and emphasis, never status.

   Page anatomy: dark hero → category tab bar → tile grid per category →
   click a tile and a detail panel (slider + copy + CTA) expands below its row. */

/* ---------- header over the dark hero — ivory links instead of ink ---------- */

.svc-page .site-nav a{ color:var(--ivory); }
.svc-page .head-side a{ color:var(--ivory); }
.svc-page .head-side a:hover{ color:var(--gold-light); }

/* ---------- hero — solid ink ground until the real image arrives ---------- */

.svc-hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--ivory);
  min-height:clamp(13rem, 36svh, 22rem);
  display:grid; place-items:center; text-align:center;
  padding:6.5rem var(--gutter) 2.8rem;
}
/* when Jordi supplies the hero photo:
   <img class="svc-hero-img" …> before .svc-hero-inner, then re-check contrast */
.svc-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;
}
.svc-hero-inner{ position:relative; z-index:2; max-width:56rem; }
.svc-hero .eyebrow{ color:rgba(250,248,244,.65); }
.svc-hero h1{ font-size:var(--step-3); margin-bottom:1.1rem; }
.svc-hero-sub{
  color:rgba(250,248,244,.7); font-size:calc(var(--step-0) * 1.08);
  max-width:44rem; margin:0 auto;
}

/* ---------- category tabs ---------- */

.svc-tabs-wrap{ border-bottom:1px solid var(--gold-pale); }
.svc-tabs{
  display:flex; justify-content:center; gap:clamp(1.5rem, 3vw, 3rem);
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  overflow-x:auto; scrollbar-width:none;
}
.svc-tabs::-webkit-scrollbar{ display:none; }
.svc-tab{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-weight:300; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink-soft); padding:1.5rem 0 1.4rem;
  border-bottom:1px solid transparent; margin-bottom:-1px;
}
.svc-tab:hover{ color:var(--ink); }
.svc-tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--gold); }
.svc-tab:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

/* ---------- views ---------- */

.svc-views{ padding-top:clamp(2.4rem, 5vw, 4rem); }
.svc-view.is-in{ animation:view-in .4s ease both; }
@keyframes view-in{ from{ opacity:0; transform:translateY(12px); } }

/* ---------- tile grid ---------- */

.tile-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(1rem, 2.2vw, 1.8rem);
}
.tile-btn{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  border-radius:16px; overflow:hidden; position:relative; text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.tile-btn img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.tile-btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(46,42,37,.74) 0%, rgba(46,42,37,.28) 34%, rgba(46,42,37,0) 58%);
  opacity:0; transition:opacity .35s ease;
}
.tile-label{
  position:absolute; left:1.3rem; right:1.3rem; bottom:1.15rem; z-index:2;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.tile-name{
  display:block; font-family:var(--serif);
  font-size:var(--step-1); line-height:1.15; color:var(--ivory);
}
.tile-sub{
  display:block; margin-top:.35rem;
  font-family:var(--sans); font-weight:300; font-size:.66rem;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(250,248,244,.75);
}
.tile-btn:hover img, .tile-btn:focus-visible img{ transform:scale(1.045); }
.tile-btn:hover::after, .tile-btn:focus-visible::after,
.tile-btn[aria-expanded="true"]::after{ opacity:1; }
.tile-btn:hover .tile-label, .tile-btn:focus-visible .tile-label,
.tile-btn[aria-expanded="true"] .tile-label{ opacity:1; transform:translateY(0); }
.tile-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.tile.is-active .tile-btn{ box-shadow:0 0 0 1px var(--gold); }

/* phones and tablets have no hover — labels stay visible */
@media (hover:none){
  .tile-btn::after{ opacity:1; }
  .tile-label{ opacity:1; transform:none; }
}

/* portraits whose subject reaches for the top of the frame (or whose
   bottom edge should stay out of the crop) */
.crop-top{ object-position:center 20%; }
/* landscapes whose story sits at the right edge (keeps it in a 4:5 crop) */
.crop-right{ object-position:right center; }

/* typographic tile — an offering that still needs photography from Laura */
.tile-btn-blank{
  aspect-ratio:4/5; background:var(--ivory-deep);
  border:1px solid var(--gold-pale);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; padding:1.5rem; text-align:center;
}
.tile-btn-blank::before{
  content:""; width:1.6rem; height:1px; background:var(--gold);
}
.tile-btn-blank .tile-name{ color:var(--ink); }
.tile-btn-blank .tile-sub{ color:var(--ink-soft); }
.tile-btn-blank::after{ content:none; }
.tile-btn-blank:hover, .tile-btn-blank:focus-visible{ border-color:var(--gold); }

/* ---------- expanding detail panel ---------- */

/* the row the panel opens in — JS animates its height */
.panel-row{
  grid-column:1 / -1; overflow:hidden;
  transition:height .38s ease;
}
.panel-store[hidden]{ display:none; }

.svc-panel{
  position:relative; background:var(--ivory-deep); border-radius:26px;
  padding:clamp(1.4rem, 3vw, 2.8rem);
}
.panel-grid{
  display:grid; grid-template-columns:minmax(260px, 42%) 1fr;
  gap:clamp(1.6rem, 4vw, 3.5rem); align-items:center;
}
/* panels without a slider yet — copy only, centred like a card */
.panel-grid.no-slider{ grid-template-columns:1fr; min-height:12rem; align-content:center; }
.panel-grid.no-slider .panel-copy{ text-align:center; padding:1.5rem 0; }
.panel-grid.no-slider .panel-copy p{ margin-left:auto; margin-right:auto; }
.panel-copy h3{ font-size:var(--step-2); margin-bottom:1rem; }
.panel-copy p{
  color:var(--ink-soft); max-width:52ch;
  font-size:calc(var(--step-0) * 1.03); margin-bottom:1.2rem;
}
.panel-copy .btn{ margin-top:.4rem; }
.panel-close{
  position:absolute; top:1rem; right:1rem; z-index:3;
  width:44px; height:44px; display:grid; place-items:center;
  background:rgba(250,248,244,.85); border-radius:50%;
  border:0; cursor:pointer; color:var(--ink-soft);
}
.panel-close:hover{ color:var(--ink); }
.panel-close:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:50%; }

/* ---------- image slider inside the panel ---------- */

.panel-slider{ position:relative; border-radius:14px; overflow:hidden; }
.slide-track{ display:flex; transition:transform .45s ease; }
.slide-track img{
  flex:0 0 100%; width:100%; aspect-ratio:4/5; object-fit:cover;
}
.slide-prev, .slide-next{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(250,248,244,.88); border:1px solid var(--gold);
  color:var(--ink); padding:0;
}
.slide-prev{ left:.9rem; }
.slide-next{ right:.9rem; }
.slide-prev:hover, .slide-next:hover{ background:var(--ivory); }
.slide-prev:focus-visible, .slide-next:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.slider-single .slide-prev, .slider-single .slide-next{ display:none; }

/* ---------- closing call to action ---------- */

.svc-cta{ text-align:center; padding-top:calc(var(--section) * .55); position:relative; }
/* soft background portrait behind the right side — same treatment as the
   homepage four-steps section: all edges fade, no hard lines. The box rises
   above the band on purpose so the portrait melts into the section above;
   the bottom stays pinned so nothing ghosts over the ink footer. */
.svc-cta::after{
  content:""; position:absolute; z-index:0;
  top:-10rem; bottom:0; right:0; width:min(46vw, 620px);
  background:url(../assets/DSCF7765-bg.jpg) center top/cover no-repeat;
  opacity:.24; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse closest-side, #000 38%, transparent 78%);
  mask-image:radial-gradient(ellipse closest-side, #000 38%, transparent 78%);
}
.svc-cta > *{ position:relative; z-index:1; }
.svc-cta h2{ font-size:var(--step-3); margin-bottom:1rem; }
.svc-cta .section-sub{ margin-bottom:2.4rem; }
.cta-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; }
.cta-aside{ margin-top:2.6rem; font-style:italic; color:var(--ink-soft); }
.cta-aside a{
  color:inherit; text-decoration-line:underline;
  text-decoration-color:var(--gold); text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.cta-aside a:hover{ color:var(--ink); }

/* ---------- mobile ---------- */

@media (max-width:840px){
  /* burger over the dark hero is ivory; back to ink once the ivory overlay opens.
     The burger is fixed and floats over ivory sections too, so it carries a soft
     ink disc that reads on both grounds. */
  .svc-page .nav-burger{
    background:rgba(46,42,37,.32); border-radius:50%;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  .svc-page .nav-burger span,
  .svc-page .nav-burger span::before,
  .svc-page .nav-burger span::after{ background:var(--ivory); }
  .svc-page .nav-toggle:checked ~ .nav-burger{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .svc-page .nav-toggle:checked ~ .nav-burger span,
  .svc-page .nav-toggle:checked ~ .nav-burger span::before,
  .svc-page .nav-toggle:checked ~ .nav-burger span::after{ background:var(--ink); }

  .svc-hero{ min-height:clamp(12rem, 30svh, 17rem); padding-top:7rem; }
  .svc-cta::after{ width:min(78vw, 420px); opacity:.2; top:-6rem; }
  .svc-tabs{ justify-content:flex-start; }
  .tile-grid{ grid-template-columns:1fr 1fr; }
  .tile-label{ left:1rem; right:1rem; bottom:.9rem; }
  .panel-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .panel-copy h3{ padding-right:2.6rem; } /* clear the close button */
}

@media (max-width:560px){
  .tile-grid{ grid-template-columns:1fr; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  .tile-btn img, .tile-btn::after, .tile-label,
  .panel-row, .slide-track{ transition:none; }
  .svc-view.is-in{ animation:none; }
}