/* ==========================================================================
   landing.css — the 18 SEO landing pages on „Midnight Grid” (DESIGN_SPEC §6.2)
   Markup: app/Resources/views/landing/*.html.twig + landing/_partials/*.html.twig

   Loads after tb.css. The pages are built from tb components —
     hero      section.tb-pagehead.landing-hero (+ .tb-pagehead__actions > .tb-btn--primary.tb-btn--lg)
     sections  section.tb-section[.tb-section--mist].landing-section > .tb-container.tb-container--wide
               > .tb-section__head.landing-head (H2 + p.landing-section-intro) + content
     grids     ul.tb-ruled.tb-ruled--2|--3 (features, audience, problems — 3 columns only when the count divides by 3)
     table     div.tb-table-scroll[role=region] > table.tb-table.landing-comparison-table
     CTA       section.tb-cta.landing-cta (partial)      cross-links  ul.tb-cards > article.tb-card--text (partial)
   — and this file adds only the landing patterns: split text sections, checklist, steps, solutions,
   SMS bubbles, related notes, FAQ list. Rules: mobile-first (min-width: 360 · 480 · 640 · 960 · 1200; the one
   deliberate max-width query is the phone list in §11), colours/type/spacing from tb.css tokens only, .landing-* selectors only (no element-wide colour rules,
   nothing that repaints tb components or the header/footer chrome).
   ========================================================================== */

.landing-page {
  /* one column system for split sections and the FAQ, so their left/right edges line up page-wide */
  --landing-cols: minmax(0, 5fr) minmax(0, 7fr);
  --landing-col-gap: clamp(2.5rem, -1.5rem + 6vw, 4.5rem);
  --landing-flow: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);    /* component → following text */
}

/* --------------------------------------------------------------------------
   1. Hero — tb-pagehead (dark band, glow, 64 px grid, H1/lead/note roles) + primary CTA
   -------------------------------------------------------------------------- */
/* Landing titles are long SEO phrases (34–78 characters): a wider H1 measure than the
   default 13.5em keeps them to three lines on desktop. */
.tb-pagehead.landing-hero h1 { max-width: 16em; }
.tb-pagehead.landing-hero .tb-pagehead__lead { max-width: 40rem; }

/* Inline code on the dark band (e.g. gabinet-anny.timego.pl in two leads): the global light code chip
   (mist background) would leave on-dark text at 1.7:1 — dark chip instead. */
.landing-hero code {
  background: rgba(255,255,255,.06);
  border-color: var(--c-line-dark-strong);
  color: var(--c-on-dark);
}

/* Phones: the lead steps down to body size and sits closer, so the CTA stays on the first screen of a
   320 × 640 phone (leads run 10–12 lines there); full-width CTA buttons (thumb reach).
   From 480 px the lead is back on its tokens and the buttons hug their label. */
.landing-hero .tb-pagehead__lead { margin-top: .75rem; font-size: 1rem; line-height: 1.5; }
.landing-hero .tb-pagehead__actions { margin-top: 1.25rem; }
.landing-hero .tb-pagehead__actions > .tb-btn,
.landing-cta .tb-cta__actions > .tb-btn { flex: 1 1 100%; white-space: normal; }
@media (min-width: 480px) {
  .landing-hero .tb-pagehead__lead { margin-top: 1rem; font-size: var(--fs-lead); line-height: var(--lh-lead); }
  .landing-hero .tb-pagehead__actions { margin-top: 1.75rem; }
  .landing-hero .tb-pagehead__actions > .tb-btn,
  .landing-cta .tb-cta__actions > .tb-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   2. Sections — Paper / Mist bands come from tb-section (+ --mist), alternating in the markup.
      Phones/tablets: one column. From 960 px two rails on the split grid — headings on the left
      5/12, running text on the right 7/12; grids, tables and sequences span both rails.
   -------------------------------------------------------------------------- */
.landing-section-intro {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text);
}
.landing-section .tb-container > :last-child,
.landing-body > :last-child { margin-bottom: 0; }
/* running text keeps the reading measure, whatever rail it sits on (checklist: lines span the rail, text keeps the measure — §4) */
:is(.landing-section .tb-container, .landing-body) > p { max-width: var(--measure); }
/* a grid / table / sequence followed by more text */
.landing-section :is(.tb-ruled, .landing-steps, .landing-solutions, .landing-sms-examples, .tb-table-scroll) { margin: 0 0 var(--landing-flow); }
/* DB-style tokens like gabinet-nowak.timego.pl or [[data_rezerwacji]] never widen a phone viewport */
:is(.landing-section, .landing-faq) code { overflow-wrap: anywhere; }

