/* =========================================================================
   3Dedruk.pl — design system
   Nagłówki: Space Grotesk (self-hosted). Tekst: systemowy sans. Dane liczbowe: mono.
   ========================================================================= */

@font-face {
  font-family: "Space Grotesk";
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/SpaceGrotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/SpaceGrotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Zawsze jasny motyw — celowa decyzja, nie tylko domyślna wartość.
 * Odbiorcy to rodzice szukający zajęć dla dzieci; strona ma wyglądać tak samo
 * przyjaźnie i czytelnie niezależnie od trybu ciemnego ustawionego w systemie
 * odwiedzającego, więc nie podążamy za prefers-color-scheme.
 */
:root {
  --bg: #ffffff;
  --bg-elevated: #f3f2ef;
  --ink: #241a22;
  --ink-soft: #6b5a63;
  --ink-faint: #97878e;
  --line: #e9e7e4;
  --line-strong: #d5d2ce;

  --accent: #fb7185;
  --accent-hover: #f45571;
  --accent-strong: #be123c;
  --accent-ink: #241a22;
  --teal: #1d9a8d;
  --teal-strong: #157e73;
  --yellow: #f6b93b;

  --pill-new-bg: #fce4e7;
  --pill-new-ink: #9f1239;
  --pill-progress-bg: #e2f2ef;
  --pill-progress-ink: #157e73;
  --pill-done-bg: #eaf1d9;
  --pill-done-ink: #5a7220;
  --pill-warn-bg: #fdecc8;
  --pill-warn-ink: #92400e;

  --shadow: 0 1px 2px rgba(36, 26, 34, 0.06), 0 10px 28px -14px rgba(36, 26, 34, 0.22);
  --radius: 16px;
  --radius-sm: 10px;
  --container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .logo, .btn, .nav a, .stage-badge, .tag {
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.6vw, 36px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
a { color: var(--teal-strong); }
img { max-width: 100%; display: block; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.section-head { max-width: 62ch; margin-bottom: 36px; }
.section-head p { color: var(--ink-soft); font-size: 18px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong);
  margin-bottom: 10px;
}
.eyebrow::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-disabled:hover { transform: none; }

/* Header / nav */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.logo { font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.logo .dot { color: var(--accent); }
.logo img { height: 40px; width: auto; display: block; }
.footer-grid .logo img { height: 32px; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a:not(.btn) {
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 10px 14px; border-radius: 10px; position: relative;
  transition: color .15s ease, font-size .15s ease;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: 0; transform: scaleX(0.6); transform-origin: center;
  box-shadow: 0 0 8px 1px rgba(251, 113, 133, 0.7);
  transition: opacity .15s ease, transform .15s ease;
}
.nav a:not(.btn):hover { color: var(--accent-strong); font-size: 16px; }
.nav a:not(.btn):hover::after { opacity: 1; transform: scaleX(1); }
.nav a:not(.btn).active { color: var(--ink); }
.nav a:not(.btn).active::after { opacity: 1; transform: scaleX(1); }
.nav-toggle {
  display: none; background: none; border: 2px solid var(--line-strong); border-radius: 10px;
  width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); position: relative;
  transition: transform .15s ease, opacity .15s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 76px; left: 0; right: 0; background: var(--bg-elevated);
    border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch;
    padding: 12px; gap: 4px; display: none; box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 14px 16px; }
  .nav .btn { margin-top: 8px; }
}

/* Hero */
.hero { padding: 56px 0 64px; }
.hero .container { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.hero-copy p.lede { font-size: 19px; color: var(--ink-soft); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
/* Komunikaty oferty (cena wejścia, wybór 1 z 4 etapów, brak przymusu kupna kursu):
   stepper 1-2-3-4 — podświetlenie przechodzi po kolejnych etapach, żeby pokazać, że można wziąć jeden. */
.hero-offer { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.hero-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-shrink: 0; }
.hero-steps li {
  position: relative; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink-faint);
  background: var(--bg); border: 2px solid var(--line-strong);
  animation: hero-step 8s infinite; animation-delay: calc((var(--i) - 1) * 2s);
}
.hero-steps li:nth-child(1) { --i: 1; }
.hero-steps li:nth-child(2) { --i: 2; }
.hero-steps li:nth-child(3) { --i: 3; }
.hero-steps li:nth-child(4) { --i: 4; }
.hero-steps li + li { margin-left: 16px; }
.hero-steps li + li::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: var(--line-strong);
}
@keyframes hero-step {
  0%, 22% { background: var(--yellow); border-color: var(--yellow); color: var(--accent-ink); box-shadow: 0 0 0 5px var(--pill-warn-bg); }
  28%, 100% { background: var(--bg); border-color: var(--line-strong); color: var(--ink-faint); box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-steps li { animation: none; }
  .hero-steps li:nth-child(1) { background: var(--yellow); border-color: var(--yellow); color: var(--accent-ink); box-shadow: 0 0 0 5px var(--pill-warn-bg); }
}
.hero-offer-copy { min-width: 0; }
.hero-offer-copy p { margin: 0; }
.hero-offer-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--ink); }
.hero-offer-sub { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.hero-offer-sub b { color: var(--accent-strong); font-weight: 700; }
.hero-art {
  position: relative;
  background: var(--bg-elevated); border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 14px; text-align: center; padding: 24px; overflow: hidden;
}
.hero-art-photo { padding: 0; }
.hero-art-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; gap: 30px; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: -2; font-size: 22px; }
  .hero-art { order: -1; }
  /* hero-copy jest tu "display: contents", więc dzieci dzielą 30px gap gridu — dociągamy chipy do lede */
  .hero-copy p.lede { margin-bottom: 0; }
  .hero-offer { margin-top: -16px; }
  .hero-actions { margin-top: 0; }
}

/* Trust strip — warm yellow accent bar, deliberately breaks from the light page chrome */
.trust-strip {
  background: var(--pill-warn-bg); border-radius: 28px; box-shadow: var(--shadow);
  display: flex; align-items: stretch; padding: 4px 8px;
}
.trust-item { flex: 1; display: flex; align-items: center; gap: 16px; padding: 20px 20px; text-align: left; }
.trust-item + .trust-item { border-left: 1px solid rgba(36, 26, 34, 0.1); }
.trust-item .n {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
  background: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 800; color: var(--accent-ink);
}
.trust-item .t { font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--ink-soft); max-width: 15ch; }
.trust-item .t b { color: var(--ink); font-weight: 700; }

