/* =========================================================
   PLANT SCIENCE CONFERENCE
   RESPONSIVE SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {

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


    .nav-wrapper {
        gap: 20px;
    }


    .main-nav {
        gap: 20px;
    }


    .nav-cta {
        padding-inline: 18px;
    }


    .section {
        padding: 95px 0;
    }


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


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


    .footer-content {
        grid-template-columns:
            1fr;
        gap: 45px;
    }


    .footer-links {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

}


/* ---------------------------------------------------------
   MOBILE NAVIGATION
   --------------------------------------------------------- */

@media (max-width: 768px) {

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


    .site-header {
        position: sticky;
    }


    .nav-wrapper {
        min-height: 72px;
    }


    .site-logo img {
        height: 42px;
    }


    /*
     * Temporary mobile navigation behavior.
     * Full mobile menu will be added when
     * the navigation system is built.
     */

    .main-nav {
        display: none;
    }


    .nav-cta {
        min-height: 43px;
        padding: 10px 17px;

        font-size: 0.82rem;
    }


    .section {
        padding: 75px 0;
    }


    .section-header {
        margin-bottom: 40px;
    }


    .section-header p {
        font-size: 0.98rem;
    }


    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns:
            1fr;
    }


    .footer-content {
        padding-bottom: 50px;
    }


    .footer-links {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px 25px;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

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


    .nav-wrapper {
        min-height: 68px;
    }


    .site-logo img {
        height: 38px;
    }


    .nav-cta {
        min-height: 40px;

        padding:
            9px 14px;

        font-size: 0.76rem;
    }


    .section {
        padding: 60px 0;
    }


    .section-header {
        margin-bottom: 32px;
    }


    .card {
        border-radius:
            var(--radius-medium);
    }


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


    .footer-bottom p {
        font-size: 0.78rem;
    }

}


/* ---------------------------------------------------------
   TOUCH DEVICES
   --------------------------------------------------------- */

