/* ==========================================================================
   AJIEL Theme — Responsive Breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop / Large Screens (max-width: 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .ajiel-hero__inner {
        gap: var(--ajiel-sp-6);
    }

    .ajiel-features__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ajiel-footer__inner {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--ajiel-sp-6);
    }
}

/* --------------------------------------------------------------------------
   Tablet / Small Desktop (max-width: 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .ajiel-header__motto {
        display: none;
    }

    .ajiel-header__logo-ajiel {
        max-width: 300px;
    }

    .ajiel-header__logo-ajiel img {
        max-height: 70px;
    }

    .ajiel-header__actions {
        gap: var(--ajiel-sp-2);
    }

    .ajiel-header__login,
    .ajiel-header__register {
        padding-inline: 10px;
    }

    /* Layout */
    .ajiel-layout-two-col,
    .ajiel-content-grid {
        grid-template-columns: 1fr;
    }



    /* Features */
    .ajiel-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats */
    .ajiel-stats__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .ajiel-stat:nth-child(2) {
        border-right: none;
    }

    /* Community Banner */
    .ajiel-community__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--ajiel-sp-6);
    }

    .ajiel-community__quote {
        max-width: 100%;
    }

    .ajiel-community__perks {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Footer */
    .ajiel-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------------------------
   Mobile Devices (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Header */
    .ajiel-utility-bar {
        font-size: .75rem;
    }

    .ajiel-header__inner {
        padding-block: var(--ajiel-sp-3);
        gap: var(--ajiel-sp-2);
    }

    .ajiel-header__brand {
        flex: 1;
        min-width: 0;
    }

    .ajiel-header__logo-ajiel {
        max-width: 100%;
        min-width: 0;
    }

    .ajiel-header__logo-ajiel img {
        max-height: 64px;
    }

    .ajiel-header__motto {
        display: none;
    }

    .ajiel-header__actions {
        gap: var(--ajiel-sp-1);
    }

    /* Mobile Navigation */
    .ajiel-nav-toggle {
        display: flex;
    }

    .ajiel-nav__menu,
    .ajiel-nav ul.pkp_nav_list {
        flex-direction: column;
        width: 100%;
        padding: var(--ajiel-sp-3) 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    body.ajiel-theme .ajiel-nav ul.pkp_nav_list:not(.is-active) {
        display: none !important;
    }

    body.ajiel-theme .ajiel-nav ul.pkp_nav_list.is-active {
        display: flex !important;
    }

    .ajiel-nav__menu.is-active,
    .ajiel-nav ul.pkp_nav_list.is-active {
        display: flex !important;
    }

    .ajiel-nav__item,
    .ajiel-nav ul.pkp_nav_list > li {
        width: 100% !important;
    }

    .ajiel-nav__link,
    .ajiel-nav ul.pkp_nav_list > li > a {
        padding: var(--ajiel-sp-3) var(--ajiel-sp-4) !important;
        border-radius: var(--ajiel-radius-sm) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        border-bottom: none !important;
        color: #FFFFFF !important;
    }

    .ajiel-nav__dropdown,
    .ajiel-nav ul.pkp_nav_list > li > ul {
        position: static !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.25) !important;
        border-radius: var(--ajiel-radius-sm) !important;
        margin: var(--ajiel-sp-1) var(--ajiel-sp-3) !important;
        display: none !important;
        border: none !important;
    }

    .ajiel-nav ul.pkp_nav_list > li > ul a {
        color: #FFFFFF !important;
        padding-left: 24px !important;
    }

    .ajiel-nav__item:hover .ajiel-nav__dropdown,
    .ajiel-nav__item.is-open .ajiel-nav__dropdown,
    .ajiel-nav ul.pkp_nav_list > li:hover > ul,
    .ajiel-nav ul.pkp_nav_list > li.is-open > ul {
        display: flex !important;
        flex-direction: column !important;
    }



    /* Article Card */
    .ajiel-article-card {
        grid-template-columns: 1fr;
        gap: var(--ajiel-sp-3);
    }

    .ajiel-article-card__cover {
        width: 100%;
        height: 140px;
    }

    /* Journal Grid */
    .ajiel-journal-grid {
        grid-template-columns: 1fr;
    }

    /* Subject Grid */
    .ajiel-subject-grid {
        grid-template-columns: 1fr;
    }

    /* Stats */
    .ajiel-stats__inner {
        grid-template-columns: 1fr;
    }

    .ajiel-stat {
        border-right: none !important;
        border-bottom: 1px solid var(--ajiel-border);
    }

    .ajiel-stat:last-child {
        border-bottom: none;
    }

    /* Community */
    .ajiel-community__perks {
        flex-direction: column;
        gap: var(--ajiel-sp-4);
    }

    /* Footer */
    .ajiel-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--ajiel-sp-8);
    }

    .ajiel-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--ajiel-sp-2);
    }
}

/* --------------------------------------------------------------------------
   Small Mobile Devices (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .ajiel-header__logo-ajiel {
        max-width: 180px;
    }

    .ajiel-header__login {
        display: none;
    }

    .ajiel-header__register {
        padding: var(--ajiel-sp-2);
        font-size: .75rem;
    }

    .ajiel-features__grid {
        grid-template-columns: 1fr;
    }

    .ajiel-hero__title {
        font-size: 1.5rem;
    }

    .ajiel-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ajiel-sp-2);
    }
}
