/* ==========================================================================
   CalculatorLuv — Shared Responsive Rules
   Mobile-first breakpoints for shared components. Calculator-specific
   responsive tweaks live in each calculator's own responsive.css.
   ========================================================================== */

/* Homepage calculator grid: 3 cols desktop -> 2 tablet -> 1 mobile */
@media (max-width: 900px){
  .calc-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .calc-grid{ grid-template-columns: 1fr; }
  .container{ padding: 0 var(--space-4); }
  .site-header .container{ height: 56px; }
  .breadcrumb span.sep{ display: none; }
}

/* Footer stacks on small screens */
@media (max-width: 560px){
  .site-footer .container{ flex-direction: column; align-items: flex-start; }
}