/* ============================================================
   FoRest – responsive.css
   Mobil és tablet media queries
   ============================================================ */

/* ─── Tablet (max 1024px) ──────────────────────────────────── */

@media (max-width: 1024px) {

    :root {
        --section-padding: 4rem 1.5rem;
    }

    /* Navbar */
    .navbar__hamburger {
        display: flex;
    }

    .navbar__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 85vw);
        height: 100vh;
        background: var(--color-primary-dark);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 6rem 2rem 2rem;
        gap: 0;
        transition: right var(--transition);
        z-index: 1050;
        box-shadow: -4px 0 30px rgba(0,0,0,0.3);
    }

    .navbar__menu.open {
        right: 0;
    }

    .navbar__menu li {
        width: 100%;
        border-bottom: 1px solid rgba(245, 240, 232, 0.08);
    }

    .navbar__link {
        display: block;
        padding: 1rem 0.5rem;
        font-size: 1rem;
        border-radius: 0;
        color: var(--color-cream);
    }

    .navbar__cta {
        margin-top: 1.5rem;
        width: 100%;
        justify-content: center;
        border-radius: var(--border-radius-sm);
    }

    /* Navbar logó kisebb tableten */
    .navbar__logo-img {
        height: 60px;
    }

    /* About */
    .about__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .about__image-badge {
        bottom: -1rem;
        right: 1rem;
    }

    /* Primelase */
    .primelase__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

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

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

    /* Szolgáltatások – 2 oszlop tableten */
    .services__grid .card {
        flex: 0 1 calc(50% - 0.9rem);
    }

    /* Csomagok */
    .packages__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Lábléc */
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    /* Footer brand marad full-width */
    .footer__brand {
        grid-column: 1 / -1;
    }

    /* Galléria – 2 oszlop tableten */
    .salon-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.9rem;
    }

    /* Rituálék – 1 oszlop tableten */
    .rituals-grid {
        grid-template-columns: 1fr;
    }

    /* Kezelés kártya belső tartalom – 1 oszlop tableten */
    .treatment-card__body {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Képes kezelés blokk – 1 oszlop tableten */
    .treatment-card--with-image {
        grid-template-columns: 1fr;
    }

    .treatment-card__image-wrap {
        min-height: 320px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .treatment-card__text-box {
        margin-right: 0;
        margin-top: -2rem;
        margin-bottom: 0;
        border-radius: var(--border-radius);
    }
}


/* ─── Mobil (max 768px) ────────────────────────────────────── */

@media (max-width: 768px) {

    :root {
        --section-padding: 3.5rem 1.25rem;
    }

    /* Info blokkok – 1 oszlop mobilon */
    .content-section__blocks {
        grid-template-columns: 1fr;
    }

    /* Galléria – 2 oszlop mobilon (portré képek kicsik, 2 elfér) */
    .salon-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
    }

    /* Gombok – kisebb mobilon */
    .btn--lg {
        padding: 0.6rem 1.4rem;
        font-size: 0.85rem;
    }

    .btn {
        padding: 0.55rem 1.15rem;
        font-size: 0.82rem;
    }

    /* Booking gomb – hosszú szöveg kezelése mobilon */
    .booking-block .btn {
        white-space: normal;
        line-height: 1.35;
        max-width: 260px;
        text-align: center;
        display: flex;
        margin: 0 auto;
    }

    /* Bemutatkozó CTA gombok – középre mobilon */
    .about__cta {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    /* Szolgáltatás detail – ikon a szöveg fölé mobilon */
    .service-detail__grid,
    .service-detail__grid--reverse {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .service-detail__icon-col {
        order: -1;
    }

    .service-detail__grid--reverse .service-detail__icon-col {
        order: -1;
    }

    .service-detail__grid--reverse .service-detail__content {
        order: 0;
    }

    /* Szolgáltatás detail CTA gombok – középre mobilon */
    .service-detail__cta-group {
        justify-content: center;
    }

    /* Kezelések kártyák – tartalom 1 oszlopra mobilon */
    .treatment-card__body {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .treatment-card {
        padding: 1.5rem;
    }

    .treatment-card__image-wrap {
        min-height: 260px;
    }

    .treatment-card__text-box {
        padding: 1.5rem;
        margin-top: -1.5rem;
    }

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

    /* Hero */
    .hero {
        padding: 7rem 1.25rem 4rem;
    }

    .hero__actions {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .hero__actions .btn {
        width: 100%;
        max-width: 280px;
    }

    /* Szolgáltatások – 1 oszlop mobilon */
    .services__grid .card {
        flex: 1 1 100%;
        min-width: unset;
    }

    /* Primelase stats */
    .primelase__stats {
        grid-template-columns: 1fr 1fr;
    }

    /* Árlista tab gombok */
    .price-tabs {
        gap: 0.4rem;
    }

    .price-tab-btn {
        padding: 0.5rem 0.85rem;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
    }

    /* Árlista táblázat – kompakt, görgetés nélkül mobilon */
    .price-table-wrap {
        overflow-x: visible;
        border-radius: var(--border-radius-sm);
    }

    .price-table {
        font-size: 0.78rem;
        min-width: unset;
        width: 100%;
        table-layout: fixed;
    }

    .price-table th,
    .price-table td {
        padding: 0.55rem 0.4rem;
    }

    .price-table th:first-child,
    .price-table td:first-child {
        width: 38%;
    }

    .price-table th:not(:first-child),
    .price-table td:not(:first-child) {
        width: 20.6%;
        white-space: normal;
        font-size: 0.76rem;
    }

    /* Services – gomb ne lógjon ki */
    .services .text-center .btn {
        max-width: 100%;
        width: auto;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
        padding: 0.75rem 1.25rem;
    }

    /* Primelase CTA középre mobilon */
    .primelase__cta {
        flex-direction: column;
        align-items: center;
    }

    .primelase__cta .btn {
        width: 100%;
        max-width: 280px;
    }

    /* Csomagok – 1 oszlop mobilon */
    .packages__grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }

    .package-card--featured::before {
        font-size: 0.7rem;
        right: -1.8rem;
    }

    /* CTA */
    .cta-section__actions {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .cta-section__actions .btn {
        width: 100%;
        max-width: 280px;
    }

    /* Lábléc – 1 oszlop, minden középre */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer__brand {
        grid-column: 1;
    }

    .footer__links {
        align-items: center;
    }

    .footer__booking .btn {
        width: 100%;
        max-width: 260px;
    }

    /* Adatvédelmi oldal */
    .privacy-page {
        padding: 7rem 1.25rem 4rem;
    }
}


/* ─── Kis mobil (max 480px) ────────────────────────────────── */

@media (max-width: 480px) {

    :root {
        --section-padding: 3rem 1rem;
    }

    .hero__title {
        font-size: 2rem;
    }

    /* Navbar logó mobilon */
    .navbar__logo-img {
        height: 52px;
    }

    /* Primelase stats – egymás alatt */
    .primelase__stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* About badge inline */
    .about__image-badge {
        position: static;
        margin-top: 1rem;
        max-width: 100%;
        display: flex;
        gap: 1rem;
        align-items: center;
        text-align: left;
        border-radius: var(--border-radius-sm);
    }

    .about__image-badge .number {
        font-size: 1.8rem;
    }

    /* Navbar menü teljes szélességű kis mobilon */
    .navbar__menu {
        width: 100%;
    }

    /* Árlista tab gombok wrap */
    .price-tabs {
        justify-content: center;
    }

    .price-tab-btn {
        flex: 1 1 calc(50% - 0.4rem);
        text-align: center;
    }
}


/* ─── Nagy képernyő (min 1440px) ───────────────────────────── */

@media (min-width: 1440px) {

    :root {
        --section-padding: 6rem 2rem;
    }

    .hero__title {
        font-size: 4.5rem;
    }

    .services__grid .card {
        flex: 0 1 calc(33.333% - 1.2rem);
    }

    .packages__grid {
        gap: 2rem;
    }
}


/* ─── Rólam értékblokkok – tablet/mobil ────────────────────── */

@media (max-width: 900px) {
    .about-values__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* ─── Print ────────────────────────────────────────────────── */

@media print {
    .site-header,
    .hero__scroll-hint,
    .navbar__hamburger,
    .btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    .price-table {
        border: 1pt solid #ccc;
        min-width: unset;
    }

    .price-table th {
        background: #eee !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
    }

    .price-tab-content {
        display: block !important;
    }
}