/**
 * ==========================================================================
 * StabilityTest Theme - Responsive Styles
 * ==========================================================================
 *
 * Responsive layout adjustments.
 *
 * Responsibilities:
 *
 * - Tablet breakpoints
 * - Mobile breakpoints
 * - Layout stacking
 * - Responsive typography
 * - Responsive spacing
 * - Future device optimizations
 *
 * All media queries should be centralized within this file
 * whenever possible.
 *
 * @package StabilityTest_Theme
 * @since 1.0.0
 * ==========================================================================
 */

@media (max-width: 720px) {
    .site-header__inner,
    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-header__nav ul,
    .site-footer__nav ul {
        flex-wrap: wrap;
    }

    .hero {
        padding-top: 64px;
    }

    .site-content-card {
        grid-template-columns: 1fr;
    }

    .site-content-card__content {
        padding: 28px 24px;
    }

    .site-content-card__image {
        min-height: 180px;
        border-left: 0;
        border-top: 1px solid var(--stabilitytest-border-medium);
    }
}