/* Round 14 (home): the client's strip-down (Loom, 7 Oct 2026; D:/elite-tmp/r14/brief.md, items 1 to 11).
   Loaded after every earlier stylesheet. The home rules of round 13 that still
   apply moved here from r9-home.css; the rest of that file styled sections the
   home page no longer has. Every rule is scoped to body.home except the parts
   of shared components (the location card's address link, the booking
   panel's rows), which are scoped to their own classes. */

/* ==========================================================================
   1. Hero (items 2 and 3): the title, the tagline, two short booking buttons
      side by side; the doctors' card without its label or the pills.
   ========================================================================== */
.home .home-hero { padding-top: clamp(2.25rem, 0.9rem + 3.4vw, 4.5rem); padding-bottom: clamp(2.25rem, 0.9rem + 3vw, 4rem); }
.home .home-hero__copy > h1 { margin: 0; }

/* "Two specialties. One practice.": the practice's narrative as a designed
   line, in the display face and the two specialties' colours, larger than
   body text and smaller than the title. Each sentence keeps its two words
   together, so a narrow screen breaks it between the sentences only. */
.home .home-hero__tag {
	display: flex; flex-wrap: wrap; column-gap: 0.38em; row-gap: 0.05em;
	margin: clamp(0.9rem, 0.6rem + 0.8vw, 1.35rem) 0 0;
	font-family: var(--display); font-size: clamp(1.32rem, 1.02rem + 1.05vw, 1.9rem); font-weight: 600;
	line-height: 1.2; letter-spacing: -0.022em; color: var(--ink);
}
.home .home-hero__tag > span { white-space: nowrap; }
.home .home-hero__tag-a { color: var(--ortho); }
.home .home-hero__tag-b { color: var(--ped); }

/* The two booking buttons: one line each, side by side, equal when there is
   room, and each on its own full-width row only when the pair cannot fit. */
.home .home-hero .home-hero__book { display: flex; flex-flow: row wrap; gap: 0.75rem; max-width: none; margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.home .home-hero .home-hero__book > .btn { flex: 1 1 0; min-width: max-content; justify-content: center; min-height: 60px; padding: 0.75rem 1.35rem; white-space: nowrap; }
.home .home-hero .home-hero__book .btn__wrap { justify-content: center; width: auto; gap: 0.7rem; }
/* The same two buttons are printed twice (front-page.php, review H-16): after
   the tagline from 48rem, and inside the doctors' card for a phone, where they
   sit between the faces and the rating. One copy is displayed at any width, so
   the reading and tab order always match what is seen. */
.home .home-hero .home-hero__book--phone { display: none; }

/* The doctors' card: each doctor's specialty under the name. */
.home .hero-team__role { display: block; margin-top: -0.3rem; font-size: 0.74rem; font-weight: 500; line-height: 1.3; color: var(--body); }
/* "300+ Google reviews": a 44px tall hit area, the line itself unmoved. */
.home .hero-team__glink { display: inline-block; padding-block: 0.8rem; margin-block: -0.8rem; }

@media (min-width: 64rem) {
	/* The copy column and the card share the row's height: each is centred
	   on the other, so neither leaves an empty band. */
	.home .home-hero__grid { align-items: center; }
	.home .home-hero .split--wide-left > .hero-team-col { margin-top: 0; }
	.home .hero-team { padding: 1.5rem 1.5rem 1.6rem; }
	.home .hero-team__faces { gap: 0.85rem; }
	.home .hero-team__faces .arch { aspect-ratio: 3 / 4 !important; }
	.home .hero-team__name { font-size: 0.86rem; }
	.home .hero-team__proof { margin-top: 1.15rem; padding-top: 1.15rem; }
}

/* 1024 to 1279px: the title keeps three lines. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
	.home .home-hero h1 { font-size: clamp(2.7rem, 0.9rem + 3.3vw, 3.4rem); }
}

/* Tablet (48 to 63.99rem): one column, in the page's own order (review
   H-16): the title and tagline, the two buttons, then the doctors' card as
   one wide row (faces beside the rating). */
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.home .home-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.home .home-hero__grid > .home-hero__copy,
	.home .home-hero__grid > .hero-team-col { display: contents; }
	.home .home-hero h1 { font-size: clamp(2.6rem, 1.2rem + 3.4vw, 3.15rem); }
	.home .home-hero .hero-team { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: 1.5rem; margin-top: 2rem; padding: 1.1rem 1.5rem 1.1rem 1.1rem; }
	.home .home-hero .hero-team__proof { margin: 0; padding: 0 0 0 1.5rem; border-top: 0; border-left: 1px solid var(--line); }
	.home .home-hero .home-hero__book { margin-top: 1.5rem; }
}

