/* =========================================================
   MOBILE / TABLET RESPONSIVE
   KÜLÖN mobile.css
========================================================= */

@media (max-width: 992px){

    /* =========================================================
       GLOBAL
    ========================================================= */

    html,
    body{
        overflow-x:hidden;
    }  

    .container{
        padding-left:20px;
        padding-right:20px;
    }

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

.main-header{
    padding:18px 0 14px;
}

/* teljes header */

.header-inner{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;
}

/* bal és jobb blokk */

.header-left,
.header-right{
    width:100%;

    display:flex;

    justify-content:center;
}

/* logo + szöveg */

.header-brand{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    text-align:center;

    text-decoration:none;
}

/* logo */

.header-logo{
    width:88px;

    height:auto;

    display:block;
}

/* cím */

.site-title{
    font-size:1rem;

    line-height:1.45;

    letter-spacing:.4px;

    text-align:center;

    max-width:260px;

    margin:0 auto;
}

/* =========================================================
       NAVBAR
    ========================================================= */

    .navbar{
        width:100%;
    }

    .navbar-toggler{
        width:100%;

        display:flex;

        justify-content:flex-end;

        padding:12px 0;

        border:none;
    }

    .navbar-collapse{

        margin-top:16px;

        padding:22px;

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

        border-radius:28px;

        backdrop-filter:blur(12px);

        box-shadow:
            0 15px 40px rgba(0,0,0,0.08);
    }

    .navbar-nav{
        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:14px;
    }

    .nav-item{
        width:100%;
    }

    .nav-link{
        width:100%;

        text-align:center;

        padding:10px 14px !important;
    }

    .navbar .nav-item:last-child .nav-link{
        width:100%;
    }

    .nav-link.active::after{
        display:none;
    }

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

.hero-section{
    position:relative;

    min-height:520px;

    padding:60px 0;

    overflow:hidden;
}

/* háttérkép */

.hero-section::before{
    content:"";

    position:absolute;

    inset:0;

    background-image:url('../img/hero-cards.webp');

    background-size:110%;

    background-position:center right;

    background-repeat:no-repeat;

    opacity:.38;

    z-index:1;
}

/* halvány overlay */

.hero-section::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(239,229,214,.94) 0%,
            rgba(239,229,214,.72) 38%,
            rgba(239,229,214,.28) 100%
        );

    z-index:2;
}

/* régi desktop kép OFF */

.hero-image-scene,
.hero-image-box,
.hero-blender-layer{
    display:none;
}

/* container */

.hero-container{
    position:relative;

    z-index:3;
}

/* content */

.hero-content-wrapper{
    position:relative;

    z-index:3;

    max-width:320px;

    margin:0;

    padding-left:32px;
}

/* title */

.hero-title{
    font-size:2.3rem;

    line-height:1.08;

    margin-bottom:18px;

    text-align:left;
}

/* mobilon nincs br */

.hero-title br,
.hero-text br{
    display:none;
}

/* divider */

.hero-divider{
    justify-content:flex-start;

    margin:18px 0 22px;
}

/* subtitle */

.hero-subtitle{
    font-size:1.2rem;

    line-height:1.35;

    margin-bottom:14px;

    text-align:left;
}

/* text */

.hero-text{
    font-size:1rem;

    line-height:1.7;

    text-align:left;

    margin-bottom:26px;
}

/* button */

