/* ============================================================
   e-wypominki.pl — style strony parafii i strony podziękowania
   Paleta: granat / złoto / kość słoniowa · Lora + Inter
   ============================================================ */
:root{
  --granat:#16264A;
  --granat-c:#0E1A36;
  --zloto:#C8A250;
  --zloto-j:#E3C77E;
  --kosc:#F7F3EA;
  --atrament:#2A2A33;
  --szary:#5A5A66;
  --linia:#E7E0D2;
  --blad:#A33131;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--atrament);
  background:var(--kosc);
  line-height:1.65;
}
.serif{font-family:'Lora',serif}
a{color:var(--granat)}

/* ── Nagłówek strony parafii ─────────────────────────────── */
.hero{
  background:linear-gradient(175deg,var(--granat) 0%,var(--granat-c) 100%);
  color:#fff;
  text-align:center;
  padding:56px 20px 46px;
}
.hero .korona{width:82px;height:auto;margin-bottom:16px}
.hero .parafia{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zloto-j);font-weight:600;
}
.hero h1{
  font-family:'Lora',serif;font-weight:600;
  font-size:clamp(30px,5vw,46px);
  margin-top:10px;letter-spacing:.01em;
}
.hero .motto{
  margin:24px auto 0;max-width:560px;
  font-family:'Lora',serif;font-style:italic;
  color:#C9D2E4;font-size:17px;line-height:1.7;
}
.hero .motto small{
  display:block;margin-top:10px;font-family:'Inter',sans-serif;
  font-style:normal;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:#7E8CAB;
}

/* ── Układ ───────────────────────────────────────────────── */
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.sekcja{padding:52px 0 8px}
.separator{text-align:center;margin-bottom:14px}

/* ── Karty informacyjne ──────────────────────────────────── */
.info-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.info-grid .karta{
  background:#fff;border:1px solid var(--linia);
  border-top:3px solid var(--zloto);border-radius:10px;
  padding:26px 26px 22px;
}
.karta .etykieta{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zloto);font-weight:600;margin-bottom:8px;
}
.karta h2{
  font-family:'Lora',serif;color:var(--granat);
  font-size:21px;margin-bottom:10px;line-height:1.35;
}
.karta p{font-size:15px;color:var(--szary);margin-top:8px}
.karta p strong{color:var(--atrament)}

/* ── Formularz ───────────────────────────────────────────── */
.formularz{
  background:#fff;border:1px solid var(--linia);border-radius:12px;
  padding:34px 30px 30px;margin:24px 0 60px;
  box-shadow:0 14px 34px rgba(22,38,74,.07);
}
.formularz h2{
  font-family:'Lora',serif;color:var(--granat);font-size:26px;
}
.formularz .pod{margin:8px 0 22px;font-size:14px;color:var(--szary)}

.bledy{
  background:#FBEFEF;border:1px solid #E4BCBC;border-left:4px solid var(--blad);
  border-radius:8px;padding:14px 18px;margin-bottom:22px;
}
.bledy ul{list-style:none}
.bledy li{color:var(--blad);font-size:14px;padding:3px 0}
.bledy li::before{content:"✕ ";font-weight:600}

/* wybór rodzaju wypominek */
.wybor-typu{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin-bottom:22px;
}
.wybor-typu input[type=radio]{
  position:absolute;opacity:0;pointer-events:none;
}
.wybor-typu label{
  display:block;cursor:pointer;border:1.5px solid var(--linia);
  border-radius:10px;padding:16px 18px;background:#FDFCF8;
  transition:border-color .15s, box-shadow .15s;
}
.wybor-typu input:checked + label{
  border-color:var(--zloto);
  box-shadow:0 0 0 3px rgba(200,162,80,.18);
  background:#FFFDF6;
}
.wybor-typu input:focus-visible + label{outline:2px solid var(--granat);outline-offset:2px}
.wybor-typu input:disabled + label{opacity:.45;cursor:not-allowed}
.wybor-typu .t{
  display:block;font-family:'Lora',serif;font-weight:600;
  color:var(--granat);font-size:17px;
}
.wybor-typu .d{display:block;margin-top:4px;font-size:13px;color:var(--szary)}

/* pola */
.pole{margin-bottom:20px}
.pole label{
  display:block;font-weight:600;font-size:14px;
  color:var(--granat);margin-bottom:7px;
}
.wym{color:var(--blad)}
.pole input[type=text],
.pole input[type=tel],
.pole input[type=email],
.pole input[type=number],
.pole select,
.pole textarea{
  width:100%;font:inherit;font-size:15px;color:var(--atrament);
  border:1.5px solid var(--linia);border-radius:8px;
  padding:11px 14px;background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.pole textarea{min-height:130px;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{
  outline:none;border-color:var(--zloto);
  box-shadow:0 0 0 3px rgba(200,162,80,.18);
}
.hint{margin-top:6px;font-size:13px;color:var(--szary)}

.dwie-kolumny{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
@media (max-width:640px){
  .dwie-kolumny{grid-template-columns:1fr}
  .formularz{padding:26px 18px 24px}
}

.kwota-box{position:relative;max-width:240px}
.kwota-box .zl{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--szary);font-size:15px;pointer-events:none;
}
.kwota-box input{padding-right:44px}

/* przycisk */
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  font:inherit;font-weight:600;font-size:16px;color:#fff;
  background:linear-gradient(180deg,var(--granat) 0%,var(--granat-c) 100%);
  border-radius:9px;padding:14px 30px;margin-top:6px;
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(22,38,74,.25)}
.btn:focus-visible{outline:3px solid var(--zloto);outline-offset:2px}
.formularz .btn{width:100%;text-align:center}
.oplata-info{margin-top:14px;text-align:center;font-size:13px;color:var(--szary)}

/* ── Stopka ──────────────────────────────────────────────── */
footer{
  background:var(--granat-c);color:#AEB8CC;text-align:center;
  padding:28px 20px;font-size:14px;
}
footer .p{color:#fff;font-family:'Lora',serif;margin-bottom:4px}
footer a{color:#AEB8CC}

/* ── Strona podziękowania ────────────────────────────────── */
.wynik{
  max-width:620px;margin:56px auto;padding:44px 34px 38px;
  background:#fff;border:1px solid var(--linia);
  border-top:4px solid var(--zloto);border-radius:12px;
  text-align:center;box-shadow:0 16px 40px rgba(22,38,74,.08);
}
.wynik .ikona{margin-bottom:16px}
.wynik h1{
  font-family:'Lora',serif;color:var(--granat);
  font-size:clamp(24px,4vw,32px);margin-bottom:12px;line-height:1.3;
}
.wynik > p{color:var(--szary);font-size:15px}
.wynik .box{
  margin:24px 0 8px;padding:20px 22px;text-align:left;
  background:#FDFCF8;border:1px solid var(--linia);border-radius:10px;
  font-size:15px;
}
.wynik .box p{padding:3px 0}
.wynik .box strong{color:var(--granat)}
.wynik .btn{margin-top:22px}
@media (max-width:680px){
  .wynik{margin:24px 16px;padding:32px 20px 28px}
}