/* ============================================================
   Family & Lifestyle Medicine — Interior pages: banner, per-page edges, breadcrumb, panels, cards, bento grids
   Part 07 of 11. The cascade depends on load order:
   these files must stay linked in numeric sequence (see any page <head>).
   ============================================================ */

/* ============================================================
   Interior pages
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 5.5vw, 5rem);
  background: linear-gradient(168deg, var(--cream) 0%, var(--ivory) 70%);
}
.page-hero__inner { position: relative; max-width: 74ch; }
.page-hero h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
  letter-spacing: -.025em;
}
.page-hero h1 em { font-style: italic; color: var(--crimson); }
.page-hero__lead { margin-top: 1.35rem; font-size: 1.08rem; max-width: 62ch; }
.page-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Hero banner ---------------------------------------------------------
   One banner for every interior page: a photograph behind the same copy
   block — breadcrumb, eyebrow, h1, lead, actions — at the same height and
   the same type scale. Only the photograph changes from page to page, so
   the pages feel like chapters of one site rather than seven designs.
   The scrim is directional: heaviest under the type on the left, clearing
   towards the right so the photograph still reads. */
.page-hero--banner {
  display: flex;
  align-items: center;
  min-height: clamp(19rem, 30vw, 27rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background: var(--slate-deep);
}
.page-hero__photo { position: absolute; inset: 0; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(29, 50, 60, .95) 0%, rgba(29, 50, 60, .88) 45%, rgba(29, 50, 60, .55) 100%);
}
/* .page-hero__inner caps itself at 74ch, which beats .container's max-width
   (same specificity, declared later) and then centres the narrowed box in the
   viewport — leaving the copy adrift from the gutter every other section aligns
   to, and sitting where this banner's scrim is weakest. Hand the width back to
   .container and cap the lines themselves instead. */
.page-hero--banner .page-hero__inner {
  z-index: 1;
  max-width: var(--container);
}
.page-hero--banner h1 { max-width: 18ch; }
.page-hero--banner .page-hero__lead { max-width: 56ch; }

