/* =========================================================
   ATHAR · Adopt & gift page (gifts.html)
   Simple first (SITE-SPEC §0) and two equal paths (brief, 13 Oct 2026): adopt a tree for yourself,
   or give one as a gift. Hero · the two paths · the three formats (they work for both) · where to
   find ATHAR · ATHAR Zayed as its own chapter · one next step. No prices, no contents.
   Shared patterns (.page-hero, .gift-tiles, .promise, .pill.lg, .next-step) come from athar.css;
   this file places them. Product photos are shot on the page cream (#FCF8EF), so their frames
   are cream too. Logical properties only, so Arabic mirrors without overrides.
   ========================================================= */

/* ---------- hero: the open Legacy box, frameless on cream ---------- */
.gifts-hero .hero-grid > .hero-media { background: var(--athar-cream); border-radius: 0; }
.gifts-hero .hero-media > img { object-fit: contain; }
.hero-actions { margin-top: 2rem; }
@media (max-width: 960px) {
  .gifts-hero .hero-grid > .hero-media { aspect-ratio: 1; max-width: 460px; justify-self: center; }
}
@media (max-width: 520px) {
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ---------- the two paths: for yourself · as a gift ---------- */
.path-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.path-card { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: clamp(1.75rem, 3.5vw, 3rem); transition: box-shadow .3s var(--ease); }
.path-card > .disc { margin-block-end: 1.25rem; }
.path-card > .disc .ms { font-size: 40px; }
.path-card > .label { margin: 0; }
.path-title { font-weight: 800; color: var(--athar-green); font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; }
html[lang="ar"] .path-title { font-family: var(--font-arabic-display); font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.path-line { color: var(--muted); max-width: 40ch; }
html[lang="ar"] .path-line { font-size: 1.0625rem; line-height: 1.8; }
.path-pills { --cluster: .5rem; margin-top: 1.25rem; }
.path-pills .pill { background: var(--athar-cream); border: 1px solid var(--line); }
.path-pills .pill .ms { color: var(--athar-green); }
.path-link { margin-top: auto; padding-top: 1.5rem; min-height: 44px; }
/* arriving from the hero buttons: the chosen card is outlined, so the visitor sees where they landed */
.path-card:target { box-shadow: 0 0 0 2px var(--athar-green), var(--shadow-card); }
@media (max-width: 760px) {
  .path-cards { grid-template-columns: 1fr; }
}

/* ---------- the three formats ---------- */
.gift-range .gift-tile { --ratio: 1; }
.gift-range .gift-tile > .photo { background: var(--athar-cream); }
/* the closed walnut box sits low in its frame; keep the lid and the copper plate in view */
.gift-range #legacy .photo > img { object-position: 50% 72%; }
.gift-range .promise { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ---------- how to get one ---------- */
.get-grid { align-items: center; }
.get-actions { margin-top: 2rem; --cluster: 1.25rem; }
.get-ways { --stack: var(--gap); }
.get-ways > .card-row { margin: 0; }
.get-ways .title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
html[lang="ar"] .get-ways .title { font-family: var(--font-arabic-display); font-weight: 700; line-height: 1.5; }
html[lang="ar"] .get-ways .text { font-size: 1rem; }

/* ---------- ATHAR Zayed: its own full-width chapter ----------
   Not a card like the other sections: earth brown, the photo bleeding to the screen edge, the name
   set large (cream, then tan like the gold foil on the gift box), the full honorific, the three places. */
.section.green.zayed-feature { background: var(--athar-brown); padding-block: 0; }
.zf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(580px, 46vw, 820px); }
.zf-photo { border-radius: 0; height: 100%; background: #4E3820; }
.zf-photo > img { object-position: 58% 50%; }
.zf-body {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  padding-inline-start: clamp(2rem, 6vw, 7rem);
  padding-inline-end: max(var(--margin), calc((100vw - var(--shell)) / 2 + var(--margin)));
}
.zf-mark { height: 56px; width: auto; margin-block-end: 1.75rem; opacity: .92; }
.zayed-feature .zf-body .label { color: var(--athar-sand); margin: 0 0 1rem; }
.zf-title { font-weight: 800; font-size: clamp(4rem, 8.4vw, 9.5rem); line-height: .9; letter-spacing: -0.03em; color: var(--athar-cream); }
.zf-title > span { display: block; }
.zf-title > .alt { color: var(--athar-tan); }
/* the brand's fingerprint texture inside the heavy letters, as on the inner-page H1 (Latin only) */
html[lang="en"] .zf-title > span {
  background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0) 0 16px, rgba(255, 255, 255, .14) 16px 25px), currentColor;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-block-end: .04em;
}
html[lang="ar"] .zf-title { font-family: var(--font-arabic-display); font-weight: 700; letter-spacing: 0; line-height: 1.15; font-size: clamp(3.75rem, 7.6vw, 8.5rem); }
.zayed-feature .zf-body .rule { background: var(--athar-tan); margin-block: 1.75rem; }
.zf-honour { font-size: var(--fs-lead); line-height: 1.45; color: var(--athar-cream); max-width: 32ch; }
html[lang="ar"] .zf-honour { line-height: 1.8; max-width: 36ch; }
.zf-places { display: flex; flex-wrap: wrap; align-items: center; row-gap: .5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(233, 222, 202, .28); font-weight: 700; font-size: 1.0625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--athar-cream); }
.zf-places > li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline: 1.1rem; background: var(--athar-tan); transform: rotate(45deg) translateY(-2px); }
html[lang="ar"] .zf-places { font-family: var(--font-arabic-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0; text-transform: none; }
.zf-terms { margin-top: 1rem; color: var(--athar-sand); font-size: .875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
html[lang="ar"] .zf-terms { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.zf-body .actions { margin-top: 2.5rem; }
.zayed-feature :focus-visible { outline-color: var(--athar-cream); }
@media (max-width: 860px) {
  .zf-grid { grid-template-columns: 1fr; min-height: 0; }
  .zf-photo { height: auto; aspect-ratio: 16 / 10; }
  .zf-body { padding: clamp(3rem, 9vw, 4.5rem) var(--margin) clamp(3.5rem, 10vw, 5rem); }
}
@media (max-width: 420px) {
  .zf-places { font-size: .9375rem; letter-spacing: .14em; }
  .zf-places > li + li::before { margin-inline: .75rem; }
  .zf-body .actions .btn { width: 100%; }
}

/* ---------- the one next step ---------- */
.next .next-step { margin-block: 0; }