/* Hallmark · genre: modern-minimal · macrostructure: Photographic · theme: "Campo" (design.md)
 * Segment landing pages (src/segmentos/*.njk, layout layouts/segment.njk).
 * Builds on home.css (hero, tag, demo card, strip, tabs, panel); only trade-specific parts live here.
 * enrichment: the trade's sample order over its photo · design-system: design.md
 */

/* ---------- Hero ---------- */
.seg-top h1 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 3.8rem); }
.seg-top__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr); }
.seg-top__note { margin-top: var(--space-sm); font-size: var(--text-xs); opacity: 0.75; }
.seg-photo { position: relative; min-width: 0; height: 560px; }
.seg-photo__tile { position: absolute; inset: 0; }
.seg-photo__tile img { transform: none !important; object-position: 50% 30%; }
.seg-order { left: calc(var(--space-2xl) * -1); bottom: var(--space-sm); width: 18.5rem; font-size: 0.9rem; }
.seg-order__head { padding: var(--space-xs) var(--space-sm) var(--space-3xs); font-size: 0.86rem; color: var(--color-muted); }
.seg-order .demo__row dt { color: var(--color-muted); flex: none; }
.seg-order .demo__row { font-size: 0.88rem; }
.seg-order .demo__row dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.seg-order .demo__row--total dt, .seg-order .demo__row--total dd { font-weight: 700; color: var(--color-ink); }
.seg-order .demo__done { margin: 0; }

/* ---------- What the trade gains ---------- */
.seg-gains { padding-block: var(--space-2xl) var(--space-3xl); }
.seg-gains h2, .seg-faq h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.014em; max-width: 22ch; }
.seg-gains__list { margin-top: var(--space-lg); }
.seg-gains__list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-md); border-top: var(--rule); }
.seg-gains__list h3 { font-size: 1.45rem; line-height: 1.2; }
.seg-gains__list li p { margin-top: var(--space-3xs); color: var(--color-muted); max-width: 46ch; }
.seg-gains__list .seg-gains__answer { position: relative; margin-top: 0; padding-left: 28px; color: var(--color-ink); font-weight: 500; }
.seg-gains__answer::before { content: ""; position: absolute; left: 2px; top: 0.34em; width: 13px; height: 7px; border-left: 3px solid var(--color-success); border-bottom: 3px solid var(--color-success); transform: rotate(-45deg); }

/* ---------- Tabs without a screen ---------- */
.panel--text { align-items: center; }
.panel--text .panel__copy { padding-block: var(--space-xl); }
ul.panel__facts { margin: var(--space-lg) 0; max-width: none; padding: var(--space-md) var(--space-lg); background: var(--color-card); border-radius: var(--radius-card); }

/* ---------- FAQ ---------- */
.seg-faq { padding-block: var(--space-3xl); }
.seg-faq__list { margin-top: var(--space-lg); }

@media (max-width: 60rem) {
  .seg-top__grid { grid-template-columns: minmax(0, 1fr); }
  .seg-photo { height: auto; display: grid; }
  .seg-photo__tile { position: relative; inset: auto; height: 320px; }
  .seg-order { position: relative; left: auto; bottom: auto; width: 100%; max-width: 25rem; margin: -84px auto 0; }
  .seg-gains, .seg-faq { padding-block: var(--space-2xl); }
  .seg-gains__list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .panel--text .panel__copy { padding-block: var(--space-lg) 0; }
  ul.panel__facts { margin-block: var(--space-md) var(--space-lg); padding: var(--space-sm); }
}

/* ---------- FAQ (details accordion) ---------- */
.seg-faq__list { border-top: var(--rule); max-width: 52rem; }
.seg-faq__item { border-bottom: var(--rule); }
.seg-faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
  padding-block: var(--space-md);
  cursor: pointer; list-style: none;
  transition: color var(--dur-short) var(--ease-out);
}
.seg-faq__item summary::-webkit-details-marker { display: none; }
.seg-faq__item summary:hover { color: var(--color-accent); }
.seg-faq__item summary h3 { font-size: var(--text-md); }
.seg-faq__icon { flex: none; width: 1.125rem; height: 1.125rem; color: var(--color-neutral); transition: transform var(--dur-short) var(--ease-out); }
.seg-faq__item[open] .seg-faq__icon { transform: rotate(180deg); }
.seg-faq__item p { padding-bottom: var(--space-md); color: var(--color-muted); max-width: var(--measure); }