/* WTS homepage (template_fp.php), from the Phase 2 prototype's home page (changes 5 to 12).
   Direction A's colors: white and light gray, navy text, green buttons. The customer story and
   the help band are navy, as in the prototype. Editor HTML from the old fields (highlight titles
   with inline white text, for example) is evened out under .hl-t. */

.eyebrow { font-size: var(--t-s); font-weight: var(--fw-m); color: var(--muted); }
.btn--lg { min-height: 60px; font-size: var(--t-l); padding: 0 32px; }
.sec { padding-block: 72px; }
.sec--mist { background: var(--mist); }
.sec--mint { background: var(--mint); }
.sec__head { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 32px; }
.sec__head h2 { font-size: var(--t-2xl); }
.sec__head p { color: var(--muted); max-width: 60ch; margin-top: 8px; }
.sec__head .eyebrow { margin: 0 0 8px; }
.sec__more { display: inline-flex; align-items: center; min-height: 48px; font-weight: var(--fw-m); }

/* Editor headings and text from the old fields */
.hl-t h2 { font-size: var(--t-2xl); font-weight: var(--fw-h); }
.hl-t h2 strong { font-weight: var(--fw-h); }
.hl-t h3 { font-size: var(--t-l); margin-top: 10px; }
.hl-t h4 { font-size: var(--t-s); font-weight: var(--fw-m); color: var(--muted); margin-bottom: 8px; }
.hl-t p { margin-top: 12px; max-width: 60ch; }
.hl-t p strong, .hl-t > strong { font-weight: inherit; } /* the old blocks wrap whole paragraphs in <strong>; Eemeli, 29 Oct: less bold */
.hl-t [style*="color"] { color: inherit !important; }
.hl-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hl-links:empty { display: none; }
.embed { border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); }
.embed iframe { display: block; border: 0; }

/* 1. Hero */
.hero { background: linear-gradient(180deg, #fff 0%, var(--mist) 100%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-block: 56px 40px; }
.hero__txt .eyebrow { margin-bottom: 14px; }
.hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: var(--fw-h); letter-spacing: -.02em; line-height: 1.05; }
.hero__lead { font-size: var(--t-l); margin-top: 20px; max-width: 34ch; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero__talk { margin-top: 20px; color: var(--muted); }
.hero__talk a { font-weight: var(--fw-m); }
.hero__media { position: relative; }
.hero__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--mist); }

/* 2. Trust strip */
.trust { border-top: 1px solid var(--line); }
.trust__list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding-block: 20px; }
.trust li { display: flex; gap: 12px; align-items: center; font-size: var(--t-s); line-height: 1.3; }
.trust li .ic { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--green); color: var(--navy); }
.trust b { display: block; font-size: var(--t-b); }
.trust__a { display: flex; gap: 12px; align-items: center; min-height: 48px; color: inherit; text-decoration: none; }
.trust__a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Extra hero slides, if the carousel has more than one */
.hero-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; padding-block: 32px 0; }
.hero-more__i { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; padding: 20px; border: 2px solid var(--line); border-radius: var(--radius-lg); }
.hero-more__i h2 { font-size: var(--t-xl); margin-bottom: 12px; }

