/* Третья страница по page_3.png. Общие шрифт, шапка и подвал — в styles.css. */
.donation-page .home-link { color: inherit; text-decoration: none; border-radius: 5px; }
.donation-container,
.donation-page .site-footer > .container { width: min(88.5%, 1476px); }

/* Фон сохраняет исходные пропорции и плавно уходит в белый под карточкой. */
.donation-main { position: relative; isolation: isolate; }
.donation-background { position: absolute; z-index: -1; inset: 0 0 auto; display: block; pointer-events: none; }
.donation-background img { width: 100%; height: auto; }
.donation-hero { padding: clamp(36px, 3.125vw, 52px) 0 clamp(40px, 3.7vw, 62px); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.05vw, 18px);
  margin-bottom: clamp(28px, 2.7vw, 45px);
  padding-block: 6px;
  color: var(--blue);
  font-size: clamp(15px, 1.9vw, 28px);
  letter-spacing: .105em;
  line-height: 1.2;   
  text-decoration: none;
}
.back-link svg { flex-shrink: 0; width: clamp(24px, 2vw, 33px); height: 22px; transition: transform 220ms var(--ease); }
.donation-title { font-size: clamp(44px, 4.85vw, 80px); font-weight: 700; line-height: 1.05; }
.donation-description { margin-top: 18px; font-size: clamp(22px, 2.05vw, 34px); line-height: 1.25; }