/* Text-only sections: the head holds the H2 alone and the body opens with the intro, so heading → text
   spacing is the running-text rhythm (.5em), as in every other section. */
.landing-section--split .landing-head { margin-bottom: 0; }
.landing-section--split .landing-head > h2 { margin-bottom: .5em; }
.landing-body > .landing-section-intro { margin-bottom: 1rem; }

@media (min-width: 960px) {
  .landing-page { --landing-rail: calc((100% - var(--landing-col-gap)) * 5 / 12 + var(--landing-col-gap)); }
  /* section heads: H2 | intro, first lines on one baseline */
  .landing-head {
    display: grid;
    grid-template-columns: var(--landing-cols);
    column-gap: var(--landing-col-gap);
    align-items: baseline;
    max-width: none;
  }
  .landing-head > h2 { grid-column: 1; margin: 0; }
  /* a head without an intro (FAQ, cross-links, some sections) is not locked to the 5/12 rail next to an empty 7/12 */
  .landing-head > h2:only-child { grid-column: 1 / -1; max-width: 24em; }
  .landing-head > .landing-section-intro { grid-column: 2; }
  /* text after a component continues on the text rail */
  .landing-section:not(.landing-section--split) .tb-container > :is(p, .landing-checklist) { margin-left: var(--landing-rail); }
  /* text-only sections: H2 rail | body rail */
  .landing-section--split > .tb-container {
    display: grid;
    grid-template-columns: var(--landing-cols);
    column-gap: var(--landing-col-gap);
    align-items: baseline;
  }
  .landing-section--split .landing-head { display: block; }
  .landing-section--split .landing-head > h2 { margin: 0; }
}
/* Tall text sections (700–1000 px): the heading stays in view under the header while its text scrolls past —
   scroll-linked position, not an animation. Not on short windows, where it would take too much of the screen. */
@media (min-width: 960px) and (min-height: 600px) {
  .landing-section--split .landing-head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* --------------------------------------------------------------------------
   3. Ruled grids (tb-ruled) — an incomplete last row never shows an empty line-coloured slot
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .landing-section :is(.tb-ruled--2, .tb-ruled--3) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .landing-section .tb-ruled--3 > li:last-child:nth-child(odd) { grid-column: auto; }
  .landing-section .tb-ruled--3 > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .landing-section .tb-ruled--3 > li:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   4. Checklist — ruled rows (calendar slots) with a small square marker. Deliberately not a check
      mark: a third of these lists name drawbacks („Czy darmowy … wystarczy?”) or what Timebox does not do.
   -------------------------------------------------------------------------- */
.landing-checklist {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}
.landing-checklist > li {
  position: relative;
  margin: 0;
  /* the rules run to the rail/container edge like every other ruled component; the text stops at the measure */
  padding: .75rem max(0px, calc(100% - var(--measure))) .75rem 1.5rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
}
.landing-checklist > li::before {
  content: "";
  position: absolute;
  left: .125rem;
  top: calc(.75rem + (var(--lh-body) * 1em - 6px) / 2);     /* centred on the first text line */
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--c-blue-600);
}
.landing-checklist strong { color: var(--c-ink); }

/* --------------------------------------------------------------------------
   5. Steps — a real sequence: numbered 36 px circles joined by a hairline
      (vertical on phones/tablets, horizontal 4-up from 960 px)
   -------------------------------------------------------------------------- */
.landing-steps {
  --step: 2.25rem;
  --steps-gap: clamp(1.5rem, .5rem + 2vw, 2.5rem);
  display: grid;
  padding: 0;
  list-style: none;
}
.landing-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--step) minmax(0, 1fr);
  column-gap: 1rem;
  margin: 0;
  padding: 0 0 1.75rem;
}
.landing-step:last-child { padding-bottom: 0; }
.landing-step::before {                       /* connector to the next number */
  content: "";
  position: absolute;
  top: calc(var(--step) + .5rem);
  bottom: .5rem;
  left: calc(var(--step) / 2 - .5px);
  width: 1px;
  background: var(--c-line-strong);
}
.landing-step:last-child::before { display: none; }
.landing-step__num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: var(--step);
  height: var(--step);
  border: 1px solid transparent;    /* becomes the circle outline in forced-colors mode */
  border-radius: 50%;
  background: var(--c-blue-600);
  color: var(--c-paper);
  font: 600 .9375rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.landing-step h3 { grid-column: 2; margin: .375rem 0 .375rem; }
