/* ==========================================================================
   pages/visits.html · visits hub (blueprint note 15, 3.6)
   Page layer: layout only, kit tokens only. Contract (3.10, revised 2026-10-17 for the owner's full-width film):
   "de la X MDL" inside the film hero on the first screen; the experience cards follow the film.
   ========================================================================== */
.pg-visits-head { padding-top: var(--sp-5); }
.pg-visits-head__lead { margin-top: var(--sp-3); }
.pg-visits-facts { margin-top: var(--sp-5); }
.pg-visits-facts .pg-visits-fact--where { grid-column: 1 / -1; }   /* phone: the long address takes the full row */
.pg-visits-facts__more { grid-column: 1 / -1; }
.pg-visits-price-from b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* experience cards: two by two (owner 2026-10-19, "arrange in 2 by 2 layout"), one column on phones; overrides the kit's
   three columns from 900 px */
/* bottom = the kit's --section (tours-layout 2026-10-21): the gap to "Which tour suits you?" now matches every other
   section gap on the page (it was 72 + 120 px against 120 + 120 px at 1440) */
.pg-visits-list { padding-block: var(--sp-5) var(--section); }
@media (min-width: 600px) { .pg-visits-list .dvh-expcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tap targets of 44 px (tours-layout 2026-10-21): "Rezervați" as tall as "Detalii" beside it (the kit's --sm is 40 px);
   the one-line card titles, the compare table's column names and the group e-mail get a taller hit area without
   moving anything (padding taken back by a negative margin) */
.pg-visits-list .dvh-expcard__foot .dvh-btn--sm { min-height: var(--tap); }
.pg-visits-list .dvh-expcard__title a { display: block; padding-block: 9px; margin-block: -9px; }
.pg-visits-compare__table thead th a, .pg-visits-group .dvh-meta a { display: inline-block; padding-block: 13px; margin-block: -13px; }
/* the drawing's frame holds the playing clip (tours-layout 2026-10-20, owner: "corner isnt rounded for the playing
   animation"): positioned, isolated (Safari) and rounded like the card's top, so dv-visit-loops' video is cut
   exactly like the still, also while the settle scale runs */
.pg-visits-list .dvh-expcard__media { position: relative; isolation: isolate; border-radius: var(--radius-media) var(--radius-media) 0 0; }

/* practical information + groups */
.pg-visits-info__grid { display: grid; gap: var(--sp-6); }
.pg-visits-info .dvh-spectable { border-top: 1px solid var(--line); }
.pg-visits-group { align-self: start; display: grid; gap: var(--sp-3); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-media); }
.pg-visits-group .dvh-btn { justify-self: start; margin-top: var(--sp-2); }

/* the wines, one tap away */
.pg-visits-houses { margin-top: var(--sp-5); --cluster: var(--sp-2); }
.pg-visits-houses .dvh-chip { height: var(--tap); }
.pg-visits-wines__more { margin-top: var(--sp-5); }

/* the four packages (owner 2026-10-19: Basic 280 / Plus 380 / Standard 600 / Premium 1.000 MDL per person): what each includes */
.pg-visits-incl { margin-top: var(--sp-1); padding-top: 0; border-top: 0; }
.pg-visits-incl li { font-size: var(--fs-ui); line-height: 22px; }

/* Basic / Plus / Standard / Premium side by side (kit .dvh-spectable; the wrapper scrolls only if a cell cannot wrap) */
.pg-visits-compare__scroll { margin-top: var(--sp-5); overflow-x: auto; }
.pg-visits-compare__table { border-top: 1px solid var(--line); table-layout: fixed; }
.pg-visits-compare__table th[scope="row"] { width: 34%; }
.pg-visits-compare__table thead th, .pg-visits-compare__table td { text-align: center; padding-inline: var(--sp-1); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.pg-visits-compare__table thead th { width: auto; color: var(--ink); font-weight: var(--fw-strong); vertical-align: bottom; }
.pg-visits-compare__table thead th a { color: inherit; }
.pg-visits-compare__table td b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-visits-compare__table .dvh-icon { width: 20px; height: 20px; color: var(--leaf); stroke-width: 2; vertical-align: middle; }
.pg-visits-compare__note { margin-top: var(--sp-3); }
/* WordPress additions (home-visits, 2026-10-18): RU / EN row names are longer, long words break inside their cell;
   the kit's svg { display: block } would pin the check marks to the left of their centred cells */
.pg-visits-compare__table th, .pg-visits-compare__table td { overflow-wrap: anywhere; hyphens: auto; }
.pg-visits-compare__table td .dvh-icon { display: inline-block; }
/* RU / EN (2026-10-18): a long fact label ("Продолжительность") no longer widens a 390 px phone (it pushed /ru/vizite/
   to 407 px); words hyphenate where the browser has the language's dictionary (Android, iOS) and otherwise break
   inside their column. The bare (RO) pages are untouched. */
html:not([lang="ro"]) .pg-visits-facts .dvh-fact { grid-template-columns: 24px minmax(0, 1fr); }
html:not([lang="ro"]) .pg-visits-facts :is(.dvh-fact__label, .dvh-fact__value) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
/* Below 900 px (visit-plus, 2026-10-19): four value columns no longer fit beside the row names (390 px), so each row
   name takes its own line above the values; the template keeps the table roles and sets --cmp-cols (the visits). */
@media (max-width: 899.98px) {
  .pg-visits-compare__table, .pg-visits-compare__table > :is(thead, tbody) { display: block; }
  .pg-visits-compare__table tr { display: grid; grid-template-columns: repeat(var(--cmp-cols, 4), minmax(0, 1fr)); }
  .pg-visits-compare__table thead td { display: none; }
  .pg-visits-compare__table th[scope="row"] { grid-column: 1 / -1; width: auto; padding: var(--sp-3) 0 0; border-bottom: 0; text-align: start; }
  .pg-visits-compare__table td { padding-top: var(--sp-1); }
  .pg-visits-compare__table td[colspan] { grid-column: 1 / -1; }
}

@media (min-width: 600px) {
  .pg-visits-compare__table thead th, .pg-visits-compare__table td { font-size: var(--fs-ui); line-height: 22px; padding-inline: var(--sp-3); }
}
@media (min-width: 900px) {
  .pg-visits-head { padding-top: var(--sp-6); }
  .pg-visits-facts { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  .pg-visits-facts .pg-visits-fact--where { grid-column: auto; }
  .pg-visits-facts__more { grid-column: auto; align-self: center; }
  /* with the visits' duration, days and languages (page box): the place and four facts in one row (pages/visits.html) */
  .pg-visits-facts--wide { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
  .pg-visits-list { padding-top: var(--sp-6); }
  .pg-visits-list .dvh-expcard__media { aspect-ratio: 16 / 9; }   /* the drawings' own frame, uncropped */
  .pg-visits-compare__table th[scope="row"] { width: 28%; }
  .pg-visits-info__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-7); }
}

/* the price of each tour stands out (owner 2026-10-19: "cost below the animations barely visible, maybe bigger and greenish"):
   the large price size in the success green (#2D6A4F, 5.8:1 on the card); "de persoană" stays small and muted */
.dvh-expcard__price { font-size: var(--fs-price-lg); line-height: 1.2; color: var(--success); }
.dvh-expcard__price .dvh-per { font-size: var(--fs-meta); color: var(--muted); }