/* pages.css — page-specific stylesheet for the static SEO landing pages
   (src/<slug>/index.html and src/en/<slug>/index.html).

   Typography, colour tokens, and component classes (.wrap-p, .kick,
   .ss-cta, .bp/.bp-grid/.bp-mosaic, .team-card/.team-photo/.team-grid,
   .path-tile, .dir …) live in /assets/site.css, auto-extracted from the
   homepage bundle by tools/build_pages.py — load it BEFORE this file. This
   file only holds what's genuinely specific to these five pages: layout
   scaffolding (header/hero/section rhythm, the comparison table, the FAQ
   list) that has no homepage equivalent, plus a couple of local overrides.

   Renders correctly with JavaScript disabled: pure CSS, no layout depends
   on JS. */

/* ---------- tokens ---------- */

:root {
  --ink: #0E0C0C;
  --orange: #F97337;
  --purple: #A093EC;
  --page-bg: #FBF8F4;
  --surface: #FFFFFF;
  --border: #E7E1D8;
  --muted: #2a2724;   /* matches site.css .wrap-p / .ss-card__desc body-copy colour */
  --muted-2: #6f6b6b; /* matches site.css eyebrow/caption colour */
  --radius: 14px;
  /* Real family names extracted into site.css — these tokens exist only so
     this file doesn't hardcode the family name in a dozen places. */
  --font-head: 'Hedvig Letters Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* This page set commits to a single, deliberate light look (ink-on-off-white
   with orange/purple accents), matching the homepage, so it does not
   redefine tokens per color-scheme. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.imprv-page {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 28px);
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.site-header .logo { display: inline-flex; align-items: center; }
.site-header .logo img { height: 32px; width: auto; }
.site-header nav { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 600; }
.site-header nav a { color: var(--ink); text-decoration: none; }
.site-header nav a:hover { color: var(--orange); }
.site-header nav a.cta-link {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 7px 16px;
}
.site-header nav a.cta-link:hover { background: var(--ink); color: #fff; }

/* ---------- hero ---------- */
/* .bp / .bp-grid come from site.css: the same faint ink-grid texture the
   homepage uses behind its hero. */

.hero {
  padding-block: 48px 40px;
  border-bottom: 1px solid var(--border);
  background: var(--page-bg);
}
.hero .kick { margin-bottom: 14px; }
.hero h1 {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.1;
  margin: 0 0 18px;
}
.hero .lead {
  font-size: clamp(17px, 2.4vw, 20px);
  color: var(--muted);
  margin: 0 0 26px;
  max-width: 62ch;
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

/* Optional hero price block (program-ai-2030) — same price/was/save language
   as .pack-card__price/__was/__save, standalone instead of inside a card. */
.hero-price { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin: 4px 0 22px; }
.hero-price__now { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hero-price__was { font-size: 17px; color: var(--muted-2); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.hero-price__save { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em; color: var(--ink); background: var(--purple); padding: 5px 10px; border-radius: 3px; white-space: nowrap; }

/* .ss-cta (primary button — vivid brand orange #F97337 on ink text) is reused
   verbatim from site.css: it's the homepage's actual "Umów konsultację" /
   "Book a consultation" component, not .chaos-cta (amber-on-navy, meant only
   for the dark CHAOS section). .btn-secondary has no exact homepage
   equivalent on a light background, so it stays local. */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 24px;
  border: 1.5px solid var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #fff; }
.cta-final .btn-secondary { border-color: #fff; color: #fff; }
.cta-final .btn-secondary:hover { background: #fff; color: var(--ink); }

.hero .page-figure,
.hero .page-media { margin-top: 32px; }

/* ---------- images: page-specific media blocks (no homepage equivalent) --- */

.page-figure {
  margin: 28px 0 0;
  max-width: 420px;
  border: 1.5px solid var(--ink);
  background: var(--surface);
  overflow: hidden;
}
.page-figure img { width: 100%; height: auto; display: block; }
.page-figure figcaption {
  padding: 10px 14px 12px;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--muted-2) !important;
  margin: 0 !important;
}

/* team photos reuse .team-card/.team-photo/.team-grid from site.css verbatim;
   this only narrows the grid for a 2-4 person roster inside an article body
   instead of the homepage's full team-page grid. */
.page-media--team { margin-top: 30px; }
.page-media__lead { margin-bottom: 14px !important; }
.page-media--team .team-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  max-width: 620px;
  gap: 16px;
}

/* ---------- main sections ---------- */

main { display: block; }

.section {
  padding-block: 40px;
  border-bottom: 1px solid var(--border);
}
.section--wide { padding-top: 0; }
.section--wide.section--headed { padding-top: 40px; } /* a wide block that opens with its own h2 */

/* ---------- package grid + flagship card ---------------------------------
   Mirrors the homepage's "Cztery pakiety, jeden ekosystem" grid and its
   flagship PROGRAM AI 2030 card structurally and visually. The homepage
   renders these with inline styles + a generated class name (re-exported by
   a design tool, so it has no stable class to reuse) — this reproduces the
   *computed* appearance as real, stable classes instead. Data always comes
   from tools/build_pages.py's extract_packages(), never hand-typed here. */

.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.pack-card {
  border: 1.5px solid var(--ink);
  background: var(--surface);
  padding: 0 20px 22px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pack-card:hover, .pack-card:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--ink);
}
.pack-card__img {
  display: block;
  width: calc(100% + 40px);
  max-width: none; /* overrides the global img { max-width: 100% } so the image bleeds across the card padding */
  height: 200px;
  object-fit: cover;
  object-position: 50% 24%;
  margin: 0 -20px 20px;
  border-bottom: 4px solid var(--ink); /* colour overridden per-card inline */
}
.pack-card__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  line-height: 1.1;
}
.pack-card__courses {
  font-size: 12px;
  color: var(--muted-2);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}
.pack-card__desc {
  font-size: 13px;
  color: var(--muted-2);
  margin: 0 0 16px;
  flex-grow: 1;
  line-height: 1.45;
}
.pack-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pack-card__price {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pack-card__was {
  font-size: 13.5px;
  color: #a3a0a0;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.pack-card__save {
  display: inline-block;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--purple); /* homepage's savings badge is always this
    purple, regardless of pack accent — see PACK_BADGE_COLOR in
    tools/build_pages.py */
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.pack-card__cta {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.pack-card:hover .pack-card__cta { color: var(--ink); }

.flagship-card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--orange);
  transition: transform .15s ease, box-shadow .15s ease;
}
.flagship-card:hover, .flagship-card:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--orange);
}
.flagship-card__img {
  flex: 1 1 260px;
  max-width: 340px;
  align-self: stretch;
  min-height: 220px;
  max-height: 300px;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.flagship-card__body {
  flex: 1 1 380px;
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flagship-card__badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--orange);
  padding: 5px 11px;
  border-radius: 3px;
  margin: 0 0 14px;
}
.flagship-card__title {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0 0 10px;
  color: #fff;
}
.flagship-card__desc {
  font-size: 15px;
  line-height: 1.5;
  color: #cfcccc;
  margin: 0 0 18px;
  max-width: 50ch;
}
.flagship-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.flagship-card__pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  border: 1.5px solid var(--orange);
  padding: 5px 10px;
  border-radius: 3px;
}
.flagship-card__cta {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
}