.landing-step p { grid-column: 2; margin: 0; color: var(--c-text); }
@media (min-width: 960px) {
  .landing-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--steps-gap); }
  .landing-step { display: block; padding: 0; }
  .landing-step::before {
    top: calc(var(--step) / 2 - .5px);
    bottom: auto;
    left: calc(var(--step) + .75rem);
    right: calc(.75rem - var(--steps-gap));
    width: auto;
    height: 1px;
  }
  .landing-step__num { margin-bottom: 1.25rem; }
  .landing-step h3 { margin: 0 0 .5rem; }
}

/* --------------------------------------------------------------------------
   6. Comparison table — tb-table in a focusable tb-table-scroll region (never clipped).
      Phones get 14 px type, tighter cells and a wrapping header: the three columns fit from 320 px (below
      360 px without the yes/no marks); if it ever overflows (user text spacing, longer copy) the focusable
      region scrolls (sticky first column + edge shadow).
   -------------------------------------------------------------------------- */
.landing-comparison-table { --cell-x: .375rem; --cell-y: .625rem; font-size: var(--fs-sm); line-height: 1.5; }
.landing-comparison-table thead { border: 0; }    /* legacy legacy.css 2 px white thead border would win the collapsed-border conflict */
.landing-comparison-table :is(th, td) { padding: var(--cell-y) var(--cell-x); }
/* header cells at the cell size: legacy legacy.css `table th { font-size: .9em }` made them 12.6 px, under the
   14 px floor (same fix requested for tb.css §13 — then `font-size` here can go) */
.landing-comparison-table thead th { white-space: normal; font-size: 1em; }
/* If the region does scroll, a soft shadow on the scrolling edge says so
   (pure CSS scroll shadows — the `local` paper covers disappear with the overflow). */
.landing-table {
  background:
    linear-gradient(to left, var(--c-paper) 40%, rgba(255,255,255,0)) right / 1.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--c-ink) 16%, transparent), transparent) right / .75rem 100% no-repeat scroll,
    var(--c-paper);
}
.landing-comparison-table .yes { color: var(--c-ink); font-weight: 600; }
.landing-comparison-table .no { color: var(--c-muted); }
.landing-comparison-table .partial { color: var(--c-text); }
/* yes/no marks: under 360 px there is no room for them (the Timebox column would be cut off) — the values
   still read as yes/no by wording, weight and colour. From 360 px the marks hang in the cell padding, so a
   wrapped value („w chmurze”) stays aligned with itself. */
.landing-comparison-table td .tb-icon { display: none; }
@media (min-width: 360px) {
  .landing-comparison-table { --cell-x: .5rem; }
  .landing-comparison-table td:is(.yes, .no) { position: relative; padding-left: calc(var(--cell-x) + 1.5rem); }
  .landing-comparison-table td .tb-icon {
    display: block;
    position: absolute;
    left: var(--cell-x);
    top: calc(var(--cell-y) + (1.5em - 1.125rem) / 2);
    width: 1.125rem;
    height: 1.125rem;
  }
}
.landing-comparison-table .yes .tb-icon { color: var(--c-blue-600); }
.landing-comparison-table .no .tb-icon { color: var(--c-muted); }
@media (min-width: 480px) {
  .landing-comparison-table { --cell-x: 1rem; --cell-y: .75rem; font-size: .9375rem; }
  .landing-comparison-table thead th { white-space: nowrap; }
}
@media (min-width: 960px) {
  .landing-section .tb-container > .landing-table { margin-left: var(--landing-rail); }
}

/* --------------------------------------------------------------------------
   7. Problem → solution rows (program-do-umawiania-wizyt)
   -------------------------------------------------------------------------- */
.landing-solutions { padding: 0; list-style: none; border-top: 1px solid var(--c-line); }
.landing-solution {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem .625rem;
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-line);
}
.landing-solution-problem { grid-column: 1 / -1; color: var(--c-ink); font-weight: 600; }
.landing-solution-arrow { color: var(--c-blue-600); font-weight: 600; }
.landing-solution-answer { color: var(--c-text); }
@media (min-width: 640px) {
  .landing-solution {
    grid-template-columns: minmax(0, 2fr) auto minmax(0, 5fr);
    column-gap: 1.5rem;
    align-items: baseline;
    padding-block: 1.125rem;
  }
  .landing-solution-problem { grid-column: auto; }
}
@media (min-width: 960px) {
  /* problem on the heading rail, the arrow closing it, the answer on the text rail */
  .landing-solution { grid-template-columns: var(--landing-cols); column-gap: var(--landing-col-gap); }
  .landing-solution-problem { grid-area: 1 / 1; padding-right: 2.5rem; }
  .landing-solution-arrow { grid-area: 1 / 1; justify-self: end; }
  .landing-solution-answer { grid-area: 1 / 2; }
}

