/* ============================================================================
   Rumb — patterns.css
   Section-level layout rules not covered by preview.html's homepage components:
   breadcrumbs, TOC, course half-bleed header, timeline, pricing, comparison
   table, checklist, fact box, footer columns, mobile header/bottom bar,
   forced-colors + 200% zoom fixes, print.
   ========================================================================== */

main { display: block; }
.wp-block-post-content > * + * { margin-block-start: var(--space-8); }

/* ---------- breadcrumbs (P-A-36) ---------- */
.breadcrumbs { padding-block-start: var(--space-6); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; font-size: var(--step--1); color: var(--color-text-muted); }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-inline-start: var(--space-1); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: underline; text-decoration-thickness: 1px; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: var(--weight-ui); }
@media (min-width: 48rem) { .breadcrumbs .mobile-only { display: none; } }
@media (max-width: 47.98rem) { .breadcrumbs .desktop-only { display: none; } }

/* sekcje wewnątrz zwykłej strony (page-plain) nie dostają globalnego
   padding-block sekcji strony głównej — odstęp dają tylko marginesy autora;
   `.course-content > section` (niżej, strony kursów z przyklejonym spisem
   treści) zachowuje własny, większy odstęp z linią działową. */
.page-body section { padding-block: 0; scroll-margin-top: var(--space-8); }

/* ---------- page header (P-A-01, page-plain H1 band) ---------- */
.page-head { padding-block: var(--space-8) var(--space-10); }
.page-head h1 { margin-block-end: var(--space-4); max-width: 26ch; }
.page-head .lead { max-width: 60ch; }
.page-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-block-start: var(--space-6); font-size: var(--step--1); color: var(--color-text-muted); }
.page-facts b { color: var(--color-text-heading); font-weight: var(--weight-ui); }

/* ---------- course header, half-bleed (K-01, P-A-02:V3) ---------- */
.course-head { padding-block: var(--space-10); overflow: hidden; }
.course-head .grid { align-items: center; }
.course-head-copy { display: grid; gap: var(--space-5); }
.course-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.course-head-media { margin-inline: calc(-1 * var(--space-margin)); }
@media (min-width: 64rem) {
  .course-head-media { margin-inline-end: calc(-1 * ((100vw - var(--container)) / 2 + var(--space-margin))); margin-inline-start: 0; }
  body.has-wide-header .course-head-media { margin-inline-end: calc(-1 * ((100vw - var(--container)) / 2)); }
}
.course-head-media .photo { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
@media (max-width: 63.98rem) { .course-head-media .photo { border-radius: var(--radius-lg); } }

/* ---------- table of contents, sticky (P-A-14:V3) ---------- */
.page-with-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
@media (min-width: 75rem) { .page-with-toc { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; } }
.toc { background: var(--color-surface-2); border-radius: var(--radius-lg); padding: var(--space-5); }
.toc p.eyebrow { margin-block-end: var(--space-3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); counter-reset: toc; }
.toc a { overflow-wrap: break-word; }
.toc a { display: block; padding: var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); font-size: var(--step--1); }
.toc a:hover { background: var(--brand-50); color: var(--color-ink-hover); }
.toc a.is-active { background: var(--brand-100); color: var(--color-ink); font-weight: var(--weight-ui); }
@media (min-width: 75rem) { .toc { position: sticky; top: calc(var(--space-8) + var(--border-1)); max-height: calc(100vh - var(--space-16)); overflow-y: auto; } }
.course-content > section { scroll-margin-top: var(--space-8); padding-block: var(--space-10); border-block-end: var(--border-1) solid var(--color-border); }
.course-content > section:last-child { border-block-end: 0; }
.course-content h2, .page-body h2 { font-size: var(--step-3); margin-block-end: var(--space-6); }

