/* ==========================================================================
   Minted — Buy page styles (buy.html)
   Load after css/tokens.css, css/components.css and css/main.css.
   Option A (Carlo, Oct 14): the hero (the mockup in a framed panel beside the bundle: label, h1, tagline, the price,
   What's Included, Buy Now) → one band with About the Book and Book Details → the hidden testimonial band.
   Semantic tokens only; the mockup's raw values map to the nearest semantic token by value, and a translucent step
   of one is a color-mix() of that token, never a new primitive. Roles the system lacks are borrowed by value, as on
   the contact page (#83): the display accent words (--minted-text-label) and the tag pill (--minted-bg-hover-wash,
   --minted-glow-200). One primitive stays where no semantic role exists yet, as on the contact page: the tag's mint
   text, --minted-green-100, as approved (the contact page's tags use --minted-text-secondary). The mockup's panel
   is a raised plane: its recipe is in main.css's family list.
   ========================================================================== */

.buy { position: relative }
.buy > :not(.grid-field) { position: relative; z-index: 1 }
.buy .accent { color: var(--minted-text-label) }

/* ============ A · Hero ============ */
.buy-hero { max-width: 1320px; margin: 0 auto; padding: calc(var(--minted-nav-height) + clamp(56px, 8vh, 96px)) var(--minted-pad-x) clamp(56px, 8vh, 96px) }
/* both columns stretch to the row, so the panel's column is as tall as the bundle's and the panel can travel in it */
.buy-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: stretch }
.buy-hero__media { position: relative }
/* sticks just under the fixed nav; stops level with the bottom of the Buy Now block, where its column ends */
.buy-hero__stage { position: sticky; top: calc(var(--minted-nav-height) + var(--minted-space-3)); aspect-ratio: 4 / 5; overflow: hidden } /* raised plane: main.css */
.buy-hero__stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block }

.buy-hero__info { display: flex; flex-direction: column; gap: 24px }
.buy-hero__head { display: flex; flex-direction: column; gap: 12px }
.buy-hero__title { font-family: var(--minted-font-display); font-weight: 800; font-stretch: 120%; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.02; letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance }
.buy-hero__tagline { max-width: 40ch; color: var(--minted-text-secondary); font-size: 1.1rem; text-wrap: pretty }

.buy-hero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px }
.buy-hero__amount { font-family: var(--minted-font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(2.4rem, 3.4vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--minted-text-primary) }
.buy-hero__tag {
  padding: 6px 10px; background-color: var(--minted-bg-hover-wash); border: 1px solid var(--minted-glow-200);
  font-family: var(--minted-font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; color: var(--minted-green-100);
}

/* What's Included: compact rows between hairlines, each a recessed icon tile beside its title and copy */
.included { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: var(--minted-border-hairline) }
.included li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: var(--minted-border-hairline) }
.included__icon {
  width: 40px; height: 40px; display: grid; place-content: center; color: var(--minted-text-label);
  background-color: var(--minted-surface-recessed); background-image: var(--minted-recessed-face); border: var(--minted-border-hairline); box-shadow: var(--minted-press);
}
.included__icon svg { display: block }
.included__label { font-family: var(--minted-font-mono); font-size: var(--minted-size-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--minted-text-primary) }
.included__body { margin-top: 2px; font-size: 0.92rem; line-height: 1.5; color: var(--minted-text-muted); text-wrap: pretty }

.buy-hero__action { display: flex; flex-direction: column; gap: 12px }
.buy-hero__buy { width: 100%; justify-content: space-between; gap: 14px; padding: 22px 24px; font-size: 0.85rem }
.buy-hero__arrow { width: 36px; height: 36px; flex: none; display: grid; place-content: center; background-color: color-mix(in srgb, var(--minted-text-on-accent) 16%, transparent) }
.buy-hero__arrow svg { display: block }
.buy-hero__secure {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; text-align: center; text-wrap: balance;
  font-family: var(--minted-font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--minted-text-faint);
}
.buy-hero__secure svg { flex: none; display: block; color: var(--minted-text-label) }
/* Coming Soon (Josh, Nov 6): Buy Now's box and type, drawn as a muted block that isn't a control. The label is the
   message, so it stays at full strength, never the 45% opacity of a disabled button. 82px is Buy Now's height: the 36px arrow, 22px padding, 1px border */
.buy-hero__soon {
  display: flex; align-items: center; width: 100%; min-height: 82px; padding: 22px 24px;
  font-family: var(--minted-font-mono); font-weight: var(--minted-weight-btn); font-size: 0.85rem; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase;
  color: var(--minted-text-muted); background-color: var(--minted-surface-raised); border: var(--minted-border-hairline);
}
.buy-hero__action .tlink { align-self: flex-start }

/* ============ B · About the Book and Book Details ============ */
.buy-band { border-top: var(--minted-border-hairline); background-color: color-mix(in srgb, var(--minted-bg-surface) 72%, transparent) }
.buy-band__grid { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 9vh, 104px) var(--minted-pad-x); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start }
.buy-band__about, .buy-band__details { display: flex; flex-direction: column; gap: var(--minted-space-3) }
.buy-band__about-text { max-width: 34ch; font-family: var(--minted-font-display); font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.45; color: var(--minted-text-primary); text-wrap: pretty }