/* The specialty's name is never split (review H-03): "Orthodontics and" /
   "Pediatric Dentistry in Wayne, NJ" from 520px to the tablet's widest, and
   "Orthodontics and" / "Pediatric Dentistry" / "in Wayne, NJ" on the larger
   phones below that (as on the smaller phones and the desktop), where the
   name kept whole would leave "Wayne, NJ" alone. */
@media (min-width: 27rem) and (max-width: 32.49rem) {
	.home .home-hero__spec { display: block; }
}
@media (min-width: 32.5rem) and (max-width: 63.99rem) {
	.home .home-hero__spec { white-space: nowrap; }
}

/* Phone: the title, the tagline, the faces, the two buttons, then the
   rating (revision-3.css orders the parts). From 36rem the buttons stay side
   by side while the pair fits (the base rule wraps them when it does not);
   below 36rem they stack, full width. */
@media (max-width: 47.99rem) {
	/* The card's copy of the buttons, between the faces and the rating. */
	.home .home-hero .home-hero__book.home-hero__book--wide { display: none; }
	.home .home-hero .home-hero__book.home-hero__book--phone { display: flex; }
	.home .home-hero .home-hero__book { gap: 0.6rem; margin-top: 1.1rem; }
	.home .home-hero .home-hero__book > .btn { min-height: 56px; padding: 0.7rem 1rem; font-size: 0.97rem; }
}
@media (max-width: 35.99rem) {
	.home .home-hero .home-hero__book { flex-direction: column; }
	.home .home-hero .home-hero__book > .btn { flex: none; width: 100%; min-width: 0; }
}

/* ==========================================================================
   2. The five values (item 4): the client's mockup. A dark band about 140px
      high on a desktop, each short title under its icon, all centred.
   ========================================================================== */
