/* =====================================================
   UDO OGU — RESPONSIVE DESIGN
   ===================================================== */


/* =====================================================
   TABLETS
   1100px and below
   ===================================================== */

@media (max-width: 1100px) {

    /*
        The desktop navigation has many links.
        On smaller screens we will eventually use
        the hamburger menu instead of squeezing them.
    */

    .nav-menu {
        gap: 16px;
    }


    /* Reduce large homepage spacing */

    .intro-section,
    .disciplines-section,
    .elements-section,
    .founder-section,
    .events-preview,
    .join-section,
    .news-section {
        padding: 100px 0;
    }


    /* Founder */

    .founder-layout {
        gap: 50px;
    }


    /* Four Elemental Path */

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


    /* Events */

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


    .event-card {
        border-right: none;
    }


    /* Join */

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


    .join-card {
        min-height: 250px;
    }


    /* News */

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

}


/* =====================================================
   TABLET / LARGE PHONE
   800px and below
   ===================================================== */

@media (max-width: 800px) {

    /*
        The navigation will become a mobile menu.

        Your existing dashboard had a similar idea:
        hide the normal menu and show it when the
        menu button is clicked.
    */

    .nav-menu {
        display: none;
    }


    /*
        If your header already has a mobile menu button,
        this will make it visible.
    */

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


    /* Hero */

    .hero {
        min-height: 85vh;
    }


    .hero-content {
        width: 90%;

        margin-left: 5%;
    }


    .hero h1 {
        font-size: clamp(55px, 14vw, 90px);

        letter-spacing: -3px;
    }


    .hero-description {
        max-width: 580px;

        font-size: 15px;
    }


    .hero-scroll {
        display: none;
    }


    /* Intro */

    .intro-content {
        grid-template-columns: 1fr;

        gap: 50px;

        margin-top: 50px;
    }


    .intro-statement {
        max-width: 500px;
    }


    /* Section headings */

    .split-heading {
        flex-direction: column;

        align-items: flex-start;
    }


    /* Disciplines */

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


    .discipline-card:nth-child(odd) {
        border-right: none;
    }


    /* Founder */

    .founder-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .founder-image {
        max-width: 550px;
    }


    /* News */

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


    /* Vision */

    .vision-section {
        min-height: 550px;
    }


    .vision-content {
        margin-left: 5%;
    }


    /* Video */

    .video-section {
        min-height: 550px;
    }


    .video-content {
        margin-left: 5%;
    }

}


/* =====================================================
   MOBILE PHONES
   600px and below
   ===================================================== */

@media (max-width: 600px) {

    /* General */

    .section-container {
        width: 90%;
    }


    .intro-section,
    .disciplines-section,
    .elements-section,
    .founder-section,
    .events-preview,
    .join-section,
    .news-section {
        padding: 80px 0;
    }


    /* Hero */

    .hero {
        min-height: 780px;
    }


    .hero-eyebrow {
        max-width: 300px;

        font-size: 8px;

        letter-spacing: 2px;
    }


    .hero h1 {
        font-size: clamp(50px, 16vw, 75px);

        line-height: 0.92;
    }


    .hero h1 span {
        margin-top: 12px;

        font-size: 22px;
    }


    .hero-description {
        margin-top: 25px;

        font-size: 14px;

        line-height: 1.7;
    }


    /*
        Buttons become stacked on small screens.
    */

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;

        max-width: 280px;
    }


    .btn {
        width: 100%;
    }


    /* Intro */

    .intro-text .large-text {
        font-size: 21px;
    }


    .intro-statement {
        padding-left: 20px;
    }


    .intro-statement h3 {
        font-size: 25px;
    }


    /* Section titles */

    .section-heading h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }


    /* Elemental Path */

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


    .element-card {
        min-height: 200px;
    }


    /* Events */

    .event-card {
        grid-template-columns: 60px 1fr;

        gap: 18px;

        padding: 25px 0;
    }


    .event-date {
        width: 60px;

        height: 60px;
    }


    .event-date strong {
        font-size: 21px;
    }


    .event-info h3 {
        font-size: 18px;
    }


    /* Join */

    .join-card {
        min-height: 230px;

        padding: 25px;
    }


    .join-card h3 {
        margin-top: 55px;

        font-size: 22px;
    }


    /* Founder */

    .founder-content h2 {
        font-size: 42px;
    }


    /* Vision */

    .vision-content h2,
    .video-content h2 {
        font-size: 48px;

        letter-spacing: -2px;
    }


    /* Final CTA */

    .final-cta {
        padding: 100px 20px;
    }


    .final-cta h2 {
        font-size: 48px;

        letter-spacing: -2px;
    }

}


/* =====================================================
   VERY SMALL PHONES
   400px and below
   ===================================================== */

@media (max-width: 400px) {

    .hero h1 {
        font-size: 48px;
    }


    .hero h1 span {
        font-size: 19px;
    }


    .section-heading h2 {
        font-size: 36px;
    }


    .final-cta h2 {
        font-size: 40px;
    }

}