@media (max-width: 860px) {
  .trust-strip { flex-wrap: wrap; border-radius: 20px; }
  .trust-item { flex: 1 1 50%; }
  .trust-item:nth-child(2) { border-left: 1px solid rgba(36, 26, 34, 0.1); }
  .trust-item:nth-child(3), .trust-item:nth-child(4) { border-left: none; border-top: 1px solid rgba(36, 26, 34, 0.1); }
}
@media (max-width: 480px) {
  .trust-item { flex: 1 1 100%; }
  .trust-item:nth-child(2) { border-left: none; border-top: 1px solid rgba(36, 26, 34, 0.1); }
}

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card {
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.card[hidden] { display: none; }
/* Wider minimum so the course cards (zapisy.php) never squeeze into 4 per row;
   auto-fill keeps a lone (e.g. date-filtered) card at column width instead of stretching it. */
.card-grid-courses { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card .stage-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px;
}
.card .duration { font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.card p { color: var(--ink-soft); font-size: 15px; margin-bottom: 0; }
.card a.card-link { margin-top: auto; font-weight: 600; text-decoration: none; }
.icon-badge {
  width: 56px; height: 56px; border-radius: 16px; background: var(--pill-new-bg);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}

/* Program path — light cards. Desktop: a snaking flex-wrap row joined by arrows, which is what
   naturally lands the certificate tile mid-row as a highlighted "destination" (its dark inversion
   against the light siblings does the rest). Narrower widths drop the arrows for a plain stacked grid. */
.path-badge-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: var(--pill-new-bg); color: var(--pill-new-ink); font-size: 13.5px; font-weight: 600; margin-bottom: 18px;
}
.path-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }
.path-card {
  width: 220px; flex-shrink: 0; background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.path-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.path-number {
  width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
  font-family: "Space Grotesk", sans-serif;
}
.path-duration {
  font-size: 12px; font-weight: 700; color: var(--pill-new-ink); background: var(--pill-new-bg);
  padding: 4px 10px; border-radius: 999px;
}
.path-card h3 { font-size: 17px; margin-bottom: 8px; }
.path-card p { color: var(--ink-soft); font-size: 14px; margin-bottom: 0; }
.path-arrow { color: var(--ink-faint); font-size: 22px; flex-shrink: 0; }
.path-card-certificate {
  background: var(--ink); border-color: transparent; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.path-icon-circle {
  width: 60px; height: 60px; border-radius: 50%; background: rgba(251, 113, 133, 0.18);
  border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 6px;
}
.path-card-certificate h3 { color: #fff; }
.path-card-certificate p { color: rgba(255, 255, 255, 0.55); font-size: 13.5px; }

@media (max-width: 860px) {
  .path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .path-arrow { display: none; }
  .path-card { width: auto; }
  .path-card-certificate { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .path-grid { grid-template-columns: 1fr; }
}

/* Program stage sections */
.stage {
  display: grid; grid-template-columns: 90px 1fr; gap: 24px;
  padding: 32px 0; border-top: 1px solid var(--line);
}
.stage:first-of-type { border-top: none; }
.stage-number {
  width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;
}
.stage-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.stage-duration {
  font-size: 13px; font-weight: 700; color: var(--pill-new-ink); background: var(--pill-new-bg);
  padding: 3px 10px; border-radius: 999px;
}
.stage ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-soft); }
.stage li { margin-bottom: 6px; }
@media (max-width: 640px) { .stage { grid-template-columns: 1fr; } .stage-number { margin-bottom: 8px; } }

/* Forms */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 14.5px; }
.field .hint { font-size: 13px; color: var(--ink-faint); }
input, textarea, select {
  font: inherit; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong);
  background: var(--bg-elevated); color: var(--ink); width: 100%;
}
textarea { resize: vertical; min-height: 120px; }
input[readonly] { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }
input[type="checkbox"] { width: auto; accent-color: var(--accent); }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.checkbox-row input { margin-top: 4px; }
.field-error { color: var(--accent-strong); font-size: 13.5px; }

