/* Danbe Dental - wave D page group: services.html (hub), pediatric-dentistry.html,
   cosmetic-dentistry.html.

   Load order law (wave A handoff): tokens.css, site.css, interior.css, THIS FILE,
   and only on the three pages above. Nothing here restyles anything site.css or
   interior.css owns; every class carries a wave-D prefix (hub- / ped- / lf- / cos-)
   so it cannot collide with the homepage's .svc-* service-card vocabulary.

   Specs: v2-specs/pages/services-spec.md, pediatric-dentistry-spec.md,
   cosmetic-dentistry-spec.md. Recipes: mvendo-int/02 (hub), humphries-int/02 + /06
   (P1 leaflet), hanoverendo-int/03 (P3 education). */

/* ===========================================================================
   SHARED : the floating call card / capsule both interior precedents open with.
   mvendo-int/02 gives the hub a 1000x65.2 radius-30 stadium; humphries-int/02
   gives the leaflet page a 742x45 intrinsic radius-7.2 pill-card. Two different
   atoms from two different recipes, so they stay two classes.
   =========================================================================== */
.hub-capsule,
.ped-call,
.cos-call {
  margin: 0;
  background: var(--plate-fill);
  box-shadow: var(--shadow-plate);
  display: block; text-align: center;
  font-size: var(--size-body); line-height: var(--lh-body);
  color: var(--body-ink);
}
/* CLASS B tap floor, nothing visual added: the tel stays an INLINE link, so its
   vertical padding enlarges the hit area (12 + 22 + 12 = 46, measured) without growing
   the line box. An inline-flex control here would have pushed both cards past
   their measured heights. */
.hub-capsule a,
.ped-call a,
.cos-call a {
  display: inline; padding: 12px 2px;
  color: var(--azure-deep); text-decoration: underline;
}

/* ===========================================================================
   SERVICES HUB : mvendo-int/02. Textbook index - proof photo, phone capsule,
   chapter paragraph, seven hairline rows at the 340/640 signature ratio.
   The row block is capped at 1000 inside the 1060 column so the 1:1.88 ratio
   the recipe calls a constant of the design is held exactly.
   =========================================================================== */
.hub-proof { max-width: 1030px; }          /* 1000 image + the 15px house frame */
/* height:auto is load-bearing: the width/height attributes on the <img> are
   presentational hints that set a used height, which would beat aspect-ratio. */
.hub-proof img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
}

.hub-capsule {
  /* 20 + 25.2 + 20 = 65.2, the recipe's measured capsule height */
  width: 100%; max-width: 1000px;
  padding: 20px 30px; border-radius: 30px;
}

.hub-lede {
  width: 100%; max-width: 1000px; margin: 0; text-align: center;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--muted-ink);
}

.hub-rows {
  width: 100%; max-width: 1000px; margin: 0; padding: 0; list-style: none;
}
.hub-row {
  position: relative;
  display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start;
  padding: 45px 0;
}
.hub-row + .hub-row { border-top: 1px solid var(--hairline); }
.hub-thumb {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  box-shadow: var(--shadow-plate);
  transition: opacity var(--t-fast);
}
.hub-name {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 24px; color: var(--azure-deep);
}
/* CLASS B (interiors-plan.md): the WHOLE row is the link. mvendo's rows are inert
   text, which would make this page's only navigation unreachable by keyboard and
   untappable on phone. Stretched link, no button added, nothing moves. */
.hub-name a { color: inherit; text-decoration: none; }
.hub-name a::after { content: ""; position: absolute; inset: 0; }
.hub-row:hover .hub-name a { text-decoration: underline; }
.hub-row:hover .hub-thumb { opacity: 0.9; }
.hub-row:focus-within { outline: var(--focus-ring); outline-offset: 4px; }
.hub-row:has(a:focus-visible) { outline: var(--focus-ring); outline-offset: 4px; }
.hub-row:focus-within:not(:has(a:focus-visible)) { outline: none; }
.hub-text p {
  margin: 0;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--muted-ink);
}

/* ===========================================================================
   P1 LEAFLET : humphries-int/02 (call card + thesis line) + /06 (rows).
   Photo always left, text always right, hairline between rows, no alternation.
   =========================================================================== */
.ped-call {
  /* hugging card: the recipe's 742px is its sentence's intrinsic width */
  max-width: 100%;
  padding: 10px 24px; border-radius: var(--radius-slab);
}
.ped-intro { width: 100%; }
.ped-thesis {
  margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--size-slab-title); line-height: var(--lh-slab-title);
  color: var(--ink); text-align: left;
}
.ped-intro p {
  margin: 0 0 14px;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--muted-ink);
}
.ped-intro p:last-child { margin-bottom: 0; }

.lf-rows { width: 100%; margin: 0; padding: 0; list-style: none; }
.lf-row {
  display: grid; grid-template-columns: 520px 1fr; gap: 20px; align-items: start;
  padding: 45px 0;
}
.lf-row + .lf-row { border-top: 1px solid var(--hairline); }
.lf-photo {
  width: 100%; height: auto; aspect-ratio: 1440 / 810; object-fit: cover;
  box-shadow: var(--shadow-plate);
}
.lf-term {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 25px; line-height: 31px; color: var(--ink);
}
.lf-text p {
  margin: 0 0 14px;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--muted-ink);
}
.lf-text p:last-child { margin-bottom: 0; }

/* ===========================================================================
   P3 EDUCATION : hanoverendo-int/03. Media, call line, centred prose, back pill.
   =========================================================================== */
.cos-media { max-width: 1060px; }
.cos-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cos-call {
  max-width: 100%; padding: 10px 24px; border-radius: var(--radius-slab);
}
.cos-prose { width: 100%; max-width: 1060px; text-align: center; }
.cos-prose p {
  margin: 0 0 20px;
  font-size: var(--size-lede); line-height: var(--lh-lede); color: var(--body-ink);
}
.cos-prose p:last-child { margin-bottom: 0; }
.cos-term {
  margin: 34px 0 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--size-doc-name); line-height: var(--lh-doc-name); color: var(--ink);
}

/* ===========================================================================
   PHONE : house mobile law (system/mobile.md). Restructure, do not rescale:
   rows go to one track, media leads, display type below 24px stays frozen,
   band rhythm comes down to the phone token. Nothing is display:none.
   =========================================================================== */
@media (max-width: 600px) {
  .hub-capsule { padding: 20px var(--gutter-phone); }
  .hub-row { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .lf-row  { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .ped-call, .cos-call { padding: 10px var(--gutter-phone); }
  .cos-term { margin-top: 26px; }
}