/* ---------- for-whom / obawy lists ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist li svg { flex: none; margin-block-start: 0.2em; color: var(--color-ink); }
.checklist.not-yet svg { color: var(--color-text-muted); }
.two-col-lists { display: grid; gap: var(--space-8); }
@media (min-width: 48rem) { .two-col-lists { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.two-col-lists h3 { margin-block-end: var(--space-4); }

/* ---------- sticky-heading read list (K-05, P-A-27) ---------- */
.sticky-list { display: grid; gap: var(--space-8); }
@media (min-width: 64rem) { .sticky-list { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.sticky-list-head { position: static; }
@media (min-width: 64rem) { .sticky-list-head { position: sticky; top: var(--space-8); } }
.sticky-list-items { display: grid; gap: var(--space-8); }
.sticky-list-item .q { font-family: var(--font-heading); font-style: normal; font-weight: 700; font-size: var(--step-1); color: var(--signal); margin-block-end: var(--space-2); }

/* ---------- lesson steps with sticky media (A-03) ---------- */
.steps-media { display: grid; gap: var(--space-8); }
@media (min-width: 64rem) { .steps-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.steps-media-figure { position: static; }
@media (min-width: 64rem) { .steps-media-figure { position: sticky; top: var(--space-8); } }
.steps-media-list { list-style: none; margin: 0; padding: 0; counter-reset: sm; display: grid; gap: var(--space-6); }
.steps-media-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); }
.steps-media-list li::before { counter-increment: sm; content: counter(sm); display: inline-flex; align-items: center; justify-content: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-full); background: var(--brand-100); color: var(--color-ink); font-weight: var(--weight-ui); flex: none; }
.steps-media-list .t { font-weight: var(--weight-ui); color: var(--color-text-heading); display: block; margin-block-end: var(--space-1); }

/* ---------- timeline (GR-04, K-07, P-B-16) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); border-inline-start: var(--border-2) solid var(--brand-200); padding-inline-start: var(--space-6); }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--space-6) - 5px); top: 0.3em; width: 10px; height: 10px; border-radius: 50%; background: var(--color-ink); }
.timeline .t { font-weight: var(--weight-ui); color: var(--color-text-heading); display: block; }
.timeline .d { color: var(--color-text-muted); font-size: var(--step--1); }

/* ---------- pricing cards (C-02, P-B-21) ---------- */
.pricing-cards { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .pricing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .pricing-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-6); display: grid; gap: var(--space-4); }
.price-card h3 { font-size: var(--step-1); }
.price-card .big { font-family: var(--font-heading); font-size: var(--step-4); color: var(--color-ink); line-height: 1; }
.price-card .per { font-size: var(--step--1); color: var(--color-text-muted); font-family: var(--font-body); }
.price-card .sub { font-size: var(--step--1); color: var(--color-text-muted); }
.price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--step--1); }
.price-card ul li { display: flex; gap: var(--space-2); }
.price-card ul li svg { flex: none; color: var(--color-ink); }

/* ---------- full pricing / comparison table (C-03, KH-03) ---------- */
.data-table-wrap { overflow-x: auto; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
table.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 40rem; }
table.data-table caption { text-align: left; padding: var(--space-4); font-size: var(--step--1); color: var(--color-text-muted); }
table.data-table th, table.data-table td { padding: var(--space-3) var(--space-4); border-block-end: var(--border-1) solid var(--color-border); text-align: left; }
table.data-table thead th { background: var(--color-surface-2); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-text-muted); position: sticky; top: 0; }
table.data-table tbody th { font-weight: var(--weight-ui); color: var(--color-text-heading); white-space: nowrap; }

/* ---------- fact box / key-facts band (P-A-33, P-A-37, P-A-30) ---------- */
.fact-box { background: var(--color-surface-2); border-radius: var(--radius-lg); padding: var(--space-6); }
.facts-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (min-width: 48rem) { .facts-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts-band .display { font-size: var(--step-4); color: var(--color-ink); font-family: var(--font-heading); line-height: 1; }
.facts-band p { color: var(--color-text-muted); font-size: var(--step--1); margin-block-start: var(--space-1); }
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.fact-list dt, .fact-list .k { font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-text-muted); }
.fact-list dd, .fact-list .v { margin: var(--space-1) 0 0; font-weight: var(--weight-ui); color: var(--color-text-heading); }

