/* ==========================================================================
   assets/pages/crama.css = the page <style> of pages/crama.html (copied verbatim): the estate page "Crama" (owner 2026-10-17: Crama was "empty", wants
   "meaningful content"; then "poorest possible layout": layout pass of 2026-10-17). A hero film, the overture,
   then seven chapters: the 1875 cellar (its film opens it), visits, dated history, Codru and IGP Codru,
   winemaking (its film opens it), the 14 houses, honours.
   Facts: content/facts.yaml and data/catalog.json only (data-fact names the fact id).
   Photos: CMB shoot of 6 September 2025 (img/crama/, no people). Layout only: kit tokens.
   ========================================================================== */
.pg-crama-sec { padding-block: calc(var(--section) * .8); }
.pg-crama-sec--band { background: var(--band); }
.pg-crama-sec--cont { padding-top: var(--sp-7); }
.pg-crama-head { display: grid; gap: var(--sp-3); max-width: 46rem; margin-bottom: var(--sp-7); }
.pg-crama-head h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.pg-crama-head h2, .pg-crama-chfilm h2, .pg-crama-hero h1, #vizite h2 { letter-spacing: var(--track-display); }
.pg-crama-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }
.pg-crama-frame { position: relative; margin: 0; overflow: clip; border-radius: var(--radius-media); background: var(--band); }
.pg-crama-frame > img { width: 100%; height: 100%; object-fit: cover; }
.pg-crama-fig { margin: 0; }
.pg-crama-fig figcaption { margin-top: var(--sp-2); }

/* films: the hero and the two chapter openers. Page-scoped: the kit's film rules stay motion-start's.
   The kit caps .dvh-film__body at 1296px while it also carries the container's gutter, which insets the film text
   twice (x=144 at 1440 against x=72 for the logo and every section); here it gets the container's own width. */
.dvh-container.dvh-film__body { max-width: calc(var(--container) + 2 * var(--page-gutter)); }
.dvh-film.pg-crama-hero::before { background: linear-gradient(180deg, rgb(26 23 27 / .2) 0%, rgb(26 23 27 / .55) 40%, rgb(26 23 27 / .86) 100%); }
.dvh-film.pg-crama-hero .dvh-kicker { color: var(--on-action); }
.pg-crama-chfilm h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.pg-crama-chfilm .dvh-film__body > * { max-width: 30rem; }

