/* ==========================================================================
   FAMILY TREE DENTAL — THE SERVICES HUB
   ---------------------------------------------------------------------------
   Loaded only by services.html. Everything shared — the chrome, the
   furniture, the hero, the section rail, the service cards, the appointment
   band, the testimonials, the clinic panel, the closing call — is in
   system.css and is NOT repeated here.

   What is left is the three blocks that only the hub has:

     A. The introduction, as an editorial spread
     B. Cosmetic & Restorative — one featured card, then a hairline grid
     C. Straight Teeth & Braces — the dark editorial index

   B AND C ARE DELIBERATELY DIFFERENT SHAPES. Nine more cards in the same grid
   would make the page read as one long list; a full-width numbered index on a
   dark ground reads as a second chapter. That contrast is the whole reason
   the page has a sense of progression rather than a scroll length.
   ========================================================================== */


/* ==========================================================================
   A. THE INTRODUCTION
   The practice's centred paragraph, opened out into an asymmetric spread.
   Every sentence is unchanged; only the container is new.
   ========================================================================== */
.hub-intro {
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 4vh, 3rem) var(--sv-pad);
  background: #eef5fd;
}
.hub-intro__inner {
  width: var(--sv-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: var(--sv-gap);
}
.hub-intro__copy .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }

/* The practice's own inline link, inside a paragraph. Underlined rather than
   coloured alone — a colour change is not a link to everyone. */
.hub-intro__link {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out);
}
.hub-intro__link:hover { color: var(--c-blue-700); }

/* THE CLOSING LINE is the practice's call to action written as a sentence.
   Given a rule and the display face so it reads as an invitation rather than
   as a fourth paragraph. */
.hub-intro__close {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-top: clamp(1.5rem, 3vh, 2rem);
  font-family: var(--f-display);
  font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.32rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--c-blue-900);
}
.hub-intro__close-rule {
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 2.4em;
  background: linear-gradient(180deg, var(--c-accent), rgba(255, 107, 44, 0));
  border-radius: 2px;
}

.hub-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.75rem, 3.4vh, 2.5rem);
}

.hub-intro__media { position: relative; }
/* LANDSCAPE, not portrait, and that is decided by the FILE rather than by
   the layout: the picture here is a wide close-up, and a 4:4.4 frame would
   throw away three-quarters of its width and leave an eye. It also gives the
   hub a different shape from the service pages' portrait overview, which is
   worth something on its own. */
.hub-intro__frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: var(--sv-r-xl);
  background: linear-gradient(120deg, #f4fafd 0%, #dceaf8 46%, #bcd8f2 100%);
  box-shadow: 0 26px 60px rgba(11, 45, 82, .15);
}
.hub-intro__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 45%;
  transition: transform 1.4s var(--ease-soft);
}
.hub-intro__frame:hover img { transform: scale(1.04); }
.hub-intro__echo {
  position: absolute;
  z-index: 1;
  inset: 7% -5% -7% 6%;
  border: 1px solid rgba(120, 170, 225, .45);
  border-radius: calc(var(--sv-r-xl) + 6px);
  pointer-events: none;
}
/* Positions for the two floating cards this section borrows from system.css. */
.hub-intro .sv-float--tl { top: clamp(1rem, 3vw, 2.25rem); left: clamp(-3rem, -3.5vw, -1rem); width: min(15rem, 74%); }
.hub-intro .sv-float--br { right: clamp(-2.5rem, -3vw, -1rem); bottom: clamp(1rem, 3vw, 2.25rem); width: min(13rem, 62%); }


/* ==========================================================================
   B. COSMETIC & RESTORATIVE — the featured grid
   ---------------------------------------------------------------------------
   Three columns, and the featured card takes two of them on the first row.
   The remaining five fill in around it, so the block is an editorial spread
   with a clear first read rather than six equal rectangles.
   ========================================================================== */
.hub-cat {
  position: relative;
  z-index: 1;
  padding-block: var(--sv-pad);
  background: var(--sv-white);
}
.hub-cat__inner { width: var(--sv-shell); margin-inline: auto; }