.hero-content-wrapper .btn-gold{
    display:inline-flex;

    justify-content:center;

    align-items:center;
}

    
    /* =========================================================
       ABOUT
    ========================================================= */

    .about-section{
        padding:70px 0;
    }

    .about-grid{
        grid-template-columns:1fr;

        gap:45px;
    }

    .about-image{
        order:-1;
    }

    .about-content{
        text-align:center;
    }

    .about-content h2{
        font-size:2.4rem;

        line-height:1.2;
    }

    .feature-list{
        text-align:left;

        max-width:650px;

        margin:0 auto 40px;
    }

    .feature-list li{
        font-size:1rem;

        line-height:1.7;
    }

    /* =========================================================
       FEATURE CARDS
    ========================================================= */

    .cards-grid{
        grid-template-columns:1fr;

        gap:30px;
    }

    .feature-card{
        max-width:520px;

        margin:0 auto;
    }

    .feature-card img{
        width:100%;

        min-height:420px;

        object-fit:cover;
    }

    .card-overlay{
        bottom:170px;

        padding:0 24px;
    }

    .card-overlay h3{
        font-size:1.9rem;

        margin-bottom:12px;
    }

    .card-overlay p{
        font-size:1rem;

        line-height:1.5;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .cta-section{
        padding:20px 0 70px;
    }

    .cta-box{
        grid-template-columns:1fr;

        gap:35px;

        padding:38px 28px;

        text-align:center;
    }

    .cta-image{
        order:-1;

        justify-content:center;
    }

    .cta-image img{
        max-width:420px;

        height:auto;
    }

    .cta-content h2{
        font-size:2.7rem;

        line-height:1.1;

        max-width:100%;
    }

    .cta-content p{
        max-width:100%;
    }

    /* =========================================================
   VIDEO HERO
========================================================= */

.hero-video-section{
    padding:40px 0 60px;
}

.video-frame-wrapper{
    width:100%;

    max-width:420px;

    margin:0 auto 40px;

    border-radius:28px;

    overflow:hidden;

    position:relative;

    background:#000;
}

.hero-video{
    width:100%;

    display:block;

    background:#000;

    object-fit:contain;
}

.hero-text-content{
    text-align:center;

    margin-top:10px;

    padding:0 10px;
}

.hero-text-content h1{
    font-size:2.5rem;

    line-height:1.1;

    margin-bottom:16px;
}

.hero-text-content p{
    font-size:1rem;

    line-height:1.7;

    margin-bottom:24px;
}

.hero-text-content .btn-outline-gold{
    display:inline-flex;

    justify-content:center;

    align-items:center;
}

    /* =========================================================
       CONTENT CARD
    ========================================================= */

    .content-card{
        padding:34px 28px;
    }

    .section-title{
        font-size:2rem;

        line-height:1.2;
    }

    .content-card p{
        line-height:1.9;
    }

    .about-image-wrapper{
        max-width:520px;

        margin:0 auto;
    }

    /* =========================================================
       BENEFITS
    ========================================================= */

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

    .section-header h2{
        font-size:2.4rem;
    }

    .benefit-item{
        gap:14px;

        align-items:flex-start;
    }

    .benefit-item p{
        font-size:1rem;

        line-height:1.8;
    }

    /* =========================================================
       FAQ INLINE
    ========================================================= */

    .faq-inline-box{
        margin-top:40px;

        padding-top:28px;
    }

    /* =========================================================
       FOOTER / NEWSLETTER
    ========================================================= */

    .newsletter-box{
        padding:70px 20px 60px;
    }

    .footer-inner h2{
        font-size:2.4rem;

        line-height:1.15;
    }

    .footer-inner .italic{
        font-size:1rem;

        line-height:1.8;
    }

    .flex-form{
        flex-direction:column;

        align-items:center;
    }

    .flex-form input{
        width:100%;

        max-width:100%;
    }

    .submit-btn{
        width:100%;
    }

    .footer-social-top{
        gap:14px;
    }

    .footer-legal{
        flex-direction:column;

        gap:10px;
    }

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

@media (max-width:576px){

    .footer-social-top{
        gap:14px;
    }

    .footer-social-top img{
        width:36px;

        height:36px;
    }

}
    /* =========================================================
       ORDER PAGE
    ========================================================= */

    .product-card{
        grid-template-columns:1fr;

        gap:35px;
    }

    .product-image{
        max-width:520px;

        margin:0 auto;
    }

    .product-content{
        text-align:center;
    }

    .product-content h2{
        font-size:2.2rem;
    }

    /* =========================================================
       CART / CHECKOUT
    ========================================================= */

    .cart-layout,
    .checkout-layout{
        grid-template-columns:1fr;
    }

    .cart-summary,
    .checkout-summary{
        position:relative;

        top:auto;
    }

    .cart-item{
        grid-template-columns:1fr;

        text-align:center;

        gap:22px;
    }

    .cart-item-total{
        text-align:center;
    }

    .checkout-form,
    .checkout-summary{
        padding:32px 26px;
    }

    /* =========================================================
       CONTACT
    ========================================================= */

    .contact-section{
        padding-top:50px;
        padding-bottom:70px;
    }

    .contact-card{
        padding:34px 26px;
    }

    .contact-card h3{
        font-size:1.9rem;
    }

    /* =========================================================
       LEGAL
    ========================================================= */

    .legal-content{
        padding:36px 26px;
    }

    .legal-data-row{
        flex-direction:column;

        gap:6px;
    }

    .legal-data-row strong{
        min-width:auto;
    }

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

    .impresszum-card{
        padding:34px 26px;
    }

}


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

