/* Gift cards page (root-level). Design: Figma 1:4928 "1920w gift cards". */
.gift-hero { display: grid; grid-template-columns: 1020fr 900fr; background: var(--sand); min-height: clamp(520px, 44.95vw, 863px); }
.gift-hero .text { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 4vw, 80px) var(--gutter); }
.gift-hero .inner { max-width: 760px; }
.gift-hero h1 { margin-top: clamp(10px, 0.83vw, 16px); font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.01em; }
.gift-hero h1 .serif { letter-spacing: -0.02em; }
.gift-hero .intro { margin-top: clamp(16px, 1.67vw, 32px); max-width: 37em; font-size: clamp(16px, 1.04vw, 20px); line-height: 1.2; }
.gift-hero .btn { margin-top: clamp(24px, 2.1vw, 40px); min-height: clamp(48px, 3.33vw, 64px); min-width: clamp(220px, 15.6vw, 300px); font-size: clamp(16px, 1.17vw, 22.5px); }
.gift-hero .note { margin-top: 16px; font-size: clamp(13px, 0.83vw, 16px); line-height: 1.2; }
.gift-hero .photo { position: relative; overflow: hidden; background: var(--brown); }
.gift-hero .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .gift-hero { grid-template-columns: 1fr; min-height: 0; }
  .gift-hero .photo { order: -1; aspect-ratio: 390 / 374; }
  .gift-hero .text { padding-top: 32px; padding-bottom: 48px; }
  .gift-hero .btn { width: 100%; }
}

.gift-hero .photo img { object-position: 50% 65%; }
.gift-page .gift-wide .prose { max-width: none; }
.gift-page .gift-wide h2 { margin-top: 0; }
.gift-page .gift-occasions { background: linear-gradient(rgb(30 23 15 / .25), rgb(30 23 15 / .25)), url('../../img/gift-cards/occasions-bg.jpg') center / cover; }
.gift-occasions > h2 { color: var(--cream); max-width: none; }
.occasion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 30px); margin-top: 32px; }
.occasion-card { background: var(--cream); color: var(--brown); padding: clamp(24px, 2.2vw, 42px); }
.occasion-number { display: block; font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 2.2vw, 40px); margin-bottom: 24px; }
.occasion-card h3 { font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; }
.occasion-card p { font-size: var(--fs-body); line-height: 1.45; margin-top: 14px; }
.occasion-card a { text-decoration: underline; text-underline-offset: 3px; }
.gift-page .gift-corporate { background: var(--sand); }
@media (max-width: 900px) { .occasion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .occasion-grid { grid-template-columns: 1fr; } }

/* Give the introduction, purchase action and redemption note their own space. */
.gift-hero .text { justify-content: flex-start; }
.gift-hero .inner { display: flex; flex-direction: column; flex: 1; width: 100%; }
.gift-hero .btn { align-self: flex-start; margin-top: clamp(40px, 4vw, 76px); }
.gift-hero .note { margin-top: auto; padding-top: clamp(40px, 4vw, 76px); }
@media (max-width: 900px) {
  .gift-hero .btn { align-self: stretch; margin-top: 32px; }
  .gift-hero .note { padding-top: 32px; }
}

@media (min-width: 901px) {
  .gift-hero .text { padding-top: calc(clamp(40px, 4vw, 80px) + 56px); }
}

/* Match Consultation hero height without moving the existing left content. */
@media (min-width: 901px) {
  .gift-hero { min-height: clamp(520px, 57.43vw, 1103px); }
  .gift-hero .text { align-self: start; min-height: clamp(520px, 44.95vw, 863px); }
}