/* 3. Where will your toilet go? */
.uses { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* No outline: the picture's 45° corner showed the square border behind it (Eemeli, 29 Oct) */
.use { display: grid; height: 100%; text-decoration: none; background: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.use img, .use__ph { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: var(--mist); }
.use__t { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 56px; padding: 12px 0; font-weight: var(--fw-m); font-size: var(--t-l); line-height: 1.2; }
.use:hover .use__t { text-decoration: underline; }

/* 5. Popular systems: the type chips over the comparison chart (B) */
.fitbar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 18px 20px; border: 2px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.fitbar fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fitbar__q { margin-bottom: 10px; padding: 0; font-weight: var(--fw-m); font-size: var(--t-l); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 2px solid var(--line-strong); border-radius: 0; background: #fff; font-weight: var(--fw-m); font-size: var(--t-s); cursor: pointer; }
.fchip:hover { border-color: var(--navy); background: var(--mist); }
.fchip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fchip:has(input:checked) { border-color: var(--navy); background: var(--navy); color: #fff; }
.fchip:has(input:checked)::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 600; }
.fchip:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }
.fitbar__help { margin-top: 8px; font-size: var(--t-s); color: var(--muted); }
.fitcount { font-weight: var(--fw-m); }
.fitcount b { margin-right: 4px; font-size: var(--t-xl); }
.glance-wrap { overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.glance { width: 100%; border-collapse: collapse; }
.glance th, .glance td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.glance thead th, .glance thead td { background: var(--mist); color: var(--muted); font-size: var(--t-s); font-weight: var(--fw-m); }
.glance tbody th { font-weight: var(--fw-m); }
.glance tbody th a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; }
.glance tbody th a:hover { text-decoration: underline; }
.glance__img { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 0; background: var(--mist); }
.glance__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.glance tr:last-child th, .glance tr:last-child td { border-bottom: 0; }
.glance tr.is-out { display: none; }
.num { font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
.glance .num del { font-weight: 400; color: var(--muted); }
.glance .num ins { text-decoration: none; }
.chip-ok { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 0; background: var(--mint); font-size: var(--t-s); white-space: nowrap; }
.glance__note { margin-top: 14px; color: var(--muted); font-size: var(--t-s); }

/* 6. How it works: the old video block, then C's drawing in A's light colors and three steps */
.howtop { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; margin-bottom: 48px; }
.howbox { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }
.howbox figure { margin: 0; }
.how__svg { display: block; width: 100%; height: auto; aspect-ratio: 700 / 560; border: 2px solid var(--line); border-radius: var(--radius-lg); }
.howbox figcaption { margin-top: 10px; color: var(--muted); font-size: var(--t-s); }
.howbox__legend { display: none; }
.how__img { display: block; width: 100%; height: auto; } /* the Compact Lux picture (template_fp.php) */
.how { list-style: none; display: grid; gap: 14px; counter-reset: s; }
.how li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; row-gap: 6px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--mist); }
.how li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); font-weight: var(--fw-m); font-size: var(--t-l); }
.how h3 { align-self: center; font-size: var(--t-l); }
.how p { grid-column: 2; }

