/* ==========================================================================
   Doina Vin · dv-guides/assets/guides.css
   Page layer of "Jurnal și ghiduri" (journal, grape guides, wedding wine). Kit tokens and components only
   (tokens.css, base.css, components.css); loaded after the theme's glue (handle dvh-wp) on these pages.
   390 -> 1440 px: one reading column of at most ~72ch, tiles 1 / 2 / 3 columns, calculator rows stacked on phones.
   ========================================================================== */

/* ---- Head --------------------------------------------------------------------------------------- */
.pg-guide-head { padding-block: var(--sp-5) var(--sp-6); }
.pg-guide-crumbs { margin-bottom: var(--sp-5); }
.pg-guide-kicker { margin-bottom: var(--sp-2); }
.pg-guide-title { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 26ch; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.pg-guide-lead { margin-top: var(--sp-4); }
.pg-guide-meta { margin-top: var(--sp-3); }
.pg-guide-toc { margin-top: var(--sp-5); max-width: 960px; }
.pg-guide-toc__title { margin-bottom: var(--sp-2); }
.pg-guide-toc__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pg-guide-toc__list .dvh-chip { text-decoration: none; max-width: 100%; white-space: normal; text-align: left; }

/* ---- Top photo ------------------------------------------------------------------------------------ */
.pg-guide-hero { margin-bottom: var(--sp-6); }
.pg-guide-hero__media { border-radius: var(--radius-media); overflow: hidden; background: var(--band); }
.pg-guide-hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 600px) { .pg-guide-hero__media img { aspect-ratio: 16 / 8; } }
@media (min-width: 1200px) { .pg-guide-hero__media img { aspect-ratio: 16 / 6.5; } }