/* Zapisy: wybór pakietu i etapów (tylko zajęcia grupowe) */
.stages-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.stages-field[hidden], .stages-pick[hidden], .stages-field .hint[hidden] { display: none; }
.stages-field legend { font-weight: 600; font-size: 14.5px; padding: 0; margin-bottom: 8px; }
.plan-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.plan-option {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.plan-option:hover { border-color: var(--accent-strong); }
.plan-option:has(input:checked) { border-color: var(--accent-strong); background: var(--pill-new-bg); }
.plan-option input, .stage-option input { width: auto; flex: none; padding: 0; }
.plan-option-text { display: flex; flex-direction: column; gap: 2px; }
.plan-option-label { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.plan-option-price { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--accent-strong); white-space: nowrap; }
.stages-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.stage-option {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 14.5px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.stage-option:has(input:checked) { border-color: var(--accent-strong); background: var(--pill-new-bg); }
.stage-option input { margin-top: 4px; }
.stage-option small { color: var(--ink-faint); margin-left: 4px; }
.form-alert {
  border-left: 4px solid var(--accent); background: var(--pill-new-bg); color: var(--pill-new-ink);
  padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 20px; font-size: 14.5px;
}
.form-alert.success { border-color: var(--teal); background: var(--pill-progress-bg); color: var(--pill-progress-ink); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Pills / status */
.pill { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.pill-new { background: var(--pill-new-bg); color: var(--pill-new-ink); }
.pill-progress { background: var(--pill-progress-bg); color: var(--pill-progress-ink); }
.pill-done { background: var(--pill-done-bg); color: var(--pill-done-ink); }
.pill-warn { background: var(--pill-warn-bg); color: var(--pill-warn-ink); }

/* Zapisy: kalendarz dat startu + filtr kart */
.course-calendar-wrap { display: flex; gap: 40px; align-items: flex-start; margin-bottom: 36px; }
.course-calendar-wrap[hidden] { display: none; }
.course-calendar {
  flex: 0 0 340px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendar-title { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 17px; }
.calendar-nav {
  width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent;
  color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer;
}
.calendar-nav:hover:not([disabled]) { border-color: var(--accent-strong); color: var(--accent-strong); }
.calendar-nav[disabled] { opacity: .35; cursor: not-allowed; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendar-weekday { font-size: 12px; font-weight: 700; color: var(--ink-faint); padding: 4px 0; }
.calendar-day {
  position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 14px; color: var(--ink-faint); border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; font-family: inherit; padding: 0;
}
button.calendar-day { color: var(--ink); font-weight: 700; background: var(--bg); border-color: var(--line-strong); cursor: pointer; }
button.calendar-day:hover { border-color: var(--accent-strong); }
button.calendar-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.calendar-dots { display: flex; gap: 3px; height: 6px; }
.calendar-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.calendar-dot-grupowe { background: var(--accent-strong); }
.calendar-dot-indywidualne { background: var(--teal); }
button.calendar-day[aria-pressed="true"] .calendar-dot { box-shadow: 0 0 0 1px var(--accent-ink); }
.course-calendar-side { flex: 1; min-width: 0; }
.course-calendar-side p { margin: 0 0 14px; }
.calendar-legend { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ink-soft); }
.calendar-legend li { display: inline-flex; align-items: center; gap: 8px; }
.calendar-status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-weight: 700; }
.calendar-status[hidden] { display: none; }
#course-results { scroll-margin-top: 96px; }
.course-section.is-filtering .card[data-filtered-out] { display: none; }
/* Klikalna karta grupy (main.js dodaje .is-selectable): prowadzi do formularza z wybraną grupą. */
.card.is-selectable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card.is-selectable:hover { transform: translateY(-3px); border-color: var(--accent-strong); box-shadow: 0 16px 32px -14px rgba(36, 26, 34, 0.32); }
.card-cta { margin-top: auto; font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; color: var(--accent-strong); text-decoration: none; }
.card-cta::after { content: " →"; }
.card.is-selectable:hover .card-cta, .card-cta:hover { text-decoration: underline; }
#formularz { scroll-margin-top: 96px; }
.field-flash { animation: field-flash 1.4s ease; }
@keyframes field-flash {
  0%, 60% { box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.55); border-radius: var(--radius-sm); }
  100% { box-shadow: 0 0 0 4px rgba(251, 113, 133, 0); }
}
.calendar-prompt {
  text-align: center; padding: 32px 20px; margin-bottom: 36px; border: 2px dashed var(--line-strong);
  border-radius: var(--radius); color: var(--ink-soft);
}
.calendar-prompt[hidden] { display: none; }
.calendar-prompt-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.calendar-prompt p { margin: 0; font-size: 18px; }
.calendar-prompt b { color: var(--ink); }

/* Blok informacyjny na zapisy.php: opis warsztatów + cennik */
.offer-info {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; margin-bottom: 36px; box-shadow: var(--shadow);
}
.offer-info-copy p { color: var(--ink-soft); font-size: 17px; }
.offer-info-copy b { color: var(--ink); }
.offer-info-copy .offer-info-note { color: var(--ink); font-weight: 600; margin-bottom: 0; }
.price-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.price-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; font-weight: 600;
}
.price-list li small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-faint); }
.price-list .price-tag { white-space: nowrap; }
.price-list .price-list-best { background: var(--pill-warn-bg); border-color: var(--yellow); }
.price-list .price-list-solo { margin-top: 8px; }
@media (max-width: 860px) {
  .offer-info { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
}
@media (max-width: 860px) {
  .course-calendar-wrap { flex-direction: column; gap: 24px; }
  .course-calendar { flex-basis: auto; width: 100%; max-width: 420px; }
}

/* Upcoming dates (homepage) */
.dates-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; max-width: none; }
.dates-link { color: var(--accent-strong); font-weight: 600; text-decoration: none; white-space: nowrap; margin-bottom: 2px; }
.dates-link:hover { color: var(--accent-hover); }
.date-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.date-card-top .pill { flex-shrink: 0; white-space: nowrap; }
.date-badge { font-weight: 700; font-size: 17px; }
.date-card h3 { font-size: 17px; }
.date-card p { font-size: 14.5px; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.gallery-grid figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--line); }
.gallery-grid img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.gallery-grid figcaption { padding: 10px 12px; font-size: 13px; color: var(--ink-soft); }
.gallery-placeholder {
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 13px; text-align: center; padding: 16px;
}

