/* panbismarck.pl - wspolny wyglad strony glownej i podstron (oprocz errorsite). */
:root {
  --bg: #eef0f5;
  --card: #ffffff;
  --text: #1d2230;
  --muted: #7a8196;
  --line: #e2e5ec;
  --ring: rgba(29, 34, 48, 0.06);
  --yellow-bg: #fdf1c7; --yellow-fg: #8a6500;
  --blue-bg:   #dceaf3; --blue-fg:   #2c5a7a;
  --peach-bg:  #fbe1d8; --peach-fg:  #9a3b1c;
  --green-bg:  #dcefe1; --green-fg:  #2f6b3f;
  --lilac-bg:  #e6e0f7; --lilac-fg:  #4b3d8f;
  --mark-bg: #1d2230; --mark-fg: #fdf1c7;

  /* Ruch - jedno zrodlo prawdy, czyta je tez motion.js (MOTION.md) */
  --dur-micro: 150ms;
  --dur-ui: 300ms;
  --dur-scene: 700ms;
  --dur-hero: 3350ms;
  --beat: 250ms;
  --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11141d;
    --card: #1a1e2b;
    --text: #e8eaf2;
    --muted: #8b92a8;
    --line: #272c3b;
    --ring: rgba(0, 0, 0, 0.25);
    --yellow-bg: #3a3218; --yellow-fg: #f2d27a;
    --blue-bg:   #1d3140; --blue-fg:   #9cc6e2;
    --peach-bg:  #3d2620; --peach-fg:  #f2a98f;
    --green-bg:  #1f3326; --green-fg:  #9bd3aa;
    --lilac-bg:  #2b2645; --lilac-fg:  #c3b6f2;
    --mark-bg: #2a3044;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

.wrap { max-width: 960px; margin: 0 auto; padding: 56px 24px 40px; }

header { margin-bottom: 32px; }
.brand { font-size: 14px; color: var(--muted); }
h1 { font-size: clamp(32px, 6vw, 48px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 6px 0 0; }
h1 span { color: var(--muted); }
.lead { color: var(--muted); margin: 12px 0 0; max-width: 34em; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.card {
  background: var(--card);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 196px;
  box-shadow: 0 0 0 1px var(--ring), 0 10px 30px -18px var(--ring);
  transition: transform var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--ring), 0 18px 36px -20px rgba(29, 34, 48, 0.25); }
.card:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.card.wide { grid-column: span 2; }

.icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 24px; height: 24px; }
.yellow .icon { background: var(--yellow-bg); color: var(--yellow-fg); }
.blue   .icon { background: var(--blue-bg);   color: var(--blue-fg); }
.peach  .icon { background: var(--peach-bg);  color: var(--peach-fg); }
.green  .icon { background: var(--green-bg);  color: var(--green-fg); }
.lilac  .icon { background: var(--lilac-bg);  color: var(--lilac-fg); }

.card h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 4px 0 0; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip { font-size: 13px; padding: 4px 12px; border-radius: 999px; background: var(--bg); color: var(--text); }
.arrow { color: var(--muted); transition: transform var(--dur-ui) var(--ease-ui), color var(--dur-micro) linear; }
.card:hover .arrow { transform: translateX(3px); color: var(--text); }
.lilac .chip { background: var(--lilac-bg); color: var(--lilac-fg); }
.new { background: var(--blue-bg); color: var(--blue-fg); }

.gallery-head { display: flex; gap: 14px; align-items: center; }
.gallery-head h2 { margin: 0; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.thumbs img, .thumbs .ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; background: var(--blue-bg); }
.thumbs .ph { opacity: .55; }
.empty { border: 1.5px dashed var(--line); border-radius: 14px; padding: 18px; color: var(--muted); font-size: 15px; text-align: center; margin-top: 4px; }

footer { margin-top: 40px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13px; }
.secret { opacity: .45; transition: opacity var(--dur-micro) linear; }
.secret:hover { opacity: 1; }


/* --- Wspólne dla podstron --- */
.wrap.narrow { max-width: 640px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 24px; transition: color var(--dur-micro) linear; }
.back:hover { color: var(--text); }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.page-head .icon { width: 56px; height: 56px; border-radius: 18px; }
.page-head .icon svg { width: 28px; height: 28px; }
.page-head h1 { font-size: clamp(28px, 5vw, 36px); margin: 0; }
.page-head p { margin: 2px 0 0; color: var(--muted); }
.panel { background: var(--card); border-radius: 24px; padding: 24px; box-shadow: 0 0 0 1px var(--ring), 0 10px 30px -18px var(--ring); }
.btn { position: relative; font: inherit; font-size: 15px; border: 0; border-radius: 999px; padding: 10px 22px; cursor: pointer; background: var(--text); color: var(--card); transition: opacity var(--dur-micro) linear, transform var(--dur-micro) var(--ease-ui); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.soft { background: var(--bg); color: var(--text); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
@media (max-width: 760px) {
  .panel { padding: 18px; border-radius: 20px; }
}

@media (max-width: 760px) {
  .wrap { padding: 36px 16px 32px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { min-height: 0; padding: 16px; border-radius: 20px; }
  .card p { font-size: 14px; }
}
@media (max-width: 400px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card.wide { grid-column: auto; }
}
/* Motyw linii: cienka kreska rysowana od lewej. Tylko przyciski i samodzielne linki,
   nigdy linki w tekscie ciaglym. */
.btn::after, .back::after, .secret::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: currentColor; border-radius: 1px; pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-ui) var(--ease-ui);
}
.btn::after { left: 22px; right: 22px; bottom: 8px; opacity: .55; }
.back, .secret { position: relative; }
.btn:hover::after, .btn:focus-visible::after, .back:hover::after, .back:focus-visible::after, .secret:hover::after { transform: scaleX(1); }
.btn:disabled::after { display: none; }

/* Karty /ekipa/ - wejscie raz (motion.js dokleja .rv / .in) */
.card.rv { opacity: 0; transform: translateY(12px); }
.card.rv.in { opacity: 1; transform: none; transition: opacity var(--dur-scene) var(--ease-reveal), transform var(--dur-scene) var(--ease-reveal), box-shadow var(--dur-ui) var(--ease-ui); }
.card.rv.in:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .card, .arrow { transition: none; }
  .card:hover { transform: none; }
  .btn::after, .back::after, .secret::after { transition: none; }
  .card.rv { opacity: 1; transform: none; }
}