/* ==========================================================================
   YAZHI — RESPONSIVE OVERRIDES
   Base styles throughout the system are mobile-first & fluid (clamp/grid/
   flex). This file holds the few rules that don't fit cleanly at the
   component level. Breakpoint scale: 480 / 768 / 1024 / 1280 / 1440.
   ========================================================================== */

@media (max-width: 479px) {
    .btn-group { flex-direction: column; align-items: stretch; }
    .btn-group .btn { width: 100%; }
    .hero .btn-group .btn { width: 100%; }
}

@media (min-width: 480px) {
    .btn-group { flex-direction: row; }
}

/* Prevent any stray element from forcing horizontal scroll */
img, table, .gallery-grid, pre, iframe { max-width: 100%; }
table { display: block; overflow-x: auto; }

@media (min-width: 1440px) {
    .container { padding-inline: max(var(--container-padding), calc((100vw - 1440px) / 2 + 2.5rem)); }
}