/* =========================================
   TABLET
========================================= */

@media (max-width: 960px) {

  .desktop-nav,
  .nav-donate,
  .nav-container > .language-switcher {
    display: none;
  }


  .menu-button {
    display: block;
  }


  /* Mobile menu */

  .mobile-nav {
    position: fixed;

    top: 76px;
    left: 0;
    right: 0;

    z-index: 999;

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding:
      20px
      24px
      30px;

    background: var(--white);

    border-bottom:
      1px solid var(--border);

    box-shadow:
      0 12px 25px
      rgba(0, 0, 0, 0.06);

    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-10px);

    pointer-events: none;

    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 180ms ease;
  }


  .mobile-nav.active {
    opacity: 1;

    visibility: visible;

    transform:
      translateY(0);

    pointer-events: auto;
  }


  .mobile-nav a {
    padding:
      14px
      4px;

    color: var(--heading);

    font-weight: 500;

    border-bottom:
      1px solid var(--border);
  }


  .mobile-nav .btn {
    margin-top: 14px;
  }


  /* Hamburger */

  .menu-button.active span:nth-child(1) {
    transform:
      translateY(7px)
      rotate(45deg);
  }


  .menu-button.active span:nth-child(2) {
    opacity: 0;
  }


  .menu-button.active span:nth-child(3) {
    transform:
      translateY(-7px)
      rotate(-45deg);
  }


  /* Hero */

  .hero {
    padding-top: 48px;
  }


  .hero-container {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .hero-content {
    max-width: 760px;
  }


  .hero-description {
    max-width: 650px;
  }


  .hero-media {
    min-height: 570px;
  }


  /* =========================================
     AUTHORIZATION
  ========================================= */

  .authorization-section {
    padding:
      90px
      0;
  }


  .authorization-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.65fr);

    gap:
      55px;
  }


  .authorization-content h2 {
    font-size:
      clamp(
        2.3rem,
        5vw,
        3.4rem
      );
  }


  /* =========================================
     HOW DONATIONS HELP
  ========================================= */

  .help-section {
    padding:
      90px
      0;
  }


  .help-header {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-bottom: 55px;
  }


  .help-introduction {
    max-width: 650px;
  }


  .help-list {
    column-gap: 50px;
  }


  .help-footer {
    gap: 40px;

    margin-top: 55px;

    padding: 36px;
  }


  /* =========================================
     IMPACT
  ========================================= */

  .impact-section {
    padding:
      80px
      0;
  }


  /* =========================================
     TRANSPARENCY
  ========================================= */

  .transparency-section {
    padding:
      85px
      0;
  }


  .transparency-container {
    grid-template-columns: 1fr;

    gap: 35px;
  }


  .transparency-content {
    max-width: 680px;

    padding-top: 0;
  }


  /* =========================================
     DONATION CTA
  ========================================= */

  .donation-cta {
    padding:
      75px
      0;
  }


  .donation-cta-container {
    flex-direction: column;

    align-items: flex-start;

    gap: 40px;
  }

}
/* =========================================
   STORY
========================================= */

.story-section {
  padding:
    90px
    0;
}


.story-container {
  grid-template-columns: 1fr;

  gap: 55px;
}


.story-media {
  min-height: 600px;
}


.story-content {
  max-width: 720px;
}


/* =========================================
   STORY GALLERY
========================================= */

.story-gallery {
  margin-top:
    75px;
}


.story-gallery-item img {
  height:
    clamp(
      190px,
      26vw,
      250px
    );
}


.hope-section {
  padding:
    90px
    0;
}

/* =========================================
   CONTACT
========================================= */

.contact-section {
  padding:
    85px
    0;
}


.contact-container {
  grid-template-columns:
    0.8fr
    1fr;

  gap:
    50px;
}


/* =========================================
   FOOTER
========================================= */

.footer-main {
  grid-template-columns:
    1.4fr
    1fr
    1fr;

  gap:
    45px;
}


