/* ==========================================================
   IRON WOLF FITNESS
   RESPONSIVE STYLES
========================================================== */


/* ==========================================================
   TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 1200px) {

    .main-navigation {
        gap: 14px;
    }

    .nav-link,
    .nav-dropdown-toggle {
        font-size: 9px;
    }

    .header-cta {
        padding: 0 16px;
    }

    .hero-content {
        gap: 30px;
    }

    .hero-logo-ring {
        width: 350px;
        height: 350px;
    }

    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .main-navigation,
    .header-cta {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-text {
        margin: 0 auto;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-logo {
        position: absolute;
        right: -100px;
        bottom: -100px;
        opacity: 0.18;
        min-height: auto;
    }

    .hero-logo img {
        width: 400px;
    }

    .hero-logo-ring {
        width: 350px;
        height: 350px;
    }

    .intro-grid,
    .music-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .service-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .service-card,
    .service-card-large {
        grid-column: span 1;
    }

    .service-card-large {
        min-height: 360px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .container {
        width:
            min(
                calc(100% - 32px),
                var(--container-width)
            );
    }

    .header-inner {
        min-height: 76px;
    }

    .brand-logo {
        width: 95px;
    }

    .mobile-navigation {
        top: 76px;
    }

    .hero-section {
        min-height: 760px;
        padding-bottom: 80px;
    }

    .hero-content {
        padding-top: 100px;
    }

    .hero-text h1 {
        font-size:
            clamp(64px, 20vw, 100px);
    }

    .hero-eyebrow {
        font-size: 9px;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-logo {
        right: -140px;
        bottom: -100px;
    }

    .hero-logo img {
        width: 350px;
    }

    .hero-scroll {
        display: none;
    }

    .section-padding {
        padding: 80px 0;
    }

    .section-heading h2,
    .section-header h2,
    .music-content h2,
    .statement-content h2,
    .join-content h2 {
        font-size: 55px;
    }

    .intro-text p {
        font-size: 14px;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-card,
    .service-card-large {
        grid-column: span 1;
        min-height: 330px;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .featured-grid {
        grid-template-columns: 1fr;
    }

    .featured-card {
        min-height: 400px;
    }

    .statement-section {
        min-height: 520px;
    }

    .statement-watermark {
        font-size: 50vw;
    }

    .music-circle {
        width: 300px;
    }

    .music-circle span {
        font-size: 35px;
    }

    .music-circle strong {
        font-size: 60px;
    }

    .join-section {
        padding: 100px 0;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 25px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        padding: 20px 0;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .hero-text h1 {
        font-size: 58px;
    }

    .section-heading h2,
    .section-header h2,
    .music-content h2,
    .statement-content h2,
    .join-content h2 {
        font-size: 48px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

}