/* ==========================================================================
   MOLNÁR VIKTOR — responsive.css
   Mobile-first felülírások: 1280px lefelé → 1024 → 768 → 480px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1280px — a teljes desktop navigáció (6 menüpont + § alcím + CTA gomb)
   innentől lefelé már nem fér el törés nélkül egy sorban, ezért itt váltunk
   hamburger menüre (nem csak a szűkebb tablet/mobil nézeteknél); egyúttal
   kényelmesebb gutter is beáll. Külön blokkban tartjuk az 1024px-es
   layout-váltásoktól, mert a nav csak szélességi kérdés — a tartalmi
   grid-eknek nem kell ilyen korán egyoszloposra váltaniuk.
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
    :root { --gutter: 32px; }

    .nav-primary { display: none; }
    .nav-toggle { display: flex; z-index: 2; }
    .nav-indicator { display: none; }

    .site-header.is-nav-open .nav-primary {
        display: flex;
        position: fixed;
        inset: var(--header-height) 0 0 0;
        background: var(--color-navy);
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-xl) var(--gutter) var(--space-lg);
        gap: var(--space-lg);
        overflow-y: auto;
    }

    .site-header.is-nav-open .nav-primary::before {
        content: '§';
        position: absolute;
        font-family: var(--font-display);
        right: -0.1em;
        bottom: -0.22em;
        font-size: 14rem;
        color: rgba(255,255,255,0.05);
        line-height: 1;
        pointer-events: none;
    }

    .site-header.is-nav-open .nav-primary__list {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    /* Stagger-animáció: minden menüpont kicsit később jelenik meg */
    .site-header.is-nav-open .nav-primary__list > li {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
    }
    .site-header.is-nav-open .nav-primary__list > li:nth-child(1) { transition-delay: 60ms; }
    .site-header.is-nav-open .nav-primary__list > li:nth-child(2) { transition-delay: 110ms; }
    .site-header.is-nav-open .nav-primary__list > li:nth-child(3) { transition-delay: 160ms; }
    .site-header.is-nav-open .nav-primary__list > li:nth-child(4) { transition-delay: 210ms; }
    .site-header.is-nav-open .nav-primary__list > li:nth-child(5) { transition-delay: 260ms; }
    .site-header.is-nav-open .nav-primary__list > li:nth-child(6) { transition-delay: 310ms; }
    .site-header.is-nav-open.is-nav-open-visible .nav-primary__list > li {
        opacity: 1;
        transform: translateY(0);
    }

    .site-header.is-nav-open .nav-primary__link {
        font-family: var(--font-display);
        font-size: 1.5rem;
        color: var(--color-white);
    }
    .site-header.is-nav-open .nav-primary__link.is-active { color: var(--color-blue-soft); }
    .site-header.is-nav-open .nav-item__chevron path { stroke: currentColor; }

    .site-header.is-nav-open .nav-mini {
        position: static;
        transform: none;
        width: 100%;
        max-height: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        overflow: hidden;
        background: rgba(255,255,255,0.04);
        border-color: rgba(255,255,255,0.14);
        box-shadow: none;
        transition: max-height var(--duration-slow) var(--ease);
        margin-top: var(--space-sm);
    }
    .site-header.is-nav-open .nav-item--has-menu.is-menu-open .nav-mini { max-height: 900px; }
    .site-header.is-nav-open .nav-mini__list { grid-template-columns: minmax(0, 1fr); }
    .site-header.is-nav-open .nav-mini__title { color: var(--color-white); }
    .site-header.is-nav-open .nav-mini__desc { color: rgba(255,255,255,0.55); }
    .site-header.is-nav-open .nav-mini__item:hover { background: rgba(255,255,255,0.06); }
    .site-header.is-nav-open .nav-mini__all { border-top-color: rgba(255,255,255,0.14); color: var(--color-white); }
    .site-header.is-nav-open .nav-mini__inner { max-width: none; margin: 0; padding: var(--space-sm); }
    .site-header.is-nav-open .nav-mini__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
    /* Mobilon a kapcsolatfelvételi kártya nem fér el kényelmesen a szűk
       overlay-ben, és a fő "Szakmai egyeztetést kérek" CTA gomb amúgy is
       elérhető a hamburger-menü alján — itt elrejtjük. */
    .site-header.is-nav-open .nav-mini__cta { display: none; }
    .site-header.is-nav-open .nav-mini__bg-mark { display: none; }

    .site-header.is-nav-open .header-cta { width: 100%; position: relative; }
    .site-header.is-nav-open .header-cta .btn { width: 100%; justify-content: center; }

    @media (prefers-reduced-motion: reduce) {
        .site-header.is-nav-open .nav-primary__list > li {
            opacity: 1; transform: none; transition: none;
        }
    }
}

