/* dv-onvv (2026-10-28): the page about ONVV (Wine of Moldova) and the winery's part in its programmes. Kit tokens and
   components only, in the look of the ODA and retailer pages: Literata for titles, Onest for the rest, the house greens,
   white cards on the ground, the band for the questions. Prefix onvv-. */

.pg-onvv {
  --onvv-green: #3A6E20;                 /* the house link green: white on it 6.1:1, it on white 5.9:1 */
  --onvv-tint: rgb(76 140 43 / .09);     /* leaf over white */
  --onvv-shadow: 0 1px 2px rgb(26 23 27 / .05), 0 12px 32px -24px rgb(26 23 27 / .25);
}
.onvv-h2 { margin: 0 0 var(--sp-4); }
.onvv-h2--sm { font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* ---- Head: title and lead left, "Pe scurt" right (under the text on phones) -------------------------------------- */
.onvv-hero { padding-block: var(--sp-5) var(--sp-7); }
.onvv-hero__grid { display: grid; gap: var(--sp-6); }
.onvv-hero__text { min-width: 0; }
.onvv-crumbs { margin-bottom: var(--sp-4); }
.onvv-eyebrow { margin-bottom: var(--sp-2); color: var(--onvv-green); }
.onvv-hero__title { max-width: 24ch; text-wrap: balance; }
.onvv-lead { margin-top: var(--sp-4); }
.onvv-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.onvv-actions .dvh-btn .dvh-icon { width: 16px; height: 16px; margin-left: 6px; opacity: .8; }
.onvv-checked { margin-top: var(--sp-4); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }

.onvv-brief { align-self: start; min-width: 0; padding: var(--sp-5); background: var(--surface); border-radius: var(--radius-media); box-shadow: var(--onvv-shadow); border-top: 3px solid var(--onvv-green); }
.onvv-brief__title { margin-bottom: var(--sp-2); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-title); }
.onvv-facts { margin: 0; }
.onvv-facts__row { display: grid; gap: 2px; padding-block: var(--sp-3); border-top: 1px solid var(--line); }
.onvv-facts__row:first-child { border-top: 0; }
.onvv-facts dt { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.onvv-facts dd { margin: 0; font-size: var(--fs-ui); line-height: 1.5; overflow-wrap: anywhere; text-wrap: pretty; }
.onvv-facts a, .onvv-sources a { color: var(--link); text-underline-offset: .18em; }
.onvv-facts a .dvh-icon, .onvv-sources a .dvh-icon { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; opacity: .8; }

@media (min-width: 900px) {
  .onvv-hero { padding-block: var(--sp-6) var(--sp-7); }
  .onvv-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
  .onvv-brief { margin-top: var(--sp-6); }
}

/* ---- Programmes: one card each, two a row from 900 px ------------------------------------------------------------ */
.onvv-progs { padding-block: var(--sp-6) var(--sp-8); }
.onvv-head { margin-bottom: var(--sp-6); max-width: var(--text-measure); }
.onvv-intro { margin: 0; color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.onvv-progs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .onvv-progs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.onvv-prog {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; margin: 0;
  padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-media);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.onvv-prog > * { margin: 0; }
.onvv-prog__kicker {
  font-family: var(--font-text); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-strong);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--onvv-green);
}
.onvv-prog__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-title); text-wrap: balance; }
.onvv-prog__text { font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.onvv-prog__dv {
  padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--onvv-green); border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--onvv-tint); font-size: var(--fs-ui); line-height: 1.55; text-wrap: pretty;
}
.onvv-prog__dv-label { font-weight: var(--fw-strong); color: var(--onvv-green); }
.onvv-prog__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-top: auto !important; padding-top: var(--sp-1); }
.onvv-prog__links > * { flex: 0 1 auto; }
.onvv-prog__link { display: inline-block; padding-block: 11px; color: var(--link); font-size: var(--fs-ui); font-weight: var(--fw-strong); line-height: 1.45; text-underline-offset: .18em; }
.onvv-prog__link .dvh-icon { display: inline-block; width: 15px; height: 15px; margin-left: 5px; vertical-align: -2px; }
.onvv-prog__link--ours { color: var(--ink); }