/* ---- Reading column ----------------------------------------------------------------------------------- */
.pg-guide-body { padding-bottom: var(--section-inner); }
.pg-guide-prose { max-width: 76ch; }
.pg-guide-prose > * + * { margin-top: 1em; }
.pg-guide-prose h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-top: var(--sp-7); scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.pg-guide-prose h3 { margin-top: var(--sp-6); }
.pg-guide-prose h2 + *, .pg-guide-prose h3 + * { margin-top: var(--sp-3); }
.pg-guide-prose ul, .pg-guide-prose ol { padding-left: 1.25em; max-width: var(--text-measure); }
.pg-guide-prose li { line-height: var(--lh-body); }
.pg-guide-prose li + li { margin-top: var(--sp-2); }
.pg-guide-prose li::marker { color: var(--muted); }
.pg-guide-prose blockquote {
  max-width: var(--text-measure); border-left: 3px solid var(--action); padding-left: var(--sp-5);
  font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-style: italic;
}
.pg-guide-prose blockquote + p { color: var(--muted); font-size: var(--fs-meta); }
.pg-guide-prose .pg-guide-note {
  max-width: var(--text-measure); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-media); padding: var(--sp-5);
}
.pg-guide-prose .pg-guide-note > * + * { margin-top: var(--sp-3); }
.pg-guide-prose .dvh-cards { max-width: none; margin-top: var(--sp-5); }
/* inside the 76ch text column the kit's 4 columns (from 1200 px) leave cards too narrow for the house name */
@media (min-width: 1200px) { .pg-guide-prose .dvh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-guide-prose .dvh-trust { max-width: var(--text-measure); }
.pg-guide-prose .dvh-btn { text-decoration: none; }
.pg-guide-price { font-weight: var(--fw-strong); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.pg-guide-prose p .dvh-nowrap { white-space: nowrap; }

/* tables in the text (facts, tours, the arithmetic grid) */
.pg-guide-table { max-width: 100%; position: relative; } /* keeps visually hidden cell text inside the scroll box (content-wave2) */
.pg-guide-prose .pg-guide-table { max-width: 76ch; }
.pg-guide-table .dvh-table { font-size: var(--fs-ui); }
.pg-guide-table .dvh-table th { text-align: left; vertical-align: top; }
.pg-guide-table .dvh-table thead th { white-space: nowrap; }
.pg-guide-table .dvh-table tbody th { font-weight: var(--fw-ui); }
.pg-guide-table .dvh-table td, .pg-guide-table .dvh-table th { padding: var(--sp-3) var(--sp-4); }
.pg-guide-table .dvh-num, .pg-guide-table th.dvh-num { text-align: right; }
.pg-guide-tours .dvh-table tbody th a { color: var(--ink); }
.pg-guide-tours .dvh-per { display: block; }
@media (min-width: 600px) { .pg-guide-tours .dvh-per { display: inline; } }
.pg-guide-grid tbody th { font-variant-numeric: tabular-nums lining-nums; }

/* ---- Wedding calculator --------------------------------------------------------------------------------- */
.pg-guide-calc {
  max-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-media);
  padding: var(--sp-5); margin-block: var(--sp-5) var(--sp-6);
}
.pg-guide-calc > * + * { margin-top: var(--sp-5); }
.pg-guide-calc__inputs { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .pg-guide-calc__inputs { grid-template-columns: repeat(2, minmax(0, 260px)); } }
.pg-guide-calc .dvh-input { width: 100%; font-variant-numeric: tabular-nums; }
.pg-guide-calc__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); max-width: none; }
.pg-guide-calc__n { font-family: var(--font-display); font-size: var(--fs-numeral); line-height: var(--lh-numeral); font-variant-numeric: tabular-nums lining-nums; }
.pg-guide-calc__unit { color: var(--muted); font-size: var(--fs-ui); }
.pg-guide-calc .pg-guide-table { border: 0; background: transparent; }
.pg-guide-calc__table th .dvh-meta { display: block; font-weight: var(--fw-text); margin-top: 2px; }
.pg-guide-calc__table tbody th a { color: var(--ink); }
.pg-guide-calc__act { text-align: right; }
.pg-guide-calc__act .dvh-btn { white-space: normal; text-align: center; }
.pg-guide-calc__note { max-width: var(--text-measure); }
@media (max-width: 759.98px) {
  .pg-guide-calc__table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pg-guide-calc__table, .pg-guide-calc__table tbody { display: block; width: 100%; }
  .pg-guide-calc__table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-4) 0; border-top: 1px solid var(--line);
  }
  .pg-guide-calc__table tbody tr:first-child { border-top: 0; }
  .pg-guide-calc__table tr > * { padding: 0 !important; border: 0 !important; min-width: 0; }
  .pg-guide-calc__table tbody th { grid-column: 1 / -1; }
  .pg-guide-calc__table td.dvh-num { text-align: left; }
  .pg-guide-calc__table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--fs-meta); }
  .pg-guide-calc__table .pg-guide-calc__act { grid-column: 1 / -1; text-align: left; }
  .pg-guide-calc__table .pg-guide-calc__act .dvh-btn { width: 100%; }
}

/* promotion lines from Promoții */
.pg-guide-promo { border-top: 0; padding-top: 0; }
.pg-guide-promo li { font-size: var(--fs-body); line-height: var(--lh-body); }
.pg-guide-promo .dvh-icon { margin-top: 3px; }

/* ---- Sections after the text ------------------------------------------------------------------------------ */
.pg-guide-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.pg-guide-sechead { max-width: 68ch; margin-bottom: var(--sp-6); }
.pg-guide-sechead > * + * { margin-top: var(--sp-3); }
.pg-guide-list .pg-guide-h2, .pg-guide-related .pg-guide-h2 { margin-bottom: var(--sp-6); }
.pg-guide-more { margin-top: var(--sp-6); }
.pg-guide-wines .dvh-cards { margin-top: 0; }

.pg-guide-faq { padding-block: var(--sp-6) var(--section-inner); }
.pg-guide-faq .pg-guide-h2 { margin-bottom: var(--sp-5); }
.pg-guide-faq .dvh-accordion { max-width: 76ch; }
.pg-guide-faq summary span { min-width: 0; padding-block: var(--sp-3); }

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