@media (hover: none) {

    .card:hover {
        transform: none;
        box-shadow: var(--shadow-soft);
    }


    .secondary-button:hover,
    .primary-button:hover,
    .nav-cta:hover {
        transform: none;
    }


    .image-hover:hover img {
        transform: none;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

}
@media (max-width: 1024px) {

    .hero-container {

        grid-template-columns:
            1fr;

        text-align: center;

        gap: 40px;
    }


    .hero-content {
        max-width: 850px;
        margin-inline: auto;
    }


    .hero-label,
    .hero-actions,
    .hero-meta {

        justify-content: center;
    }


    .hero-description {
        margin-inline: auto;
    }


    .hero-visual {
        min-height: 420px;
    }


    .hero-visual-frame {
        width: min(80vw, 480px);
    }

}


@media (max-width: 768px) {

    .hero {

        min-height:
            calc(100svh - 72px);
    }


    .hero-container {

        min-height:
            calc(100svh - 72px);

        padding:
            65px 0 80px;
    }


    .hero-title {

        font-size:
            clamp(
                2.7rem,
                11vw,
                4.5rem
            );
    }


    .hero-description {
        font-size: 0.96rem;
    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

        width: min(
            100%,
            340px
        );

        margin-inline: auto;
    }


    .hero-actions a {
        width: 100%;
    }


    .hero-meta-divider {
        display: none;
    }


    .hero-meta {

        display: grid;

        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .hero-visual {
        min-height: 320px;
    }


    .hero-visual-frame {
        width: min(78vw, 360px);
    }


    .hero-visual-inner {
        inset: 60px;
    }


    .hero-scroll-indicator {
        display: none;
    }

}


@media (max-width: 480px) {

    .hero-container {
        padding-top: 50px;
    }


    .hero-label {

        font-size: 0.65rem;

        letter-spacing: 0.11em;
    }


    .hero-visual {
        min-height: 270px;
    }


    .hero-visual-frame {
        width: 280px;
    }


    .hero-visual-inner {
        inset: 45px;
    }


    .hero-botanical-ring {
        width: 115px;
        height: 115px;
    }

}
/* =========================================================
   MOBILE NAVIGATION
   Premium Botanical Mobile Menu
   ========================================================= */


/* ---------------------------------------------------------
   HAMBURGER BUTTON
--------------------------------------------------------- */

.mobile-menu-toggle {

    display: none;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 1px solid
        rgba(63, 145, 77, 0.18);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.82);

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    position: relative;

    z-index: 1002;

    box-shadow:
        0 8px 25px
        rgba(36, 82, 43, 0.07);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.mobile-menu-toggle:hover {

    background: #ffffff;

    border-color:
        rgba(63, 145, 77, 0.35);

    transform:
        translateY(-1px);
}


.mobile-menu-toggle span {

    display: block;

    width: 18px;
    height: 1.5px;

    border-radius: 999px;

    background:
        #285f36;

    transform-origin: center;

    transition:
        transform 0.35s
        cubic-bezier(.22, 1, .36, 1),
        opacity 0.25s ease,
        width 0.3s ease;
}


/* ---------------------------------------------------------
   HAMBURGER → X
--------------------------------------------------------- */

.mobile-menu-toggle.active span:nth-child(1) {

    transform:
        translateY(6.5px)
        rotate(45deg);
}


.mobile-menu-toggle.active span:nth-child(2) {

    opacity: 0;

    width: 0;
}


.mobile-menu-toggle.active span:nth-child(3) {

    transform:
        translateY(-6.5px)
        rotate(-45deg);
}


/* ---------------------------------------------------------
   MOBILE MENU
--------------------------------------------------------- */

.mobile-menu {

    display: none;

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1001;

    padding:
        90px 20px 25px;

    background:
        rgba(250, 253, 249, 0.97);

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);

    border-bottom:
        1px solid
        rgba(63, 145, 77, 0.12);

    box-shadow:
        0 25px 60px
        rgba(31, 77, 43, 0.12);

    opacity: 0;

    transform:
        translateY(-20px);

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        transform 0.45s
        cubic-bezier(.22, 1, .36, 1);
}


.mobile-menu.active {

    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* ---------------------------------------------------------
   MENU INNER
--------------------------------------------------------- */

.mobile-menu-inner {

    width: min(
        100%,
        560px
    );

    margin-inline: auto;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.mobile-menu-inner > a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 58px;

    padding:
        0 18px;

    border-radius: 15px;

    color:
        #204b2d;

    font-size: 15px;

    font-weight: 650;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        padding-left 0.3s ease;
}


.mobile-menu-inner > a::after {

    content: "→";

    opacity: 0;

    transform:
        translateX(-8px);

    color:
        #4d9b58;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.mobile-menu-inner > a:hover {

    padding-left: 23px;

    color:
        #347d43;

    background:
        rgba(81, 161, 91, 0.08);
}


.mobile-menu-inner > a:hover::after {

    opacity: 1;

    transform:
        translateX(0);
}


/* ---------------------------------------------------------
   MOBILE REGISTER
--------------------------------------------------------- */

.mobile-menu-inner
.mobile-register {

    margin-top: 12px;

    justify-content: center;

    min-height: 54px;

    border-radius: 999px;

    background:
        #3f914d;

    color:
        #ffffff;

    box-shadow:
        0 14px 30px
        rgba(54, 133, 67, 0.18);
}


.mobile-menu-inner
.mobile-register::after {

    display: none;
}


.mobile-menu-inner
.mobile-register:hover {

    padding-left: 18px;

    background:
        #2f773d;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}


/* ---------------------------------------------------------
   BOTANICAL DECORATION
--------------------------------------------------------- */

.mobile-menu::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    top: 40px;

    border:
        1px solid
        rgba(70, 147, 80, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


.mobile-menu::after {

    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    left: -50px;
    bottom: 25px;

    border:
        1px solid
        rgba(70, 147, 80, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


/* ---------------------------------------------------------
   PREVENT PAGE SCROLL WHEN MENU OPEN
--------------------------------------------------------- */

body.menu-open {

    overflow: hidden;
}


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

@media (max-width: 768px) {

    .mobile-menu-toggle {

        display: flex;

    }


    .mobile-menu {

        display: block;

    }


    /*
     * Keep desktop navigation hidden.
     */

    .main-nav {

        display: none;

    }


    /*
     * Keep header contents above
     * the mobile menu background.
     */

    .site-header {

        z-index: 1000;

    }


    .nav-wrapper {

        position: relative;

        z-index: 1003;

    }


    /*
     * Register button is hidden on
     * mobile because the mobile
     * menu contains its own CTA.
     */

    .nav-wrapper > .nav-cta {

        display: none;

    }

}


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

@media (max-width: 480px) {

    .mobile-menu-toggle {

        width: 43px;
        height: 43px;

    }


    .mobile-menu {

        padding:
            84px 14px 20px;

    }


    .mobile-menu-inner > a {

        min-height: 54px;

        font-size: 14px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mobile-menu,
    .mobile-menu-toggle,
    .mobile-menu-toggle span,
    .mobile-menu-inner > a {

        transition: none;

    }

}