/* ==========================================================================
   Donate — "Choose Your Impact" (native-block build)
   Styles native Gutenberg blocks (Cover / Columns / Group / Heading /
   Paragraph / Buttons / Image) via className hooks so the page is fully
   editable, removable and reorderable in the editor while keeping the design.
   Scoped under .page-template-page-donate.
   ========================================================================== */
.page-template-page-donate {
  --color-dark: #263042;
  --color-blue-light: #215988;
  --color-card-bg: #fffef9;
  --color-card-border: #e3eff6;
  --color-orange: #fc7957;
  --font-heading: 'Alice', serif;
  --font-body: 'Montserrat', sans-serif;
  font-family: var(--font-body);
  color: var(--color-dark);
}
.page-template-page-donate .wp-block-heading { font-family: var(--font-heading); }

/* Buttons — reuse theme button look, coral + outline variants */
.page-template-page-donate .give-btn .wp-block-button__link { border-radius: 100px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 14px; padding: 15px 30px; }
.page-template-page-donate .give-btn--solid .wp-block-button__link { background: var(--color-orange); color: #0a1324; }
.page-template-page-donate .give-btn--solid .wp-block-button__link:hover { background: #e8654a; }
.page-template-page-donate .give-btn--glass .wp-block-button__link { background: rgba(255,255,255,0.12); border: 1px solid #fff; color: #fff; }
.page-template-page-donate .give-btn--glass .wp-block-button__link:hover { background: rgba(255,255,255,0.22); }
.page-template-page-donate .give-btn--outline .wp-block-button__link { background: transparent; border: 1.5px solid var(--color-card-border); color: var(--color-blue-light); }
.page-template-page-donate .give-btn--outline .wp-block-button__link:hover { border-color: var(--color-orange); color: var(--color-orange); }

/* === Editorial hero (background via --lto-hero-image / Featured Image) === */
.page-template-page-donate .give-hero { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; background-color: var(--color-dark); background-image: var(--lto-hero-image, url('../images/support-banner-bg.jpg')); background-size: cover; background-position: center; padding: 120px var(--wp--preset--spacing--48, 40px) 132px; }
.page-template-page-donate .give-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,48,66,0.62) 0%, rgba(38,48,66,0.42) 42%, rgba(38,48,66,0.9) 100%); z-index: 0; }
.page-template-page-donate .give-hero > * { position: relative; z-index: 1; }
.page-template-page-donate .give-hero__inner { max-width: 760px; margin-right: auto; }
.page-template-page-donate .give-hero__eyebrow { font-size: 16px; letter-spacing: 3.36px; text-transform: uppercase; color: #88c3f3; margin: 0; }
.page-template-page-donate .give-hero__title { font-size: 60px; line-height: 1.08; letter-spacing: 0.6px; color: #fff; margin: 18px 0 0; }
.page-template-page-donate .give-hero__title span { color: #daf5f2; }
.page-template-page-donate .give-hero__lead { font-size: 20px; line-height: 32px; color: rgba(255,255,255,0.9); margin: 22px 0 0; max-width: 620px; }
.page-template-page-donate .give-hero__cta { margin-top: 32px; gap: 16px; }

/* Wave into the header base */
.page-template-page-donate .give-hero-wave { position: relative; z-index: 2; margin-top: -120px; margin-bottom: -1px; line-height: 0; pointer-events: none; }
.page-template-page-donate .give-hero-wave svg { display: block; width: 100%; height: 120px; }

/* === Section scaffolding === */
.page-template-page-donate .give-section { padding: 88px var(--wp--preset--spacing--48, 40px); }
.page-template-page-donate .give-section--tight { padding: 64px var(--wp--preset--spacing--48, 40px); }
.page-template-page-donate .give-section__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.page-template-page-donate .give-eyebrow { font-weight: 500; font-size: 16px; color: var(--color-blue-light); letter-spacing: 3.36px; text-transform: uppercase; margin: 0 0 12px; }
.page-template-page-donate .give-title { font-size: 46px; color: var(--color-dark); letter-spacing: 0.8px; line-height: 1.12; margin: 0; }
.page-template-page-donate .give-lead { font-size: 18px; line-height: 28px; color: #55606e; margin: 16px 0 0; }

/* === Impact tiers (Cover cards in Columns) === */
.page-template-page-donate .impact-tiers { gap: 24px; margin: 0 auto; max-width: 1528px; }
.page-template-page-donate .impact-tiers .wp-block-column { min-width: 0; }
.page-template-page-donate .tier.wp-block-cover { border-radius: 16px; overflow: hidden; min-height: 420px; align-items: flex-end; justify-content: flex-end; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.page-template-page-donate .tier.wp-block-cover:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(10,20,40,0.28); }
.page-template-page-donate .tier .wp-block-cover__inner-container { width: 100%; padding: 28px 26px 30px; }
.page-template-page-donate .tier__amount { font-size: 40px; line-height: 1; color: #fff; margin: 0; }
.page-template-page-donate .tier__outcome { font-size: 15px; line-height: 22px; margin: 12px 0 0; color: rgba(255,255,255,0.95); }
.page-template-page-donate .tier__give { margin: 18px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.page-template-page-donate .tier__give a { color: #fff; text-decoration: none; border-bottom: 2px solid var(--color-orange); padding-bottom: 4px; }
.page-template-page-donate .tier--featured.wp-block-cover { outline: 3px solid var(--color-orange); outline-offset: -3px; }
.page-template-page-donate .tier__badge { display: inline-block; align-self: flex-start; background: var(--color-orange); color: #0a1324; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; margin: 0 0 14px; }
.page-template-page-donate .tiers-note { text-align: center; margin-top: 32px; color: #55606e; }
.page-template-page-donate .tiers-note a { color: var(--color-blue-light); font-weight: 600; }

/* === Ocean Guardian monthly band (Cover block: editable background image) === */
.page-template-page-donate .guardian { color: #fff; }
.page-template-page-donate .guardian.wp-block-cover { min-height: 0; padding: 80px var(--wp--preset--spacing--48, 40px); background-color: var(--color-dark); }
.page-template-page-donate .guardian .wp-block-cover__inner-container { width: 100%; }
.page-template-page-donate .guardian__inner { gap: 56px; align-items: center; max-width: 1528px; margin: 0 auto; }
.page-template-page-donate .guardian__eyebrow { font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: #88c3f3; margin: 0; }
.page-template-page-donate .guardian__title { font-size: 44px; line-height: 1.12; color: #fff; margin: 14px 0 0; }
.page-template-page-donate .guardian__body { font-size: 18px; line-height: 28px; color: rgba(255,255,255,0.88); margin: 18px 0 0; max-width: 520px; }
.page-template-page-donate .guardian__list { margin: 24px 0 0; padding: 0; list-style: none; }
.page-template-page-donate .guardian__list li { font-size: 15px; color: rgba(255,255,255,0.9); padding-left: 28px; position: relative; margin: 0 0 12px; }
.page-template-page-donate .guardian__list li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-orange); font-weight: 700; }
.page-template-page-donate .guardian__card.wp-block-group { background: #fff; color: var(--color-dark); border-radius: 16px; padding: 32px; box-shadow: 0 24px 60px rgba(10,20,40,0.35); }
.page-template-page-donate .guardian__card h3 { font-size: 24px; text-align: center; margin: 0 0 20px; }
.page-template-page-donate .guardian__amounts { gap: 10px; }
.page-template-page-donate .guardian__amounts .wp-block-button { flex: 1; }
.page-template-page-donate .guardian__amounts .wp-block-button__link { display: block; width: 100%; border: 1.5px solid var(--color-card-border); border-radius: 10px; background: #fff; font-family: var(--font-heading); font-size: 20px; color: var(--color-dark); padding: 14px 6px; text-align: center; }
.page-template-page-donate .guardian__amounts .wp-block-button__link:hover { border-color: var(--color-orange); color: var(--color-orange); }
.page-template-page-donate .guardian__fineprint { text-align: center; font-size: 12px; color: #5a6470; margin: 16px 0 0; }

/* === Adopt gallery === */
.page-template-page-donate .adopt-grid { gap: 24px; max-width: 1528px; margin: 0 auto; }
.page-template-page-donate .adopt-grid .wp-block-column { min-width: 0; }
.page-template-page-donate .adopt-card.wp-block-group { background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: 14px; overflow: hidden; padding: 0; transition: box-shadow 0.3s ease, transform 0.2s ease; }
.page-template-page-donate .adopt-card.wp-block-group:hover { box-shadow: 0 12px 36px rgba(38,48,66,0.12); transform: translateY(-4px); }
.page-template-page-donate .adopt-card__media { position: relative; margin: 0; height: 200px; }
/* Lock every adopt image to the same box regardless of the uploaded aspect ratio. */
.page-template-page-donate .adopt-card__media img { width: 100% !important; height: 200px !important; object-fit: cover !important; object-position: center !important; aspect-ratio: auto !important; display: block; margin: 0; }
.page-template-page-donate .adopt-card__price { position: absolute; bottom: 12px; left: 12px; background: #fff; border-radius: 100px; padding: 6px 16px; font-family: var(--font-heading); font-size: 18px; color: var(--color-dark); box-shadow: 0 4px 14px rgba(10,20,40,0.18); margin: 0; }
.page-template-page-donate .adopt-card__body { padding: 20px 22px 24px; }
.page-template-page-donate .adopt-card__name { font-size: 22px; color: var(--color-dark); margin: 0; }
.page-template-page-donate .adopt-card__desc { font-size: 13px; line-height: 20px; color: #55606e; margin: 8px 0 18px; }
.page-template-page-donate .adopt-note { text-align: center; font-size: 14px; color: #55606e; margin-top: 28px; }

/* === Other ways strip === */
.page-template-page-donate .otherways { background: #eef4f8; }
.page-template-page-donate .otherways__grid { gap: 24px; max-width: 1528px; margin: 0 auto; }
.page-template-page-donate .otherways__grid .wp-block-column { min-width: 0; }
.page-template-page-donate .ow.wp-block-group { background: #fff; border-radius: 14px; padding: 30px; height: 100%; }
.page-template-page-donate .ow__icon { margin: 0; }
.page-template-page-donate .ow__icon img { width: 44px; height: 44px; }
.page-template-page-donate .ow__title { font-size: 22px; margin: 12px 0 0; }
.page-template-page-donate .ow__desc { font-size: 14px; line-height: 22px; color: #55606e; margin: 10px 0 18px; }
.page-template-page-donate .ow__link { font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; margin: 0; }
.page-template-page-donate .ow__link a { color: var(--color-blue-light); text-decoration: none; }
.page-template-page-donate .ow__link a:hover { color: var(--color-orange); }

/* === Corporate CTA band === */
.page-template-page-donate .corp-cta.wp-block-cover { border-radius: 16px; overflow: hidden; max-width: 1528px; margin: 0 auto; min-height: 0; }
.page-template-page-donate .corp-cta .wp-block-cover__inner-container { padding: 52px 56px; }
.page-template-page-donate .corp-cta__inner { align-items: center; justify-content: space-between; gap: 36px; }
.page-template-page-donate .corp-cta__eyebrow { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: #88c3f3; margin: 0; }
.page-template-page-donate .corp-cta__title { font-size: 32px; color: #fff; line-height: 1.15; margin: 10px 0 0; max-width: 620px; }
.page-template-page-donate .corp-cta__text { font-size: 16px; line-height: 25px; color: rgba(255,255,255,0.9); margin: 12px 0 0; max-width: 600px; }

/* === Responsive === */
@media (max-width: 1100px) {
  .page-template-page-donate .give-hero__title { font-size: 48px; }
}
@media (max-width: 781px) {
  .page-template-page-donate .give-hero { padding: 108px 24px; }
  .page-template-page-donate .give-hero__title { font-size: 36px; }
  .page-template-page-donate .give-section, .page-template-page-donate .give-section--tight, .page-template-page-donate .guardian { padding-left: 24px; padding-right: 24px; }
  .page-template-page-donate .give-title { font-size: 32px; }
}