.hub-cat__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hub-cat__head .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.hub-cat__note {
  max-width: 44ch;
  padding-bottom: .35rem;
  font-size: 0.985rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vh, 4rem);
  list-style: none;
}
/* THE FEATURED CARD SPANS TWO COLUMNS AND TWO ROWS. Everything else flows
   around it, which is why nothing here needs an explicit position: change the
   number of services in this family and the grid re-solves itself. */
.hub-grid > .svc--feature { grid-column: span 2; grid-row: span 2; }


/* ==========================================================================
   C. STRAIGHT TEETH & BRACES — the index
   ---------------------------------------------------------------------------
   The dark chapter. Full-width numbered rows on a navy ground, with each
   row's photograph floating in on hover. Below 560px the previews go —
   there is no hover to reveal them — and the rows become a clean list.
   ========================================================================== */
.hub-index {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: var(--hero-inset);
  padding-block: clamp(4rem, 11vh, 8rem);
  color: var(--sv-on-dark);
  border-radius: var(--sv-r-xl);
  background:
    radial-gradient(70% 90% at 88% 6%, rgba(127, 227, 212, .16) 0%, rgba(127, 227, 212, 0) 60%),
    linear-gradient(155deg, var(--sv-navy) 0%, var(--sv-navy-2) 52%, var(--sv-teal) 100%);
}
.hub-index__glow {
  position: absolute;
  z-index: -1;
  top: -20%; left: -10%;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 114, 214, .34) 0%, rgba(26, 114, 214, 0) 68%);
  pointer-events: none;
}
.hub-index__inner { width: min(1220px, 100% - 2 * var(--gutter)); margin-inline: auto; }

.hub-index__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hub-index__head .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.hub-index__note {
  max-width: 44ch;
  padding-bottom: .35rem;
  font-size: 0.985rem;
  line-height: 1.7;
  color: var(--sv-on-dark-soft);
}

.hub-index__list {
  margin-top: clamp(2.5rem, 5vh, 4rem);
  list-style: none;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  /* Two columns, and the featured card gives up its second row — at this
     width a card two rows tall is taller than the pair beside it. */
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-grid > .svc--feature { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 980px) {
  .hub-intro__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 6vw, 3.5rem);
  }
  .hub-intro__frame { aspect-ratio: 16 / 11; }
  .hub-intro__echo { inset: 5% 2% -5% 2%; }

  .hub-cat__head,
  .hub-index__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hub-cat__note,
  .hub-index__note { padding-bottom: 0; }
}

@media (max-width: 560px) {
  .hub-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-grid > .svc--feature { grid-column: auto; }
  .hub-intro__media { display: flex; flex-direction: column; gap: .9rem; }
  .hub-intro__close { gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-intro__frame img { transition: none; }
  .hub-intro__frame:hover img { transform: none; }
  .svc--index .svc__media { transition: none; }
}

@media print {
  .hub-index { color: #000 !important; background: none !important; }
  .hub-index .sv-h2--light,
  .hub-index .svc__name { color: #000 !important; }
  .hub-index__note { color: #333 !important; }
}


/* ==========================================================================
   THE HERO — A DIAGONAL, AND A CATALOGUE BEHIND IT
   ---------------------------------------------------------------------------
   THIS PAGE HAD NO HERO RULES AT ALL. archive-service.php and the Services
   template both asked page-hero.php for the `ct` prefix, whose CSS lives with
   the contact page — so the band arrived here with nothing describing it. It
   now has its own prefix and its own composition.

   A catalogue is a page of edges, so this opening is built from one: the
   navy field is cut on a diagonal and the photograph sits in the wedge it
   leaves. Navy rather than green — the green belongs to Contact, and a
   catalogue wants the colder ground of the two.

   No page controller ships for this kind, so the entrance is site.js's
   generic one. page-hero.php marks the section `data-sv-immediate` so it
   plays on load rather than waiting for a scroll trigger it is already past.
   ========================================================================== */
.sh-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--util-h) + var(--nav-h) + var(--hero-inset) + var(--hero-pad));
  background: var(--sv-ivory);
}

.sh-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: stretch;
  min-height: clamp(21rem, 46vh, 29rem);
}

