/* winter-tires.v1.css — supplementary styles for /guides/winter-tires-canada */

.hero-narrow { padding: var(--space-10) 0 var(--space-6); }
.page-title { font-size: var(--text-4xl); margin: var(--space-4) 0 var(--space-3); }
.page-sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 42rem; }
.page-updated { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); }

.callout-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px){ .callout-grid { grid-template-columns: repeat(3, 1fr); } }
.callout { background: var(--color-bg-subtle); border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-sm); padding: var(--space-5); }
.callout p { margin: 0; }

.info-block { margin-bottom: var(--space-6); }
.info-block h3 { margin-bottom: var(--space-2); }

.brand-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.brand-list li { background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }

.check-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.check-list li { padding-left: var(--space-8); position: relative; }
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-success);
  font-weight: 700; }

/* Tool */
.tool-card { background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); max-width: 40rem;
  box-shadow: var(--shadow-sm); }
.tool-label { display: block; font-weight: 600; margin: var(--space-5) 0 var(--space-1); }
.tool-label:first-of-type { margin-top: 0; }
.tool-help { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.tool-note { background: var(--color-bg-subtle); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); margin-top: var(--space-2); }
.tool-input { font-size: var(--text-lg); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  width: 8rem; letter-spacing: 0.1em; }
.slider-row { display: flex; align-items: center; gap: var(--space-4); }
.tool-slider { flex: 1; accent-color: var(--color-brand); }
.tread-val { font-weight: 700; min-width: 4rem; text-align: right; }
.radio-row { display: flex; gap: var(--space-6); margin-bottom: var(--space-5); }
.radio-row label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.tire-result { margin-top: var(--space-5); }
.verdict { border-radius: var(--radius-md); padding: var(--space-5);
  border: 1px solid var(--color-border); }
.verdict strong { font-size: var(--text-lg); }
.verdict p { margin: var(--space-2) 0 0; }
.verdict-good { background: var(--color-success-bg); border-color: var(--color-success-border); }
.verdict-warn { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.verdict-bad { background: #fef2f2; border-color: #fecaca; }
.verdict-reasons { margin: var(--space-3) 0 0; padding-left: var(--space-5);
  font-size: var(--text-sm); }

.card-highlight { border-top: 4px solid var(--color-brand); }
.aff-label { font-size: var(--text-xs); font-weight: 400; opacity: 0.85; }

.retailer-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.retailer-list li { padding: var(--space-3) 0 var(--space-3) var(--space-6); position: relative; border-bottom: 1px solid var(--color-border); }
.retailer-list li::before { content: "\2022"; position: absolute; left: var(--space-2); color: var(--color-brand); font-weight: 700; }
.retailer-list li:last-child { border-bottom: none; }

.disclosure { font-size: var(--text-sm); color: var(--color-text-muted);
  border-top: 1px solid var(--color-border); padding-top: var(--space-4); }