/* ============================================================
   service.css — shared layout for the four service pages (redesign · P5)
   recording · production · mixing · mastering all extend
   services/_service_base.html and load this one stylesheet. Layout-only
   and token-only: surfaces, type, motion come from tokens/components.
   Loaded LAST so it wins over feature CSS. Motion gated by
   prefers-reduced-motion. Mirrors the home page's art direction (photo
   hero under a dreamy veil, calm white sections, deliberate pink moments)
   without depending on home.css.
   ============================================================ */

/* ============================================================
   HERO — full-bleed studio photo + soft white veil + glow + grain,
   content lower-anchored into the bright zone (mirrors .home-hero).
   Standalone: scrolls normally above the pinned stage.
   ============================================================ */
.service-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--navbar-h) + var(--space-8)) var(--container-pad) var(--space-10);
}

.service-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -3;
}

/* Dreamy veil: coral haze + a centered light bloom that keeps the ink
   headline legible, grounding to the page colour at the bottom so it still
   blends when the hero stacks above the next section on small screens. */
.service-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    var(--glow-coral),
    radial-gradient(86% 60% at 50% 50%,
      color-mix(in srgb, var(--paper-2) 64%, transparent) 0%,
      color-mix(in srgb, var(--paper-2) 24%, transparent) 50%,
      transparent 76%),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--paper-2) 12%, transparent) 34%,
      color-mix(in srgb, var(--paper-2) 42%, transparent) 74%,
      var(--bg) 100%);
}

.service-hero__grain {
  position: absolute;
  z-index: -1;
}

.service-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 56rem;
}

/* Darker than --text-muted so the kicker clears AA over the photo. */
.service-hero__kicker {
  color: var(--text-soft);
}

.service-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  max-width: 20ch;
}

.service-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-soft);
  max-width: 46rem;
}

.service-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* Scroll cue — a coral dot scrubbing down a fading line. */
.service-hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--space-2);
}
.service-hero__scroll:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.service-hero__scroll-track {
  position: relative;
  display: block;
  width: 2px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, var(--accent), transparent);
}
.service-hero__scroll-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  animation: svcHeroScroll 1.9s var(--ease-soft) infinite;
}
@keyframes svcHeroScroll {
  0%   { transform: translateY(-2px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(50px); opacity: 0; }
}

/* ============================================================
   SECTION HEAD — mono kicker + display title (centered), reused by
   every section/slide. (style.css owns .section / .section-title.)
   ============================================================ */
.section-head {
  max-width: 52rem;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.section-head .dd-kicker {
  margin-bottom: var(--space-4);
}
.section-head .section-title {
  margin-bottom: 0;
}

/* ============================================================
   INTRO / "WHAT'S DIFFERENT" — the standalone pitch under the hero.
   A lead paragraph + a squircle card grid (photo + heading + copy).
   ============================================================ */
.service-intro__lead {
  max-width: 50rem;
  margin: 0 auto var(--space-10);
  text-align: center;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.service-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.service-diff-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
}
.service-diff-card__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
  aspect-ratio: 4 / 3;
}
.service-diff-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-dreamy);
}
.service-diff-card:hover .service-diff-card__media img {
  transform: scale(1.05);
}
.service-diff-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--text);
  margin-bottom: var(--space-3);
}
.service-diff-card p {
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--space-3);
}
.service-diff-card p:last-child {
  margin-bottom: 0;
}

/* Image + copy split (mastering's "what is mastering" slide; also fine
   stacked). Naturally one screen, so it cross-fades cleanly in the pin. */
.service-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-10);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
}
.service-split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.service-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-split__body .section-title,
.service-split__body .dd-kicker {
  text-align: left;
}
.service-split__body .section-title {
  margin-bottom: var(--space-4);
}
.service-split__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* A single feature image inside an intro/editorial section. */
.service-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin: 0 auto var(--space-9);
  max-width: 64rem;
  aspect-ratio: 16 / 9;
}
.service-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "how we work" — the two-column activities/genres blocks. style.css
   styles .section-columns/.section-column; service pages just need the
   responsive stack + a dot-list flavour. */
.service-columns .dd-dot-list {
  margin-top: var(--space-4);
}
/* the outcome line under the columns (was an inline margin). */
.home-slide--how .service-intro__lead {
  margin-top: var(--space-8);
}

/* ============================================================
   HEAR IT — the audio-example block (the audio_player feature owns the
   player chrome; this just centres + bounds it).
   ============================================================ */
.service-audio {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

/* ============================================================
   MASTERING — the partner-studio cards ("who we work with").
   Replaces the legacy float-based .mastering-studio markup.
   ============================================================ */
.service-studios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7);
  align-items: stretch;
}
.service-studio-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
}
.service-studio-card__logo {
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9rem;
}
.service-studio-card__logo img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.service-studio-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--text);
}
.service-studio-card__text {
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.service-studio-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
}

/* ============================================================
   PRIMARY ACTION — the standalone booking / enquiry / intake section.
   The form renders through the P2 _form.html system in a squircle panel.
   ============================================================ */
.service-action {
  scroll-margin-top: calc(var(--navbar-h) + var(--space-6));
}
.service-form {
  max-width: 44rem;
  margin: 0 auto;
}
.service-form__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-9);
}
.service-form__card .dd-btn {
  margin-top: var(--space-2);
}

/* ============================================================
   CONTACT — recording's dedicated contact section: info + form split.
   ============================================================ */
