/*
 * Purpose: Confidence-score explainer - inline disclosure on dest/trek pages + the factor grid
 * used on the dedicated page. Design-system tokens only.
 */
.conf-explainer { margin-top: var(--space-5); border: var(--border-thin); border-radius: var(--radius-md); background: var(--color-bg-alt); }
.conf-explainer__summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary); list-style: none; }
.conf-explainer__summary::-webkit-details-marker { display: none; }
.conf-explainer__summary .hp-icon { width: 1rem; height: 1rem; flex: none; }
.conf-explainer__body { padding: 0 var(--space-5) var(--space-5); }
.conf-explainer__lead { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); margin: 0 0 var(--space-4); }
.conf-explainer__more { display: inline-block; margin-top: var(--space-4); font-weight: var(--weight-semibold); color: var(--color-primary); font-size: var(--text-sm); }

.conf-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .conf-page .conf-factors { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
.conf-factors__item { display: flex; align-items: flex-start; gap: var(--space-3); }
.conf-factors__icon { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.conf-factors__icon .hp-icon { width: 1rem; height: 1rem; color: var(--color-primary); }
.conf-factors__text { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }
.conf-factors__text strong { display: block; color: var(--color-text); font-weight: var(--weight-semibold); margin-bottom: 2px; }

/* Zero the section's bottom padding on the dedicated page (per request). .section.x beats
   the layout rule that adds bottom padding before the testimonials band. */
.section.confidence-page { padding-bottom: 0; }
/* Extra breathing room between the intro copy and the factor list. */
.conf-page { margin-top: var(--space-12); }
.conf-page__note { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-8); padding: var(--space-5); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); font-size: var(--text-sm); color: var(--color-text); line-height: var(--leading-snug); }
.conf-page__note .hp-icon { width: 1.2rem; height: 1.2rem; color: var(--color-primary); flex: none; }

/* Two-scales explainer (destinations = DIY rating, treks = confidence score) */
.conf-scales { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); }
@media (min-width: 768px) { .conf-scales { grid-template-columns: 1fr 1fr; } }
.conf-scales__card { padding: var(--space-4); border: var(--border-thin); border-radius: var(--radius-lg); background: var(--color-surface); }
.conf-scales__pill { display: inline-block; margin-bottom: var(--space-3); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.conf-scales__h { font-family: var(--font-heading); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.conf-scales__card p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0; }
.conf-scales__note { color: var(--color-text); font-size: var(--text-sm); line-height: var(--leading-normal); background: var(--color-bg-alt); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin: 0 0 var(--space-4); }
.conf-page__subhead { font-family: var(--font-heading); font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-5); }

/* Four score-category cards: 2x2 on tablet, 4-up on wide screens. */
@media (min-width: 1100px) { .conf-scales--4 { grid-template-columns: repeat(4, 1fr); } }