/* Vinz chooser: 3 question cards + live results, side by side on desktop. */

.choose-page { padding-block: 32px 48px; max-width: 1120px; margin-inline: auto; }
.choose-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.choose-header__label { font-weight: 700; color: var(--ai); font-size: 0.9rem; }
.choose-intro { color: var(--ink-2); max-width: 65ch; margin-bottom: 24px; }

.choose-layout { display: grid; gap: 24px; }
@media (min-width: 1024px) {
  .choose-layout { grid-template-columns: 380px 1fr; align-items: start; }
  .choose-questions { position: sticky; top: calc(var(--header-h) + 16px); }
}
.choose-questions { display: flex; flex-direction: column; gap: 16px; }
.choose-card { container-type: inline-size; }
.choose-card h2 { font-size: 1rem; margin-bottom: 12px; }
.choose-segmented { flex-wrap: wrap; height: auto; }
.choose-segmented .segmented__option { min-height: 40px; }
/* A 4-option budget control (car: <250jt/250-400jt/400-550jt/>550jt) flex-wraps
   3-then-1 on a narrow card — a lopsided pill, one option stranded alone.
   Below the width where 4 would ever wrap, switch that exact case (":has" a
   4th option) to a clean 2x2 grid of equal, independently-pilled buttons
   instead; a 2-or-3-option control (motorbike budget, either Q3) always still
   fits one row and is untouched. */
@container (max-width: 360px) {
  .choose-segmented:has(.segmented__option:nth-child(4)) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    background: none;
    padding: 0;
  }
  .choose-segmented:has(.segmented__option:nth-child(4)) .segmented__option {
    background: var(--surface-2);
    border-radius: var(--r-pill);
  }
}

.choose-results { display: flex; flex-direction: column; gap: 16px; min-height: 200px; }
.choose-reasoning { font-size: 0.85rem; color: var(--ai); font-weight: 600; min-height: 20px; }
.choose-empty-prompt { color: var(--ink-2); padding: 24px; text-align: center; background: var(--surface-2); border-radius: var(--r-card); }
.choose-no-match { color: var(--ink-2); font-size: 0.9rem; margin-bottom: 8px; }

.choose-result-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.choose-result-card { display: flex; flex-direction: column; gap: 8px; }
.choose-result-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); border-radius: var(--r-media); }
/* Touch target floor without growing the visible text line: real padding
   enlarges the link's own box (what a touch sweep measures) to 44px tall, a
   matching negative margin keeps the card's 8px gap visually unchanged
   (measured live: 238-340 x 27px, a text-only link with no reserved height). */
.choose-result-card__name { display: inline-block; font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--ink); }
@media (pointer: coarse) {
  .choose-result-card__name { min-height: 44px; display: inline-flex; align-items: center; padding-block: 9px; margin-block: -9px; }
}
.choose-result-card__price { font-weight: 600; color: var(--brand); margin: 0; }

@media (pointer: coarse) {
  .choose-segmented .segmented__option { min-height: 44px; padding-block: 8px; }
}