/* Home page layout. Mobile first (375px), then widen at 720px and 960px.
   Tokens, components and page base come from ds/ (tokens.css, kokoro.css, base.css).
   This file only does home page layout. Spacing comes from the rhythm tokens,
   which grow smoothly with the screen, so most rules need no breakpoint. */

html { scroll-padding-top: 88px; }

/* Brand lockup (D2) */
.brand { display: inline-flex; align-items: center; min-height: var(--tap-target); }
.brand img { display: block; height: 40px; width: auto; }
.k-header__bar .brand { margin-right: auto; }

/* Language switch. js/i18n.js renders one button per language into every .lang.
   Header bar: hidden until the header has room for inline links (see the end of this file).
   The current language is full ink with the nav's underline; the others are quiet. */
.lang { display: none; align-items: center; gap: var(--space-4); }
.lang__btn { display: inline-flex; align-items: center; min-height: var(--tap-target); padding: 0; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-size: var(--text-body); font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); cursor: pointer; }
.lang__btn:hover { color: var(--brand); }
.lang__btn[aria-current="true"] { color: var(--ink); border-bottom-color: var(--brand); cursor: default; }
.lang__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
/* Three or more languages: a drop-down instead of buttons. */
.lang__select { min-height: var(--tap-target); padding: 0 var(--space-2); background: var(--surface); border: var(--border-hairline) solid var(--hairline); border-radius: var(--radius-xs); font: inherit; font-size: var(--text-body); color: var(--ink); }
/* Phone menu: a row under the links, with the same gap as a link row. */
.lang--row { display: flex; gap: var(--space-6); min-height: 56px; border-bottom: var(--border-hairline) solid var(--hairline); }
.lang--row .lang__btn { min-height: 56px; font-size: 20px; }
/* Footer: on ink. */
.lang--foot { display: flex; gap: var(--space-4); }
.lang--foot .lang__btn { min-height: 44px; color: var(--on-ink-2); }
.lang--foot .lang__btn:hover { color: var(--on-ink); }
.lang--foot .lang__btn[aria-current="true"] { color: var(--on-ink); border-bottom-color: var(--on-ink); }
.lang--foot .lang__btn:focus-visible { outline-color: var(--on-ink); }

/* Rhythm. Each section pads its top and bottom by --rhythm-section.
   Two plain sections in a row share one gap, not two. Bands keep both pads,
   so their color has room on each side. */
.wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--space-4); }
.section { padding-block: var(--rhythm-section); }
.section:not(.band) + .section:not(.band) { padding-top: 0; }
.band { background: var(--surface-tint); }
.band--highlight { background: var(--surface-highlight); }

/* Section head: eyebrow, heading, optional lead. Same spacing in every section. */
.section-head { margin-bottom: var(--rhythm-block); }
.section-head > * + * { margin-top: var(--rhythm-stack); }
.section-head .k-icon { display: block; }
/* Emoji support a section: always under the headline, never above it (design/system/README.md, Emoji). */
.section-emoji { display: block; width: 48px; height: 48px; }
.h2 { font-size: var(--text-h2); line-height: calc(var(--text-h2) + 8px); max-width: 24em; }
.lead { font-size: var(--text-lead); line-height: 1.6; color: var(--ink); max-width: var(--measure); }
/* A phrase in a heading that must not break across lines, so the line breaks fall between the promises. */
.phrase { white-space: nowrap; }

/* Split: a section head beside its content. One column on phones and
   tablets; the brand book's unequal 5/7 on the 12-column grid from 960px. */
.split { display: grid; }

/* 1 Hero */
/* A colored band, so the next section keeps its full top padding. Defined after .band, so surface-deep wins over surface-tint. */
.hero { padding-top: var(--rhythm-block); padding-bottom: var(--rhythm-section); background: var(--surface-deep); }
.hero__grid { display: grid; gap: var(--rhythm-block); }
.hero h1 { margin-bottom: var(--rhythm-stack); font-size: var(--text-h1); line-height: calc(var(--text-h1) + 8px); font-weight: 500; }
.hero__main .lead { margin-bottom: var(--space-8); }
.hero__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.hero__actions .k-btn { min-height: 52px; }
.hero__media { --k-media-ratio: 4 / 3; }