/* Bento variant — deliberately uneven tile sizes on wide screens instead of a uniform grid.
   Sized for exactly the 6 photos the homepage query returns (index.php caps it at LIMIT 6):
   tile 1 big (2x2), tiles 2-3 small, tile 4 wide (2x1), tiles 5-6 big (2x2, square-ish) —
   a 4-col x 4-row grid that fills with no leftover gaps. Collapses to a plain even grid on
   narrow screens, where mixed spans would just look broken. */
.gallery-bento {
  grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; grid-auto-flow: dense;
}
.gallery-bento > *:nth-child(1),
.gallery-bento > *:nth-child(5),
.gallery-bento > *:nth-child(6) { grid-column: span 2; grid-row: span 2; }
.gallery-bento > *:nth-child(4) { grid-column: span 2; }
.gallery-bento figure { height: 100%; }
.gallery-bento img, .gallery-bento .gallery-placeholder { aspect-ratio: auto; height: 100%; }

@media (max-width: 720px) {
  .gallery-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-bento > *:nth-child(1),
  .gallery-bento > *:nth-child(4),
  .gallery-bento > *:nth-child(5),
  .gallery-bento > *:nth-child(6) { grid-column: span 1; grid-row: span 1; }
}

/* Print showcase — single-slide carousel (druk-na-zlecenie.php "Nasze realizacje").
   .print-showcase-wrap lives outside any .container in the markup (a direct child of the
   page flow) so it's full-width for free, with no 100vw/negative-margin trick needed —
   that trick was tried first but required overflow-x:hidden on html/body as a safety net,
   which silently breaks position:sticky sitewide (site header, showcase pin-and-wipe).
   .print-showcase-stage keeps the actual slide centered and narrow. Arrows are absolutely
   positioned on the stage so they sit right on the image's left/right edge. One slide
   visible at a time; arrows shift .print-showcase-track by translateX, CSS transition does
   the slide animation so JS only ever toggles an index. */
