/* ==========================================================================
   Victoria Memorials — responsive.css
   Breakpoint enhancements (mobile-first) and print styles.
   Breakpoints: 600px (large phone / small tablet), 768px (tablet),
   1024px (small laptop), 1180px (desktop navigation), 1440px (wide).
   ========================================================================== */

/* ---------- Small screens only ---------- */
@media (max-width: 599.98px) {
  :root { --header-h: 72px; }
  .brand img { height: 38px; }
  .site-header.is-scrolled .brand img { height: 34px; }
  .nav-toggle__text { display: none; }
  .btn-group .btn { flex: 1 1 100%; }
  .hero .btn-group .btn { flex: 1 1 100%; }
  .finder-teaser__opts { grid-template-columns: 1fr; }
  .compare__aspects li { grid-template-columns: 1fr; gap: .2rem; }
  .wizard__foot { flex-direction: column-reverse; align-items: stretch; }
  .wizard__foot .btn-group { margin-left: 0; width: 100%; }
  .wizard__foot .btn-group .btn { flex: 1 1 0; }
  .wizard__skip { align-self: center; }
  .steps > li::after { display: none; }
  .timeline::before { left: 1.3rem; }
  .timeline > li { padding-left: 3.75rem; }
  .timeline__marker { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
  .timeline__card { padding: 1.25rem; }
  .cta-band .btn-group .btn { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .split__accent { display: none; }
  .swatch-stage__label { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .data-table { min-width: 560px; }
}

/* Sticky CTA: only on small/medium screens where the header CTA is hidden */
@media (min-width: 1180px) { .sticky-cta { display: none; } }
@media (max-width: 1179.98px) { body.has-sticky-cta .site-footer { padding-bottom: 5rem; } }

/* ---------- ≥ 600px ---------- */
@media (min-width: 600px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .values-row { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .wizard__progress .label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .hero__meta { gap: .5rem 2rem; }
  .sticky-cta { left: 50%; right: auto; width: min(520px, calc(100% - 2rem)); translate: -50% 0; }
}

/* ---------- ≥ 768px ---------- */
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .section-head--split { grid-template-columns: 1.2fr 1fr; }
  .section-head--split p { padding-bottom: .35rem; }
  .cta-band__inner { grid-template-columns: 1.4fr auto; }
  .cta-band .btn-group { justify-content: flex-end; }
  .faq-tools { grid-template-columns: 1fr auto; align-items: center; }
  .spec-list > div { grid-template-columns: 14rem 1fr; }
  .contact-detail li { grid-template-columns: 2.6rem 1fr; }
  .results-intro { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .next-steps { grid-template-columns: 1.2fr 1fr; align-items: start; }
}

/* ---------- ≥ 1024px ---------- */
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 7rem); }
  .split--reverse .split__media { order: 2; }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
  .split--wide-body { grid-template-columns: .85fr 1.15fr; }
  .page-hero__grid { grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 6vw, 6rem); }
  .page-hero__grid--even { grid-template-columns: 1fr 1fr; }
  .values-row { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 2.5rem; }
  .finder-teaser { grid-template-columns: 1fr 1.05fr; gap: clamp(3rem, 6vw, 6rem); }
  .swatch-explorer { grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .compare__stage { grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .contact-layout { grid-template-columns: 1.55fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .contact-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .filters-layout { display: grid; grid-template-columns: 19rem 1fr; gap: 3rem; align-items: start; }
  .filters-layout .filters { position: sticky; top: calc(var(--header-h) + 1rem); }
  .filters-layout .filters__bar { margin-top: 0; }
  .hero__inner { grid-template-columns: 1fr auto; align-items: end; }
  .hero__scroll { display: inline-flex; flex-direction: column; align-items: center; gap: .75rem; color: rgba(246, 243, 236, .8); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-rl; }
  .hero__scroll::after { content: ""; width: 1px; height: 64px; background: linear-gradient(rgba(246, 243, 236, .8), transparent); }
  .hero__scroll:hover { color: var(--c-ivory); }
  .layout-sidebar { display: grid; grid-template-columns: 16rem 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .layout-sidebar > aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* Filter panel collapses on smaller screens */
@media (max-width: 1023.98px) {
  .js .filters[data-collapsible]:not(.is-open) .filters__groups { display: none; }
  .filters__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
}
@media (min-width: 1024px) { .filters__toggle { display: none; } }

/* ---------- ≥ 1180px: desktop navigation ---------- */
@media (min-width: 1180px) {
  .primary-nav { display: block; }
  .nav-toggle, .mobile-nav { display: none; }
  .header-cta { display: inline-flex; }
}

/* ---------- ≥ 1440px ---------- */
@media (min-width: 1440px) {
  :root { --header-h: 92px; }
  .brand img { height: 50px; }
}

/* ---------- Hover-capable pointers only (avoid sticky hover on touch) ---------- */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; }
  .card:hover .card__media img, .category-card:hover .category-card__media img { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-nav, .sticky-cta, .site-footer .footer-emblem, .jump-nav, .hero__scroll, .btn-group, .cta-band, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  .section--dark, .site-footer { background: #fff !important; color: #000 !important; }
  .section--dark h2, .section--dark h3, .site-footer a { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .accordion details { break-inside: avoid; }
  .accordion .accordion__panel { display: block !important; }
}

/* Finder: keep the step counter on one line on phones */
@media (max-width: 599.98px) { .wizard__count .small { display: none; } }
.wizard__count span:first-child { white-space: nowrap; }