/* ─────────────────────────────────────────
   SECTION — GIFTS (good-to-know.html), mock A
   The note on the left; on the right a card: a clay envelope ("The honeymoon
   fund") on the front. Pressing it flips the card (js/gifts.js) to the account
   details on the back: pill tabs per way of paying, a copy button per value.
   Text styles live in foundations/text-styles.css.
───────────────────────────────────────── */

.gifts { background: var(--surface); }  /* beige — between the white dress code and the white FAQ */

/* the FAQ comes right after the gifts on this page, so it turns white to keep
   the sections alternating (faq.css keeps it beige on index.html) */
.gifts + .faq { background: var(--bg); }

.gifts-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);   /* the card gets the wider column */
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.gifts-intro .script-heading { margin-top: 12px; }

.gifts-text {
  margin-top: 28px;
  max-width: 46ch;
  color: var(--text-secondary);
}

.gifts-note {
  margin-top: 20px;
  color: var(--text-muted);
  transform: rotate(-3deg);
  transform-origin: left center;
}

/* ── the card: envelope on the front, account details on the back.
   js/gifts.js adds .is-flippable (both faces share one spot) and toggles
   .is-flipped; pressing the envelope turns the card over in 3D. ── */
.gifts-card {
  perspective: 1400px;
  transform: rotate(1.5deg);
  transition: transform 500ms var(--ease);
}

.gifts-card.is-flipped { transform: rotate(0deg); }

.gifts-flip {
  display: grid;
  gap: 24px;                    /* without JS: front, then back below */
}

.gifts-card.is-flippable .gifts-flip {
  gap: 0;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
}

.gifts-card.is-flippable .gifts-face {
  grid-area: 1 / 1;             /* both sides in the same spot */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gifts-card.is-flippable .gifts-details { transform: rotateY(180deg); }
.gifts-card.is-flipped .gifts-flip { transform: rotateY(180deg); }

/* hover: the card lifts and starts to turn, as if about to flip — the whole
   card is what you press. The arrow in the hint turns with it. */
.gifts-card.is-flippable .gifts-front-face {
  transition: transform 450ms var(--ease);
  transform-origin: center;
}

.gifts-card.is-flippable:not(.is-flipped) .gifts-front-face:hover {
  transform: translateY(-8px) rotateY(-18deg) scale(1.02);
}

.gifts-card.is-flippable .gifts-front { transition: box-shadow 450ms var(--ease); }
.gifts-card.is-flippable:not(.is-flipped) .gifts-front:hover { box-shadow: 0 28px 56px rgba(59, 29, 18, 0.26); }

/* front: the envelope */
.gifts-front-face { display: flex; }

.gifts-front {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 320px;
  padding: 144px 48px 44px;
  border: 0;
  border-radius: 24px;          /* same corners as the other cards (cards.css) */
  background: var(--inverse);
  color: var(--on-inverse);
  text-align: center;
  box-shadow: 0 18px 40px rgba(59, 29, 18, 0.18);
  cursor: pointer;
  overflow: hidden;             /* keeps the flap lines inside the corners */
}

.gifts-front:focus-visible { outline: 2px solid var(--border); outline-offset: 4px; }

.gifts-flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 110px;
  fill: none;
  stroke: var(--on-inverse-muted);
  stroke-width: 0.4;
  opacity: 0.5;
}

.gifts-seal {
  position: absolute;
  left: 50%;
  top: 76px;
  width: 44px;
  transform: translateX(-50%);
  filter: brightness(0) invert(0.95);   /* the clay flower, in cream */
}

.gifts-envelope-title { color: var(--on-inverse); }
.gifts-envelope-sub { color: var(--on-inverse-muted); }

/* a quiet hint, not a button: the whole card is what you press */
.gifts-hint {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--on-inverse-muted);
}

.gifts-hint svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 450ms var(--ease);
}

.gifts-front:hover .gifts-hint { color: var(--on-inverse); }
.gifts-front:hover .gifts-hint svg { transform: rotate(180deg); }

/* back: the account details */
.gifts-details {
  position: relative;
  padding: 32px;
  border-radius: 24px;
  background: var(--bg);        /* white card on the beige section */
  box-shadow: 0 18px 40px rgba(59, 29, 18, 0.12);
}

.gifts-back-btn {
  display: none;                /* only once the card can flip */
  position: absolute;
  top: 18px;
  right: 20px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline dashed;
  text-underline-offset: 4px;
}

.gifts-card.is-flippable .gifts-back-btn { display: inline-block; }
.gifts-card.is-flippable .gifts-details { padding-top: 56px; }   /* room for "Flip back" */

.gifts-panels { display: grid; }
.gifts-panels > .gifts-panel { grid-area: 1 / 1; }
.gifts-panels > .gifts-panel[hidden] { display: block; visibility: hidden; }   /* keeps the card one size */

.gifts-tabs { justify-content: flex-start; flex-wrap: wrap; }

.gifts-tab { white-space: nowrap; }

.gifts-panel { margin-top: 24px; }

.gifts-panel-note {
  margin-bottom: 16px;
  color: var(--text-muted);
}

.gifts-acct {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px 20px;
  align-items: center;
  margin: 0;
}

.gifts-acct dt { color: var(--text-muted); white-space: nowrap; }

.gifts-acct dd {
  margin: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.gifts-copy {
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: none;
  color: var(--border);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}

.gifts-copy:hover,
.gifts-copy.is-copied {
  background: var(--inverse);
  border-color: var(--inverse);
  color: var(--on-inverse);
}

.gifts-status {   /* read out by screen readers only; on screen the button saying "Copied" is enough */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .gifts-card, .gifts-card.is-flippable .gifts-flip { transition: none; }
  .gifts-card.is-flippable:not(.is-flipped) .gifts-front-face:hover { transform: none; }
}


/* responsive — tablet: note on top, envelope below */
@media (max-width: 1024px) {
  .gifts-layout { grid-template-columns: 1fr; }
  .gifts-card { max-width: 560px; width: 100%; }
}


/* responsive — mobile */
@media (max-width: 640px) {
  .gifts-front { padding: 128px 24px 32px; }
  .gifts-seal { top: 64px; }
  .gifts-details { padding: 56px 20px 24px; }
  .gifts-acct { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .gifts-acct dt { grid-column: 1 / -1; margin-top: 10px; white-space: normal; }
  .gifts-acct dt:first-child { margin-top: 0; }
}