/* ---------- levels rows (PZ-02, L-04, K-04) ---------- */
.level-row { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.level-row + .level-row { margin-block-start: var(--space-4); }
.level-row .lvl-badge { display: inline-flex; align-items: center; justify-content: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-sm); background: var(--brand-100); color: var(--color-ink); font-weight: var(--weight-ui); }
.level-row-head { display: flex; align-items: center; gap: var(--space-3); }
.level-row-head .name { font-family: var(--font-heading); font-weight: var(--weight-display); font-size: var(--step-1); }

/* ---------- panels (locations, KT-02/A-05/PL) ---------- */
.panels { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panel { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; display: grid; }
.panel .photo { border-radius: 0; }
.panel-body { padding: var(--space-5); display: grid; gap: var(--space-2); }
.panel-body h3 { font-size: var(--step-1); }
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }

/* ---------- accordion (<details>, B-20) ---------- */
.accordion { display: grid; gap: var(--space-2); }
.accordion details { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 0; }
.accordion summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-weight: var(--weight-ui); font-size: var(--step-0); min-height: var(--touch-min); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .chev { transition: transform var(--dur-3) var(--ease-standard); flex: none; color: var(--color-ink); }
.accordion details[open] summary .chev { transform: rotate(180deg); }
.accordion .panel-content { padding: 0 var(--space-5) var(--space-5); color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .accordion summary .chev { transition: none; } }

/* Q&A visible list (Q-02) */
.qa-list { display: grid; gap: var(--space-6); }
.qa-list .q { font-weight: var(--weight-ui); color: var(--color-text-heading); font-size: var(--step-0); margin-block-end: var(--space-2); }

/* ---------- initials circle (brak zdjęcia lektora/historii) ---------- */
.avatar-initials { display: flex; align-items: center; justify-content: center; aspect-ratio: var(--img-portrait-ratio); border-radius: var(--radius-md); background: var(--brand-100); color: var(--color-ink); font-family: var(--font-heading); font-weight: 600; font-size: var(--step-3); }

/* ---------- wide figure (A-01, P-B-48) ---------- */
.wide-figure { grid-column: 1 / -1; }
.wide-figure .photo { border-radius: var(--radius-lg); }
.wide-figure figcaption { max-width: var(--measure-prose); }

/* ---------- FAQ topics list (Q-01, P-A-38) ---------- */
.topics-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.topics-list a { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: var(--border-1) solid var(--color-border); text-decoration: none; color: var(--color-ink); font-weight: var(--weight-ui); font-size: var(--step--1); }
.topics-list a:hover { background: var(--brand-50); }

/* ---------- local nav (N-06) ---------- */
.local-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-block: var(--space-4); border-block: var(--border-1) solid var(--color-border); }
.local-nav a { font-weight: var(--weight-ui); text-decoration: none; }
.local-nav a.is-current { text-decoration: underline; }

/* ---------- mobile bottom action bar (N-04, B-01) ---------- */
.bottom-bar { display: none; }
body.has-bottom-bar { padding-block-end: 56px; }
@media (max-width: 63.98rem) {
  body.has-bottom-bar .bottom-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    background: var(--color-surface); border-block-start: var(--border-1) solid var(--color-border);
    gap: var(--space-2); padding: var(--space-2) var(--space-3); height: 56px;
    box-shadow: 0 -2px 8px rgb(0 0 0 / 0.06);
  }
  body.has-bottom-bar .bottom-bar .btn { flex: 1; padding-inline: var(--space-3); font-size: var(--step--1); }
  body.has-bottom-bar.bottom-bar-hidden-for-focus .bottom-bar { display: none; }
}

/* mobile header hide/show on scroll (B-01) */
.site-header { transition: transform var(--dur-3) var(--ease-standard); }
@media (max-width: 63.98rem) {
  .site-header.is-hidden { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
[id] { scroll-margin-top: calc(var(--control-xl) + var(--space-4)); }

/* ---------- 200% zoom / forced-colors ---------- */
@media (forced-colors: active) {
  .btn, .tile, .chip, .day, .slot, .card, .rows, .table-wrap, .price-card, .panel, .accordion details { border: 1px solid ButtonText; }
  .tick, .lvl, .seat svg { forced-color-adjust: none; }
}

/* ---------- print (result page etc.) ---------- */
@media print {
  .site-header, footer.site-footer, .bottom-bar, .skip-link, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}