@media (max-width:576px){

    .container{
        padding-left:16px;
        padding-right:16px;
    }

    /* =========================================================
       HEADER
    ========================================================= */

    .header-brand{
        flex-direction:column;

        gap:10px;
    }

    .header-logo{
        width:74px;
    }

    .site-title{
        font-size:0.92rem;
    }

    /* =========================================================
       HERO
    ========================================================= */

    .hero-title{
        font-size:2.25rem;
    }

    .hero-subtitle{
        font-size:1.2rem;
    }

    .hero-text{
        font-size:0.95rem;
    }

    .hero-image-box{
        display:none;
    }
    /* =========================================================
       ABOUT
    ========================================================= */

    .about-content h2{
        font-size:2rem;
    }

    /* =========================================================
       CARDS
    ========================================================= */

    .feature-card img{
        min-height:390px;
    }

    .card-overlay{
        bottom:150px;

        padding:0 20px;
    }

    .card-overlay h3{
        font-size:1.6rem;
    }

    .card-overlay p{
        font-size:0.92rem;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .cta-box{
        padding:30px 22px;
    }

    .cta-content h2{
        font-size:2.1rem;
    }

    /* =========================================================
       VIDEO HERO
    ========================================================= */

    .hero-text-content h1{
        font-size:2.2rem;
    }

    .hero-text-content p{
        font-size:1rem;
    }

    .video-frame-wrapper{
        border-radius:24px;
    }

    /* =========================================================
       CONTENT
    ========================================================= */

    .content-card{
        padding:26px 22px;
    }

    .section-title{
        font-size:1.7rem;
    }

    /* =========================================================
       NEWSLETTER
    ========================================================= */

    .newsletter-box{
        padding:60px 16px 50px;
    }

    .footer-inner h2{
        font-size:2rem;
    }

    /* =========================================================
       FORMS
    ========================================================= */

    .checkout-form,
    .checkout-summary,
    .contact-card,
    .legal-content,
    .impresszum-card{
        padding:26px 20px;
    }

    .impresszum-card{
        padding:34px 26px;
    }

    /* =========================================================
       HERO FIXES
    ========================================================= */
  

    .hero-title,
    .hero-subtitle,
    .hero-text{
        text-align:left;
    }

    .hero-text br,
    .hero-title br{
        display:none;
    }

}

@media(max-width:768px){

    /* =========================================
       SECTION
    ========================================= */

    .programs-section{
        margin-top:30px;
    }


    /* =========================================
       OVERVIEW OFF
    ========================================= */

    .program-overview{
        display:none;
    }


    /* =========================================
       GRID
    ========================================= */

    .programs-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:20px;
    }


    /* =========================================
       CARD
    ========================================= */

    .program-card{

        min-height:auto;

        max-width:100%;

        padding:20px 16px 24px;

        border-radius:24px;

        overflow:hidden;

        transform:none !important;
    }

    .program-card::before{

        border-radius:24px;
    }

    .program-card:hover{

        transform:none;
    }


    /* =========================================
       IMAGE
    ========================================= */

  .program-image-wrapper{

    display:flex;

    justify-content:center;

    margin-bottom:30px;
}
    .program-image{

        width:105px;

        height:105px;

        object-fit:contain;

        padding:10px;

        border-radius:50%;
    }

    .program-image img{

        width:120px;

        height:120px;

        object-fit:cover;

        border-radius:50%;
    }


    /* =========================================
       CONTENT
    ========================================= */

    .program-content{

        padding:0;

        gap:10px;
    }

    .program-content h3{

        font-size:1.2rem;

        line-height:1.35;

        text-align:left;
    }

    .program-content p{

        text-align:left;

        font-size:.96rem;

        line-height:1.7;
    }

    .program-preview{

        text-align:left;

        margin-bottom:0;

        line-height:1.7;
    }


    /* =========================================
       FULL CONTENT ALWAYS OPEN
    ========================================= */

    .program-full-content{

        display:block !important;

        margin-top:12px;

        font-size:.95rem;

        line-height:1.75;
    }

    .toggle-program{
        display:none;
    }


    /* =========================================
       BUTTONS
    ========================================= */

    .program-buttons{

        margin-top:18px;

        gap:10px;
    }

    .program-buttons .green-button-style,
    .program-buttons .bordo-button{

        width:100%;

        min-height:52px;
    }


    /* =========================================
       FORM
    ========================================= */

    .application-container{
        margin-top:30px;
    }

    .application-form{

        padding:22px 16px;

        border-radius:22px;
    }


    /* =========================================
       ROWS
    ========================================= */

    .form-row{

        flex-direction:column;

        gap:0;
    }


    /* =========================================
       INPUTS
    ========================================= */

    .application-form input,
    .application-form textarea{

        padding:14px;

        font-size:16px;

        border-radius:12px;
    }

    .application-form textarea{

        min-height:140px;
    }


    /* =========================================
       LABEL
    ========================================= */

    .label{

        margin:22px 0 10px;

        font-size:1rem;
    }


    /* =========================================
       PROGRAM CHECKBOXES
    ========================================= */

    .program-checkboxes{

        grid-template-columns:1fr;

        gap:10px;

        margin:16px 0 24px;
    }

    .program-checkboxes label{

        align-items:flex-start;

        padding:12px 14px;

        line-height:1.5;

        border-radius:14px;
    }


    /* =========================================
       CHECKBOX GROUP
    ========================================= */

    .checkbox-group{

        align-items:flex-start;

        text-align:left;

        gap:14px;

        margin-top:28px;
    }

    .checkbox-group label{

        align-items:flex-start;

        line-height:1.5;
    }


    /* =========================================
       POPUP
    ========================================= */

    .popup-content{

        padding:30px 20px;

        border-radius:20px;
    }

    .popup-content p{

        font-size:1rem;

        line-height:1.7;
    }

}