/* ==========================================================================
   Responsive Styles - MyPonpes Theme
   ========================================================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --container-width: 1024px;
    }

    h1 { font-size: 37px; }
    h2 { font-size: 31px; }
    h3 { font-size: 25px; }
    h4 { font-size: 21px; }
    h5 { font-size: 18px; }

    body { font-size: 17px; }

    .site-header__nav { display: none; }
    .site-header__cta { display: none; }
    .menu-toggle { display: flex; }

    .home-hero__slider {
        height: 500px;
    }

    .home-hero__overlay {
        min-height: 500px;
    }

    .home-hero__slider .swiper-button-prev,
    .home-hero__slider .swiper-button-next {
        display: none;
    }

    .site-footer__inner {
        grid-template-columns: 100%;
    }

    .footer-col--about {
        padding-right: 1em;
        text-align: center;
        padding: 1em 10em;
    }

    .footer-col--about .footer-logo {
        text-align: center;
    }

    .footer-col--about .social-icons {
        justify-content: center;
    }

    .site-footer__bottom-inner {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }

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

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

    /* Homepage grids di tablet */
    .home-keunggulan__grid,
    .home-testimoni__grid,
    .home-galeri__grid,
    .home-prestasi__grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .home-profil__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .home-profil__image {
        max-width: 600px;
        margin: 0 auto;
    }

    .home-welcome__title {
        font-size: 31px;
    }

    .page-hero__title {
        font-size: 31px;
    }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    :root {
        --container-width: 100%;
        --header-height: 60px;
    }

    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }

    body { font-size: 16px; }

    .site-header__logo img {
        height: 40px;
    }

    /* Header fixed di mobile agar selalu di atas saat scroll */
    .site-header {
        position: fixed;
        top: 0 !important;
        left: 0;
        right: 0;
        z-index: 9999;
    }

    /* Admin bar di mobile */
    .admin-bar .site-header {
        top: 0 !important;
    }

    /* Beri padding atas pada main content agar tidak ketutupan header fixed */
    .site-main {
        padding-top: var(--header-height);
    }

    /* Homepage: slider full ke atas tanpa gap putih */
    .myponpes-home .site-main {
        padding-top: 0;
    }

    .myponpes-home .home-sections {
        padding-top: 0;
    }

    .myponpes-home .home-hero[data-section="slider"] {
        margin-top: 0;
        padding-top: 0;
    }

    .home-hero__slider {
        height: 100vh;
        max-height: 600px;
    }

    .home-hero__overlay {
        min-height: 100vh;
        max-height: 600px;
        padding: 50px 0;
    }

    .home-hero__slider .swiper-slide {
        background-color: var(--color-primary);
    }

    /* Slider full cover tanpa gap putih */
    .myponpes-home .home-hero {
        margin-top: 0;
    }

    .home-hero__title {
        font-size: 28px;
    }

    .home-welcome__title {
        font-size: 28px;
    }

    .home-welcome__tagline {
        font-size: 16px;
    }

    .home-section {
        padding: 50px 0;
    }

    .home-founder__image {
        width: 120px;
        height: 120px;
    }

    .home-founder__name {
        font-size: 20px;
    }

    .home-founder-about__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .home-founder-about__left .home-founder__image {
        width: 200px;
        height: 240px;
    }

    .home-keunggulan__grid,
    .home-testimoni__grid,
    .home-galeri__grid,
    .home-prestasi__grid--3,
    .home-prestasi__grid--2,
    .home-prestasi__grid--list {
        grid-template-columns: 1fr;
    }

    .home-prestasi__grid--list .prestasi-card {
        flex-direction: column;
        text-align: center;
    }

    /* Sembunyikan panah navigasi pada mobile */
    .home-prestasi__prev, .home-prestasi__next,
    .home-tim__prev, .home-tim__next {
        display: none !important;
    }

    /* Tim Header Mobile Flex */
    .home-section__header--flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 20px;
    }

    .home-section__header--flex h2 {
        font-size: 28px !important;
    }

    /* Profil section mobile */
    .home-profil__grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .home-profil__heading {
        font-size: 24px;
    }

    .profil-feature__icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Video & Maps iframe mobile */
    .home-video__wrapper iframe {
        height: 250px;
    }

    .home-maps__wrapper iframe {
        height: 300px;
    }

    /* Container padding mobile */
    .container {
        padding: 0 15px;
    }

    .program-item {
        grid-template-columns: 1fr;
    }

    .program-item__image img {
        height: 200px;
    }

    .home-program__list--grid {
        grid-template-columns: 1fr;
    }

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

    .posts-grid--related {
        grid-template-columns: 1fr;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
        padding: 2em 20px 0;
    }

    .footer-col {
        padding: 1em 0;
    }

    .footer-col--about {
        padding: 1em 0;
        text-align: left;
    }

    .footer-col--about .footer-logo {
        text-align: left;
    }

    .footer-col--about .social-icons {
        justify-content: flex-start;
    }

    .site-footer__bottom {
        margin-top: 1em;
    }

    .site-footer__bottom-inner {
        flex-direction: column;
        gap: 7px;
    }

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

    .content-area {
        padding: 40px 15px;
    }

    .page-hero {
        padding: 40px 0;
    }

    .page-hero__title {
        font-size: 24px;
    }

    .single-content {
        max-width: 100%;
    }

    .author-box {
        flex-direction: column;
        text-align: center;
    }

    .post-navigation .nav-links {
        flex-direction: column;
    }

    .error-404__number {
        font-size: 80px;
    }

    .btn-cta {
        padding: 10px 15px;
        font-size: 14px;
        border-radius: 7px 0 7px 0;
    }
}

/* Extra Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }

    .home-hero__slider,
    .home-hero__overlay {
        height: 340px;
        min-height: 340px;
    }

    .home-hero__title,
    .home-welcome__title {
        font-size: 24px;
    }

    .home-hero__desc,
    .home-welcome__desc {
        font-size: 15px;
    }

    .home-founder-about__left .home-founder__image {
        width: 170px;
        height: 200px;
    }

    .program-item__title {
        font-size: 22px;
    }

    .keunggulan-card,
    .testimoni-card,
    .program-card {
        padding: 25px 20px;
    }

    .home-cta__content h2 {
        font-size: 24px;
    }

    .site-footer__inner {
        padding: 1.5em 15px 0;
    }

    .top-bar__list {
        flex-wrap: wrap;
    }

    .home-profil__heading {
        font-size: 22px;
    }
}

/* FIX: Slider mobile tanpa gap putih atas/bawah */
@media (max-width: 767px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.myponpes-home {
        overflow-x: hidden;
    }

    .myponpes-home .site-main,
    .myponpes-home .home-sections {
        margin: 0 !important;
        padding: 0 !important;
    }

    .myponpes-home .home-hero[data-section="slider"] {
        margin: -60px 0 0 0 !important;
        padding: 0 !important;
    }

    .home-hero {
        margin: 0;
        padding: 0;
        display: block !important;
    }

    .home-hero .home-hero__slider,
    .home-hero .home-hero__overlay,
    .home-hero .swiper-wrapper,
    .home-hero .swiper-slide {
        margin: 0 !important;
        padding: 0 !important;
    }

    .myponpes-home .home-hero .home-hero__overlay {
        padding-top: 80px !important;
    }

    .myponpes-home .home-hero .home-hero__slider,
    .myponpes-home .home-hero .home-hero__overlay {
        height: 100vh !important;
        max-height: 550px !important;
        min-height: 550px !important;
    }

    .home-hero .swiper-slide {
        background-color: var(--color-primary);
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        width: 100% !important;
        height: 100% !important;
    }
}