/* Light-on-dark type for the banner. */
.page-hero--banner h1 { color: #fff; }
.page-hero--banner h1 em { color: var(--gold); }
.page-hero--banner .page-hero__lead { color: rgba(255, 255, 255, .85); }
.page-hero--banner .breadcrumb { color: rgba(255, 255, 255, .55); }
.page-hero--banner .breadcrumb a { color: rgba(255, 255, 255, .78); }
.page-hero--banner .breadcrumb a:hover { color: #fff; }
.page-hero--banner .breadcrumb [aria-current] { color: #fff; }
.page-hero--banner .breadcrumb span[aria-hidden] { color: rgba(255, 255, 255, .3); }

/* --- Per-page banner curves ----------------------------------------------
   The banner stays identical from page to page; its bottom edge is where each
   page signs its name. Every curve is cut from the vocabulary the site already
   uses — the signature arch, and the stats band's trick of a 50% horizontal
   radius making two arcs meet as one. The exposed corners fall on the page
   background, and depths stay shallow enough that neither the copy (centred,
   left) nor the focus of the photograph is ever clipped. */

/* Lifestyle Medicine — one continuous arc across the whole bottom edge. */
.page-hero--sweep {
  border-end-start-radius: 50% clamp(26px, 4.5vw, 60px);
  border-end-end-radius: 50% clamp(26px, 4.5vw, 60px);
}

/* Services & Costs — no drawn edge at all. The banner stops flat and the price
   cards ride up across it, so the depth comes from layering rather than from a
   decorative silhouette, and the number is on screen the moment the page opens.
   The banner reserves the same lift as bottom padding so the cards never reach
   its buttons. */
.page-hero--cards { padding-bottom: calc(var(--card-lift) + clamp(1.5rem, 3vw, 2.5rem)); }
/* flow-root, not padding-top: 0 alone. With no padding or border the grid's
   negative margin collapses out through .container into the section itself, so
   the whole section — background and all — slides up and covers the banner
   instead of the cards rising over it. A block formatting context stops that. */
.pricing--overlap {
  padding-top: 0;
  display: flow-root;
}
.pricing--overlap .pricing__grid {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--card-lift));
}

/* Drawn edges — About, Services & Costs, Community Programs. A corner radius can
   only ever bend the ends of an edge; these shapes bend along their length, so
   they are inline SVG stretched to the band's width. The fill is currentColor,
   set here, because the shape has to match whatever section follows it: ivory
   for a plain section, cream where a tinted one begins. */
.page-hero__edge {
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: clamp(38px, 6vw, 82px);
  display: block;
  color: var(--ivory);
  z-index: 2;
  pointer-events: none;
}
.page-hero__edge--cream { color: var(--cream); }

/* FAQ — one continuous asymmetric arc. The clipping ellipse is wider than the
   band and its centre is pushed left, so the edge crests near the left shoulder
   and falls away across the full width instead of turning a corner. A radius
   can only bend at the ends; this bends the whole edge. */
.page-hero--tilt { clip-path: ellipse(150% 100% at 18% 0%); }

/* Donate — a long elliptical sweep off the right-hand side. */
.page-hero--ellipse { border-end-end-radius: 55% 38%; }

/* Contact — the inverse of the sweep: an arc of page colour rising into the
   band. The 1px bleed each side stops a hairline of banner showing at the
   edges when the browser rounds subpixels. */
.page-hero--scoop::after {
  content: "";
  position: absolute; left: -1px; right: -1px; bottom: -1px;
  height: clamp(26px, 4.5vw, 60px);
  background: var(--ivory);
  border-start-start-radius: 50% 100%;
  border-start-end-radius: 50% 100%;
  pointer-events: none;
}

/* Slim band of jump links, sitting under the banner rather than inside it so
   every banner stays identical. */
.jump-band {
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  padding-block: 1.2rem;
}
.jump-band__list { display: flex; flex-wrap: wrap; gap: .6rem; }
.jump-band__link {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1.1rem;
  font-size: .88rem; font-weight: 600; color: var(--slate-deep);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.jump-band__link:hover { transform: translateY(-2px); border-color: var(--crimson); color: var(--crimson); }
.jump-band__link svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 700px) {
  /* Portrait screens crop the photo hard; flatten the scrim so the type side
     does not go muddy against whatever is left in frame. */
  .page-hero__photo::after {
    background: linear-gradient(170deg,
      rgba(29, 50, 60, .9) 0%, rgba(29, 50, 60, .93) 100%);
  }
  /* The dramatic curves are sized for a wide band. On a narrow one the same
     proportions would reach the action buttons, so tame them — the signature
     stays legible, it just stops eating the layout. */
  .page-hero--ellipse { border-end-end-radius: 45% 16%; }
  /* A narrow band makes the same ellipse bite far deeper; widen it to flatten. */
  .page-hero--tilt { clip-path: ellipse(230% 100% at 22% 0%); }
  .page-hero__edge { height: clamp(26px, 7vw, 44px); }
}

.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  font-size: .82rem; color: var(--muted); margin-bottom: 1.1rem;
}
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--crimson); text-decoration: underline; }
.breadcrumb span[aria-hidden] { color: var(--line); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }

