/*
 * Mobilná vrstva darovacej stránky.
 * Súbor sa načíta iba do šírky 767 px, takže desktopový vzhľad zostáva bez zmeny.
 */

:root {
  --mobile-gutter: 16px;
  --mobile-radius: 16px;
  --mobile-section-space: 52px;
}

html {
  scroll-padding-top: 12px;
}

body {
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font-size: 16px;
}

.hero-content,
.impact-inner,
.future-inner,
.story-inner,
.proof-inner,
.final-cta,
.donation-shell,
.bank-transfer-inner {
  width: calc(100% - (var(--mobile-gutter) * 2));
}

.donation-hero {
  min-height: max(720px, 100svh);
  align-items: end;
}

.hero-photo {
  inset: 0 0 auto;
  height: 66%;
  overflow: hidden;
}

.hero-photo img {
  object-position: 70% center;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(28 47 107 / 36%) 38%,
    var(--accent-strong) 100%
  );
  pointer-events: none;
}

.donation-hero::after {
  background:
    linear-gradient(180deg, rgb(9 17 49 / 26%) 8%, rgb(9 17 49 / 58%) 36%, rgb(9 17 49 / 96%) 82%),
    linear-gradient(90deg, rgb(9 17 49 / 62%), rgb(19 32 83 / 24%));
}

.site-bar {
  min-height: 72px;
  gap: 10px;
  padding:
    max(7px, env(safe-area-inset-top))
    max(var(--mobile-gutter), env(safe-area-inset-right))
    7px
    max(var(--mobile-gutter), env(safe-area-inset-left));
}

.site-logo {
  width: min(146px, 43vw);
  height: 52px;
}

.site-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.hero-content {
  padding: 108px 0 34px;
}

.donation-kicker {
  padding: 6px 10px;
  font-size: 0.67rem;
  line-height: 1.3;
}

h1 {
  max-width: 12ch;
  margin: 15px 0 14px;
  font-size: clamp(2.3rem, 10.8vw, 3rem);
  line-height: 0.99;
  letter-spacing: -0.035em;
}

.lead {
  max-width: 39ch;
  font-size: 0.98rem;
  line-height: 1.54;
}

.hero-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.primary-link,
.secondary-link {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 9px;
  text-align: center;
}

.assurances {
  display: grid;
  gap: 7px;
  margin-top: 21px;
  font-size: 0.79rem;
  line-height: 1.35;
}

.assurances li {
  padding-left: 15px;
}

.assurances li::before {
  top: 0.47em;
}

.future-inner,
.impact-inner,
.story-inner {
  padding-top: var(--mobile-section-space);
  padding-bottom: var(--mobile-section-space);
}

.future-top {
  grid-template-columns: 1fr;
  gap: 24px;
}