/* 2 What we do for families */
.duties { border-top: var(--border-rule) solid var(--ink); }
.duty { padding: var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--hairline); }
.duty .k-icon { display: block; margin-bottom: var(--space-3); }
.duty h3 { margin: 0 0 var(--space-2); font-size: var(--text-h3); line-height: 1.35; font-weight: 700; }
.duty p { font-size: var(--text-body); line-height: 1.6; color: var(--ink); }

/* 5 Who can be the caregiver. Indigo dots: brand red stays on the buttons.
   Choices use the item title size, well below the heading, so the heading leads. */
.who__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.who__item { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: 0 var(--space-4); background: var(--surface-tint); border: var(--border-hairline) solid var(--hairline); border-radius: var(--radius-sm); font-size: var(--text-h3); line-height: 1.35; font-weight: 700; }
/* Inline link: vertical padding grows the tap area to the 48px tap target without moving the text around it */
.who__talk { padding-block: 12px; }
.dot { flex: none; width: 12px; height: 12px; border-radius: var(--radius-circle); background: var(--accent); }

/* 3 How it works. A timeline (step badges and titles come from .k-step).
   Each step pads its bottom instead of a grid gap, so the line can run
   from one badge down to the next. The last step has no line. */
.how .k-steps { max-width: none; gap: 0; }
.how .k-step { position: relative; padding-bottom: var(--space-8); }
.how .k-step:last-child { padding-bottom: 0; }
.how .k-step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 48px; bottom: var(--space-2); width: 2px; background: var(--hairline); }
/* The top margin centers the title's first line (1.35em tall) on the 40px badge. */
.how .k-step__title { margin: calc(20px - 0.675em) 0 var(--space-2); }
/* Who does what: a label column, then the task. All rows read the same; only "You" is brand red, so a parent finds their own part first. */
.roles { margin: 0; display: grid; gap: var(--space-2); font-size: var(--text-body); line-height: 1.6; }
/* Phones: the label runs into its task, so the task gets the full width instead of a narrow column. */
.roles dt { display: inline; margin-right: var(--space-2); font-weight: 700; color: var(--ink-2); }
.roles dd { display: inline; margin: 0; color: var(--ink); }
.roles > div:first-child dt { color: var(--brand); }

/* 4 Questions families ask */
.faq details { border-top: var(--border-hairline) solid var(--hairline); padding: var(--space-2) 0; }
.faq details:last-of-type { border-bottom: var(--border-hairline) solid var(--hairline); }
.faq summary { min-height: var(--tap-target); display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body); line-height: 1.45; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq__more { display: none; margin: var(--space-6) 0 0; font-size: var(--text-body); line-height: 1.6; color: var(--ink); }
.faq details p { margin: 0 0 var(--space-2); font-size: var(--text-body); line-height: 1.6; color: var(--ink); max-width: var(--measure); }
/* Answers open and close smoothly where the browser can animate to height: auto.
   Elsewhere they open instantly, as before. Closing is faster than opening. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height var(--dur-exit) var(--ease-in), content-visibility var(--dur-exit) var(--ease-in) allow-discrete; }
  .faq details[open]::details-content { height: auto; transition-duration: var(--dur-enter); transition-timing-function: var(--ease-out); }
}

/* 6 For caregivers */
.caregivers__media { --k-media-ratio: 1376 / 768; }
.caregivers .section-head .k-btn, .how .section-head .k-btn, .faq .section-head .k-btn { display: flex; margin-top: var(--space-8); min-height: 52px; }

/* 7 Final call to action (card from .k-cta). Last section: a chapter break before the footer. */
.talk { padding-bottom: var(--rhythm-chapter); }

/* Two body lines: a small gap between them, the full gap only before the button. */
.talk .k-cta__body:not(:last-of-type) { margin-bottom: var(--space-2); }