/* 7. Reorder supplies: one fixed list and the spare containers card */
.reorder { display: grid; grid-template-columns: .8fr 2fr; gap: 32px; align-items: start; }
.reorder .sec__head { display: block; margin-bottom: 20px; }
.reorder__all { margin-top: 16px; }
.reorder__all a { display: inline-flex; align-items: center; min-height: 48px; font-weight: var(--fw-m); }
.rlist { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.ri { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: 1fr auto; gap: 8px 12px; align-content: start; padding: 14px; border: 2px solid transparent; border-radius: var(--radius-lg); background: #fff; }
.ri.is-in { border-color: var(--navy); }
.ri__img { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 0; background: var(--mist); }
.ri__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ri__body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.ri__name { font-weight: var(--fw-m); line-height: 1.25; }
.ri__name a { display: inline-block; padding-block: 12px; margin-block: -12px; text-decoration: none; }
.ri__name a:hover { text-decoration: underline; }
.ri__why { color: var(--muted); font-size: var(--t-s); line-height: 1.4; }
.ri__price { font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
.ri__price del { font-weight: 400; color: var(--muted); }
.ri__price ins { text-decoration: none; }
.ri__in { font-size: var(--t-xs); font-weight: var(--fw-m); }
.ri .btn, .ri__oos { grid-column: 1 / -1; align-self: end; }
.ri__oos { font-size: var(--t-s); font-weight: var(--fw-m); color: var(--red); }
.ri--cat { background: var(--navy); color: #fff; --focus: var(--peach); }
.ri--cat .ri__name a, .ri--cat .ri__why { color: #fff; }
.ri--cat .btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.ri--cat .btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* 8. Customer story (A), navy as in the prototype */
.story { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy); color: #fff; --focus: var(--peach); }
.story a:not(.btn) { color: #fff; }
.story__media { min-height: 280px; background: var(--pale-blue); }
.story__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story__body { display: grid; align-content: center; padding: 48px; }
.story .hl-t h4 { color: var(--green); }
.story .hl-t h2 { font-size: var(--t-2xl); }
.story .hl-t p { color: #e6e6ff; }
.story .btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.story .btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* 10. Our most popular toilets: the heading beside the cards, as before */
.top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.top .sec__head { margin: 0; }

/* 9. Reviews: the plugin's own markup, given room */
.home-reviews h3 { font-size: var(--t-2xl); margin-bottom: 24px; }

/* 11. Showroom (video), our story, the Finnish Outhouse: each a two-column section */
.showroom, .history, .fo-home { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.history { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.showroom__media .embed, .showroom__media img { display: block; width: 100%; }
.history__media img, .fo-home__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.showroom__body, .history__body, .fo-home__body { display: grid; gap: 14px; align-content: center; }
.fo-home__note { padding: 10px 14px; border: 2px dashed var(--navy); font-size: var(--t-s); }

/* 4. The Product Finder: the plugin's own card, given room */
.home-finder .wrap > * { max-width: 920px; margin-inline: auto; }

/* 13. Help band */
.help { background: var(--navy); color: #fff; --focus: var(--peach); }
.help__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding-block: 56px; }
.help__grid:has(.help__img) { grid-template-columns: minmax(0, 220px) 1.2fr 1fr; padding-bottom: 0; }
.help__grid:has(.help__img) > :not(.help__img) { margin-bottom: 56px; }
.help__main { display: grid; gap: 24px; }
.help .hl-t h2 { font-size: var(--t-2xl); }
.help .hl-t p { color: #e6e6ff; }
.help .hl-t a { color: #fff; }
.help .ask { color: var(--navy); --focus: var(--navy); }
.help__card { display: grid; gap: 8px; padding: 24px; border-radius: var(--radius-lg); background: #fff; color: var(--navy); --focus: var(--navy); }
.help__card p { color: var(--muted); }
.help__card p strong { color: var(--navy); }
.help__hours { font-size: var(--t-l); font-weight: var(--fw-m); color: var(--navy) !important; }
.help__img { align-self: end; display: block; width: 100%; height: auto; }
.help__card .btn { margin-top: 8px; }

@media (max-width: 1023px) {
  .trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fitbar { display: grid; }
  .howtop, .howbox { grid-template-columns: 1fr; gap: 24px; }
  .reorder { grid-template-columns: 1fr; }
  .showroom, .history, .fo-home { grid-template-columns: 1fr; gap: 24px; }
  .history__media { order: -1; }
  .top { grid-template-columns: 1fr; }
  .help__grid, .help__grid:has(.help__img) { grid-template-columns: 1fr; padding-bottom: 48px; }
  .help__grid:has(.help__img) > :not(.help__img) { margin-bottom: 0; }
  .help__img { display: none; }
}

@media (max-width: 759px) {
  .sec { padding-block: 48px; }
  .sec__head h2, .hl-t h2, .story .hl-t h2, .help .hl-t h2 { font-size: var(--t-xl); }
  .hero__grid { grid-template-columns: 1fr; gap: 28px; padding-block: 24px 32px; }
  .hero__media { order: -1; }
  .hero__ctas .btn { width: 100%; }
  .trust__list { grid-template-columns: 1fr 1fr; }
  .uses { grid-template-columns: 1fr 1fr; gap: 12px; }
  .use__t { font-size: var(--t-b); padding: 10px 0; }
  .use__t .ic { display: none; }
  .fchip { flex: 1 1 40%; justify-content: center; padding: 0 10px; }
  /* On phones each chart row becomes a card */
  .glance-wrap { overflow: visible; border: 0; background: none; }
  .glance thead { display: none; }
  .glance, .glance tbody { display: block; }
  .glance tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 12px; padding: 16px; border: 2px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
  .glance tr.is-out { display: none; }
  .glance th, .glance td { padding: 4px 0; border: 0; }
  .glance tbody th { grid-column: 1 / -1; padding-bottom: 8px; font-size: var(--t-l); }
  .glance td[data-l]::before { content: attr(data-l); display: block; color: var(--muted); font-size: var(--t-xs); font-weight: var(--fw-m); }
  .glance td:last-child { grid-column: 1 / -1; padding-top: 8px; }
  .glance td:last-child .btn { width: 100%; }
  /* The drawing's labels get too small to read, so the parts are also listed under it */
  .howbox__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 12px; list-style: none; font-size: var(--t-s); }
  .howbox__legend li { display: flex; gap: 8px; align-items: baseline; }
  .howbox__legend li::before { content: ""; flex: none; width: 10px; height: 10px; border: 2px solid var(--navy); border-radius: 50%; background: var(--green); }
  .story { grid-template-columns: 1fr; }
  .story__media { min-height: 0; }
  .story__media img { aspect-ratio: 3 / 2; height: auto; }
  .story__body { padding: 24px; }
}