.section--narrow .container { max-width: 900px; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.6rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.prose h3 { margin-top: 2rem; font-size: 1.28rem; }
.prose strong { color: var(--ink); }

/* Panel — the general-purpose content block on interior pages. */
.panel {
  background: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-arch) var(--r-lg) var(--r-lg) var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.panel--tint { background: linear-gradient(160deg, #fff, var(--cream)); }
.panel h3 { font-size: 1.25rem; margin-bottom: .8rem; }
.panel > * + * { margin-top: .9rem; }

/* --- Card heading rule ---------------------------------------------------
   A hairline that starts where the heading text ends and runs out to the
   card's inner edge, separating the heading from the copy without spending a
   whole margin on it. The heading becomes a flex row: text, then the rule
   taking whatever width is left. It fades as it travels so it never competes
   with the heading — swap the gradient for a flat colour to make it solid.

   Applied only to left-aligned card headings. Deliberately not applied to the
   price cards (centred), the doctor cards (their h3 holds a block-level
   credentials line that flex would drag up beside the name), or the dark
   feature grid (crimson is invisible on slate). */
.panel h3,
.pillar h3,
.service__body h3,
.staff-card__body h3,
.program-card h3 {
  display: flex;
  align-items: center;
  gap: .85rem;
  /* 700 rather than the 600 headings inherit. Cormorant is a light-cut serif,
     so a card heading at 600 sits too close in weight to the body copy beneath
     it; 700 is already loaded, so this costs no extra font request. */
  font-weight: 700;
}
.panel h3::after,
.pillar h3::after,
.service__body h3::after,
.staff-card__body h3::after,
.program-card h3::after {
  content: "";
  flex: 1;
  min-width: 1.25rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(155, 27, 47, .45), rgba(155, 27, 47, .08));
}
/* The inverted tiles carry white headings, where crimson would disappear. */
.service--accent .service__body h3::after,
.program-card--accent h3::after,
.program-card--slate h3::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12));
}

.panel-grid {
  display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.panel-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Cards size to their own content instead of stretching to match the tallest.
   Use when one panel's copy is far longer than its neighbour's, which
   otherwise leaves a block of dead space under the shorter one. */
.panel-grid--top { align-items: start; }

/* Checklist used for "what's included" style content. */
.ticks { display: grid; gap: .6rem; }
.ticks li { display: flex; align-items: flex-start; gap: .65rem; font-size: .96rem; }
.ticks li::before {
  content: "✓"; color: var(--crimson); font-weight: 700; flex: none; line-height: 1.6;
}
.ticks--muted li::before { content: "—"; color: var(--muted); font-weight: 400; }
/* Plain roster — checkmarks would read as "included" next to people's names. */
.ticks--names li::before { content: "·"; color: var(--gold); font-weight: 700; }

/* Staff profiles */
.staff-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(2, 1fr); }
.staff-card {
  background: var(--grad-surface); border: 1px solid var(--line);
  border-radius: var(--r-arch) var(--r-lg) var(--r-lg) var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.staff-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.staff-card__photo { aspect-ratio: 4 / 3.6; overflow: hidden; background: var(--cream); }
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.staff-card__body { padding: clamp(1.4rem, 2.6vw, 2rem); }
.staff-card__body h3 { font-size: 1.3rem; }
.staff-card__cred {
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
  margin-top: .35rem;
}
.staff-card__body p { margin-top: 1rem; font-size: .96rem; }

/* FAQ accordion */
.faq-list { display: grid; gap: .8rem; }
.faq-item {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item[open] { border-color: rgba(155, 27, 47, .3); box-shadow: var(--shadow-md); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.7rem);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .98rem + .2vw, 1.14rem);
  font-weight: 600; color: var(--ink); line-height: 1.35;
  transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--crimson); }
.faq-item summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: .35em;
  border-right: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item__answer {
  padding: 0 clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: .98rem;
}
.faq-item__answer > * + * { margin-top: .85rem; }
.faq-item__answer a { word-break: break-word; text-decoration: underline; }

/* Programs */
.program-card {
  background: var(--grad-surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-radius .5s var(--ease);
}
.program-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lg);
}
.program-card h3 { font-size: 1.22rem; margin-bottom: .7rem; }
.program-card p { font-size: .96rem; }
.program-card__tag {
  display: inline-block; margin-bottom: .9rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--crimson); background: rgba(155, 27, 47, .08);
  padding: .3rem .75rem; border-radius: 999px;
  align-self: flex-start;
}