.home .home-values { padding: 0; }
.home .values { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.home .values__item { display: flex; align-items: center; gap: 0.85rem; margin: 0; }
.home .values__ic { display: inline-flex; flex: none; color: var(--cyan); }
.home .values__ic svg { display: block; width: 24px; height: 24px; margin: 0; }
.home .values__t { font-family: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; color: #fff; white-space: nowrap; }

/* Phone: a neat list, one value per row, thin rules between. */
@media (max-width: 47.99rem) {
	.home .values { padding-block: 0.6rem; }
	.home .values__item { padding: 0.72rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
	.home .values__item:last-child { border-bottom: 0; }
}
@media (min-width: 36rem) and (max-width: 47.99rem) {
	/* Wider phones: two columns, the fifth value under both, centred. */
	.home .values { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
	.home .values__item:nth-last-child(2) { border-bottom: 0; }
	.home .values__item:last-child { grid-column: 1 / -1; justify-content: center; }
}

/* From 48rem: each icon centred above its title. */
@media (min-width: 48rem) {
	.home .values__item { flex-direction: column; justify-content: center; gap: 0.7rem; padding: 2.5rem 0.5rem; text-align: center; }
	.home .values__ic svg { width: 26px; height: 26px; }
}
/* Tablet: three, then two centred under them. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.home .values { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-block: 0.75rem; }
	.home .values__item { grid-column: span 2; padding-block: 1.6rem; }
	.home .values__item:nth-child(4) { grid-column: 2 / span 2; }
	.home .values__item:nth-child(5) { grid-column: 4 / span 2; }
}
/* Desktop: five across, one row. */
@media (min-width: 64rem) {
	.home .values { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* 1024 to 1279px: equal columns left only 23px between the two longest
   titles, so the five sit edge to edge across the wrap with equal gaps
   between them (about 48px at 1024). */
@media (min-width: 64rem) and (max-width: 79.99rem) {
	.home .values { grid-template-columns: repeat(5, auto); justify-content: space-between; }
	.home .values__item { padding-inline: 0; }
	.home .values__t { font-size: 0.95rem; }
}

/* A title of two short sentences breaks between them only, at every width
   ("Two Specialties." / "One Place for Your Family." on a phone). */
.home .h-line { display: inline-block; }

/* ==========================================================================
   3. Two specialties (item 5): photo, label, title, one sentence, the
      treatments as links, one full-width button in the specialty's colour.
   ========================================================================== */
.home .home-spec .sect-head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
.home .home-spec .sect-head__copy { max-width: none; }
.home .home-spec__grid { align-items: stretch; gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); }
.home .spec-card { --spec-pad: clamp(1.35rem, 0.95rem + 1.2vw, 2rem); display: flex; flex-direction: column; }
.home .spec-card__more { container: spec-links / inline-size; align-self: stretch; width: auto; }
.home .spec-card__media { position: relative; overflow: hidden; aspect-ratio: 2 / 1; background: var(--ortho-tint); }
.home .spec-card--ped .spec-card__media { background: var(--ped-tint); }
.home .spec-card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.home .spec-card--ortho .spec-card__media img { object-position: 50% 38%; }
.home .spec-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.7rem; padding: var(--spec-pad); }
.home .spec-card__k { margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--ortho); }
.home .spec-card--ped .spec-card__k { color: var(--ped); }
.home .spec-card__h { margin: 0; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; }
.home .spec-card__text { margin: 0; color: var(--body); text-wrap: pretty; }

/* The treatment links: pill-shaped like the old chips, but in the
   specialty's colour, 44px tall, and filled on hover and focus, so they read
   as links to their pages. */
.home .spec-card__more { margin: 0.3rem 0 0; }
.home .spec-card__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.home .spec-card__links > li { margin: 0; }
.home .chip.chip--link {
	min-height: 44px; padding: 0 1rem; gap: 0.4rem;
	border: 1px solid color-mix(in srgb, var(--ortho) 26%, transparent); background: var(--ortho-tint);
	font-size: 0.9rem; font-weight: 600; line-height: 1.2; color: var(--ortho); text-decoration: none; white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.home .chip.chip--link:hover, .home .chip.chip--link:focus-visible { border-color: var(--ortho); background: var(--ortho); color: #fff; }
.home .spec-card--ped .chip.chip--link { border-color: color-mix(in srgb, var(--ped) 26%, transparent); background: var(--ped-tint); color: var(--ped-dark); }
.home .spec-card--ped .chip.chip--link:hover, .home .spec-card--ped .chip.chip--link:focus-visible { border-color: var(--ped); background: var(--ped); color: #fff; }
/* The links keep whole rows: four across when they fit, otherwise two and
   two (a zero-height full-width item breaks the row after the second link),
   never three and one alone. Both cards switch at the same card width. */
@container spec-links (max-width: 480px) {
	.home .spec-card__links::after { content: ""; order: 1; flex: 0 0 100%; height: 0; margin-top: -0.5rem; }
	.home .spec-card__links > li:nth-child(n + 3) { order: 2; }
}

/* "Explore ...": the card's one button, full width, solid. */
.home .spec-card__go { width: 100%; justify-content: center; gap: 0.6rem; margin-top: auto; }
.home .spec-card__go svg { flex: none; transition: transform 0.15s ease; }
.home .spec-card__go:hover svg { transform: translateX(3px); }

/* From 48rem the two cards share their rows (photo, label, title, sentence,
   links, button), so the links and the buttons line up across the cards
   whatever the length of each sentence. */
@media (min-width: 48rem) {
	.home .home-spec__grid { row-gap: 0; }
	.home .spec-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
	.home .spec-card__body { display: contents; }
	.home .spec-card__body > * { margin-inline: var(--spec-pad); }
	.home .spec-card__k { margin-top: var(--spec-pad); }
	.home .spec-card__h { margin-top: 0.6rem; }
	.home .spec-card__text { margin-top: 0.65rem; }
	.home .spec-card__more { align-self: start; margin-top: 1.1rem; }
	.home .spec-card__go { align-self: end; width: auto; margin-top: 1.4rem; margin-bottom: var(--spec-pad); }
}
@media (max-width: 47.99rem) {
	.home .spec-card__go { min-height: 52px; margin-top: 0.4rem; }
}

/* ==========================================================================
   4. Our approach (item 6): the photograph beside the text, 45 to 55, as
      tall as the text column; four numbered points, all shown from 48rem.
   ========================================================================== */
.home .home-approach__grid { display: grid; gap: 1.75rem; }
.home .home-approach__copy > h2 { margin: 0; }
.home .home-approach__copy > .lede { margin: 1rem 0 0; max-width: 40rem; }
.home .home-approach__list { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.home .home-approach__list > .numbered__item { margin: 0; }
.home .home-approach__list h3 { margin: 0; font-size: clamp(1.12rem, 1.02rem + 0.35vw, 1.3rem); font-weight: 700; line-height: 1.25; }
.home .home-approach__list p { margin-top: 0.45rem; }
.home .nw { white-space: nowrap; }
.home .home-approach__media { aspect-ratio: 4 / 3; border-radius: var(--r-card); }
.home .home-approach__media img { object-position: 50% 35%; }

@media (min-width: 64rem) and (max-width: 79.99rem) {
	/* The photograph is a tall, narrow column here: keep the faces in frame. */
	.home .home-approach__media img { object-position: 62% 35%; }
}
@media (min-width: 64rem) {
	.home .home-approach__grid { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: stretch; gap: clamp(2.5rem, 0.5rem + 3.5vw, 4.5rem); }
	.home .home-approach__media { height: 100%; min-height: 30rem; aspect-ratio: auto; }
	.home .home-approach__copy { display: flex; flex-direction: column; justify-content: center; }
	.home .home-approach__list { margin-top: 1.25rem; }
	.home .home-approach__list > .numbered__item { gap: 1.5rem; padding-block: 1.35rem; }
	.home .home-approach__list > .numbered__item:last-child { padding-bottom: 0; }
	.home .home-approach__list .numbered__n { padding-top: 0.2rem; }
}
/* Tablet and phone: the title and lede, the photograph, then the points. */
@media (max-width: 63.99rem) {
	.home .home-approach__grid { display: flex; flex-direction: column; gap: 0; }
	.home .home-approach__copy { display: contents; }
	.home .home-approach__media { order: 1; width: 100%; margin-top: 1.5rem; aspect-ratio: 16 / 10; }
	.home .home-approach__list { order: 2; margin-top: 0.75rem; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.home .home-approach__media { aspect-ratio: 2 / 1; }
	.home .home-approach__media img { object-position: 50% 40%; }
}
/* Phone: each point folds behind its heading (the client's read-more
   pattern), so the section stays short; the number stays beside it. */
@media (max-width: 47.99rem) {
	.home .home-approach__list > .numbered__item { gap: 0.85rem; padding-block: 0.65rem; }
	.home .home-approach__list .numbered__n { padding-top: 0.7rem; min-width: 1.6rem; }
	.home .home-approach__list h3 { font-size: 1.04rem; }
	.home .home-approach__list > .numbered__item > div { flex: 1 1 auto; min-width: 0; }
	.home .home-approach__list .fold-head { min-height: 48px; }
	/* The round chevron is a 44px tap target here (the heading row toggles too). */
	.home .home-approach__list .fold-btn { width: 44px; height: 44px; }
	.home .home-approach__list p.fold-panel { margin: 0.1rem 3.25rem 0.35rem 0; font-size: 0.95rem; }
}

/* ==========================================================================
   5. Insurance and financing (item 7): the layout the client chose.
   ========================================================================== */
.home .ins-summary .sect-head { margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.home .ins-summary .sect-head h2 { font-size: var(--fs-h2); line-height: 1.12; }
.home .ins-summary .card__body { gap: 1rem; }
.home .ins-summary :is(.ins-card__title, .pay-card__title) { display: flex; align-items: center; gap: 0.8rem; margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.15; }
.home .ins-summary .pay-card__title { color: #fff; }
.home .ins-summary .ins-card__ic { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 0.8rem; background: var(--ortho-tint); color: var(--ortho); }
.home .ins-summary .ins-card__ic--ink { background: rgba(255, 255, 255, 0.1); color: var(--cyan); }
.home .ins-summary .ins-card__ic svg { display: block; }
.home .ins-summary .ins-card__lede { margin: 0; max-width: 54ch; text-wrap: pretty; }
.home .ins-summary .ins-card .carriers { margin-top: 0.35rem; }
/* The carriers wrap in balanced rows, so no name sits alone on the last row
   (it was "Horizon NJ Health" alone at 1440, 1024, 768 and 360). The pills
   are inline boxes for that; the list's negative end margin cancels the last
   pill's gutter in each row. */
.home .ins-summary .carriers { display: block; margin-right: -0.5rem; margin-bottom: -0.5rem; text-wrap: balance; }
.home .ins-summary .carrier { display: inline-flex; margin: 0 0.5rem 0.5rem 0; vertical-align: top; }
.home .ins-summary .pay-list { margin: 0.1rem 0 0; }
.home .ins-summary .pay-list__item { align-items: center; padding-block: 1rem; }
.home .ins-summary .pay-list__item:first-child { padding-top: 0.3rem; }
.home .ins-summary .pay-list__item:last-child { padding-bottom: 0; }
.home .ins-summary .pay-list__item h4 { margin: 0; font-size: 1.1rem; line-height: 1.25; letter-spacing: -0.015em; color: #fff; }
.home .ins-summary .pay-list__item p { margin: 0.25rem 0 0; font-size: 0.93rem; line-height: 1.5; color: rgba(255, 255, 255, 0.74); }
@media (min-width: 48rem) {
	/* The ways to pay share the card's height when the plans card is taller. */
	.home .ins-summary .pay-list { flex: 1 1 auto; grid-auto-rows: 1fr; }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
	.home .ins-summary :is(.ins-card__title, .pay-card__title) { gap: 0.65rem; font-size: 1.3rem; }
	.home .ins-summary .ins-card__ic { width: 40px; height: 40px; }
}

/* The actions: the full page first, then booking and the phone. */
.home .ins-summary__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }
.home .ins-summary__acts > .btn { gap: 0.55rem; }
.home .ins-summary__acts > .btn svg { flex: none; }
.home .ins-summary__explore svg { transition: transform 0.15s ease; }
.home .ins-summary__explore:hover svg { transform: translateX(3px); }
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.home .ins-summary__acts { display: grid; grid-template-columns: 1fr 1fr; }
	.home .ins-summary__acts > .btn { justify-content: center; }
	.home .ins-summary__acts > .ins-summary__explore { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
	/* Names only, tighter pills: three to a row for most names. */
	.home .ins-summary .carriers { margin-right: -0.4rem; margin-bottom: -0.4rem; }
	.home .ins-summary .carrier { gap: 0.35rem; margin: 0 0.4rem 0.4rem 0; padding: 0.35rem 0.65rem; font-size: 0.8rem; }
	.home .ins-summary .carrier svg { display: none; }
	.home .ins-summary .pay-list__item { padding-block: 0.8rem; }
	.home .ins-summary .pay-list__item h4 { font-size: 1.04rem; }
	.home .ins-summary :is(.ins-card__title, .pay-card__title) { font-size: 1.3rem; }
	.home .ins-summary__acts { flex-direction: column; align-items: stretch; gap: 0.6rem; }
	.home .ins-summary__acts > .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   5b. Treatment grids (item 8): on a tablet (48 to 63.99rem) each card is the
       phone's compact row (thumbnail beside the title and line), two across,
       so the two grids no longer make the tablet the longest page.
   ========================================================================== */
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.home .grid--svc:has(> .tcard) { gap: 0.75rem; }
	.home .tcard { flex-direction: row; align-items: center; }
	.home .tcard__media { flex: 0 0 6.5rem; width: 6.5rem; height: 6.5rem; aspect-ratio: auto; margin: 0.6rem; border-radius: 0.75rem; }
	.home .tcard__icon { display: none; }
	.home .tcard__body { gap: 0.25rem; padding: 0.8rem 1rem 0.8rem 0.2rem; }
}

/* ==========================================================================
   6. Reviews (item 9): the link beside the title keeps one line.
   ========================================================================== */
.home .sect-head > .reviews-link { flex: none; white-space: nowrap; }
/* "300+ Google reviews" beside the score: a 44px tall hit area, the row unmoved. */
.home a.rating-lead__meta { display: inline-block; padding-block: 0.65rem; margin-block: -0.65rem; }

/* ==========================================================================
   7. Visit and booking (item 10)
   ========================================================================== */
/* The address is a link to Google Maps (location-card.php, wherever it is used). */
.loc-addr__link {
	display: inline-block; padding-block: 0.15rem; color: var(--ink); font-weight: 600;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
	text-decoration-color: color-mix(in srgb, var(--ortho) 40%, transparent);
}
.loc-addr__link:hover, .loc-addr__link:focus-visible { color: var(--ortho); text-decoration-color: currentColor; }

/* The booking panel with one heading and its two care choices as full-width
   rows (booking-panel.php, layout "rows"): no box inside the box. */
.card.bkp--rows .amelia__slot { background: none; }
.card.bkp--rows .booking-entry { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.card.bkp--rows .booking-choices.booking-choices--rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0.25rem 0 0; }
.card.bkp--rows .booking-choices--rows a {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
	align-items: center; column-gap: 1rem; row-gap: 0.15rem; min-height: 0; padding: 1.05rem 1.25rem; border-radius: 0.9rem;
	text-decoration: none;
}
.card.bkp--rows .booking-choices--rows a > .choice-icon { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.card.bkp--rows .booking-choices--rows a > strong { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 1.08rem; line-height: 1.25; }
.card.bkp--rows .booking-choices--rows a > span.booking-choices__note { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 0.88rem; line-height: 1.4; }
.card.bkp--rows .booking-choices--rows a > span.booking-choices__go { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; padding: 0; white-space: nowrap; }
.card.bkp--rows .booking-call { margin-top: 0.75rem; }
.card.bkp--rows .booking-call a { display: inline-flex; align-items: center; min-height: 44px; }
@container (max-width: 25rem) {
	/* A narrow panel: "See free times" goes under the line. */
	.card.bkp--rows .booking-choices--rows a { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; }
	.card.bkp--rows .booking-choices--rows a > .choice-icon { grid-row: 1 / span 3; align-self: start; }
	.card.bkp--rows .booking-choices--rows a > span.booking-choices__go { grid-column: 2; grid-row: 3; justify-self: start; padding-top: 0.45rem; }
}

/* The location card's three parts (location-card.php, no inline styles):
   the small headings, the opening hours, the contact lines and the served
   line. Phone, Fax and Email share one 44px row height (the links are 44px
   tap targets). */
.loc-card__grid { gap: 1.5rem; }
.loc-card .loc-card__k { margin: 0; font-family: var(--text); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body); }
.loc-card .loc-addr { margin-top: 0.7rem; }
.loc-card .loc-card__hours { display: grid; gap: 0.45rem; margin: 0.7rem 0 0; font-size: var(--fs-sm); }
.loc-card .loc-card__hours > div { display: flex; justify-content: space-between; gap: 1rem; }
.loc-card .loc-card__hours dd { margin: 0; color: var(--body); font-variant-numeric: tabular-nums; }
.loc-card .loc-card__note { margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--body); }
.loc-card .loc-lines__list > div { display: flex; align-items: center; min-height: 44px; }
.loc-card .loc-lines__list a { min-height: 44px; }

/* Home: the panel's heading, the rows and the call box are one group. */
.home #book .bkp--rows .card__body { gap: 1rem; }
.home #book .bkp--rows .card__body > h3 { margin: 0; }
.home #book .bkp--rows .amelia__lane[hidden] { display: none; }

/* The visit section: photograph, booking, details. One column below 64rem
   (photograph, details, booking); from 64rem the photograph sits beside the
   booking panel at its height and the details run under both as one strip. */
.home #book > .wrap > h2 { margin: 0; }
.home .visit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
.home .visit-grid > .visit-grid__photo { order: 1; aspect-ratio: 16 / 10; margin: 0; }
.home .visit-grid > .visit-grid__loc { order: 2; }
.home .visit-grid > .visit-grid__book { order: 3; }
.home .visit-grid__loc > .card { height: 100%; }
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.home .visit-grid > .visit-grid__photo { aspect-ratio: 21 / 9; }
	/* Two columns: the address with the contact lines under it, the opening
	   hours beside both, so neither column ends in an empty half. */
	.home .visit-grid__loc .loc-card__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 1.75rem; }
	.home .visit-grid__loc .loc-card__addr { grid-column: 1; grid-row: 1; }
	.home .visit-grid__loc .loc-card__grid > .loc-lines { grid-column: 1; grid-row: 2; }
	.home .visit-grid__loc .loc-card__time { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 64rem) {
	.home .visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "photo book" "loc loc"; gap: 1.5rem; }
	.home .visit-grid > .visit-grid__photo { grid-area: photo; order: 0; height: 100%; min-height: 16rem; aspect-ratio: auto; }
	.home .visit-grid > .visit-grid__book { grid-area: book; order: 0; display: flex; flex-direction: column; }
	.home .visit-grid > .visit-grid__book > .card { flex: 1 1 auto; }
	.home .visit-grid > .visit-grid__loc { grid-area: loc; order: 0; }
	/* The details strip: address, hours and contact side by side. */
	.home .visit-grid__loc .loc-card__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
	.home .visit-grid__loc .loc-lines { grid-column: auto; }
	/* Each day stays near its time (they were 285px apart at 1440). */
	.home .visit-grid__loc .loc-card__hours { max-width: 17rem; }
	.home #book .bkp--rows .card__body { justify-content: center; }
}