/* ----------------------------------------------------
   Responsive Enhancements for GraceBaptistButte.com
   Complements global.css and component CSS
---------------------------------------------------- */

/* -----------------------------------------
   HERO — Mobile Button Stacking
----------------------------------------- */

@media (max-width: 640px) {
    .hero__buttons {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        align-items: center;
    }
}

/* -----------------------------------------
   EVENTS CARDS — Collapse to Single Column
----------------------------------------- */

@media (max-width: 768px) {
    .events-cards__grid {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------
   QUICK LINKS — Ensure Comfortable Tap Targets
----------------------------------------- */

@media (max-width: 640px) {
    .quick-link-card {
        min-height: 120px;
    }
}

/* -----------------------------------------
   SERVICE TIMES — Improve Mobile Spacing
----------------------------------------- */

@media (max-width: 640px) {
    .service-times__grid {
        gap: var(--space-6);
    }
}

/* -----------------------------------------
   THIS WEEK — Maintain Comfortable Padding
----------------------------------------- */

@media (max-width: 640px) {
    .this-week__item {
        padding: var(--space-4);
    }
}

/* -----------------------------------------
   FOOTER — Stack Columns on Mobile
----------------------------------------- */

@media (max-width: 768px) {
    .footer-inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
    }
}