/* ══════════════════════════════════════════════════════════════════
   /gift-cards — layout pass, Aug 2026.

   Rebuilt to the client's supplied comp: split hero with card artwork,
   a four-up benefit bar, a photo grid of the five cafes, an in-person
   band and a help row. Previously this page was a single narrow text
   column, which read as a policy page rather than a place to buy
   something.

   Everything here is scoped under .gc- and loaded only on this page
   (see functions.php), following the same per-template pattern as
   breakfast-menu.css / archive-locations.css.

   The hero is the client's real gift card photograph (supplied Aug
   2026) — a cut-out PNG with its own soft shadow in the alpha channel,
   so it sits directly on the cream with no frame. It replaced a CSS
   envelope-and-card stand-in built when no such photo existed.
   ══════════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────────────── */

.gc-hero {
  background: var(--surface-warm, var(--bf-cream));
  padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 6vw, 80px);
  overflow: hidden;
}

.gc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 900px) {
  .gc-hero-grid { grid-template-columns: 1fr; }
}

.gc-hero-copy { max-width: 46ch; }

/* Short raspberry rule under the H1 — the comp uses it as the beat
   between headline and body copy. */
.gc-rule {
  width: 64px;
  height: 3px;
  background: var(--bf-raspberry, #D33344);
  border: 0;
  margin: var(--space-6) 0;
}

.gc-hero-copy .lead { color: var(--fg2); }

.gc-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* Vertical hairline between the primary button and the secondary text
   link, as in the comp. Dropped when they wrap onto separate lines. */
.gc-actions-divider {
  width: 1px;
  align-self: stretch;
  min-height: 28px;
  background: var(--border, var(--bf-line));
}

@media (max-width: 520px) {
  .gc-actions-divider { display: none; }
  .gc-actions { gap: var(--space-4); }
}

.gc-actions .btn { gap: 10px; }
.gc-actions .btn svg { flex: none; }

.gc-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, var(--bf-sky-deep));
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-base, 200ms) var(--ease-out, ease);
}

.gc-textlink:hover,
.gc-textlink:focus-visible { border-bottom-color: currentColor; }
.gc-textlink svg { flex: none; }

/* ── CARD ARTWORK ─────────────────────────────────────────────────── */

.gc-art {
  position: relative;
  line-height: 0;
}

@media (max-width: 900px) { .gc-art { max-width: 540px; margin-inline: auto; } }

.gc-art-shot {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .gc-art { transition: transform 600ms var(--ease-out, cubic-bezier(.22,.61,.36,1)); }
  .gc-art:hover { transform: translateY(-5px); }
}

/* ── BENEFIT BAR ──────────────────────────────────────────────────── */

.gc-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, var(--bf-line));
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  margin-top: calc(-1 * clamp(16px, 3vw, 40px));
  position: relative;
  z-index: 3;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(43, 48, 51, 0.06));
}

@media (max-width: 940px) { .gc-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gc-benefits { grid-template-columns: 1fr; } }

.gc-benefit {
  padding: clamp(18px, 2.6vw, 30px);
  border-right: 1px solid var(--border, var(--bf-line));
}

.gc-benefit:last-child { border-right: 0; }

@media (max-width: 940px) {
  .gc-benefit:nth-child(2n) { border-right: 0; }
  .gc-benefit:nth-child(-n+2) { border-bottom: 1px solid var(--border, var(--bf-line)); }
}

@media (max-width: 520px) {
  .gc-benefit { border-right: 0; border-bottom: 1px solid var(--border, var(--bf-line)); }
  .gc-benefit:last-child { border-bottom: 0; }
}

.gc-benefit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
}

.gc-benefit-head svg {
  flex: none;
  color: var(--accent, var(--bf-sky-deep));
}

.gc-benefit h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fg1, var(--bf-charcoal));
  line-height: 1.25;
}