/* --------------------------------------------------------------------------
   ≤ 1024px — tablet / kis laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --space-2xl: 72px;
        --space-3xl: 96px;
    }

    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .hero__visual { aspect-ratio: 4 / 3; order: -1; max-width: 420px; margin-inline: auto; }

    /* A lebegő jelvények negatív offsettel dolgoznak desktopon (a grid gap
       adja meg a helyet); tabletnél/mobilnál a képen belülre húzzuk őket,
       hogy sose nyúljanak túl a viewporton (vízszintes overflow elkerülése). */
    .hero__badge--top { top: var(--space-sm); left: var(--space-sm); }
    .hero__badge--mid { top: auto; bottom: calc(var(--space-lg) + 64px); right: var(--space-sm); }

    .stat-bar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card:nth-child(3) { border-left: none; }
    .stat-card:nth-child(1), .stat-card:nth-child(2) { border-bottom: 1px solid var(--color-border); }

    .why-me { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }

    .service-directory { grid-template-columns: minmax(0, 1fr); }
    .service-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        border-top: none;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: var(--space-lg);
        -webkit-overflow-scrolling: touch;
    }
    .service-nav__item {
        border-bottom: none;
        flex-shrink: 0;
        padding: var(--space-sm) var(--space-md);
    }

    .service-panel__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .service-panel__media { order: -1; max-width: 320px; }

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

    .industry-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .industry-tab:nth-child(2) { border-left: none; }
    .industry-tab:nth-child(1), .industry-tab:nth-child(2) { border-bottom: 1px solid var(--color-border); }
    .industry-tab:nth-child(3) { border-left: none; }

    .process-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }

    .process-vertical { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-lg); }
    .process-rail__dot { width: 32px; height: 32px; font-size: 0.78rem; }
    .process-step-v { grid-template-columns: minmax(0, 1fr); }
    .process-step-v__img { max-width: 220px; }

    .contact-layout { grid-template-columns: minmax(0, 1fr); }
    .contact-portrait-col { position: static; }
    .contact-portrait { max-width: 320px; margin-inline: auto; }
    .contact-info-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }

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

    .about-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .about-hero__visual { max-width: 360px; }
    .service-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .service-hero__visual { order: -1; }

    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); }
    .footer-cta { flex-direction: column; align-items: flex-start; gap: var(--space-md); }

    .cta-section { grid-template-columns: minmax(0, 1fr); text-align: left; }
    .cta-section__actions { align-items: flex-start; }

    .career-item { grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-md); }
}

/* --------------------------------------------------------------------------
   ≤ 768px — tablet portrait / nagy mobil
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --gutter: 20px;
        --space-2xl: 56px;
        --space-3xl: 72px;
        --header-height: 72px;
        --header-height-scrolled: 60px;
    }

    /* A hamburger/overlay alap-viselkedését már a ≤1024px blokk beállítja;
       itt csak a szűkebb mobil nézethez tartozó finomhangolás marad. */
    .brand__role { display: none; }

    h1 { line-height: 1.12; }

    .hero { padding-block: var(--space-xl) var(--space-lg); }
    .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
    .hero__actions .btn { justify-content: center; }

    /* Mobilon a lebegő jelvények a portré fölé csúszva zsúfoltak és eltakarják
       az arcot; itt inkább a kép alá rendezett, statikus kártyarácsba
       tesszük őket (kép teljes szélességben, alatta 2 oszlopos jelvénypár,
       majd az MKVK sáv teljes szélességben). */
    .hero__visual {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm);
        aspect-ratio: auto;
        max-width: none;
        margin-inline: 0;
    }
    .hero__visual-img {
        grid-column: 1 / -1;
        aspect-ratio: 4 / 3;
        height: auto;
    }
    .hero__badge,
    [data-hero].is-loaded .hero__badge {
        position: static;
        opacity: 1;
        transform: none;
        width: 100%;
    }
    .hero__badge--bottom { grid-column: 1 / -1; }
    .hero__badge-label { max-width: none; }

    .stat-bar__grid { grid-template-columns: minmax(0, 1fr); }
    .stat-card { border-left: none !important; border-bottom: 1px solid var(--color-border); }
    .stat-card:last-child { border-bottom: none; }

    .service-grid { grid-template-columns: minmax(0, 1fr); }
    .testimonial-grid { grid-template-columns: minmax(0, 1fr); }

    .industry-selector { grid-template-columns: minmax(0, 1fr); }
    .industry-tab { border-left: none !important; border-bottom: 1px solid var(--color-border); }
    .industry-tab:last-child { border-bottom: none; }

    .process-timeline { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }

    .process-vertical { grid-template-columns: minmax(0, 1fr); }
    .process-rail { display: none; }

    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }

    .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }

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

    .cta-section { padding: var(--space-xl) var(--space-md); }

    .career-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
    .career-item__period { font-size: 0.95rem; }

    .cookie-banner { left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); }
    .cookie-banner__inner { flex-direction: column; align-items: flex-start; padding: var(--space-md); }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn { flex: 1; justify-content: center; }
    .cookie-panel__dialog { padding: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   ≤ 480px — kis mobil
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .btn { width: 100%; justify-content: center; }
    .hero__actions .btn { width: 100%; }
    .header-cta .btn--primary { padding: 0.75rem 1rem; font-size: 0.85rem; }
    .brand__name { font-size: 0.92rem; }
    .form-card { padding: var(--space-lg) var(--space-md); }
    .cta-section__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   "Vissza a tetejére" gomb — jobb alul, görgetés közben jelenik meg
   -------------------------------------------------------------------------- */
.back-to-top {
    position: fixed;
    right: var(--space-lg);
    bottom: var(--space-lg);
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    background: var(--color-navy);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), visibility var(--duration-base), background var(--duration-base) var(--ease);
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-blue-strong); }
.back-to-top svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
    .back-to-top { right: var(--space-md); bottom: calc(var(--space-md) + 64px); }
}

/* --------------------------------------------------------------------------
   Sticky mobil CTA (opcionális, footer felett jelenik meg mobilon a
   kapcsolat oldalon kívüli oldalakon — JS kapcsolja be data-sticky-cta-n)
   -------------------------------------------------------------------------- */
.sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .sticky-cta.is-active {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        padding: var(--space-sm) var(--gutter);
        background: var(--color-white);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -8px 24px rgba(11,32,68,0.08);
    }
    .sticky-cta.is-active .btn { width: 100%; justify-content: center; }
}