/* --------------------------------------------------------------------------
   8. SMS template examples — message bubbles (8 = 2 × 4 from 1200 px)
   -------------------------------------------------------------------------- */
.landing-sms-examples {
  display: grid;
  gap: 1.5rem 2rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .landing-sms-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .landing-sms-examples { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.landing-sms-example { display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0; }
.landing-sms-label { margin: 0 0 .5rem; font: 500 var(--fs-sm)/1.4 var(--font-body); color: var(--c-muted); }
.landing-sms-bubble {
  max-width: 88%;                  /* one column: reads as a message, not a card */
  margin: 0;
  padding: .75rem 1rem;
  border: 1px solid var(--c-blue-100);
  border-radius: 14px 14px 14px 4px;
  background: var(--c-blue-50);
  color: var(--c-ink);
  font-size: .9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) { .landing-sms-bubble { max-width: 100%; } }
/* on a Mist band blue-50 is one step from the background: one tone deeper there, no outline */
.tb-section--mist .landing-sms-bubble { background: var(--c-blue-100); border-color: transparent; }

/* --------------------------------------------------------------------------
   9. Related-reading notes — quiet secondary text with an in-text link
   -------------------------------------------------------------------------- */
.landing-section .landing-related { color: var(--c-muted); }

/* --------------------------------------------------------------------------
   10. FAQ — ruled Q/A list, all answers visible; ≥960 px question | answer on the split grid
   -------------------------------------------------------------------------- */
.landing-faq-list { border-top: 1px solid var(--c-line); }
.landing-faq-item { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0; border-bottom: 1px solid var(--c-line); }
.landing-faq-item h3 { margin: 0 0 .5rem; }
.landing-faq-answer { max-width: var(--measure); color: var(--c-text); }
@media (min-width: 960px) {
  .landing-faq-item {
    display: grid;
    grid-template-columns: var(--landing-cols);
    column-gap: var(--landing-col-gap);
    align-items: baseline;
  }
  .landing-faq-item h3 { margin: 0; }
}

/* --------------------------------------------------------------------------
   11. Cross-links — tb-cards text cards; exactly four cards read 2 × 2 until they fit 4 × 1
   -------------------------------------------------------------------------- */
/* the description is the whole card text, not a teaser: no 3-line clamp (it would cut it under user text spacing, WCAG 1.4.12) */
.landing-cross-item .tb-card__excerpt { display: block; overflow: visible; -webkit-line-clamp: unset; }
@media (min-width: 960px) { .landing-cross-grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .landing-cross-grid--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Keyboard focus: one ring around the whole card, drawn on the stretched link — the default ring hugs the
   wrapped title (a stepped polygon) next to the card's focus-within border. Inset, because the card clips.
   Same fix requested for tb.css §12; once it is there these three rules can go. */
.landing-cross-item .tb-card__title a::after { border-radius: calc(var(--radius-lg) - 1px); }
.landing-cross-item .tb-card__title a:focus-visible { outline: 0; }
.landing-cross-item .tb-card__title a:focus-visible::after { outline: 2px solid var(--focus-light); outline-offset: -2px; }

/* Phones: 7–10 full cards in one column were up to 1800 px of scroll — below 640 px the same items are rows
   of one ruled list (the tb-ruled language); from 640 px they are cards again. The one max-width query in
   this file: a mobile-first version would have to re-declare tb-card's border, hover and padding here. */
@media (max-width: 639.98px) {
  .landing-cross-grid { gap: 0; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-paper); overflow: hidden; }
  .landing-cross-grid > li + li { border-top: 1px solid var(--c-line); }
  .landing-cross-item.tb-card { border: 0; border-radius: 0; }
  .landing-cross-item .tb-card__body { padding: .875rem 1.25rem; gap: .125rem; }
  .landing-cross-item .tb-card__excerpt { font-size: var(--fs-sm); line-height: 1.5; }
  /* the focus ring follows the row; the first and last rows follow the list's corners */
  .landing-cross-item .tb-card__title a::after { border-radius: 0; }
  .landing-cross-grid > li:first-child .tb-card__title a::after { border-top-left-radius: calc(var(--radius-lg) - 1px); border-top-right-radius: calc(var(--radius-lg) - 1px); }
  .landing-cross-grid > li:last-child .tb-card__title a::after { border-bottom-left-radius: calc(var(--radius-lg) - 1px); border-bottom-right-radius: calc(var(--radius-lg) - 1px); }
}

/* --------------------------------------------------------------------------
   12. Forced colours (Windows contrast themes): backgrounds are dropped, so the drawn markers and
       step connectors switch to the system text colour.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .landing-checklist > li::before,
  .landing-step::before { forced-color-adjust: none; background: CanvasText; }
}