.print-showcase-wrap {
  background: rgba(255, 254, 252, 0.9); padding: 40px 24px; margin-bottom: 48px;
}
.print-showcase-stage { position: relative; max-width: 400px; margin: 0 auto; }
.print-showcase-viewport { overflow: hidden; border-radius: var(--radius-sm); }
.print-showcase-track { display: flex; transition: transform .45s ease; }
.print-showcase-slide { flex: 0 0 100%; margin: 0; }
.print-showcase-slide img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.print-showcase-slide figcaption { padding: 10px 4px 0; font-size: 14px; color: var(--ink-soft); text-align: center; }
.print-showcase-arrow {
  position: absolute; top: 50%; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--bg-elevated); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.print-showcase-prev { left: 0; transform: translate(-50%, -50%); }
.print-showcase-next { right: 0; transform: translate(50%, -50%); }
.print-showcase-arrow:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* Desktop/notebook: a larger slide (4:3 → 560×420) still fits a 768px-tall laptop viewport. */
@media (min-width: 861px) {
  .print-showcase-stage { max-width: 560px; }
}

@media (max-width: 600px) {
  /* Horizontal padding must clear half the arrow's width (it straddles the stage edge via
     translate(±50%, -50%)) or its outer sliver pokes past the viewport and forces a
     horizontal scrollbar. Arrow is 36px here, so half is 18px — 22px padding clears it. */
  .print-showcase-wrap { padding: 28px 22px; }
  .print-showcase-arrow { width: 36px; height: 36px; font-size: 18px; }
}

/* Showcase — dark section that pins on scroll; a line wipes down over the frame to reveal
   the 3D print underneath, and scrolling back up retracts it. Runway height is set by JS. */
/* Tło jest na .showcase-pin-sticky (dopasowane do wysokości treści), nie na .showcase-pin-wrap
   (który jest wysoki na potrzeby scrolla) — inaczej na wysokich ekranach (np. iPad Pro pionowo)
   pod treścią widać duży, pusty ciemny pas, zanim użytkownik zacznie przewijać. */
.showcase-intro-mobile { display: none; }