/* overture: what Crama is in two paragraphs, four figures, the chapter index */
.pg-crama-intro { padding-block: var(--section) var(--sp-7); }
.pg-crama-intro__grid { display: grid; gap: var(--sp-7); }
.pg-crama-intro .dvh-kicker { margin-bottom: var(--sp-3); }
.pg-crama-overture { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.45; max-width: 36ch; text-wrap: pretty; }
.pg-crama-intro__text > p + p { margin-top: var(--sp-4); max-width: 33em; }
.pg-crama-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); margin-top: var(--sp-7); }
.pg-crama-figures > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--ink); }
.pg-crama-figures dd { font-family: var(--font-display); font-size: var(--fs-numeral); line-height: var(--lh-numeral); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pg-crama-figures dt { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.pg-crama-intro .pg-crama-frame { aspect-ratio: 4 / 3; }
.pg-crama-toc { margin-top: var(--sp-8); }
.pg-crama-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--line); }
.pg-crama-toc a { display: flex; align-items: baseline; gap: var(--sp-2); min-height: var(--tap); padding-block: var(--sp-3); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); }
.pg-crama-toc a span { font-family: var(--font-text); font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-crama-toc a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* the cellar: photo beside text and a short fact list */
.pg-crama-split { display: grid; gap: var(--sp-6); align-items: center; }
.pg-crama-split .pg-crama-frame { aspect-ratio: 3 / 2; }
.pg-crama-split__text > * + * { margin-top: var(--sp-4); }
.pg-crama-split__text .dvh-factlist { margin-top: var(--sp-6); }

/* visits: the kit's visit strip, as a chapter */
#vizite h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
/* each price says what it covers (the visit page charges it per guest); from 600px the basis sits under the price */
#vizite .pg-crama-per { font-weight: var(--fw-text); color: var(--muted); }
@media (min-width: 600px) {
  #vizite .dvh-visitrow__price { text-align: end; }
  #vizite .pg-crama-per { display: block; font-size: var(--fs-meta); line-height: var(--lh-meta); }
}

/* history: dated timeline, the sources in one list under it, the water tower beside it */
.pg-crama-history { display: grid; gap: var(--sp-7); }
.pg-crama-timeline { border-bottom: 1px solid var(--line); }
.pg-crama-event { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); padding-block: var(--sp-5); border-top: 1px solid var(--line); }
.pg-crama-event__when { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-variant-numeric: tabular-nums lining-nums; text-wrap: balance; }
.pg-crama-event__body > * + * { margin-top: var(--sp-2); }
.pg-crama-event__body h3 { font-size: var(--fs-card); line-height: var(--lh-card); }
.pg-crama-event__body p { max-width: 33em; }
.pg-crama-event__body .dvh-quotebox { margin-top: var(--sp-5); }
.pg-crama-sources { margin-top: var(--sp-5); }
.pg-crama-sources summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; list-style: none; font-size: var(--fs-ui); }
.pg-crama-sources summary::-webkit-details-marker { display: none; }
.pg-crama-sources[open] summary .dvh-icon { rotate: 180deg; }
.pg-crama-sources dl > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--sp-3); padding-block: var(--sp-2); border-top: 1px solid var(--line); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.pg-crama-sources dt { color: var(--ink); font-variant-numeric: tabular-nums; }
.pg-crama-history__aside { display: grid; gap: var(--sp-6); align-content: start; }
.pg-crama-history__aside .pg-crama-frame { aspect-ratio: 4 / 5; }

/* Codru: the hills, the region in figures, what IGP Codru means */
.pg-crama-wide { aspect-ratio: 4 / 3; }
.pg-crama-wide > img { object-position: 50% 25%; }
.pg-crama-land { display: grid; gap: var(--sp-7); margin-top: var(--sp-7); }
.pg-crama-land .dvh-factlist { margin-top: var(--sp-4); }
.pg-crama-igp { align-self: start; padding: var(--sp-6) var(--sp-5); background: var(--surface); border-radius: var(--radius-media); }
.pg-crama-igp > * + * { margin-top: var(--sp-3); }
.pg-crama-igp h3 { font-size: var(--fs-h3); }
.pg-crama-igp .dvh-cluster { margin-top: var(--sp-5); --cluster: var(--sp-2); }
.pg-crama-igp .dvh-chip { min-height: var(--tap); }

/* winemaking: four steps, each with its figure, in reading order */
.pg-crama-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--col-gap); }
.pg-crama-step { padding-top: var(--sp-4); border-top: 1px solid var(--ink); }
.pg-crama-step > * + * { margin-top: var(--sp-2); }
.pg-crama-step__n { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-crama-step__fig { font-family: var(--font-display); font-size: var(--fs-numeral); line-height: var(--lh-numeral); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pg-crama-step__fig--word { font-size: var(--fs-h2); line-height: var(--fs-numeral); }
.pg-crama-step__unit { display: block; margin-top: var(--sp-1); font-family: var(--font-text); font-size: var(--fs-ui); line-height: var(--lh-meta); color: var(--muted); white-space: normal; }
.pg-crama-step h3 { font-size: var(--fs-card); line-height: var(--lh-card); }
.pg-crama-note { margin-top: var(--sp-5); }

/* the 14 houses as one family: each in its own tint, one bottle each, linked to its house page */
.pg-crama-houses { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); }
.pg-crama-house a { display: grid; gap: var(--sp-2); color: var(--ink); text-decoration: none; }
.pg-crama-house__well { position: relative; display: block; aspect-ratio: 3 / 4; overflow: clip; background: var(--house-tint); border-radius: var(--radius-media); box-shadow: inset 0 3px 0 var(--house-deep); }
.pg-crama-house__well img { position: absolute; left: 50%; bottom: 7%; height: 82%; width: auto; max-width: none; translate: -50% 0; }
.pg-crama-house__name { display: flex; align-items: baseline; gap: var(--sp-2); min-height: calc(2em * var(--lh-card)); font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); }
.pg-crama-house__name .dvh-dot { translate: 0 -2px; }
.pg-crama-house__count { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.pg-crama-house a:hover .pg-crama-house__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .pg-crama-house__well img { transition: translate var(--dur-ui) var(--ease-out); }
  .pg-crama-house a:hover .pg-crama-house__well img { translate: -50% -6px; }
}

