/* ==========================================================================
   Home page only (DESIGN.md §4.1). Shared components come from site.css; this file
   adds page layout and the hero illustration. Semantic tokens only, mobile-first,
   breakpoints 640 / 980 / 1200.
   ========================================================================== */

/* ---- Hero illustration (schematic corridor; replaced by a place photo later) ---- */
.home-hero__art{ position:relative; overflow:hidden; padding:0; }
/* Ricardo's full portrait beside the headline from 1024 px; the whole 4:5 photo, never cropped. */
.home-hero__portrait{ display:none; margin:0; }
@media (min-width:1024px){
  .home-hero__intro--portrait{ grid-template-columns:minmax(0,1fr) minmax(260px,clamp(340px,26vw,440px)); column-gap:var(--space-8); }
  .home-hero__intro--portrait > *{ grid-column:1; }
  .home-hero__intro--portrait > .home-hero__portrait{ display:block; grid-column:2; grid-row:1 / span 6; align-self:start; }
  .home-hero__portrait img{ display:block; width:100%; height:auto; aspect-ratio:4/5; border-radius:var(--radius-lg); box-shadow:var(--shadow-2); }
  .home-hero__portrait figcaption{ margin-top:12px; font:500 13px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--text-2); }
  .home-hero__portrait figcaption b{ font-weight:600; color:var(--text); }
  .home-hero__portrait figcaption span{ display:block; }
}
.home-art{ position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; }
.home-art__dot{ fill:var(--text); opacity:.07; }
.home-art__sun{ fill:var(--accent); opacity:.16; }
.home-art__ring{ fill:none; stroke:var(--accent); stroke-opacity:.32; stroke-width:2; stroke-dasharray:2 10; stroke-linecap:round; }
.home-art__water{ fill:var(--secondary); opacity:.1; }
.home-art__wave{ fill:none; stroke:var(--secondary); stroke-opacity:.34; stroke-width:3; stroke-linecap:round; }
.home-art__shore{ fill:var(--bg-alt); }
.home-art__line{ fill:none; stroke:var(--text); stroke-opacity:.6; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.home-art__thin{ stroke-width:2; stroke-opacity:.34; }
.home-art__solid{ fill:var(--surface); }
.home-art__solid .home-art__accent,.home-art__line.home-art__accent,.home-art__accent{ fill:var(--accent); fill-opacity:.85; }
.home-art__solid .home-art__sea,.home-art__sea{ fill:var(--secondary); fill-opacity:.5; }
.home-art__far{ opacity:.45; }
/* The bottom scrim is made for photos; over the light illustration the facts sit below it, as on small screens. */
@media (min-width:980px){
  .home-hero__media--art .hero__facts{
    position:static; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--space-4); padding:0;
    border-top:1px solid var(--line); border-radius:0; background:none; color:inherit;
  }
  .home-hero__media--art .hero__fact{ padding-top:16px; color:var(--text-2); }
  .home-hero__media--art .hero__fact + .hero__fact{ border-left-color:var(--line); }
  .home-hero__media--art .hero__fact b{ color:var(--text); }
  .home-hero__media--art .hero__fact cite{ color:var(--muted); }
}

/* ---- Stat strip under the hero: as many columns as there are sourced figures ---- */
.home-stats > .stat:last-child:nth-child(odd){ grid-column:1 / -1; }
@media (min-width:640px){
  .home-stats{ grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); }
  .home-stats > .stat:last-child:nth-child(odd){ grid-column:auto; }
}

/* ---- Strategy row (>= 980, one row of 5): a two-line Spanish label must not push its photo down ---- */
@supports (grid-template-rows:subgrid){
  @media (min-width:980px){
    .home-strategies .strategy-grid{ grid-template-rows:auto auto auto; column-gap:16px; row-gap:0; }
    .home-strategies .strategy-card{ display:grid; grid-template-rows:subgrid; grid-row:1 / span 3; row-gap:12px; }
  }
}

/* ---- Map + area cells ---- */
.home-map{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.home-map > .section-head{ margin-bottom:0; }

/* ---- Meet Ricardo: the dark band, then the trust strip ---- */
.home-agent{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); }
.home-agent__text{ max-width:56ch; font-size:var(--fs-lede); line-height:1.5; color:var(--text-2); }

/* ---- Two-column sections (calculator teaser, consultation form) ---- */
.home-split{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); }
.home-split__copy{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); align-content:start; min-width:0; }
.home-split__copy > .section-head{ margin-bottom:0; }
.home-split__form{ min-width:0; }
/* "What happens next": three steps never leave a 2 + 1 orphan (3 across on tablets, stacked in the half column). */
@media (min-width:640px){
  .home-split .steps--grid .steps__list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); }
}
@media (min-width:980px){
  .home-split .steps--grid .steps__list{ grid-template-columns:minmax(0,1fr); }
}
@media (min-width:980px){
  .home-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-8); align-items:start; }
}

.home-list{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.home-list__item{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.5; color:var(--text-2); }
.home-list__item > .icon{ margin-top:1px; color:var(--icon-accent); }

.home-calc{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); justify-items:start; min-width:0;
  padding:var(--space-5); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-2);
}
.home-calc > *{ width:100%; }
.home-calc > .btn--link{ width:auto; }
.home-calc .calc__group{ padding:0; border:0; background:none; }
@media (min-width:640px){ .home-calc{ padding:32px; } }

/* ---- FAQ: one unlabelled group, so the list opens with a rule ---- */
.home-faq .faq__group{ border-top:2px solid var(--text); }
.home-faq__more{ justify-self:start; }