.showcase-pin-wrap { position: relative; }
.showcase-pin-sticky { position: sticky; top: 96px; padding: 72px 0; background: var(--ink); }
.showcase-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.showcase-copy .eyebrow { color: var(--accent); }
.showcase-copy .eyebrow::before { background: var(--accent); }
.showcase-copy h2 { color: #fff; }
.showcase-copy p { color: rgba(255, 255, 255, 0.65); font-size: 17px; max-width: 46ch; }
.showcase-progress { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.showcase-progress-track { flex: 1; max-width: 220px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.showcase-progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; }
.showcase-progress span { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.showcase-visual { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.showcase-progress-mobile { display: none; }

.showcase-frame {
  position: relative; width: min(440px, 78vw); aspect-ratio: 3/4; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--ink);
}
.showcase-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.showcase-img-print { z-index: 1; }
.showcase-img-real { z-index: 2; clip-path: inset(0 0 0 0); }
.showcase-line {
  position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, white), transparent);
  box-shadow: 0 0 20px 4px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 6px 1px #fff;
}

/* On large/high-res desktops the 72px pin padding leaves the sticky box shorter than the
   viewport, so the section below peeks in and visibly slides up while the pin is still
   engaged. More padding fills the viewport so the pin holds cleanly. The frame also gets
   a bit bigger — the .showcase-grid column has room up to ~480px before it'd start
   squeezing the copy column. */
@media (min-width: 1500px) {
  .showcase-pin-sticky { padding: 200px 0; }
  .showcase-frame { width: 480px; }
}

@media (max-width: 860px) {
  /* Tekst przewija się normalnie nad przypiętą sekcją zamiast dzielić z nią wysokość —
     inaczej na niskich ekranach (np. iPhone SE) obrazek nigdy w całości nie mieści się
     w widoku podczas animacji i użytkownik widzi tylko jej końcówkę. */
  .showcase-intro-mobile { display: block; background: var(--ink); padding: 56px 0 40px; }
  .showcase-grid { grid-template-columns: 1fr; gap: 24px; }
  .showcase-grid .showcase-copy { display: none; }
  .showcase-copy p { max-width: none; }
  .showcase-pin-sticky { padding: 120px 0; }
  .showcase-progress-mobile { display: flex; margin-top: 0; }
}
/* Phones taller than iPhone SE (667px) have enough room that they don't need the full
   pre-scroll buffer .showcase-intro-mobile gives short screens — bumping `top` here makes
   the pin (and so the reveal, see PIN_TOP in main.js) engage sooner/with less scrolling.
   Must stay in sync with the TALL_MOBILE_PIN_TOP constant in assets/js/main.js. */
@media (max-width: 860px) and (min-height: 700px) {
  .showcase-pin-sticky { top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-line { display: none; }
}

/* FAQ — accordion cards; answer height animates via a 0fr/1fr grid-rows trick so it
   doesn't need JS to measure content height. Only one item is open at a time. */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius);
}
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 600; color: var(--ink);
}
.faq-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--pill-new-bg);
  position: relative; transition: transform .2s ease;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--accent-strong);
  transform: translate(-50%, -50%);
}
.faq-icon::before { width: 12px; height: 2px; }
.faq-icon::after { width: 2px; height: 12px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-item.is-open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { margin: 0; padding: 0 26px 22px; color: var(--ink-soft); font-size: 15px; max-width: 68ch; }
.faq-more { margin-top: 28px; color: var(--ink-soft); }
.faq-more a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.faq-more a:hover { color: var(--accent-hover); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 28px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.footer-grid h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-family: -apple-system, sans-serif; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-grid a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.footer-grid a:hover { color: var(--accent-strong); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 20px; }
.social-links { display: flex; gap: 14px; margin-top: 16px; }
.social-links a { color: var(--ink-soft); display: inline-flex; }
.social-links a:hover { color: var(--accent-strong); }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.callout {
  border-left: 4px solid var(--accent); background: var(--bg-elevated); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 20px; box-shadow: var(--shadow); font-size: 15px; color: var(--ink-soft);
}
.callout-accent { border-left-color: var(--accent); background: var(--pill-new-bg); color: var(--pill-new-ink); }
.callout-accent a { color: var(--accent-strong); }
.price-tag { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.price-tag-pending { font-family: inherit; font-weight: 600; font-size: 14.5px; color: var(--ink-faint); }
.map-embed { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map-embed iframe { display: block; width: 100%; height: 360px; border: 0; }