/* ==========================================================================
   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; }
}