/* ---------- team grid + workshops comparison ------------------------------
   .team-card/.team-photo/.team-grid/.team-group/.studia-vs* are the
   homepage's own classes, reused verbatim from site.css — these rules only
   add the lede/sub copy styling that has no homepage equivalent inside an
   article body. */
.team-lead-sub { font-size: 15.5px; line-height: 1.55; color: var(--muted-2); max-width: 64ch; margin: 0 0 10px !important; }
/* T3: the workshops team_grid has 4 people, not the homepage's 9 — site.css's
   640-899px breakpoint puts .team-grid at 3 columns, which would orphan a
   single card in its own row for a 4-person grid. Hold it at 2 columns (2x2)
   in that range on these pages only; site.css itself is never hand-edited. */
@media (min-width: 640px) and (max-width: 899px) {
  .section--wide .team-grid { grid-template-columns: repeat(2, 1fr); }
}
/* quiz: the homepage renders it at line-height 1.5; body.imprv-page's 1.6
   would make every unstyled line taller than on the homepage. */
[data-quiz] { line-height: 1.5; }
.section h2 {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.2;
  margin: 0 0 16px;
}
.section h3 {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(18px, 2.6vw, 21px);
  margin: 24px 0 10px;
}
.section ul, .section ol { margin: 0 0 16px; padding-left: 22px; }
.section li { margin-bottom: 8px; }

/* ---------- table ---------- */
/* .bp-mosaic (from site.css) gives the comparison-table section the same
   faint blueprint texture as the homepage's package tiles. */

