/* ===========================================================================
   /wesprzyj-rozwoj

   Loaded on top of home.css, which already owns the top bar, the buttons and
   the footer. Only what is new to this page lives here.

   The page is deliberately quiet: no glow, no countdown, no animation on the
   amounts. A page asking for voluntary money reads as honest in proportion to
   how little it shouts.
   =========================================================================== */

.support__main {
  padding-block: 34px 70px;
  display: flex;
  flex-direction: column;
  gap: 46px;
}

/* ---- the artwork ---------------------------------------------------------
   A fixed frame rather than a bare <img>: the author's file is not sized yet,
   and a picture that changes the page's height when it lands would move every
   button under it. The ratio is the one a wide banner falls into naturally. */

.support__art {
  display: block;
  width: 100%;
  aspect-ratio: 1480 / 520;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}

/* Sama grafika dostaje swoje proporcje, nie proporcje ramki.

   Ramka powyżej to baner 1480x520, a rysunek jest 16:9. Przy `cover` różnica
   nie skaluje, tylko obcina — przepadłaby góra z plakatami i dół z psem, czyli
   dokładnie to, co robi tę ilustrację ciepłą. Kadr jest tu treścią, więc to
   ramka ustępuje.

   `max-height` pilnuje drugiej strony: pełne 16:9 na szerokości 1480 px to
   ponad 830 px wysokości i cała reszta strony spada pod ekran. Dopiero gdy ten
   limit zadziała, wraca przycięcie — `object-position` trzyma wtedy pas z
   biurkiem i psem, bo ucina głównie sufit.

   Zakres tylko na <img>, żeby pusta ramka (.support__art--empty) została
   banerem, jakim była. */
img.support__art {
  aspect-ratio: 16 / 9;
  max-height: 68vh;
  object-position: center 60%;
}

.support__art--empty {
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  border-style: dashed;
  border-color: var(--line);
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 201, 60, .035) 0 14px,
      transparent 14px 28px),
    var(--panel);
  box-shadow: none;
}

.support__art--empty span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.support__art--empty i {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-3);
  opacity: .7;
}

/* ---- the pitch ----------------------------------------------------------- */

/* The reading column is narrow, but the block that holds it stays full
   width: with `max-width` on the block itself the auto side margins of
   `.shellwidth` would centre the paragraphs, and they would no longer line
   up with the left edge of the cards below them. */
.support__pitch > *,
.support__fine  > * { max-width: 78ch; }

.support__eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.support__title {
  margin: 0 0 18px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.01em;
}

.support__lead {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}

.support__lead b { color: var(--ink); }

/* ---- the four amounts ----------------------------------------------------
   auto-fit rather than four fixed columns so the row folds to two and then to
   one without a media query per step. */

.support__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}

.tier--featured {
  border-color: rgba(255, 201, 60, .55);
  background: linear-gradient(180deg, rgba(255, 201, 60, .07), transparent 60%), var(--panel);
}

.tier__flag {
  position: absolute;
  top: -10px;
  left: 22px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #1a1204;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tier__amount {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}

.tier__amount i {
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-3);
}

.tier__any { color: var(--ink-3); }

.tier__label {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.tier--featured .tier__label { color: var(--accent); }

.tier__note {
  margin: 0;
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

.tier__btn {
  margin-top: 12px;
  width: 100%;
}

/* The inert state of a button, not a third kind of button: same size, same
   place, obviously not pressable. */
.tier__btn--off {
  border-style: dashed;
  border-color: var(--line);
  color: var(--ink-3);
  cursor: not-allowed;
}

.tier__btn--off:hover { background: transparent; border-color: var(--line); }

/* ---- what it buys, and what it does not ---------------------------------- */

.support__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.support__card {
  padding: 24px 24px 20px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--panel);
}

.support__card--yes { border-left-color: var(--ok); }
.support__card--no  { border-left-color: var(--ink-3); }

.support__card h2 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.support__card--yes h2 { color: var(--ok); }
.support__card--no  h2 { color: var(--ink-2); }

.support__card u { text-underline-offset: 3px; }

.support__card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support__card li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.support__card li::before {
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 900;
}

.support__card--yes li::before { content: "+"; color: var(--ok); }
.support__card--no  li::before { content: "–"; color: var(--ink-3); }

.support__ps {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---- small print --------------------------------------------------------- */

.support__fine h2 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.support__fine dl { margin: 0; }

.support__fine dt {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.support__fine dt:first-of-type { margin-top: 0; }

.support__fine dd {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* `margin-block`, not the `margin` shorthand: the shorthand would wipe out
   the auto side margins `.shellwidth` gives it and the line would slide to
   the very edge of the viewport. */
.support__thanks {
  margin-block: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .support__main { gap: 34px; padding-block: 24px 50px; }
  .support__art  { aspect-ratio: 16 / 10; }
}