/* --- Bento grid ---------------------------------------------------------
   One column on phones, an even two-up on tablets, three with spans on
   desktop. Spans deliberately only apply at 3 columns: at 2 columns a
   span-2 tile cannot fit beside a span-1 tile and would leave a hole. */
.bento {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 701px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1151px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento > .is-wide { grid-column: span 2; }
}

/* Photo tile */
.program-card--photo { padding: 0; display: flex; flex-direction: column; }
.program-card__media { overflow: hidden; aspect-ratio: 16 / 10; min-width: 0; }
.program-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.program-card--photo:hover .program-card__media img { transform: scale(1.07); }
.program-card__body {
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  display: flex; flex-direction: column; justify-content: center; flex: 1;
}
@media (min-width: 1151px) {
  .program-card--photo.is-wide { flex-direction: row; align-items: stretch; }
  .program-card--photo.is-wide > .program-card__media { flex: 0 0 44%; aspect-ratio: auto; }
}

/* Solid tiles — two colourways so a bento never repeats the same block twice */
.program-card--accent,
.program-card--slate {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  border-radius: var(--r-arch) var(--r-lg) var(--r-arch) var(--r-lg);
  display: flex; flex-direction: column; justify-content: center;
}
.program-card--accent {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(196, 57, 77, .5), transparent 62%),
    linear-gradient(165deg, var(--crimson), var(--crimson-deep));
}
.program-card--slate {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(62, 92, 107, .55), transparent 62%),
    linear-gradient(165deg, var(--slate), var(--slate-deep));
}
.program-card--accent h3, .program-card--slate h3 { color: #fff; }
.program-card--accent p, .program-card--slate p { color: rgba(255, 255, 255, .86); }
.program-card--accent .program-card__tag,
.program-card--slate .program-card__tag { color: #fff; background: rgba(255, 255, 255, .18); }
.program-card--accent .service__icon,
.program-card--slate .service__icon { margin-bottom: 1rem; }

/* ---- Bento corners -----------------------------------------------------
   The arch is decoration for the OUTSIDE of the block. A corner that faces a
   neighbouring tile is squared off, so the grid reads as one panel that has
   been subdivided rather than as N separate cards each shouting its own
   shape. --bento-inner tunes how sharp those interior corners are.

   Which tile owns an outer corner depends on how the grid tiles, so these
   rules are written per grid and per breakpoint. .bento assumes the 4-tile
   1+2 / 1+2 arrangement; .services__grid assumes the 6-tile 2+1 / 1+1+1 / 3.
   Re-check them if the span pattern changes. */
.bento,
.services__grid { --bento-inner: 4px; }

.bento > .program-card,
.services__grid > .service { border-radius: var(--bento-inner); }

/* Single column: the first tile caps the top, the last caps the bottom. */
.bento > .program-card:first-child,
.services__grid > .service:first-child {
  border-top-left-radius: var(--r-arch);
  border-top-right-radius: var(--r-arch);
}
.bento > .program-card:last-child,
.services__grid > .service:last-child {
  border-bottom-left-radius: var(--r-arch);
  border-bottom-right-radius: var(--r-arch);
}

/* Two columns — .bento becomes an even 2x2, so tiles 1..4 own the corners.
   .services__grid keeps full-width tiles top and bottom, so the single-column
   rules above already hold. */
@media (min-width: 701px) {
  .bento > .program-card:first-child { border-top-right-radius: var(--bento-inner); }
  .bento > .program-card:nth-child(2) { border-top-right-radius: var(--r-arch); }
  .bento > .program-card:nth-child(3) { border-bottom-left-radius: var(--r-arch); }
  .bento > .program-card:last-child { border-bottom-left-radius: var(--bento-inner); }
}

/* Three columns — services' first tile now shares row 1 with tile 2, which
   takes over the top-right corner. Its last tile still spans the full row. */
@media (min-width: 1151px) {
  .services__grid > .service:first-child { border-top-right-radius: var(--bento-inner); }
  .services__grid > .service:nth-child(2) { border-top-right-radius: var(--r-arch); }
}