/* ---- Photo strip: four a row from 900 px, 2 x 2 on phones ------------------------------------------------------- */
.onvv-photos { padding-top: 0; }
.onvv-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--col-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .onvv-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.onvv-strip__item { min-width: 0; margin: 0; }
.onvv-strip__fig { margin: 0; }
.onvv-strip__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-media); background: var(--band); }
.onvv-strip__cap { margin-top: var(--sp-2); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); text-wrap: pretty; }

/* ---- Questions ---------------------------------------------------------------------------------------------------- */
.onvv-qa { margin: 0; border-top: 1px solid var(--ink); }
.onvv-qa__item { display: grid; gap: var(--sp-2); padding-block: var(--sp-5); border-bottom: 1px solid var(--line); }
.onvv-qa__item dt { font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); }
.onvv-qa__item dd { margin: 0; max-width: var(--text-measure); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
@media (min-width: 900px) {
  .onvv-qa__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: baseline; }
}

/* ---- Sources ------------------------------------------------------------------------------------------------------ */
.onvv-sources { padding-block: var(--sp-6) var(--section-inner); }
.onvv-sources__title { margin-bottom: var(--sp-3); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.onvv-sources__list { max-width: 80ch; margin: 0; padding-left: 1.5em; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.onvv-sources__list li + li { margin-top: var(--sp-2); }
.onvv-sources__list a { overflow-wrap: anywhere; }

/* ---- "Citiți și": compact tiles, 1 a row on phones, 2 from 600 px, 4 from 1200 px -------------------------------- */
.onvv-related { background: var(--band); }
.onvv-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .onvv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .onvv-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.onvv-tile { min-width: 0; margin: 0; }
.onvv-tile__link {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: var(--sp-4); height: 100%;
  padding: var(--sp-4); color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-media);
  transition: border-color var(--dur-hover) var(--ease-out);
}
.onvv-tile__link:not(:has(.onvv-tile__media)) { grid-template-columns: minmax(0, 1fr); }
.onvv-tile__link:hover { border-color: var(--control); }
.onvv-tile__link:hover .onvv-tile__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.onvv-tile__media { display: block; overflow: hidden; border-radius: var(--radius-control); background: var(--band); }
.onvv-tile__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.onvv-tile__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding-right: var(--sp-5); }
.onvv-tile__kicker { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-strong); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--link); }
.onvv-tile__title { font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); text-wrap: pretty; }
.onvv-tile__lead { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.onvv-tile__more { position: absolute; top: var(--sp-4); right: var(--sp-4); display: flex; color: var(--link); }
@media (min-width: 1200px) {
  .onvv-tile__link { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0; padding: 0; overflow: hidden; }
  .onvv-tile__media { border-radius: 0; }
  .onvv-tile__media img { aspect-ratio: 3 / 2; }
  .onvv-tile__body { padding: var(--sp-4) calc(var(--sp-4) + var(--sp-1)) calc(var(--sp-4) + var(--sp-1)); }
  .onvv-tile__body { padding-bottom: calc(var(--sp-4) + var(--sp-6)); }
  .onvv-tile__more { top: auto; bottom: var(--sp-4); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .onvv-tile__more .dvh-icon { transition: transform var(--dur-hover) var(--ease-out); }
  .onvv-tile__link:hover .onvv-tile__more .dvh-icon { transform: translateX(3px); }
}

/* owner 2026-10-27 justifies running text site-wide; short UI lines stay ragged (a justified two-word line gapes) */
.onvv-crumbs li, .onvv-intro, .onvv-checked, .onvv-prog__links, .onvv-prog__dv, .onvv-facts dt, .onvv-facts dd, .onvv-sources__list li { text-align: start; -webkit-hyphens: manual; hyphens: manual; }