/* honours teaser */
.pg-crama-honours { list-style: none; padding: 0; display: grid; gap: var(--sp-5) var(--col-gap); }
.pg-crama-honour { display: grid; align-content: start; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ink); }
.pg-crama-honour__fig { font-family: var(--font-display); font-size: var(--fs-numeral); line-height: var(--lh-numeral); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pg-crama-honour__fig--word { font-size: var(--fs-h2); line-height: var(--fs-numeral); }
.pg-crama-honour p:last-child { font-size: var(--fs-ui); line-height: 1.55; color: var(--muted); }

@media (max-width: 599.98px) {
  .pg-crama-hero .dvh-film__media :is(video, img) { object-position: 85% 50%; }
  .pg-crama-intro .pg-crama-fig { display: none; }
  .pg-crama-toc ol { display: flex; gap: var(--sp-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); scroll-padding-inline: var(--page-gutter); }
  .pg-crama-toc ol::-webkit-scrollbar { display: none; }
  .pg-crama-toc li { flex: none; scroll-snap-align: start; }
  .pg-crama-history__aside .pg-crama-frame { aspect-ratio: 1 / 1; }
  .pg-crama-history__aside .pg-crama-frame > img { object-position: 50% 40%; }
  .pg-crama-houses { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); scroll-padding-inline: var(--page-gutter); }
  .pg-crama-houses::-webkit-scrollbar { display: none; }
  .pg-crama-house { scroll-snap-align: start; }
}
@media (max-width: 599.98px) and (max-height: 720px) {
  /* short phones: the text fills the hero and starts where the scrim is lightest */
  .dvh-film.pg-crama-hero::before { background: linear-gradient(180deg, rgb(26 23 27 / .55) 0%, rgb(26 23 27 / .7) 40%, rgb(26 23 27 / .86) 100%); }
}
@media (min-width: 600px) {
  .pg-crama-toc ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-crama-event { grid-template-columns: 88px minmax(0, 1fr); gap: var(--sp-4); }
  .pg-crama-houses { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--col-gap); }
  .pg-crama-honours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-crama-wide { aspect-ratio: 16 / 9; }
}
@media (min-width: 900px) {
  .pg-crama-intro__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
  .pg-crama-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-crama-figures dd { font-size: var(--fs-h2); }
  .pg-crama-history { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
  .pg-crama-event { grid-template-columns: 128px minmax(0, 1fr); gap: var(--sp-5); }
  .pg-crama-event__when { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .pg-crama-event__when.pg-crama-event__when--text { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .pg-crama-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
  .pg-crama-wide { aspect-ratio: 21 / 9; }
  .pg-crama-land { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
  .pg-crama-igp { padding: var(--sp-6); }
  .pg-crama-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-crama-houses { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .pg-crama-toc ol { grid-template-columns: repeat(7, minmax(0, 1fr)); }   /* below 1200 "05 Vinificația" outgrows a seventh of the row */
}
@media (min-width: 900px) and (min-height: 760px) {
  .pg-crama-history__aside { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
  .pg-crama-history__aside .pg-crama-frame { max-height: calc(100svh - var(--header-h) - 96px); }
}