/* Greeting cards: what the walkthrough has beyond business cards' pieces (assets/cards.css, loaded
   first) and the shared prints styles (assets/prints.css). Phone first. docs/GREETING-CARDS.md. */

/* The root's own versions of cards.css's rules scoped to business cards. */
.hp-prints--greetings.hp-prints--greetings { max-width: 72rem; } /* doubled, as prints.css does, to outrank the block layout's width rule */
@media (min-width: 960px) { .hp-prints--greetings .hp-prints__check { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
.hp-prints--greetings .hp-prints__dim--w::before, .hp-prints--greetings .hp-prints__dim--w::after { left: var(--cut-x, 0); right: var(--cut-x, 0); }
.hp-prints--greetings .hp-prints__dim--h::before, .hp-prints--greetings .hp-prints__dim--h::after { top: var(--cut-y, 0); bottom: var(--cut-y, 0); }
.hp-prints--greetings .hp-prints__crop-hint:empty { display: none; }
/* The strip under the sheet: each spread whole, in the open card's shape as the fold lays it. */
.hp-prints--greetings .hp-prints__strip-item { width: 6rem; }
.hp-prints--greetings .hp-prints__strip-item .hp-prints__thumb { width: 5.5rem; height: auto; aspect-ratio: 7 / 5; border-radius: 6px; background: var(--c-surface); }
.hp-prints--greetings[data-fold="top"] .hp-prints__strip-item .hp-prints__thumb { width: 3.9rem; aspect-ratio: 5 / 7; }
.hp-prints--greetings .hp-prints__strip-item .hp-prints__thumb img { object-fit: contain; }
/* The bar: on the first two steps the price of a card is the headline, the count and the total under it. */
.hp-prints--greetings .hp-prints__bar-text { font-variant-numeric: tabular-nums; }
.hp-prints--greetings[data-step="card"] .hp-prints__bar-text, .hp-prints--greetings[data-step="design"] .hp-prints__bar-text { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.hp-prints--greetings[data-step="card"] .hp-prints__bar-sub, .hp-prints--greetings[data-step="design"] .hp-prints__bar-sub { margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.hp-prints--greetings[data-step="card"] .hp-prints__bar-error, .hp-prints--greetings[data-step="design"] .hp-prints__bar-error { letter-spacing: 0; line-height: 1.3; }

/* Step 1: six sections beside the drawn card from 960px; the last line across both columns. */
@media (min-width: 960px) {
  .hp-cards__cols.hp-greet__cols > .hp-greet__stage { grid-row: 1 / span 6; }
  .hp-cards__cols.hp-greet__cols > .hp-greet__else { grid-column: 1 / -1; }
}
.hp-greet__else { margin: 0; }

/* The card as it stands, folded, with its white envelope behind it, at one scale for every size
   (--u is an inch: the scene holds 9.6 in and the dimension gutter). The dimension lines run along
   the card's left and bottom edges; the envelope sits a little up and to the right. */
.hp-greet__stage { gap: 0.75rem; }
.hp-greet__stage .hp-cards__cap, .hp-greet__stage .hp-cards__note { padding-left: 0; }
.hp-greet__stage .hp-cards__note { margin-top: -0.25rem; max-width: 30rem; }
.hp-greet__scene { container-type: inline-size; width: min(100%, 24rem); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.hp-prints--greetings[data-fold="top"] .hp-greet__scene { aspect-ratio: 9.6 / 7.2; } /* a wide card needs less height: the largest folded at the top is 8.5 x 5.5 */
.hp-greet__print { --u: 1.4rem; display: grid; grid-template-columns: 1.75rem calc(var(--fw) * var(--u)); grid-template-rows: calc(var(--fh) * var(--u)) 1.75rem; padding: calc((var(--eh) - var(--fh) + 0.45) * var(--u)) calc((var(--ew) - var(--fw) + 0.45) * var(--u)) 0 0; transition: none; }
@supports (width: 1cqw) { .hp-greet__print { --u: calc((100cqw - 1.75rem) / 9.6); } }
.hp-greet__print > .hp-prints__dim--h { grid-area: 1 / 1; }
.hp-greet__print > .hp-prints__dim--w { grid-area: 2 / 2; }
.hp-greet__envelope { grid-area: 1 / 2; align-self: end; justify-self: start; position: relative; width: calc(var(--ew) * var(--u)); height: calc(var(--eh) * var(--u)); transform: translate(calc(0.45 * var(--u)), calc(-0.45 * var(--u))); background: #fff; border: 1px solid rgba(29, 29, 31, 0.12); border-radius: 2px; box-shadow: 0 10px 24px -14px rgba(29, 29, 31, 0.3); color: rgba(29, 29, 31, 0.22); }
.hp-greet__envelope svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-greet__card { grid-area: 1 / 2; position: relative; z-index: 1; overflow: hidden; border-radius: 1px; background: linear-gradient(135deg, #ffffff 0%, #eef0f4 26%, #ffffff 44%, #f5f4f0 62%, #efeee9 100%); box-shadow: 0 14px 34px -16px rgba(29, 29, 31, 0.38), 0 1px 2px rgba(29, 29, 31, 0.08); }
.hp-greet__card::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(29, 29, 31, 0.1); pointer-events: none; }
/* The hinge: the fold's edge, at the left when folded at the side, at the top when folded at the top. */
.hp-greet__hinge { position: absolute; }
.hp-greet__card--side .hp-greet__hinge { left: 0; top: 0; bottom: 0; width: 8%; border-left: 1.5px solid rgba(29, 29, 31, 0.3); background: linear-gradient(90deg, rgba(29, 29, 31, 0.12), rgba(29, 29, 31, 0)); }
.hp-greet__card--top .hp-greet__hinge { left: 0; right: 0; top: 0; height: 8%; border-top: 1.5px solid rgba(29, 29, 31, 0.3); background: linear-gradient(180deg, rgba(29, 29, 31, 0.12), rgba(29, 29, 31, 0)); }
/* The finish's sheen, as business cards draw it. */
.hp-greet__sheen { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 48%, rgba(255, 255, 255, 0) 62%); opacity: 0.2; }
.hp-greet__card.is-uv .hp-greet__sheen { opacity: 0.85; }
.hp-greet__card.is-lam .hp-greet__sheen { opacity: 1; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.8) 46%, rgba(255, 255, 255, 0) 60%); }

/* The size rows: an outline of the card to one scale (5px an inch), standing the way the fold stands it. */
.hp-greet__shape { flex: none; display: grid; place-items: center; width: 46px; height: 46px; }
.hp-greet__shape i { display: block; border: 1.5px solid var(--c-ink); border-radius: 2px; background: var(--c-surface); }
.hp-cards__opt:not(.is-on) .hp-greet__shape i { border-color: var(--c-quiet); }
.hp-greet__name { margin-left: 0.3rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--c-quiet); }
/* The papers: the writable swatch, its edge as thick as the card. */
.hp-greet__swatch--18 { box-shadow: inset 0 -4px 0 #d9d7cf, inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.05); }
.hp-greet__swatch--16 { box-shadow: inset 0 -2.5px 0 #d9d7cf, inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.05); }

/* Step 2: how a file is laid out, each spread in the open card's shape, the fold dashed, the panels named. */
.hp-greet__layout { margin: 0 0 1.125rem; }
.hp-greet__layout .hp-cards__hint { max-width: 44rem; }
.hp-greet__spreads { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1rem 1.75rem; padding: 1.25rem 1rem 1rem; background: var(--c-tile); border-radius: 20px; }
/* Each spread at one height (8.5rem; 7rem on a phone), as wide as the open card's shape makes it. */
.hp-greet__spread { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 0; min-width: 0; width: min(100%, 14rem, calc(8.5rem * var(--a))); }
.hp-greet__sheet { display: flex; width: 100%; aspect-ratio: var(--a); background: var(--c-surface); box-shadow: 0 8px 20px -12px rgba(29, 29, 31, 0.35), 0 1px 2px rgba(29, 29, 31, 0.08); }
.hp-greet__sheet--top { flex-direction: column; }
.hp-greet__panel { flex: 1 1 0; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0.25rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--c-ink); }
.hp-greet__sheet--side .hp-greet__panel + .hp-greet__panel { border-left: 1.5px dashed rgba(29, 29, 31, 0.45); }
.hp-greet__sheet--top .hp-greet__panel + .hp-greet__panel { border-top: 1.5px dashed rgba(29, 29, 31, 0.45); }
.hp-greet__panel.is-upside > span { display: inline-block; transform: rotate(180deg); }
.hp-greet__spread figcaption { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-quiet); }
@media (max-width: 599px) { .hp-greet__spread { width: min(100%, 11rem, calc(7rem * var(--a))); } }
/* A slot's empty drop and its thumbnail take the open card's shape (--thumb-a, from greetings.js),
   never narrower than its button and padding (a square card folded at the top is 6 x 11.5 with bleed). */
.hp-prints--greetings .hp-cards__drop { aspect-ratio: var(--thumb-a, 7 / 5); width: min(100%, max(10rem, min(24rem, calc(15rem * var(--thumb-a, 1.4))))); }
/* A page for the other fold, or one panel: the warning, and the fix under it. */
.hp-greet__stop { display: grid; justify-items: start; gap: 0.5rem; }
/* The template for this size and fold, under how a file is laid out: a link with a full tap target. */
.hp-greet__template { margin: 0.25rem 0 0; }
.hp-greet__template .hp-cards__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; }
/* A card that ends in Send: Across the outside / On the front under the outside's image, centered
   under what it places, its sentence under it (the Check step's control, for a card with no Check). */
.hp-greet__place { display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.hp-greet__place .hp-cards__seg { justify-content: center; }
.hp-greet__place .hp-cards__hint { margin: 0; max-width: 26rem; }

/* Step 3: over the frame, the cut (dashed, the outside faded), the fold (dash-dot, ink, cut to cut),
   a safe box per panel (dotted) and each panel's name; the names step aside while the design is dragged. */
.hp-greet__marks { position: absolute; inset: 0; pointer-events: none; }
.hp-greet__cut { position: absolute; border: 1px dashed var(--c-ink); box-shadow: 0 0 0 999px rgba(255, 255, 255, 0.66); }
.hp-greet__safe { position: absolute; border: 1px dotted rgba(29, 29, 31, 0.6); }
.hp-greet__fold { position: absolute; }
.hp-greet__fold.is-v { width: 1.5px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--c-ink) 0 8px, transparent 8px 11px, var(--c-ink) 11px 13px, transparent 13px 16px); }
.hp-greet__fold.is-h { height: 1.5px; transform: translateY(-50%); background: repeating-linear-gradient(to right, var(--c-ink) 0 8px, transparent 8px 11px, var(--c-ink) 11px 13px, transparent 13px 16px); }
.hp-greet__pill { position: absolute; padding: 0.125rem 0.5rem; border-radius: 999px; background: rgba(29, 29, 31, 0.72); color: #fff; font-size: 0.6875rem; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: opacity 160ms var(--ease); }
.hp-greet__pill.is-upside { transform: rotate(180deg); }
.hp-prints__frame.is-dragging .hp-greet__pill { opacity: 0; }
.hp-greet__key u { display: inline-block; width: 18px; height: 1.5px; margin-right: 6px; vertical-align: middle; background: repeating-linear-gradient(to right, var(--c-ink) 0 6px, transparent 6px 8px, var(--c-ink) 8px 10px, transparent 10px 12px); }

/* The splash ([hp_greeting_prices]): the size's name after its title, and the envelope tiles' chips. */
.hp-greet-prices__name { margin-left: 0.3rem; font-size: 0.75rem; font-weight: 500; color: var(--wp--preset--color--quiet); }
.hp-print-prices__chip.hp-greet-prices__chip--18 { box-shadow: inset 0 -4px 0 #d9d7cf, inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.05); }
.hp-print-prices__chip.hp-greet-prices__chip--16 { box-shadow: inset 0 -2.5px 0 #d9d7cf, inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.05); }
.hp-print-prices__chip.hp-greet-prices__chip--envelope { width: 4.85rem; height: 3.5rem; aspect-ratio: auto; border-radius: 4px; background:
  linear-gradient(to top right, transparent calc(50% - 0.75px), rgba(29, 29, 31, 0.2) 50%, transparent calc(50% + 0.75px)) left top / 50.5% 46% no-repeat,
  linear-gradient(to top left, transparent calc(50% - 0.75px), rgba(29, 29, 31, 0.2) 50%, transparent calc(50% + 0.75px)) right top / 50.5% 46% no-repeat,
  #ffffff; }
.hp-print-prices__chip.hp-greet-prices__chip--square { width: 3.5rem; }

/* The splash's templates ([hp_greeting_templates]), under the note on files: a size to a line, its name
   quiet after it, and a link for each fold, each a full tap target; centered, wrapping on a phone. */
.hp-greet-templates { max-width: 46rem; margin: 1.25rem auto 0; text-align: center; }
.hp-greet-templates__lede { margin: 0 0 0.375rem; font-size: 0.95rem; line-height: 1.5; color: var(--wp--preset--color--quiet); }
.hp-greet-templates__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; column-gap: 1.5rem; }
.hp-greet-templates__list li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.hp-greet-templates__size { text-align: left; font-size: 0.95rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.hp-greet-templates__size small { margin-left: 0.3rem; font-size: 0.75rem; font-weight: 500; color: var(--wp--preset--color--quiet); }
.hp-greet-templates__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; font-weight: 500; color: var(--wp--preset--color--brand-deep); text-decoration: none; white-space: nowrap; }
.hp-greet-templates__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* On a phone the size heads its two links. */
@media (max-width: 599px) {
  .hp-greet-templates__list { grid-template-columns: auto auto; column-gap: 1.25rem; }
  .hp-greet-templates__size { grid-column: 1 / -1; margin-top: 0.5rem; text-align: center; }
}