:root {
  --ink:#17332f;
  --muted:#66736f;
  --cream:#f7f3eb;
  --paper:#fffdf9;
  --green:#244f46;
  --green-2:#dfeae4;
  --orange:#e76f3c;
  --orange-dark:#c85427;
  --line:#dddcd4;
  --white:#fff;
  --shadow:0 22px 55px rgba(25,51,47,.1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
  line-height:1.55
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3,.button {
  font-family:"Manrope",sans-serif
}

a {
  color:inherit
}

button,input,select {
  font:inherit
}

.site-header {
  height:84px;
  padding:0 clamp(22px,5vw,78px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,253,249,.96);
  position:absolute;
  z-index:10;
  width:100%;
  color:var(--ink)
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none
}

.brand-mark {
  width:43px;
  height:43px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--green);
  color:white;
  font:800 14px Manrope
}

.brand strong,.brand small {
  display:block
}

.brand strong {
  font:800 15px Manrope;
  letter-spacing:.01em
}

.brand small {
  font-size:11px;
  color:var(--muted)
}

.header-link {
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid;
  padding-bottom:3px
}

.header-link span {
  color:var(--orange);
  margin-left:7px
}

.hero {
  min-height:790px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden
}

.hero-photo,.hero-shade {
  position:absolute;
  inset:84px 0 0;
  width:100%;
  height:calc(100% - 84px)
}

.hero-photo {
  object-fit:cover
}

.hero-shade {
  background:linear-gradient(90deg,rgba(15,42,37,.86) 0%,rgba(20,53,47,.62) 34%,rgba(20,53,47,.1) 66%,transparent 100%)
}

.hero-content {
  position:relative;
  z-index:2;
  color:white;
  width:min(610px,90%);
  margin:84px 0 0 clamp(22px,8vw,130px)
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:800;
  color:var(--orange);
  margin-bottom:18px
}

.hero h1 {
  font-size:clamp(43px,5.1vw,76px);
  line-height:1.03;
  letter-spacing:-.05em;
  margin-bottom:25px
}

.hero h1 em {
  font-style:normal;
  color:#f2b08f;
  display:block
}

.hero-lead {
  font-size:clamp(17px,1.55vw,21px);
  max-width:575px;
  color:rgba(255,255,255,.84);
  margin-bottom:33px
}

.button {
    border: 0;
    border-radius: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
}

.button:hover {
  transform:translateY(-2px)
}

.button-primary {
  background:var(--orange);
  padding:18px 23px;
  color:white;
  box-shadow:0 10px 30px rgba(231,111,60,.25)
}

.button-primary:hover {
  background:var(--orange-dark)
}

.hero-note {
  font-size:12px;
  margin:24px 0 0;
  color:rgba(255,255,255,.7)
}

.hero-note span {
  color:#f2b08f;
  margin-right:6px
}

.section {
  padding:100px clamp(22px,7vw,110px)
}

.section-heading {
  text-align:center;
  max-width:650px;
  margin:0 auto 48px
}

.section-heading h2,.donate-intro h2 {
  font-size:clamp(34px,4vw,54px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin-bottom:14px
}

.section-heading>p:last-child,.donate-intro>p:not(.eyebrow) {
  color:var(--muted);
  font-size:17px
}

.impact {
  background:var(--paper)
}

.impact-grid {
  max-width:1160px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.impact-card {
  min-height:150px;
  border-radius:7px;
  padding:33px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.impact-card .icon {
  font-size:27px
}

.impact-card h3 {
  font-size:24px;
  margin-bottom:7px
}

.impact-card p {
  margin:0;
  max-width:285px
}

.impact-teaching {
  background:var(--green);
  color:white
}

.impact-teaching p {
  color:#cbd9d4
}

.impact-sport {
  background:#e9b049;
  color:#332613
}

.impact-place {
  background:#dce9df;
  color:var(--ink)
}

.donate {
  display:grid;
  grid-template-columns:minmax(260px,430px) minmax(520px,700px);
  align-items:start;
  justify-content:center;
  gap:clamp(50px,8vw,125px);
  background:var(--paper)
}

.donate-intro {
  position:sticky;
  top:35px
}

.reassurance {
  margin-top:38px;
  border-top:1px solid var(--line);
  padding-top:22px;
  display:grid;
  gap:5px
}

.reassurance strong {
  font-family:Manrope;
  font-size:120%;
}

.reassurance span {
  color:var(--muted);
  font-size: 90%;
}

.donation-form {
  background:white;
  box-shadow:var(--shadow);
  border:1px solid #ebe9e2;
  border-radius:8px;
  overflow:hidden
}

.form-block {
  padding:36px 42px;
  border-bottom:1px solid #ebe9e2
}

.form-label-row {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:25px
}

.form-label-row h3 {
  margin:0;
  font-size:20px
}

.form-step {
  font:800 11px Manrope;
  color:var(--orange);
  background:#fff0e9;
  border-radius:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center
}

fieldset {
  border:0;
  padding:0;
  margin:0 0 22px
}

legend,.field label {
  display:block;
  font-weight:700;
  font-size:13px;
  margin-bottom:9px
}

label span> b,legend span,.field label>span {
  color:var(--orange)
}

.amount-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px
}

.amount-grid label {
  cursor:pointer
}

.amount-grid input {
  position:absolute;
  opacity:0;
  pointer-events:none
}

.amount-grid span {
  display:grid;
  place-items:center;
  min-height:52px;
  border:1px solid var(--line);
  border-radius:4px;
  font-weight:700;
  transition:.2s
}

.amount-grid input:checked+span {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}

.amount-grid input:focus-visible+span {
  outline:3px solid #eaa17f;
  outline-offset:2px
}

.field {
  margin-bottom:18px
}

.field:last-child {
  margin-bottom:0
}

.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}

.field input,.field select {
  width:100%;
  height:51px;
  border:1px solid #d9d8d1;
  border-radius:4px;
  background:#fff;
  padding:0 14px;
  color:var(--ink);
  outline:0
}

.field input:focus,.field select:focus {
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(36,79,70,.1)
}

.field label small {
  font-weight:400;
  color:var(--muted)
}

.other-amount[hidden] {
  display:none
}

.check {
  display:flex;
  gap:11px;
  margin:0 0 15px;
  font-size:13px;
  color:#4f5e59;
  align-items:flex-start
}

.check input {
  width:17px;
  height:17px;
  margin:2px 0 0;
  accent-color:var(--green);
  flex:0 0 auto
}

.check a {
  text-decoration-color:#aaa
}

.button-submit {
  width:100%;
  padding:19px 24px;
  margin-top:18px;
  background:var(--orange);
  color:white
}

.button-submit:hover {
  background:var(--orange-dark)
}

.button-submit:disabled {
  opacity:.65;
  cursor:wait
}

.secure-note {
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin:14px 0 0
}

.honeypot {
  position:absolute!important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}

.form-status {
  margin:24px 42px 0;
  padding:14px 16px;
  border-radius:5px;
  font-size:14px
}

.form-status.success {
  background:#e4f2e8;
  color:#18562d
}

.form-status.error {
  background:#fbe8e5;
  color:#8e2b1c
}

.how {
  background:var(--cream)
}

.steps {
  max-width:1160px;
  margin:auto;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  counter-reset:steps
}

.steps li {
  position:relative;
  text-align:center
}

.steps li:not(:last-child):after {
  content:"→";
  position:absolute;
  right:-26px;
  top:16px;
  color:#b3b7b2
}

.steps li>span {
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border-radius:50%;
  width:48px;
  height:48px;
  background:white;
  border:1px solid var(--line);
  color:var(--orange);
  font-weight:800
}

.steps h3 {
  font-size:18px;
  margin-bottom:7px
}

.steps p {
  font-size:15px;
  color:var(--muted);
  margin:0
}

.thanks {
  text-align:center;
  padding:100px 20px;
  background:var(--green);
  color:white
}

.thanks p {
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  color:#b8cec6
}

.thanks h2 {
  font-size:clamp(52px,7vw,92px);
  letter-spacing:-.06em;
  margin:0 0 12px;
  color:#f2b08f
}

.thanks span {
  font-size:14px
}

footer {
  padding:38px clamp(22px,7vw,110px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  background:#122d28;
  color:#aac0b9;
  font-size:12px
}

.footer-brand {
  color:white
}

.footer-brand .brand-mark {
  background:white;
  color:var(--green)
}

.footer-brand small {
  color:#aac0b9
}

footer p {
  margin:0
}

.consent-block {
  border:0
}

@media(max-width:900px) {
  .site-header {
    position:relative
  }

  .hero {
    min-height:690px
  }

  .hero-photo,.hero-shade {
    inset:0;
    height:100%
  }

  .hero-content {
    margin-top:0
  }

  .impact-grid {
    grid-template-columns:1fr
  }

  .impact-card {
    min-height:100px
  }

  .donate {
    grid-template-columns:1fr
  }

  .donate-intro {
    position:static;
    text-align:center;
    max-width:620px;
    margin:auto
  }

  .reassurance {
    text-align:left
  }

  .steps {
    grid-template-columns:repeat(2,1fr)
  }

  .steps li:nth-child(2):after {
    display:none
  }

  footer {
    flex-direction:column;
    text-align:center
  }

}

@media(max-width:600px) {
  .site-header {
    height:72px;
    padding:0 18px
  }

  .brand small {
    display:none
  }

  .header-link {
    font-size:13px
  }

  .hero {
    min-height:550px;
    align-items:flex-end;
    padding-bottom:55px
  }

  .hero-photo {
    object-position:40% center
  }

  .hero-shade {
    background:linear-gradient(0deg,rgba(14,42,37,.88) 0%,rgba(17,49,43,.55) 62%,rgba(17,49,43,.11) 100%)
  }

  .hero-content {
    margin-left:22px
  }

  .hero h1 {
    font-size:43px
  }

  .hero-lead {
    font-size:16px
  }

  .section {
    padding:72px 20px
  }

  .donate {
    gap:35px
  }

  .form-block {
    padding:28px 20px
  }

  .amount-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .field-row {
    grid-template-columns:1fr;
    gap:0
  }

  .form-status {
    margin:20px 20px 0
  }

  .steps {
    grid-template-columns:1fr;
    text-align:left;
    gap:25px
  }

  .steps li {
    display:flex;
    text-align:left;
    gap:16px
  }

  .steps li>span {
    margin:0;
    flex:0 0 auto
  }

  .steps li:after {
    display:none!important
  }

  .thanks {
    padding:75px 20px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .button {
    transition:none
  }

}

/* Úpravy značky a rozšířeného formuláře */
.header-logo {
  display:block;
  width:auto;
  height:48px;
  max-width:min(370px,55vw);
  object-fit:contain;
  margin-left: 50px;

}

.hero-content>.eyebrow {
  font-size:16px;
  letter-spacing:.15em
}

.button-primary {
  padding:21px 29px;
  font-size:16px
}

.hero-note {
  font-size:16px;
  font-weight:600
}

.donor-type-fieldset {
  margin-bottom:24px
}

.donor-type-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.donor-type-grid label {
  cursor:pointer
}

.donor-type-grid input {
  position:absolute;
  opacity:0;
  pointer-events:none
}

.donor-type-grid span {
  display:grid;
  place-items:center;
  min-height:52px;
  border:1px solid var(--line);
  border-radius:4px;
  font-weight:700;
  transition:.2s
}

.donor-type-grid input:checked+span {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}

.donor-type-grid input:focus-visible+span {
  outline:3px solid #eaa17f;
  outline-offset:2px
}

.company-fields[hidden] {
  display:none
}

.field textarea {
  display:block;
  width:100%;
  min-height:125px;
  border:1px solid #d9d8d1;
  border-radius:4px;
  background:#fff;
  padding:13px 14px;
  color:var(--ink);
  outline:0;
  resize:vertical
}

.field textarea:focus {
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(36,79,70,.1)
}

.footer-logo {
  display:block;
  height:38px;
  width:auto;
  max-width:280px;
  object-fit:contain
}

.footer-brand {
  background:#fff;
  border-radius:5px;
  padding:7px 12px
}

@media(max-width:600px) {
  .header-logo {
    height:36px;
    margin-left: 0px;

    max-width:58vw
  }

  .hero-content>.eyebrow {
    font-size:14px;
    color: white;
  }

  .button-primary {
    font-size:14px
  }

  .hero-note {
    font-size:16px
  }

  .donor-type-grid {
    grid-template-columns:1fr
  }

  .footer-logo {
    height:30px;
    max-width:240px
  }

}

.impact-teaching {
  background: #5FA65A;
}

.impact-teaching p {
  color: rgba(255, 255, 255, 0.88);
}

.impact-sport {
  background: #05B4BA;
  color: #fff;
}

.impact-place {
  background: #EA5558;
  color: #fff;
}

.donate-intro > .eyebrow {
  font-size: 17px;
  letter-spacing: 0.15em;
}

.thank-you-page {
  min-height: 100vh;
  background: var(--cream);
}

.thank-you-header {
  position: static;
  background: var(--paper);
}

.thank-you-main {
  padding: 70px 20px 100px;
}

.thank-you-shell {
  width: min(1060px, 100%);
  margin: 0 auto;
}

.thank-you-heading {
  max-width: 760px;
  margin: 0 auto 45px;
  text-align: center;
}

.thank-you-heading h1 {
  margin-bottom: 18px;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.thank-you-heading > p:last-child {
  color: var(--muted);
  font-size: 18px;
}

.thank-you-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(330px, 1.15fr);
  gap: 24px;
  align-items: start;
}

.delivery-warning {
  width: min(760px, 100%);
  margin: -18px auto 32px;
  padding: 15px 18px;
  border: 1px solid #e8c56b;
  border-radius: 6px;
  background: #fff8df;
  color: #725718;
  text-align: center;
  font-weight: 600;
}

.summary-card,
.payment-card,
.error-card {
  padding: 36px;
  border: 1px solid #e5e2da;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.summary-card h2,
.payment-card h2,
.error-card h1 {
  margin-bottom: 22px;
  font-size: 25px;
}

.summary-list {
  margin: 0;
}

.summary-row {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid #eeece6;
}

.summary-row:last-child {
  border-bottom: 0;
}

.summary-row dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.summary-row dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.payment-card {
  text-align: center;
}

.payment-amount {
  margin-bottom: 7px;
  color: var(--orange);
  font: 800 clamp(32px, 4vw, 45px) Manrope, sans-serif;
}

.account-number {
  margin-bottom: 22px;
  font-weight: 700;
}

.qr-code {
  display: block;
  width: min(280px, 100%);
  height: auto;
  margin: 0 auto 20px;
  border: 10px solid #fff;
}

.payment-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.thank-you-actions {
  margin-top: 28px;
  text-align: center;
}

.error-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.error-card p {
  color: var(--muted);
}

@media (max-width: 800px) {
  .thank-you-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {
  .thank-you-main {
    padding-top: 45px;
  }

  .summary-card,
  .payment-card,
  .error-card {
    padding: 26px 20px;
  }

  .summary-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

}