.gc-benefit p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg2, var(--bf-warm-gray));
  max-width: 30ch;
}

/* ── LOCATION GRID ────────────────────────────────────────────────── */

.gc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: var(--space-8);
}

@media (max-width: 900px) { .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gc-grid { grid-template-columns: 1fr; } }

.gc-loc {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, var(--bf-line));
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--t-base, 200ms) var(--ease-out, ease),
    box-shadow var(--t-base, 200ms) var(--ease-out, ease),
    border-color var(--t-base, 200ms) var(--ease-out, ease);
}

.gc-loc:hover,
.gc-loc:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 12px 30px rgba(43, 48, 51, 0.12));
  border-color: var(--accent, var(--bf-sky-deep));
}

/* position:relative is load-bearing — .loc-scene (site.css, shared with
   the homepage grid) is absolutely positioned against this box. */
.gc-loc-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bf-cream-2, #F3EAD8);
}

.gc-loc-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-4) var(--space-5);
}

.gc-loc-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent, var(--bf-sky-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gc-loc-text { flex: 1 1 auto; min-width: 0; }

.gc-loc-name {
  display: block;
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.1;
  color: var(--fg1, var(--bf-charcoal));
}

.gc-loc-meta {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--fg2, var(--bf-warm-gray));
}

.gc-loc-go {
  flex: none;
  color: var(--accent, var(--bf-sky-deep));
  transition: transform var(--t-base, 200ms) var(--ease-out, ease);
}

.gc-loc:hover .gc-loc-go { transform: translateX(4px); }

/* Sixth tile: the cross-location redemption note, styled as a card so
   it completes the 3x2 grid instead of leaving a hole. */
.gc-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--radius-lg, 18px);
  background: color-mix(in srgb, var(--bf-sky, #48A1E0) 12%, var(--bg-elevated, #fff));
  border: 1px solid color-mix(in srgb, var(--bf-sky, #48A1E0) 26%, transparent);
}

.gc-note-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bf-sky, #48A1E0) 24%, #fff);
  color: var(--accent, var(--bf-sky-deep));
  display: grid;
  place-items: center;
  margin-bottom: var(--space-2);
}

.gc-note h3 {
  margin: 0;
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  text-transform: uppercase;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.06;
  color: var(--fg1, var(--bf-charcoal));
  max-width: 16ch;
}

.gc-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg2, var(--bf-warm-gray));
}

.gc-note-script {
  font-family: var(--font-script, Caveat, cursive);
  font-size: 22px;
  color: var(--accent, var(--bf-sky-deep));
}

/* ── IN-PERSON BAND ───────────────────────────────────────────────── */

.gc-band {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  flex-wrap: wrap;
  padding: clamp(20px, 2.8vw, 30px) clamp(20px, 3vw, 36px);
  margin-top: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-lg, 18px);
  background: var(--surface-warm, var(--bf-cream));
  border: 1px solid var(--border, var(--bf-line));
}

.gc-band-icon {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--bg-elevated, #fff);
  color: var(--accent, var(--bf-sky-deep));
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(43, 48, 51, 0.06));
}

.gc-band-copy { flex: 1 1 260px; }

.gc-band-copy h2 {
  margin: 0 0 4px;
  font-family: var(--font-display, Anton, "Arial Narrow", Impact, sans-serif);
  text-transform: uppercase;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.08;
  color: var(--fg1, var(--bf-charcoal));
}

.gc-band-copy p {
  margin: 0;
  color: var(--fg2, var(--bf-warm-gray));
  font-size: 15px;
}

.gc-band .btn { flex: none; }

/* ── HELP ROW ─────────────────────────────────────────────────────── */

.gc-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
  margin-top: clamp(20px, 2.6vw, 32px);
  font-size: 15px;
  color: var(--fg2, var(--bf-warm-gray));
}

.gc-help svg { flex: none; color: var(--accent, var(--bf-sky-deep)); }