.future-heading h2,
.impact-intro h2,
.donation-copy > h2,
.bank-transfer-copy h2,
.story-heading h2,
.final-cta h2 {
  font-size: clamp(1.85rem, 8.5vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.future-alert {
  margin-top: 12px;
  font-size: 1.3rem;
  line-height: 1.15;
}

.video-player-slot {
  width: calc(100% + (var(--mobile-gutter) * 2));
  margin-left: calc(var(--mobile-gutter) * -1);
  aspect-ratio: 16 / 9;
}

.video-player-shell {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: 0 18px 44px rgb(28 47 107 / 18%);
  animation: none;
}

.video-player-shell.is-floating {
  position: fixed;
  z-index: 1000;
  inset:
    max(12px, env(safe-area-inset-top))
    12px
    auto
    auto;
  width: min(300px, calc(100vw - 24px));
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgb(9 8 13 / 38%);
  animation: video-float-in 180ms ease-out;
}

.video-float-close {
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  display: grid;
  font-size: 1.25rem;
}

.video-autoplay-button {
  top: 10px;
  bottom: auto;
  left: 10px;
  width: auto;
  min-height: 38px;
  max-width: calc(100% - 20px);
  gap: 6px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.72rem;
  line-height: 1;
  transform: none;
}

.video-autoplay-button span {
  font-size: 0.68rem;
}

.video-player-shell.is-floating .video-autoplay-button {
  top: 7px;
  left: 7px;
  max-width: calc(100% - 54px);
}

.future-statement {
  padding: 17px 18px;
  border-radius: 0 10px 10px 0;
  font-size: 1rem;
  line-height: 1.5;
}

.future-distribution {
  margin-top: 24px;
  border-radius: var(--mobile-radius);
}

.future-distribution-bar {
  display: none;
}

.future-thirds {
  display: grid;
  grid-template-columns: 1fr;
}

.future-third {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 18px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.future-third:last-child {
  border-bottom: 0;
}

.future-third strong {
  grid-row: 1 / span 2;
  margin: 0;
  font-size: 1.95rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.future-third > span {
  align-self: end;
  font-size: 1rem;
}

.future-third p {
  align-self: start;
  margin: 3px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.future-source-note {
  margin-top: 14px;
  font-size: 0.75rem;
  line-height: 1.45;
}

.future-callout {
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 26px;
  padding: 21px 18px;
  border-radius: 12px;
}

.future-callout strong {
  font-size: 1.2rem;
}

.future-callout p {
  font-size: 0.92rem;
  line-height: 1.5;
}

.future-answer {
  padding-top: 16px;
  padding-left: 0;
  border-top: 3px solid var(--brand-red);
  border-left: 0;
}

.fundraising-section {
  padding: 46px var(--mobile-gutter) 34px;
}

.fundraising-progress-card {
  grid-template-columns: 1fr;
  border-radius: var(--mobile-radius);
}

.raised-total {
  padding: 30px 22px 26px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.raised-total span {
  font-size: 0.73rem;
}

.raised-total strong {
  margin-top: 8px;
  font-size: clamp(3rem, 17vw, 4.35rem);
}

.next-milestone {
  padding: 25px 20px 24px;
}

.milestone-progress-copy {
  display: grid;
  gap: 14px;
}

.milestone-name {
  font-size: 1.15rem;
}

.milestone-target {
  min-width: 110px;
  justify-self: start;
  text-align: left;
}

.milestone-progress {
  height: 18px;
  margin: 21px 0 12px;
}

.milestone-progress-foot {
  gap: 10px;
  align-items: start;
}

.milestone-progress-foot strong {
  max-width: 48%;
  text-align: right;
}

.following-milestone {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
}

.following-milestone-label {
  grid-column: 1 / -1;
}

.supporter-section {
  padding: 14px 0 48px;
}

.supporter-heading {
  padding: 0 var(--mobile-gutter);
}

.supporter-heading h2 {
  max-width: 14ch;
  font-size: clamp(2rem, 9vw, 2.55rem);
}

.supporter-marquee {
  margin-top: 26px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--mobile-gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  mask-image: none;
}

.supporter-marquee::-webkit-scrollbar {
  display: none;
}

.supporter-track {
  width: max-content;
  animation: none;
}

.supporter-group {
  gap: 12px;
  padding: 0 var(--mobile-gutter);
}

.supporter-group[aria-hidden="true"] {
  display: none;
}

.supporter-group .supporter-card:first-child {
  margin-left: 0;
}

.supporter-card {
  width: min(318px, calc(100vw - 48px));
  min-height: 176px;
  padding: 19px;
  scroll-snap-align: start;
}

.impact-inner {
  /*
   * The later desktop design layer defines a two-column grid with a 480 px
   * minimum for the statistics. Explicitly collapse the parent grid here;
   * otherwise that minimum expands the document past the viewport on phones.
   */
  grid-template-columns: minmax(0, 1fr);
  gap: 31px;
}

.impact-intro p {
  font-size: 0.94rem;
}

.impact-stats {
  grid-template-columns: 1fr;
  border-radius: 12px;
  background: var(--soft);
}

.impact-stats div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 17px 14px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.impact-stats div:last-child {
  border-bottom: 0;
}

.impact-stats strong {
  margin: 0;
  font-size: 1.8rem;
}

.impact-stats span {
  font-size: 0.83rem;
}

.donation-section {
  padding: 48px 0 54px;
}

.donation-shell {
  grid-template-columns: 1fr;
  gap: 44px;
}

.donation-panel {
  width: 100%;
  padding: 22px 16px;
  border-radius: var(--mobile-radius);
  box-shadow: 0 18px 48px rgb(28 47 107 / 13%);
}

.panel-heading {
  margin-bottom: 22px;
}

.panel-heading h2 {
  font-size: 1.6rem;
}

.panel-heading p {
  font-size: 0.9rem;
}

.amount-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.choice span {
  min-height: 52px;
  border-radius: 9px;
}

.form-row {
  margin-bottom: 20px;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  min-height: 52px;
  border-radius: 9px;
}

.boxed-check,
.billing-fields {
  border-radius: 10px;
}

.check {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  margin: 14px 0;
}

.check input {
  width: 22px;
  height: 22px;
  margin-top: 0.08em;
}

.boxed-check {
  padding: 13px;
}

.submit-button {
  min-height: 56px;
  border-radius: 9px;
}

.legal-links {
  gap: 10px 16px;
  line-height: 1.35;
}

.donation-copy {
  padding-top: 0;
}

.copy-lead {
  margin-bottom: 19px;
  font-size: 0.96rem;
}

.use-list li {
  padding: 17px 0 17px 40px;
}

.fund-promise {
  margin-top: 23px;
  padding: 18px;
  border-radius: 12px;
}

.payment-dialog {
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: min(92dvh, 860px);
  margin: auto 0 0;
  border-radius: 20px 20px 0 0;
}

.dialog-header {
  padding:
    18px
    var(--mobile-gutter)
    15px;
}

.dialog-header h3 {
  font-size: 1.28rem;
}

.dialog-close {
  width: 42px;
  height: 42px;
}

.dialog-body {
  padding:
    18px
    var(--mobile-gutter)
    max(24px, env(safe-area-inset-bottom));
}

.dialog-actions {
  grid-template-columns: 1fr;
}

.dialog-back {
  order: 2;
  min-height: 52px;
}

.payment-method-grid,
.payment-method-grid.has-wallets,
.billing-grid {
  grid-template-columns: 1fr;
}

.payment-choice span {
  min-height: 64px;
}

.bank-transfer-inner {
  grid-template-columns: 1fr;
  gap: 27px;
  padding-top: var(--mobile-section-space);
  padding-bottom: var(--mobile-section-space);
}

.bank-transfer-copy p {
  font-size: 0.94rem;
}

.bank-payment-options {
  grid-template-columns: 1fr;
  gap: 26px;
}

.bank-details {
  border-radius: 12px;
  background: rgb(255 255 255 / 5%);
}

.bank-details > div {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px;
}

.bank-details code {
  font-size: clamp(0.82rem, 3.8vw, 1rem);
  letter-spacing: 0;
}

.pay-by-square {
  width: min(230px, 72vw);
  margin: 0 auto;
}

.story-heading {
  margin-bottom: 28px;
}

.story-heading p {
  font-size: 0.95rem;
}

.story-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.story-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--soft);
}

.story-grid article > span {
  margin-bottom: 12px;
}

.story-closing {
  margin-top: 28px;
  padding-top: 20px;
  font-size: 0.95rem;
}

.final-cta {
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  padding-top: 42px;
  padding-bottom: calc(42px + env(safe-area-inset-bottom));
}

@media (max-width: 374px) {
  :root {
    --mobile-gutter: 14px;
  }

  .donation-hero {
    min-height: 740px;
  }

  h1 {
    font-size: 2.2rem;
  }

  .site-logo {
    width: 136px;
  }

  .site-back {
    font-size: 0.76rem;
  }

  .future-third {
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 11px;
    padding: 16px 13px;
  }

  .future-third strong {
    font-size: 1.75rem;
  }

  .impact-stats div {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .raised-total,
  .next-milestone {
    padding-right: 17px;
    padding-left: 17px;
  }
}

/*
 * Telefóny otočené na šírku. Štýly sa na širších obrazovkách načítajú iba
 * na dotykových zariadeniach, aby sa nezmenilo desktopové rozhranie.
 */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  :root {
    --mobile-gutter: 24px;
    --mobile-section-space: 42px;
  }

  .donation-hero {
    min-height: max(600px, 100svh);
  }

  .site-bar {
    min-height: 66px;
    padding-top: max(5px, env(safe-area-inset-top));
    padding-bottom: 5px;
  }

  .site-logo {
    width: 148px;
    height: 50px;
  }

  .hero-content {
    padding: 94px 0 34px;
  }

  h1 {
    max-width: 14ch;
    font-size: clamp(2.55rem, 6vw, 3.35rem);
  }

  .lead {
    max-width: 64ch;
  }

  .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 240px));
    justify-content: start;
  }

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

  .future-inner,
  .impact-inner,
  .story-inner {
    padding-top: var(--mobile-section-space);
    padding-bottom: var(--mobile-section-space);
  }

  .video-player-slot {
    width: min(680px, calc(177.78svh - 50px), 100%);
    margin-right: auto;
    margin-left: auto;
  }

  .video-player-shell {
    border: 1px solid rgb(28 47 107 / 18%);
    border-radius: 12px;
  }

  .future-thirds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .future-third {
    display: block;
    padding: 18px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .future-third:last-child {
    border-right: 0;
  }

  .future-third strong {
    display: block;
    margin-bottom: 7px;
    text-align: left;
  }

  .future-third p {
    margin-top: 6px;
  }

  .fundraising-progress-card {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  }

  .raised-total {
    padding: 30px 26px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .next-milestone {
    padding: 28px 26px;
  }

  .impact-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .impact-stats div {
    display: block;
    padding: 18px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .impact-stats div:last-child {
    border-right: 0;
  }

  .impact-stats strong {
    display: block;
    margin-bottom: 8px;
  }

  .donation-panel {
    width: min(640px, 100%);
    margin: 0 auto;
    padding: 26px;
  }

  .amount-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .payment-dialog {
    inset: 0;
    width: min(640px, calc(100% - 24px));
    max-height: calc(100dvh - 16px);
    margin: auto;
    border-radius: 16px;
  }

  .payment-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-method-grid.has-wallets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .billing-grid {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.42fr);
  }

  .bank-details > div {
    grid-template-columns: 95px minmax(0, 1fr);
    align-items: center;
  }

  .story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .final-cta {
    flex-direction: row;
    align-items: center;
  }

  .final-cta .primary-link {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .supporter-marquee {
    scroll-behavior: auto;
  }
}

/* Keep the gentler desktop system intact when the mobile layer is active. */
.donation-hero {
  min-height: max(720px, 100svh);
  border-radius: 0;
}

.site-bar {
  width: calc(100% - 32px);
  min-height: 82px;
  padding: max(7px, env(safe-area-inset-top)) 0 7px;
}

.site-logo {
  width: min(162px, 48vw);
  height: 58px;
}

.site-back {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 0.62rem;
}

.hero-content {
  padding-top: 142px;
  padding-bottom: 52px;
}

h1 {
  max-width: 13ch;
  font-size: clamp(2.65rem, 12vw, 3.55rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.primary-link,
.secondary-link {
  border-radius: 999px;
}

.future-inner,
.impact-inner,
.story-inner {
  padding-top: 72px;
  padding-bottom: 76px;
}

.future-heading h2,
.impact-intro h2,
.donation-copy > h2,
.bank-transfer-copy h2,
.story-heading h2,
.final-cta h2 {
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.future-statement,
.future-callout {
  border-radius: 22px;
}

.future-callout {
  padding: 26px 22px;
}

.donation-section {
  padding: 72px 0 80px;
}

.donation-panel {
  padding: 25px 20px;
  border-radius: 23px;
}

.choice span,
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
.boxed-check,
.billing-fields,
.recurring-consent {
  border-radius: 13px;
}

.payment-dialog {
  border-radius: 22px;
}

.bank-transfer-inner,
.proof-inner {
  padding-top: 72px;
  padding-bottom: 74px;
}

.story-grid article {
  padding: 23px 20px;
}

.final-cta {
  margin: 0;
  padding: 64px 16px;
  border-radius: 0;
}

.final-cta-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  width: min(100% - 32px, 1180px);
}

.final-cta .primary-link {
  width: 100%;
}

.fundraising-section {
  padding: 66px 16px 34px;
}

.fundraising-progress-card {
  border-radius: 24px;
}

.thank-you-card {
  border-radius: 24px;
}

/* Preserve the parent-site logo lock-up in the mobile-only layer. */
.site-brand {
  gap: 10px;
}

.site-logo {
  width: 75px;
  height: auto;
}

.site-brand-title {
  font-size: 11px;
}

.future-alert {
  font-size: clamp(1.35rem, 7vw, 1.75rem);
  line-height: 1.02;
}