/*
 * Lahjakortti (0046): kortin ulkoasu (ehdotus A2, Olli 24.10.2026) sekä lahjasivun ja kortin sivun asettelu.
 * Kortti mitoitetaan leveytensä mukaan (container query -yksiköt, 1cqw = 1 % kortin leveydestä), joten sama
 * kortti toimii pienenä esikatseluna, näytöllä ja tulosteessa (A5 = 148 × 210 mm). Kortin värit ovat aina
 * vaaleat, myös tummassa teemassa, koska kortti tulostetaan.
 */

.gc {
  --gc-ink: #1C2742; --gc-mid: #4F5A73; --gc-accent: #9A5A20; --gc-line: #DCCDBB; --gc-paper: #FBF8F3;
  container-type: inline-size;
  position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 148 / 210;
  background: var(--gc-paper); color: var(--gc-ink); overflow: hidden; text-align: center;
  font-family: var(--font-body, Nunito, system-ui, sans-serif);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gc-top {
  margin: 4cqw 4cqw 0; padding: 6.8cqw 6cqw 5.4cqw; border-radius: 2.2cqw;
  background: linear-gradient(172deg, #C9D3EA 0%, #E3DAE6 46%, #F3DCC4 100%);
}
.gc-word { font-family: var(--font-display, Nunito, sans-serif); font-weight: 800; font-size: 3.6cqw; letter-spacing: -.01em; }
.gc-label {
  display: flex; align-items: center; justify-content: center; gap: 2cqw; margin-top: 6cqw;
  color: var(--gc-accent); font-weight: 800; font-size: 2.15cqw; letter-spacing: .32em; text-transform: uppercase;
}
.gc-label::before, .gc-label::after { content: ""; width: 8cqw; height: .2cqw; background: currentColor; }
.gc-title {
  margin-top: 2.8cqw; font-family: var(--font-display, Nunito, sans-serif); font-weight: 800; font-size: 5.95cqw;
  line-height: 1.14; letter-spacing: -.02em; text-wrap: balance;
}
.gc-lead { margin: 2.8cqw auto 0; max-width: 72cqw; color: var(--gc-mid); font-size: 2.5cqw; line-height: 1.45; text-wrap: pretty; }
.gc-wave { display: block; width: 42cqw; height: 6cqw; margin: 4.2cqw auto 0; fill: var(--gc-accent); }
.gc-greet { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; padding: 4cqw 10cqw; min-height: 0; }
.gc-to { font-family: var(--font-display, Nunito, sans-serif); font-weight: 800; font-size: 3.6cqw; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.gc-msg { font-family: var(--font-story, Literata, Georgia, serif); font-style: italic; font-size: 2.86cqw; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.gc-from { font-weight: 700; font-size: 2.62cqw; overflow-wrap: anywhere; }
.gc-how {
  display: flex; align-items: center; gap: 4cqw; margin: 0 7.4cqw 7.4cqw; padding-top: 4cqw;
  border-top: .2cqw solid var(--gc-line); text-align: left;
}
.gc-qr { flex: none; width: 19cqw; height: 19cqw; padding: 1.2cqw; background: #fff; border-radius: 1cqw; }
.gc-qr svg { display: block; width: 100%; height: 100%; }
.gc-qr--placeholder { background: repeating-linear-gradient(45deg, #E4E1DC 0 1.2cqw, #EFECE7 1.2cqw 2.4cqw); }
.gc-steps { min-width: 0; }
.gc-how-title { font-weight: 800; font-size: 2.4cqw; }
.gc-steps ol { margin: 1cqw 0 0 3cqw; padding: 0; list-style: decimal; font-size: 2.15cqw; line-height: 1.45; }
.gc-steps li::marker { color: var(--gc-ink); }
.gc-code { margin-top: 1.6cqw; color: var(--gc-mid); font-size: 2cqw; }
.gc-code b { display: block; margin-top: .2cqw; color: var(--gc-ink); font-weight: 800; font-size: 3.8cqw; letter-spacing: .08em; }
.gc-small { margin-top: 1cqw; color: var(--gc-mid); font-size: 1.86cqw; line-height: 1.4; }
.gc--back { justify-content: center; }
.gc-back { display: grid; justify-items: center; gap: 3cqw; padding: 0 16cqw; }
.gc-back .gc-wave { margin: 0; width: 28cqw; height: 4cqw; }
.gc-back-text { color: var(--gc-mid); font-size: 2.4cqw; line-height: 1.5; text-wrap: balance; }
.gc-back-url { font-weight: 700; font-size: 2.4cqw; }

/* ===== Lahjasivu (lahja/) ===== */
.gift-hero { display: grid; gap: 12px; max-width: 44rem; }
.gift-price { font-weight: var(--fw-bold); }
.gift-layout { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); align-items: start; }
.gift-form { display: grid; gap: var(--space-lg); max-width: 34rem; }
.gift-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gift-count { justify-self: end; color: var(--c-ink-mid); font-size: var(--t-caption-size); font-variant-numeric: tabular-nums; }
.gift-terms { color: var(--c-ink-mid); font-size: var(--t-caption-size); line-height: 1.45; }
.gift-preview { display: grid; gap: var(--space-sm); justify-items: center; }
/* Esikatselun säiliö koko leveydelle: keskitetyssä ruudukossa tyhjä säiliö kutistuisi nollaan */
#gift-card-preview { width: 100%; max-width: 380px; }
.gift-preview .gc { border-radius: 6px; box-shadow: var(--shadow-card, 0 10px 30px rgba(28, 39, 66, .14)); }
.gift-preview-cap { color: var(--c-ink-mid); font-size: var(--t-caption-size); }
.gift-steps { display: grid; gap: var(--space-lg); margin-top: var(--space-xxl, 48px); max-width: 44rem; counter-reset: s; }
.gift-steps ol { display: grid; gap: var(--space-md); list-style: none; padding: 0; }
.gift-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; counter-increment: s; }
.gift-steps li::before {
  content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-accent-text); font-weight: 800;
}
.gift-steps h3 { font-weight: 800; font-size: 18px; }
.gift-redeem { margin-top: var(--space-xxl, 48px); max-width: 44rem; padding: var(--space-lg); border-radius: var(--r-lg); background: var(--c-quiet-fill); display: grid; gap: var(--space-sm); justify-items: start; }
.gift-faq { margin-top: var(--space-xxl, 48px); }
@media (min-width: 900px) {
  .gift-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--space-xxl, 48px); }
  .gift-preview { position: sticky; top: 96px; }
}

/* ===== Kortin sivu (lahja/kortti/) ===== */
.card-page { display: grid; gap: var(--space-lg); justify-items: center; padding-bottom: var(--space-xxl, 48px); }
#card-view { width: 100%; max-width: 460px; }
.card-page .gc { border-radius: 6px; box-shadow: var(--shadow-card, 0 10px 30px rgba(28, 39, 66, .14)); }
.card-actions { display: grid; gap: var(--space-sm); width: 100%; max-width: 460px; }
.card-help { max-width: 460px; color: var(--c-ink-mid); font-size: var(--t-caption-size); line-height: 1.5; text-align: center; }
.card-status { max-width: 34rem; text-align: center; display: grid; gap: var(--space-sm); justify-items: center; }
.print-sheet { display: none; }

@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { background: #fff !important; }
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { display: flex !important; width: 297mm; height: 210mm; }
  .print-sheet .gc { width: 148.5mm; height: 210mm; aspect-ratio: auto; box-shadow: none; border-radius: 0; }
}

/* hidden-attribuutti voittaa .err- ja .legal-note-tyylien display-arvon */
.gift-form [hidden], .card-page [hidden] { display: none !important; }