/* ==========================================================================
   assets/pages/mog.css = the page <style> of pages/mog.html: the page "MOG". MOG is a light aromatic wine with
   reduced alcohol from Doina Vin, for the slim can. Owner decisions 2026-10-17: one can concept (the lime can),
   35 MDL / doză, on sale (the buy box of inc/woo-lines.php: the wine page's form, trust list and marks); no vote.
   Sources: the MOG designer brief of 25.03.2026 (light aromatic wine, low alcohol, slim can, the ten working
   flavour names, the flavour right after the MOG name and the grape variety small on the back with the
   mandatory mentions). Left out on purpose: alcohol percentage, launch date and grape varieties (not
   confirmed), the brief's audience and slang (nothing aimed at minors).
   Pictures: img/mog/mog-can-lime-*.webp (on white). Layout only: kit tokens.
   ========================================================================== */
.pg-mog-sec { padding-block: var(--section); }
.pg-mog-sec--band { background: var(--band); }
.pg-mog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.pg-mog-frame { position: relative; margin: 0; overflow: clip; border-radius: var(--radius-media); background: var(--surface); }
.pg-mog-frame > img { width: 100%; height: 100%; object-fit: contain; }
.pg-mog-fig { margin: 0; }

/* first screen: name, what it is, the price; the one can on white */
.pg-mog-hero { padding-block: var(--sp-6) var(--sp-7); }
.pg-mog-hero__grid { display: grid; gap: var(--sp-7); align-items: center; }
.pg-mog-hero__text > * + * { margin-top: var(--sp-4); }
.pg-mog-hero__text .dvh-lead { max-width: 42ch; text-wrap: pretty; }
.pg-mog-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.pg-mog-hero__text .pg-mog-price { margin-top: var(--sp-5); }
.pg-mog-price__unit { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--muted); }
/* the buy box under the price, as wide as the lead text (its own kit margins inside) */
.pg-mog-hero__text .pg-mog-buy { max-width: 32rem; margin-top: 0; }
.pg-mog-hero__text .pg-mog-actions { margin-top: var(--sp-6); }

/* the can: 3:4, never wider than 360 px, its name and the provisional-text note under it */
.pg-mog-can { justify-self: center; inline-size: min(100%, 360px); }
.pg-mog-can .pg-mog-frame { aspect-ratio: 3 / 4; }
.pg-mog-can figcaption { display: grid; gap: 2px; margin-top: var(--sp-3); }
.pg-mog-can__name { font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); }

/* what MOG is: text beside a short fact list, then the ten working flavours */
.pg-mog-about { display: grid; gap: var(--sp-7); }
.pg-mog-about__text > * + * { margin-top: var(--sp-4); }
.pg-mog-about__text h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); margin-top: var(--sp-2); }
.pg-mog-flavours { margin-top: var(--sp-8); }
.pg-mog-flavours ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: var(--sp-4); border-top: 1px solid var(--line); }
.pg-mog-flavours li { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; padding-block: var(--sp-3); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); }
.pg-mog-flavours li > span { font-family: var(--font-text); font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-mog-flavours .dvh-meta { margin-top: var(--sp-3); }

/* phones: the action full width, in the thumb zone */
@media (max-width: 599.98px) {
  .pg-mog-hero .pg-mog-actions .dvh-btn { flex: 1 1 100%; }
}

@media (min-width: 900px) {
  .pg-mog-hero { padding-block: var(--sp-8); }
  .pg-mog-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
  .pg-mog-about { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
  .pg-mog-flavours ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}