/* ==========================================================================
   tpl-trade.php · the trade pages (pages-trade, 2026-10-20; prefix tr-)
   Loaded after assets/pages/profesionisti.css, whose head, chapter index, section, bottle-card and action rules
   these pages share: the same look as the hub. Here only what the hub has not: the kicker link to the hub, the
   "at a glance" facts, rich text, the bottles under a section, the steps, the questions, the closing contact panel and
   the other trade pages. Kit tokens and components only; no motion of its own.
   ========================================================================== */
.tr-kicker { color: inherit; text-decoration: none; }
.tr-kicker:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* the chapter index: as many even columns as fit (3 to 6 chapters) */
@media (min-width: 900px) {
  .tr-toc ol { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* at a glance: label above value on phones, side by side from 700 px, a hairline per row */
.tr-facts { padding-block: var(--sp-7); background: var(--band); }
.tr-facts__title { 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(--muted); }
.tr-facts__list { display: grid; margin-top: var(--sp-3); border-top: 1px solid var(--line); }
.tr-facts__list > div { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); border-bottom: 1px solid var(--line); }
.tr-facts__list dt { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.tr-facts__list dd { font-size: var(--fs-body); line-height: 1.5; text-wrap: pretty; }

/* rich text of a section or an answer */
.tr-prose { max-width: var(--text-measure); }
.tr-prose > * + * { margin-top: 1em; }
.tr-prose p, .tr-prose li { font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.tr-prose ul, .tr-prose ol { padding-left: 1.25em; }
.tr-prose li + li { margin-top: var(--sp-2); }
.tr-sec .pg-prof-sechead { margin-bottom: var(--sp-5); }

/* the bottles under a section: the hub's row cards */
.tr-bottles { margin-top: var(--sp-7); }

/* the steps (kit dvh-steps) and the questions (kit dvh-accordion) */
.tr-steps__list li { align-content: start; }   /* the rows of a step keep their height when a neighbour is taller */
.tr-steps__list p { color: var(--ink); }
.tr-faq__list { max-width: 60rem; }

/* the closing panel: the one request, the e-mail and, when published, the phone */
.tr-contact__panel { display: grid; gap: var(--sp-4); max-width: 52rem; padding: var(--sp-6) var(--sp-5); background: var(--surface); border-radius: var(--radius-media); }
.tr-contact__panel h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.tr-contact__panel .pg-prof-actions { margin-top: var(--sp-2); }
.tr-contact__lines { display: grid; gap: var(--sp-2); }
.tr-contact__lines li { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); font-size: var(--fs-ui); }
.tr-contact__lines .dvh-icon { color: var(--muted); flex: none; }

/* the hub and the other trade pages */
.tr-related__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.tr-links { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.tr-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--tap); height: 100%;
  padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-media);
  color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card);
}
.tr-link:hover { border-color: var(--control); }
.tr-link:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.tr-link .dvh-icon { flex: none; color: var(--muted); }

/* head bottles (private label): the hub's pair on the house tint */
.tr-head__bottles figcaption { margin-top: var(--sp-3); }

@media (min-width: 700px) {
  .tr-facts__list > div { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--sp-5); align-items: baseline; }
  .tr-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
}
@media (min-width: 900px) {
  .tr-contact__panel { padding: var(--sp-7) var(--sp-8); }
}