.footer-column:last-child {
  grid-column:
    2 / 3;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .container {
    width:
      min(
        calc(100% - 32px),
        var(--container)
      );
  }


  .nav-container {
    min-height: 68px;
  }


  .logo-mark {
    width: 34px;
    height: 34px;
  }


  .logo-text {
    font-size: 0.93rem;
  }


  .mobile-nav {
    top: 68px;
  }


  /* Hero */

  .hero {
    padding:
      40px
      0
      60px;
  }


  h1 {
    font-size:
      clamp(
        2.65rem,
        12vw,
        3.7rem
      );
  }


  .hero-description {
    margin-top: 22px;

    font-size: 1rem;

    line-height: 1.7;
  }


  .hero-actions {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

    margin-top: 30px;
  }


  .btn-large {
    width: 100%;
  }


  .hero-media {
    min-height: 440px;

    border-radius:
      var(--radius-medium);
  }


  /* =========================================
     MARLON RITTER AUTHORIZATION
  ========================================= */

  .authorization-section {
    padding:
      70px
      0;
  }


  .authorization-container {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  /* Put content before photo */

  .authorization-content {
    max-width:
      none;
  }


  .authorization-content h2 {
    margin-bottom:
      22px;

    font-size:
      2.35rem;
  }


  .authorization-lead {
    font-size:
      1rem;
  }


  .authorization-text {
    font-size:
      0.94rem;
  }


  /* Authorization note */

  .authorization-note {
    grid-template-columns:
      34px
      1fr;

    gap:
      12px;

    margin-top:
      27px;

    padding:
      18px;
  }


  .authorization-note-mark {
    width:
      30px;

    height:
      30px;
  }


  /* Photo */

  .authorization-person {
    max-width:
      100%;
  }


  .authorization-photo {
    aspect-ratio:
      4 / 4.7;

    border-radius:
      var(--radius-medium);
  }


  .authorization-person-info {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      3px;

    padding-top:
      14px;
  }


  /* =========================================
     HOW DONATIONS HELP
  ========================================= */

  .help-section {
    padding:
      75px
      0;
  }


  .help-header {
    margin-bottom: 42px;
  }


  .help-heading h2 {
    font-size: 2.35rem;
  }


  .help-introduction p {
    font-size: 0.96rem;
  }


  .help-list {
    grid-template-columns: 1fr;

    column-gap: 0;
  }


  .help-item {
    grid-template-columns:
      38px
      1fr;

    gap: 12px;

    min-height: auto;

    padding:
      28px
      0;
  }


  .help-item:hover {
    padding-left: 0;
  }


  .help-item-content h3 {
    font-size: 1.18rem;
  }


  .help-item-content p {
    font-size: 0.92rem;
  }


  .help-footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 28px;

    margin-top: 45px;

    padding: 30px 24px;

    border-radius:
      var(--radius-medium);
  }


  .help-footer .btn {
    width: 100%;
  }


  /* =========================================
     IMPACT STATEMENT
  ========================================= */

  .impact-section {
    padding:
      70px
      0;
  }


  .impact-container {
    text-align:
      left;
  }


  .impact-mark {
    height:
      42px;

    margin-bottom:
      4px;

    font-size:
      4rem;
  }


  .impact-container blockquote {
    font-size:
      clamp(
        2.05rem,
        9vw,
        2.8rem
      );

    line-height:
      1.17;
  }


  .impact-container p {
    margin-top:
      22px;
  }


  /* =========================================
     TRANSPARENCY
  ========================================= */

  .transparency-section {
    padding:
      70px
      0;
  }


  .transparency-heading h2 {
    font-size:
      2.35rem;
  }


  .transparency-container {
    gap: 30px;
  }


  /* =========================================
     DONATION CTA
  ========================================= */

  .donation-cta {
    padding:
      65px
      0;
  }


  .donation-cta-container {
    gap: 32px;
  }


  .donation-cta h2 {
    font-size:
      2.4rem;
  }


  .donation-cta-button {
    width: 100%;
  }


  /* =========================================
     DONATION MODAL
  ========================================= */

  .donation-modal {
    align-items: flex-end;

    padding: 0;
  }


  .donation-modal-dialog {
    width: 100%;

    max-height: 94vh;

    padding:
      32px
      22px
      26px;

    border-radius:
      24px
      24px
      0
      0;

    transform:
      translateY(40px);
  }


  .donation-modal.active
  .donation-modal-dialog {
    transform:
      translateY(0);
  }


  .donation-modal-close {
    top: 14px;
    right: 14px;
  }


  .donation-modal-header {
    padding-right: 30px;
  }


  .bitcoin-mark {
    width: 45px;
    height: 45px;

    margin-bottom: 20px;

    font-size: 1.35rem;
  }


  .donation-modal-header h2 {
    font-size: 1.85rem;
  }


  .donation-modal-header > p {
    font-size: 0.88rem;
  }


  /* =========================================
     PRIVACY POLICY MODAL
  ========================================= */

  .privacy-modal {
    align-items: flex-end;

    padding: 0;
  }


  .privacy-modal-dialog {
    width: 100%;

    max-height: 92vh;

    padding:
      32px
      22px
      28px;

    border-radius:
      24px
      24px
      0
      0;

    transform:
      translateY(40px);
  }


  .privacy-modal.active
  .privacy-modal-dialog {
    transform:
      translateY(0);
  }


  .privacy-modal-close {
    top: 14px;
    right: 14px;
  }


  .privacy-modal-header {
    padding-right: 30px;
  }


  .privacy-modal-header h2 {
    font-size: 1.7rem;
  }


  .privacy-modal-body {
    margin-top: 24px;
  }


  .privacy-section {
    margin-top: 24px;

    padding-top: 24px;
  }


  /* QR */

  .donation-qr-section {
    margin:
      25px
      0
      23px;
  }


  .donation-qr-card {
    width: 180px;
    height: 180px;

    padding: 10px;
  }


  .donation-qr-subtitle {
    max-width: 250px;

    line-height: 1.45;
  }


  /* DIVIDER */

  .donation-divider {
    margin:
      22px
      0;
  }


  /* WALLET */

  .wallet-address-box {
    flex-direction: column;

    align-items: stretch;

    gap: 10px;
  }


  .wallet-address-box code {
    padding:
      2px
      1px;

    text-align: center;
  }


  .wallet-copy-button {
    width: 100%;

    min-height: 42px;
  }


  /* NOTICE */

  .donation-notice {
    margin-top: 17px;
  }


  /* FOOTER */

  .donation-modal-footer {
    margin-top: 20px;
  }


  /* =========================================
     DONATION AMOUNTS
  ========================================= */

  .donation-amount-heading {
    margin-top:
      26px;
  }


  .donation-amount-grid {
    grid-template-columns:
      1fr;

    gap:
      9px;
  }


  .donation-amount-option {
    min-height:
      auto;

    padding:
      15px
      16px;

    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      20px;
  }


  .donation-amount {
    flex-shrink:
      0;

    font-size:
      1.15rem;
  }


  .donation-amount-description {
    max-width:
      190px;

    margin-top:
      0;

    text-align:
      right;
  }


  .other-amount-toggle {
    padding:
      16px;
  }


  .donation-continue-button {
    min-height:
      52px;
  }


  /* =========================================
     DONOR INFORMATION
  ========================================= */

  .donation-back-button {
    margin-bottom:
      20px;
  }


  .donor-donation-summary {
    margin:
      25px
      0;

    padding:
      16px;
  }


  .donor-summary-amount {
    font-size:
      1.3rem;
  }


  .donor-information-form {
    gap:
      20px;
  }


  .donor-field input,
  .donor-field select {
    min-height:
      50px;
  }

  /* =========================================
     BITCOIN PAYMENT
  ========================================= */

  .payment-summary {
    margin:
      24px
      0;

    padding:
      17px;
  }


  .payment-summary-row {
    grid-template-columns:
      100px
      minmax(0, 1fr);

    gap:
      12px;
  }


  .payment-summary-row strong {
    font-size:
      0.78rem;
  }


  #bitcoinPaymentStep
  .donation-qr-card {
    width:
      180px;

    height:
      180px;
  }


  .payment-currency-notice {
    padding:
      13px;
  }


  /* =========================================
     CONTACT
  ========================================= */

  .contact-section {
    padding:
      70px
      0;
  }


  .contact-container {
    grid-template-columns:
      1fr;

    gap:
      45px;
  }


  .contact-intro h2 {
    font-size:
      2.6rem;
  }


  .contact-item {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      auto;

    gap:
      14px;

    min-height:
      95px;
  }


  .contact-icon {
    width:
      38px;

    height:
      38px;
  }


  a.contact-item:hover {
    padding-left:
      0;
  }


  /* =========================================
     FOOTER
  ========================================= */

  .site-footer {
    padding:
      60px
      0
      25px;
  }


  .footer-main {
    grid-template-columns:
      1fr;

    gap:
      42px;

    padding-bottom:
      50px;
  }


  .footer-brand {
    max-width:
      none;
  }


  .footer-column:last-child {
    grid-column:
      auto;
  }


  .footer-bottom {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      14px;

    padding-top:
      22px;
  }


}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 390px) {

  .logo-text {
    max-width: 130px;

    line-height: 1.1;
  }


  .hero-media {
    min-height: 380px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    transition-duration:
      0.01ms !important;
  }

}