/* book details (Josh, Oct 13): term beside value, a hairline between rows; stacked on narrow screens. One label
   column for every row (subgrid), never narrower than the longest label, so a label can't run into its value when
   text is enlarged (WCAG 1.4.4) and the values always line up */
.details { margin: 0; display: grid; grid-template-columns: minmax(max-content, 140px) minmax(0, 1fr); column-gap: var(--minted-space-3); border-top: var(--minted-border-hairline) }
.details__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 16px 0; border-bottom: var(--minted-border-hairline) }
.details__term { margin: 0; padding-top: 3px; font-family: var(--minted-font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--minted-text-label) }
.details__value { margin: 0; color: var(--minted-text-secondary); font-size: 0.95rem; line-height: 1.55; text-wrap: pretty }
.details__value a { color: var(--minted-text-label); text-decoration: underline; text-underline-offset: 3px }

/* returns: a native disclosure, closed until asked; only the chevron turns. Its hit area reaches 10px above and below
   the 24px line, a 44px target like the contact FAQ's, without making the row taller or the focus ring looser */
.returns__summary { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; list-style: none }
.returns__summary::before { content: ""; position: absolute; top: -10px; right: 0; bottom: -10px; left: 0 }
.returns__summary::-webkit-details-marker { display: none }
.returns__chev { flex: none; display: block; color: var(--minted-text-label); transition: transform var(--minted-dur-fast) var(--minted-ease-state) }
.returns[open] .returns__chev { transform: rotate(90deg) }
.returns__text { margin-top: 10px; font-size: 0.92rem; line-height: 1.55; color: var(--minted-text-muted) }

/* testimonial band (cards themselves are shared, in main.css) */
.testi-wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--minted-pad-x) clamp(90px, 12vh, 140px); display: grid; gap: clamp(28px, 5vh, 44px) }
.testi-wrap__head { display: grid; gap: 14px; justify-items: center; text-align: center }
.testi-wrap__title { margin: 0; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 115%; font-size: var(--minted-size-h3); line-height: 1.12; letter-spacing: -0.01em; text-transform: uppercase }
.testi-wrap__title em { font-style: normal; color: var(--minted-green-300) }

/* ============ Breakpoints ============ */
@media (max-width: 980px) {
  .buy-hero__grid, .buy-band__grid { grid-template-columns: minmax(0, 1fr) }
  .buy-hero__stage { position: static; aspect-ratio: 3 / 2 }
}
@media (max-width: 560px) {
  .details { grid-template-columns: minmax(0, 1fr) }
  .details__row { row-gap: 4px }
}
/* phones: each sentence of the returns summary on its own line, never split mid-sentence, whatever the font metrics
   (Carlo, Oct 15). The site's phone breakpoint, where tokens.css floors the page gutter */
@media (max-width: 480px) {
  .returns__limit { display: block }
}
@media (prefers-reduced-motion: reduce) {
  .returns__chev { transition: none }
}