/* Широкая белая карточка, таблица слева и голубая вставка справа. */
.payment-card {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr);
  align-items: start;
  gap: 0 clamp(28px, 4vw, 66px);
  padding: clamp(26px, 2.5vw, 42px) clamp(26px, 2.5vw, 42px) clamp(26px, 2.5vw, 42px) clamp(28px, 3.125vw, 52px);
  border: 2px solid var(--line);
  border-radius: clamp(22px, 1.875vw, 32px);
  background: #fff;
}
.requisites-section, .purpose-section { min-width: 0; }
.payment-eyebrow { color: var(--blue); font-size: clamp(20px, 1.875vw, 31px); line-height: 1.25; letter-spacing: .105em; }
.payment-card h2 { margin-top: 7px; font-size: clamp(36px, 3.4vw, 56px); font-weight: 700; line-height: 1.1; }
.bank-details { margin: clamp(20px, 1.7vw, 28px) 0 0; }
.bank-row {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 6px 12px;
  padding-block: clamp(7px, .54vw, 9px);
  border-bottom: 2px solid var(--line);
  font-size: clamp(18px, 1.68vw, 28px);
  line-height: 1.25;
}
.bank-row:first-child { padding-top: 0; }
.bank-row:last-child { padding-bottom: 0; border-bottom: 0; }
.bank-row dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.copy-value { user-select: text; }
.copy-value.is-copyable {
  max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 3px;
  background: transparent; color: inherit; font: inherit; text-align: left;
  overflow-wrap: anywhere; cursor: copy;
  transition: color 180ms ease, background-color 180ms ease;
}
.purpose-section {
  padding: clamp(18px, 1.25vw, 22px) clamp(22px, 1.8vw, 30px) clamp(22px, 1.875vw, 31px);
  border-radius: clamp(22px, 1.875vw, 32px);
  background: #dfe9ff;
}
.purpose-section h2 { margin-top: 11px; font-size: clamp(32px, 3vw, 50px); line-height: 1.02; }
.purpose-description { margin-top: 16px; font-size: clamp(20px, 1.68vw, 28px); line-height: 1.2; }
.payment-purpose {
  display: block; width: 100%; margin: 14px 0 0;
  padding: clamp(14px, 1.05vw, 18px);
  border: 2px solid var(--blue);
  border-radius: clamp(20px, 1.8vw, 30px);
  background: #fff; color: var(--ink); font-family: inherit;
  font-size: clamp(19px, 1.58vw, 26px); font-weight: 400; line-height: 1.12;
  text-align: left; overflow-wrap: anywhere; user-select: text;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.payment-purpose.is-copyable { cursor: copy; }
.donation-thanks {
  margin-top: clamp(22px, 1.875vw, 31px);
  padding-top: clamp(14px, 1.15vw, 19px);
  border-top: 2px solid var(--accent-line);
  font-size: clamp(19px, 1.58vw, 26px); line-height: 1.12;
}
.copy-status { font-size: 16px; line-height: 1.4; }
.copy-status:not(:empty) { margin-top: 16px; }
.donation-page .site-footer { padding-block: clamp(56px, 5vw, 84px) 40px; }

@media (min-width: 1440px) {
  .donation-page .header-inner { width: min(91.5%, 1530px); min-height: clamp(156px, 10.88vw, 181px); padding-block: 30px; }
  .donation-page .logo-slot { height: clamp(80px, 5.65vw, 94px); }
  .donation-page .logo-slot--mai { width: clamp(78px, 5.85vw, 98px); }
  .donation-page .logo-slot--institute { width: clamp(62px, 4.5vw, 75px); }
  .donation-page .institute-name { max-width: 720px; font-size: clamp(24px, 1.875vw, 31px); }
  .donation-page .header-partner { font-size: clamp(18px, 1.38vw, 23px); }
  .donation-page .footer-brand { font-size: clamp(30px, 2.4vw, 40px); }
  .donation-page .social-link { width: 50px; height: 50px; }
  .donation-page .footer-bottom { margin-top: 76px; padding-top: 32px; font-size: 16px; }
}
@media (hover: hover) and (pointer: fine) {
  .back-link:hover { text-decoration: underline; text-underline-offset: 6px; }
  .back-link:hover svg { transform: translateX(-3px); }
  .copy-value.is-copyable:hover { color: #005fcc; background: #f1f6ff; }
  .payment-purpose.is-copyable:hover { background: #f7faff; box-shadow: 0 4px 16px rgb(45 54 91 / .06); }
}

/* На планшетах и телефонах блок назначения располагается под реквизитами. */
@media (max-width: 1050px) {
  .donation-desktop-break { display: none; }
  .donation-background img { height: 440px; object-fit: cover; object-position: center; }
  .donation-title { max-width: 810px; font-size: clamp(40px, 5.2vw, 54px); }
  .donation-description { max-width: 800px; font-size: 24px; }
  .payment-card { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 30px; }
  .payment-card h2 { font-size: 38px; }
  .payment-eyebrow { font-size: 22px; }
  .bank-row { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); padding-block: 11px; font-size: 21px; }
  .purpose-section { padding: 24px; }
  .purpose-section h2 { font-size: 34px; }
  .purpose-section h2 br, .donation-thanks br { display: none; }
  .purpose-description { font-size: 21px; }
  .payment-purpose { font-size: 21px; line-height: 1.3; }
  .donation-thanks { font-size: 21px; line-height: 1.3; }
}
@media (max-width: 600px) {
  .donation-container, .donation-page .site-footer > .container { width: calc(100% - 40px); }
  .donation-hero { padding: 26px 0 32px; }
  .back-link { gap: 10px; margin-bottom: 25px; font-size: 17px; letter-spacing: .035em; }
  .back-link svg { width: 22px; height: 20px; }
  .donation-title { font-size: clamp(32px, 8.2vw, 44px); line-height: 1.08; }
  .donation-description { margin-top: 18px; font-size: 20px; line-height: 1.3; }
  .donation-background img { height: 410px; object-position: 60% top; }
  .payment-card { gap: 25px; padding: 22px 20px; border-radius: 22px; }
  .payment-eyebrow { font-size: 17px; letter-spacing: .055em; }
  .payment-card h2 { margin-top: 9px; font-size: 31px; }
  .bank-details { margin-top: 24px; }
  .bank-row { grid-template-columns: minmax(0, 1fr); gap: 5px; padding-block: 12px; font-size: 19px; line-height: 1.35; }
  .bank-row dt { font-size: 16px; color: #545e7c; }
  .purpose-section { padding: 21px 18px; border-radius: 20px; }
  .purpose-section h2 { font-size: 29px; line-height: 1.1; }
  .purpose-description, .payment-purpose, .donation-thanks { font-size: 18px; line-height: 1.3; }
  .payment-purpose { padding: 14px; border-radius: 18px; }
  .donation-page .site-footer { padding-block: 36px 30px; }
}
@media (max-width: 370px) {
  .donation-container, .donation-page .site-footer > .container { width: calc(100% - 32px); }
  .payment-card { padding-inline: 16px; }
  .bank-row { font-size: 18px; }
  .purpose-section { padding-inline: 14px; }
  .purpose-section h2 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { .back-link:hover svg { transform: none; } }