/* ==========================================================================
   HikingCare Magazine - responsive.css
   Responsive rules for the interactive tool partials only (loaded with the tool bundle).
   Layout/typography breakpoints for the magazine templates live in main.css.
   ========================================================================== */

@media (max-width: 1024px) {
	.hkc-tv-readout{ grid-template-columns:1fr; }
	.hkc-tv-list div{ grid-template-columns:120px 1fr; }
}

@media (max-width: 768px) {
	.hkc-route-segment-form{ grid-template-columns:1fr 1fr; }
	.hkc-route-segment-form button{ grid-column:1 / -1; }
	.hkc-gear-db-controls{ grid-template-columns:1fr; }
	.hkc-fitness-form{ grid-template-columns:1fr 1fr; }
	.hkc-fitness-form button{ grid-column:1 / -1; }
	.hkc-tool-grid{ grid-template-columns:1fr; }
	.hkc-tool-result-grid{ grid-template-columns:1fr 1fr; }
	.hkc-safety-row{ grid-template-columns:36px 1fr; row-gap:8px; }
	.hkc-safety-row input[type="range"]{ grid-column:1 / -1; }
	.hkc-safety-value{ grid-column:2; justify-self:end; }
	.hkc-quiz-result-grid{ grid-template-columns:1fr; }
	.hkc-product-pros-cons{ grid-template-columns:1fr; }
	.hkc-comparison-wrap{ position:relative; }
	.hkc-comparison-wrap::after{
		content:"⇆ swipe";
		position:absolute; top:8px; right:12px;
		font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
		color:var(--hkc-text-muted);
		background:var(--hkc-surface-2);
		padding:4px 8px;
		border-radius:999px;
		pointer-events:none;
	}
	.hkc-archetype-detail{ padding:22px; }
	.hkc-archetype-detail-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 480px) {
	.hkc-tool-result-grid{ grid-template-columns:1fr; }
	.hkc-archetype-detail-grid{ grid-template-columns:1fr; }
	.hkc-fitness-form{ grid-template-columns:1fr; }
	.hkc-fitness-form button{ grid-column:1; }
	.hkc-product-stats{ grid-template-columns:1fr; }
}

@media print {
	.hkc-header, .hkc-footer, .hkc-tool-actions, .hkc-tool-result-actions, .hkc-amazon-link{ display:none !important; }
	body{ background:#fff; color:#000; }
	.hkc-tool, .hkc-glass-card{ background:#fff; box-shadow:none; }
}