/* tiles: hub articles and "Citiți și" */
.pg-guide-tiles { list-style: none; padding: 0; display: grid; gap: var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .pg-guide-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pg-guide-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-guide-tile { min-width: 0; }
.pg-guide-tile__link {
  display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-media); overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.pg-guide-tile__link:hover { border-color: var(--control); }
.pg-guide-tile__link:hover .pg-guide-tile__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pg-guide-tile__media { display: block; background: var(--band); }
.pg-guide-tile__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.pg-guide-tile__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); flex: 1 1 auto; }
.pg-guide-tile__kicker { font-size: var(--fs-meta); }
.pg-guide-tile__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-title); text-wrap: balance; overflow-wrap: break-word; }
.pg-guide-tile__lead { color: var(--muted); font-size: var(--fs-ui); line-height: var(--lh-meta); }
.pg-guide-tile__more { margin-top: auto; padding-top: var(--sp-2); color: var(--link); }
.pg-guide--hub .pg-guide-list { padding-top: var(--sp-2); }
.pg-guide-related { background: var(--band); }

/* hub without photo above the list: the list follows the head directly */
.pg-guide--hub .pg-guide-body { padding-bottom: 0; }

/* distinctions of the page's wines (Distincții, live) */
.pg-guide-awards { list-style: none; padding: 0 !important; max-width: var(--text-measure); border-top: 1px solid var(--line); }
.pg-guide-awards li { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: 2px var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--line); margin: 0 !important; }
.pg-guide-awards__year { grid-row: span 2; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-variant-numeric: tabular-nums lining-nums; color: var(--muted); }
.pg-guide-awards__what { min-width: 0; }
.pg-guide-awards__wine { min-width: 0; color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.pg-guide-awards__more { font-size: var(--fs-ui); }

/* every grape of the shop with its live count (grapes hub) */
.pg-guide-grapes { list-style: none; padding: 0 !important; max-width: none; display: grid; gap: var(--sp-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .pg-guide-grapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pg-guide-grapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-guide-grapes li { margin: 0 !important; min-width: 0; }
.pg-guide-grapes__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--sp-3);
  min-height: var(--tap); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-media); color: var(--ink); text-decoration: none; transition: border-color var(--dur-hover) var(--ease-out);
}
.pg-guide-grapes__link:hover { border-color: var(--control); }
.pg-guide-grapes__name { font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); overflow-wrap: break-word; }
.pg-guide-grapes__count { grid-column: 1; color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.pg-guide-grapes__go { grid-column: 2; grid-row: 1 / span 2; color: var(--link); }
.pg-guide-grape-secs > * + * { margin-top: var(--sp-6); }
.pg-guide-grape-secs { margin-top: var(--sp-6); }
.pg-guide-grape h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
.pg-guide-prose .pg-guide-grape .dvh-cards { margin-top: var(--sp-4); }

/* row headers in guide tables read as text, not as the kit's uppercase column heads */
.pg-guide-table .dvh-table tbody th {
  background: transparent; text-transform: none; letter-spacing: normal; white-space: normal;
  font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-ui); color: var(--ink);
  border-top: 1px solid var(--line); padding: var(--sp-3) var(--sp-4);
}
.pg-guide-table .dvh-table tbody th a { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pg-guide-table .dvh-table td { font-size: var(--fs-ui); }
.pg-guide-table .dvh-table thead th[colspan] { text-align: center; }
.pg-guide-grid tbody th { text-align: left; }

/* wines chosen by their own pairing data */
.pg-guide-pairing { max-width: var(--text-measure); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-media); padding: var(--sp-4) var(--sp-5); }
.pg-guide-pairing__intro { font-size: var(--fs-meta); color: var(--muted); }
.pg-guide-pairing__list { margin-top: var(--sp-2) !important; }
.pg-guide-pairing__list a { color: var(--ink); }
.pg-guide-pairing__text { color: var(--muted); font-size: var(--fs-ui); }