/* Footer */
.foot { background: var(--ink); color: var(--on-ink); }
.foot .wrap { padding-top: var(--rhythm-section); padding-bottom: var(--space-8); }
.foot__top { display: grid; gap: var(--space-6); }
.foot__brand img { display: block; height: 40px; width: auto; }
.foot__brand p { margin: var(--space-3) 0 0; color: var(--on-ink-2); max-width: 320px; }
.foot__lang { display: flex; gap: var(--space-2); font-size: var(--text-small); line-height: 1.45; }
.foot__lang .k-icon { flex: none; margin-top: 3px; }
.foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.foot__nav a { display: flex; align-items: center; min-height: 44px; color: var(--on-ink); text-decoration: none; }
.foot__nav a:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--ink-hairline); font-size: var(--text-small); line-height: 1.45; color: var(--on-ink-2); }
.foot__legal span { flex-basis: 100%; }
.foot__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink-2); }
.foot a:focus-visible { outline-color: var(--on-ink); }

/* Sticky bar: hidden until the hero scrolls away (see js/main.js).
   It slides in with ease-out and leaves faster with ease-in. */
.k-cta-bar { transition: transform var(--dur-enter) var(--ease-out); }
.k-cta-bar[data-hidden="true"] { transform: translateY(110%); visibility: hidden; transition: transform var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit); }
/* On phones the sticky bar is already showing whenever How it works or the questions are
   on screen, so the section's own button would be a second "Talk to Kokoro". Hide it only once
   main.js has the bar running; without the script the section keeps its button. */
@media (max-width: 719px) {
  .has-cta-bar .how .section-head .k-btn, .has-cta-bar .faq .section-head .k-btn { display: none; }
  /* The questions come first on phones; the "different question" line follows them. */
  .faq .section-head .lead { display: none; }
  .faq__more { display: block; }
}

/* Tablet and up */
@media (min-width: 720px) {
  html { scroll-padding-top: 96px; }
  .wrap { padding-inline: var(--space-12); }

  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-6); }

  .duties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); padding-top: var(--space-6); }
  .duty { padding: 0; border-bottom: 0; }

  .who__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .who__item { flex-direction: column; align-items: flex-start; gap: var(--space-3); min-height: 132px; padding: var(--space-8); }

  .how .k-step { padding-bottom: var(--space-12); }
  .roles > div { display: grid; grid-template-columns: 104px 1fr; gap: var(--space-4); }
  .roles dt, .roles dd { display: block; margin-right: 0; }

  .faq details { padding: var(--space-4) 0; }
  .faq details p { margin: var(--space-2) 0 0; }

  .caregivers .section-head .k-btn, .how .section-head .k-btn, .faq .section-head .k-btn { display: inline-flex; }

  .talk .k-cta { padding: var(--space-16); }
  .talk .k-cta__body { margin-bottom: var(--space-8); }

  .foot .wrap { padding-bottom: var(--space-12); }
  .foot__top { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); align-items: flex-start; }
  .foot__brand { flex: 1 1 260px; }
  .foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); }
  .foot__legal { margin-top: var(--space-12); }
  .foot__legal span { flex-basis: auto; margin-right: auto; }
}

/* Desktop: the 12-column grid */
@media (min-width: 960px) {
  .split, .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
  .split > :first-child { grid-column: 1 / span 5; padding-right: var(--space-8); margin-bottom: 0; }
  .split > :last-child { grid-column: 6 / -1; }
  .split { align-items: start; }
  /* The section head stays in view while its taller content scrolls past,
     so the left column never sits empty. 72px is the desktop header height. */
  .split > .section-head { position: sticky; top: calc(72px + var(--rhythm-block)); }

  /* Hero: message on the left 7 columns, photo on the right 4. The photo stretches to the
     message's height, so its top meets the headline and its bottom meets the button.
     The photo crops to fit (object-fit: cover in .k-media); min-height keeps it from getting too short. */
  .hero__grid { row-gap: var(--rhythm-block); }
  .hero__main { grid-column: 1 / span 7; grid-row: 1; }
  .hero__media { grid-column: 9 / -1; grid-row: 1; align-self: stretch; aspect-ratio: auto; min-height: 360px; }

  .duties { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .who__list { gap: var(--space-4); }
  .who__item { padding: var(--space-6); }
}

/* The language link only shows when the header has room for inline links (matches ds/kokoro.css) */
@container (min-width: 880px) {
  .lang { display: inline-flex; }
  .k-header__bar .brand { margin-right: 0; }
}
.lang--row, .lang--foot { display: flex; }