.service-contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.service-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.service-contact-info .section-title {
  text-align: left;
  margin-bottom: var(--space-2);
}
.contact-detail h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: lowercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.contact-detail a {
  color: var(--link);
  font-weight: 600;
}
.contact-detail a:hover {
  color: var(--link-hover);
}
.contact-detail p {
  color: var(--text-soft);
  line-height: var(--lh-snug);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .service-diff-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 38rem;
    margin-inline: auto;
  }
  .service-studios-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .service-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .service-contact-info .section-title {
    text-align: center;
  }
  .service-split {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .service-split__body {
    text-align: center;
  }
  .service-split__body .section-title,
  .service-split__body .dd-kicker {
    text-align: center;
  }
  .service-split__body .dd-kicker {
    justify-content: center;
  }
}

/* The production/mixing process tabs use the sidebar variant
   (.process-tabs.production: 22% nav / 78% content). That's cramped below
   the desktop width, so collapse it to the stacked top-tabs layout. */
@media (max-width: 1024px) {
  .process-tabs.production {
    flex-direction: column;
    gap: var(--space-6);
  }
  .process-tabs-nav.production {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .process-tabs-nav.production .process-tab {
    flex: 1 1 40%;
  }
  .process-tabs-content.production {
    width: 100%;
  }
}

/* style.css gives .section-columns a fixed 2-up flex with no stacking —
   add the service-page stack so the activities/genres columns are usable. */
@media (max-width: 768px) {
  .section-columns {
    flex-direction: column;
  }
  .section-columns .section-column {
    width: 100%;
  }
  .service-form__card {
    padding: var(--space-7);
  }
}

@media (max-width: 480px) {
  .service-hero {
    min-height: 88vh;
    min-height: 88svh;
  }
  .service-hero__cta {
    flex-direction: column;
    width: 100%;
    max-width: 22rem;
  }
  .service-hero__cta .dd-btn {
    width: 100%;
  }
}

/* ============================================================
   PINNED-STAGE SLIDE COMPACTION — shrink slide contents so each fits one
   centred screen when the stage is active. Scoped per slide --modifier,
   under the same activation media query as home_stage.css.
   ============================================================ */
@media (min-width: 1100px) and (min-height: 760px) {
  /* the process tabs — keep the (largest-pane-sized) panel within one screen */
  .home-stage.is-active .home-slide--process .process-tabs-content {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* studio carousel — shorten the frame so the heading + frame + dots fit
     below the navbar; the generic .container width:100% keeps it landscape. */
  .home-stage.is-active .home-slide--studio .carousel-track {
    height: min(50vh, 460px);
  }

  /* "what's different" (recording) — trim the cards so 3 fit one screen
     (the per-card copy is also cropped to one short line in the template). */
  .home-stage.is-active .home-slide--different .service-diff-card {
    padding: var(--space-5);
  }
  .home-stage.is-active .home-slide--different .service-diff-card__media {
    aspect-ratio: 16 / 10;
  }
  /* crop each card to one line in the pin (full copy still shows when the
     page degrades to stacked scroll on mobile / reduced motion). */
  .home-stage.is-active .home-slide--different .service-diff-card p:nth-of-type(n+2) {
    display: none;
  }

  /* "what is …" intro slide — shrink the feature image to fit one screen */
  .home-stage.is-active .home-slide--whatis .service-intro__lead {
    margin-bottom: var(--space-6);
  }
  .home-stage.is-active .home-slide--whatis .service-figure {
    aspect-ratio: auto;
    height: min(38vh, 360px);
    margin-bottom: 0;
  }

  /* "how we work" columns slide — tighten the rhythm */
  .home-stage.is-active .home-slide--how .section-columns {
    margin-top: var(--space-6);
  }
  .home-stage.is-active .home-slide--how .service-intro__lead {
    margin-top: var(--space-6);
  }

  /* partner studios (mastering) — bound the logo height so two cards fit */
  .home-stage.is-active .home-slide--studios .service-studio-card__logo {
    height: 5rem;
  }
  .home-stage.is-active .home-slide--studios .service-studio-card {
    padding: var(--space-5);
    gap: var(--space-3);
  }

  /* featured projects (production) — kill the section's decorative -5em pull
     (which folds the title under the pane), widen it, and give the title room. */
  .home-stage.is-active .home-slide--featured .section-head {
    margin-bottom: var(--space-8);
  }
  .home-stage.is-active .home-slide--featured .news-carousel-container {
    margin-top: 0;
  }
  .home-stage.is-active .home-slide--featured .news-carousel-pane {
    margin: 0;
    padding: var(--space-6);
    width: min(100%, 1080px);
  }
  .home-stage.is-active .home-slide--featured .news-carousel-pane img {
    margin: 0 auto;
  }
  .home-stage.is-active .home-slide--featured .news-carousel-pane-info-img {
    flex-basis: min(30vh, 240px);
    max-width: 240px;
  }
  .home-stage.is-active .home-slide--featured .audio-player-container {
    margin-top: var(--space-5);
  }
}

/* ============================================================
   FAQ — the page-specific accordion (P11), embedded after the
   primary action by services/_service_base.html. Header is the shared
   centered .section-head; this just holds the Q&As in a reading column.
   (Accordion itself is components/accordion.css.)
   ============================================================ */
.service-faq__list {
  max-width: 48rem;
  margin: 0 auto;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .service-hero__scroll-dot {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .service-diff-card__media img {
    transition: none;
  }
  .service-diff-card:hover .service-diff-card__media img {
    transform: none;
  }
}