/* projekt.css: BOVO Development, nowa strona bovo.pl.
   Pasek, pierwszy ekran i dwie sekcje autorskie z planszy stylu v001.
   Tylko tokeny marki; wspólny dla wszystkich podstron. */

/* Krój detalu z planszy: etykiety, dane, telefon, znaczniki */
.overline, .data, .chip, .bar__end .num, .menu h5, .foot h5, .u-strip span, .p-liczby span { font-family: var(--font-detail-family), monospace; font-weight: var(--font-detail-weight); letter-spacing: var(--font-detail-tracking); text-transform: uppercase; }
.overline, .data, .chip, .menu h5, .foot h5, .u-strip span, .p-liczby span { font-size: 0.8125rem; }
.overline.t-accent { color: var(--color-accent); }
.chip i { background: var(--color-accent); }

/* Pasek: linia jak na planszy, bez grubej kreski */
[data-header="line"] .bar { border-color: var(--color-line); }
.bar__nav { margin: 0 0 0 auto; }
.bar__nav a[href="#menu"]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); }
.bar__end .num { color: var(--color-text); }
.menu__list a:hover, .menu__grid a:hover .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.menu__grid a > .muted { display: block; margin-top: 4px; font-size: var(--font-size-sm); }

/* Pierwszy ekran: hasło i opis nad wizualizacją, która wychodzi poza treść */
.u-intro { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 80px; padding: 44px 0; }
.p-hero { margin: 0 calc(var(--gutter) * -0.66); height: min(62vh, 640px); min-height: 320px; }
.p-hero > img { object-position: 50% 58%; }

/* Podstrona: krótszy pierwszy ekran */
.u-intro--sub { padding: 56px 0 44px; }
.u-intro--sub h1 { font-size: var(--font-size-4xl); }

/* Sekcja autorska 1: panel na powierzchni (30%) z obrazem i tekstem */
.p-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; padding: calc(var(--inset) * 2); border-radius: var(--r-media); background: var(--color-surface); }
.p-panel > .media { aspect-ratio: var(--image-ratio-card); background: var(--color-background); }
.p-panel h2 + p { margin-top: 20px; }
.p-panel p { color: var(--color-muted); }

/* Sekcja autorska 2: pasek liczb w kolorze akcentu (jedno pole na stronę) */
.p-liczby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0 calc(50% - 50vw); padding: 52px max(var(--gutter), calc(50vw - var(--layout-width) / 2)); background: var(--color-accent); color: var(--color-background); }
.p-liczby b { display: block; margin-bottom: 8px; font-family: var(--font-heading-family), sans-serif; font-weight: var(--font-heading-weight); font-size: var(--font-size-5xl); letter-spacing: var(--font-heading-tracking); line-height: 1; }

html { overflow-x: clip; }

/* Kolumny tekstu z kreską u góry (język rzędu 01–04 z planszy) i wiersze faktów */
.p-kol { padding-top: 20px; border-top: 1px solid var(--color-line); }
.p-kol h3 { margin-bottom: 16px; }
.p-kol p { color: var(--color-muted); }
.p-kol .btns { margin-top: 20px; }
.u-split > div > h2 + .card { margin-top: 28px; }
.sec[data-uklad="statement"] h2 + .lead { margin-top: 20px; max-width: 44em; }
.sec[data-uklad="statement"] .lead + .lead { margin-top: 12px; max-width: 44em; }
.u-grid > .card h3 { margin-bottom: 16px; }
.u-grid > .card p { color: var(--color-muted); }
.u-grid > .card .btns { margin-top: 20px; }
.u-strip--line > * { padding-bottom: 4px; }
.u-rows--plain li > .data { grid-column: 3; color: var(--color-accent); }
.u-rows--plain li { padding: 22px 0; }

/* Przyciski w bloku tekstu: bez stylu linku */
.prose a.btn { color: var(--on-action); text-decoration: none; }
.prose a.btn--line { color: currentColor; }
.u-statement + .lead { max-width: 44em; }

/* Stopka: dopisek grupy */
.foot__end a { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 760px) {
  .u-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 0; }
  .u-intro--sub { padding: 32px 0 24px; }
  .p-hero { margin: 0 calc(var(--gutter) * -0.5); height: 46vh; }
  .p-panel { grid-template-columns: minmax(0, 1fr); padding: var(--inset); }
  .p-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; padding: 36px var(--gutter); }
  .u-strip[style*="--cols:3"] { grid-template-columns: minmax(0, 1fr); }
}