.table-section { background: var(--page-bg); }
.table-wrap {
  overflow-x: auto;
  border: 1.5px solid var(--ink);
  background: var(--surface);
}
table.cmp {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 14.5px;
}
table.cmp caption {
  text-align: left;
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 20px;
  padding: 16px 18px 10px;
}
table.cmp th, table.cmp td {
  text-align: left;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  vertical-align: top;
}
table.cmp thead th {
  background: var(--page-bg);
  font-weight: 700;
  border-top: none;
}
table.cmp tbody tr:nth-child(odd) { background: #FDFCFA; }
table.cmp .tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--purple);
  text-transform: uppercase;
}
table.cmp .was { color: var(--muted-2); font-weight: 400; font-size: 12.5px; }
.table-note.wrap-p { margin: 12px 18px 18px !important; font-size: 13.5px !important; color: var(--muted-2) !important; }
.table-section .wrap-p + .table-wrap { margin-top: 28px; } /* intro copy above the table */
/* Body copy directly under the "what you get / who it's for" columns. */
.studia-vs + .wrap-p { margin-top: 28px; }

/* ---------- FAQ ---------- */

.faq-item {
  border-top: 1px solid var(--border);
  padding-block: 18px;
}
.faq-item:first-of-type { border-top: none; }
.faq-item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16.5px;
  margin: 0 0 8px;
}
.faq-item p.wrap-p { color: var(--muted) !important; margin: 0 !important; }

/* native <details>/<summary> disclosure — no JS */
summary.faq-q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
summary.faq-q::-webkit-details-marker { display: none; }
summary.faq-q::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  flex: none;
  transition: transform .2s ease;
}
.faq-item[open] > summary.faq-q::after { transform: rotate(45deg); }
/* .faq-item h3 above sets a bottom margin for the (former) non-collapsible
   layout — inside the summary it must be flush; the answer gets the gap
   instead, so the open state still looks like the old always-open layout. */
summary.faq-q h3 { margin: 0; }
.faq-item > p.wrap-p { margin-top: 10px !important; }
summary.faq-q:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  summary.faq-q::after { transition: none; }
}

/* ---------- final CTA ---------- */

.cta-final {
  background: var(--ink);
  color: #fff;
  border-bottom: none;
}
.cta-final .wrap { text-align: left; }
.cta-final h2 { color: #fff; }
.cta-final p.wrap-p { color: #E9E5DE !important; }

/* ---------- footer ----------
   A7: the footer is now the homepage's own <footer class="site-footer">,
   extracted verbatim by tools/build_pages.py's render_footer() — its real
   styling (.site-footer, .site-footer__inner/__top/__bottom, .footer-col,
   .footer-brand, .footer-socials, .footer-legalinfo, .footer-copy, …) comes
   from site.css (auto-extracted from the homepage) and renders unmodified.
   No local overrides here on purpose — see CLAUDE.md. */

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .site-header .wrap { flex-wrap: wrap; }
  .hero { padding-block: 36px 28px; }
  .section { padding-block: 30px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn, .ss-cta { text-align: center; justify-content: center; }
  /* CLS fix: .hero-price (now/was/save) is a flex-wrap row with no fixed
     widths, so whether the save badge fits on the first line depends on
     which font is active — it fits in the fallback font at ~400-480px
     viewports but not once the web font's wider glyphs load, so the badge
     wraps onto its own line ~40-50px down *after* first paint, shifting
     everything below it. Below 640px it already ends up wrapped once the
     web font is in (there's never room for 3 items on one line at these
     widths), so forcing the wrap up front here doesn't change the
     post-load look — it just makes the wrapped layout the only state, in
     both fonts, from first paint.
     Giving `.hero-price__save` itself `flex-basis: 100%` was tried first,
     but that also stretches the badge to the full row width once it's
     alone on its line (flexbox then resolves its main size to exactly the
     available space, with nothing left over to shrink it back down) —
     clamping that with `max-width` instead defeats the forced wrap itself
     (a small enough max-width lets the wrap algorithm decide the badge
     fits back on line 1 after all, reintroducing the same race). Instead,
     an invisible 100%-basis spacer forces the line break, and the badge
     stays untouched (flex: 0 1 auto, i.e. content width) on the row after
     it — this is the standard flexbox "forced line break" pattern and
     matches the natural-wrap rendering exactly. */
  .hero-price__save { order: 2; margin-top: -13px; }
  .hero-price::after { content: ""; order: 1; flex-basis: 100%; width: 0; height: 0; }
}