/* --- The navy field ------------------------------------------------------- */
/* THE CUT IS ON THE PANEL, NOT BETWEEN THE TWO. Both children fill their
   grid cells squarely; the diagonal is a clip-path on the field, which
   overhangs into the picture's column so the edge crosses the seam. */
.sh-hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-right: clamp(-6rem, -5vw, -2rem);
  padding: clamp(2rem, 5vw, 4.5rem) clamp(5rem, 9vw, 8rem) clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 5rem);
  background:
    radial-gradient(110% 80% at 12% 8%, rgba(110, 178, 244, .26) 0%, rgba(110, 178, 244, 0) 58%),
    linear-gradient(148deg, #0d3c68 0%, #0a2c4e 52%, #06213a 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5.5rem) 100%, 0 100%);
}

.sh-hero__grain {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(36% 32% at 24% 26%, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(30% 40% at 74% 78%, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}

.sh-hero__leaf {
  position: absolute;
  left: -7%;
  bottom: -36%;
  z-index: -1;
  width: min(28vw, 20rem);
  color: rgba(127, 227, 212, .1);
  pointer-events: none;
}
.sh-hero__leaf svg { width: 100%; height: auto; }

.sh-hero__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  margin-left: auto;
}

.sh-hero .sv-crumbs--light ol,
.sh-hero .sv-crumbs--light li { color: rgba(255, 255, 255, .7); }
.sh-hero .sv-crumbs--light a { color: rgba(255, 255, 255, .82); }
.sh-hero .sv-crumbs--light a:hover { color: #fff; }
.sh-hero .sv-crumbs--light [aria-current="page"] { color: #fff; }

.sh-hero__title {
  margin-top: clamp(.9rem, 2.5vh, 1.5rem);
  font-family: var(--f-display);
  font-size: clamp(2.7rem, 1rem + 5.8vw, 4.8rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: #fff;
}
/* Mint on the navy, which is the pairing the utility bar already uses. */
.sh-hero__title em { position: relative; font-style: italic; color: var(--c-mint); }

.sh-hero__tag {
  margin-top: clamp(.6rem, 1.6vh, 1rem);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1rem, .9rem + .45vw, 1.28rem);
  color: rgba(255, 255, 255, .86);
}

/* --- The picture in the wedge --------------------------------------------- */
.sh-hero__stage { position: relative; z-index: -1; }

.sh-hero__frame {
  position: relative;
  margin: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: #06213a;
}

.sh-hero__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.sh-hero__grade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 33, 58, .5) 0%, rgba(6, 33, 58, 0) 42%);
  pointer-events: none;
}

@media (max-width: 1180px) {
  .sh-hero__copy { max-width: 24rem; }
}

@media (max-width: 980px) {
  /* Stacked, a diagonal between two full-width blocks is a wedge of dead
     space, so the cut is dropped and the overhang with it. */
  .sh-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sh-hero__panel {
    margin-right: 0;
    padding: clamp(2.25rem, 7vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
    clip-path: none;
  }
  .sh-hero__copy  { max-width: none; margin-left: 0; }
  .sh-hero__leaf  { left: -14%; bottom: -40%; width: min(46vw, 16rem); }
  .sh-hero__stage { z-index: 0; }
  .sh-hero__frame { height: auto; aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .sh-hero__title { font-size: clamp(2.4rem, 1rem + 9vw, 3.4rem); }
}

/* The archive's own heading, over the copy it introduces. Centred with the
   prose beneath it, and capped so a long line does not run the full shell. */
.sv-prose-section .sv-eyebrow { justify-content: center; }
.sv-prose-section__title {
  max-width: 22ch;
  margin: clamp(.7rem, 1.8vh, 1.1rem) auto clamp(1.1rem, 3vh, 1.9rem);
  text-align: center;
  text-wrap: balance;
}