/* ==========================================================================
   KakasTech — RESZPONZÍV RÉTEG (tablet + mobil)
   A 01–08 moduláris CSS UTÁN töltődik be; kizárólag médiaquery-ken belüli
   felülírásokat tartalmaz, alap (desktop) szabályt nem.
   Egységes töréspontok az egész projekten:
     kis mobil ≤ 480px · mobil ≤ 640px · nagy mobil/tablet-portré ≤ 768px
     · tablet ≤ 1024px  (+ desktop-cap: 1100/1200/1400, sidebar-tier: 900)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET (≤ 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Alap keretek */
    .site-main {
        --main-pad-top: 28px;
        --main-pad-x: 20px;
        padding: var(--main-pad-top) var(--main-pad-x) 48px;
    }

    .site-header {
        padding: 10px 20px;
    }

    .header-widgets {
        display: none;
    }

    /* Főoldal: a sidebar a fő tartalom alá kerül */
    .home-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* A sidebar-szekciók tableten egymás MELLETT férnek el */
    .home-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }

    /* Magazin blokk: hero felül, kis kártyák alatta két oszlopban */
    .articles-magazine {
        grid-template-columns: 1fr;
    }
    .articles-grid-small {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    /* Profil / Vault két oszlopa egymás alá */
    .profile-cols {
        flex-direction: column;
        gap: 28px;
    }
    .profile-col-left {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--steel-100);
        padding-bottom: 24px;
    }

    /* Tableten 2 oszlop, ne feszüljön a fix szélességhez */
    .box-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
        gap: 20px;
    }
}

/* --------------------------------------------------------------------------
   MOBIL FEJLÉC (≤ 768px) — Mandiner-stílus
   Egyetlen sor: logó balra · jobbra kereső-gomb, user-ikon, hamburger.
   A teljes navigáció (+ kereső, valuta, időjárás, dátum) a jobbról benyíló
   .mobile-menu panelben él (01-base.css), a hamburger nyitja.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Összegző sávok (stats box) elrejtése mobilon */
    .page-summary,
    .uni-summary {
        display: none;
    }

    /* Kategória-ikon tooltipek elrejtése mobilon. Érintőn nincs hover, tehát
       sosem jelennek meg — VISZONT az abszolút, white-space:nowrap tooltipek a
       jobb szélső ikonoknál kilógtak a viewportból (opacity:0 mellett is
       layoutban maradnak), amitől a böngésző ~0.95x-re KIZOOMOLT, és az oldal
       kétoldalt üres sávval, „nem kitöltve" jelent meg. Elrejtve → a dokumentum
       pontosan a viewport szélessége lesz, a tartalom kitölti a kijelzőt. */
    .cat-icon-tip {
        display: none;
    }

    /* Süti újranyitó ikon elrejtése mobilon — itt (az utolsóként töltődő
       lapban) él, mert a gomb display:flex törzs-szabálya az 05-ben van */
    .cookie-reopen,
    #cookie-reopen {
        display: none;
    }

    .main-nav {
        display: none;
    }

    .header-menu-toggle {
        display: inline-flex;
    }

    .site-header {
        flex-wrap: nowrap;
        gap: 10px;
        min-height: 64px;
        padding: 10px 14px;
    }

    .logo-kakastech-frontend {
        font-size: 30px;
    }

    .header-right {
        margin-left: auto;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
    }

    /* Bejelentkezett user: mobilon csak az avatar, a név és a külön
       kijelentkezés a benyíló menüben van */
    .user-badge-name,
    .user-badge-logout {
        display: none;
    }

    /* Kereső panel: a fejléc alatt, teljes szélességben nyílik le */
    .header-search {
        position: static;
    }

    .header-search-dropdown {
        position: fixed;
        top: 66px;
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        transform-origin: top center;
    }

    .header-search-dropdown::before {
        display: none;
    }

    .header-search-results {
        max-height: min(420px, calc(100dvh - 170px));
    }

    .header-search-dropdown-submit span {
        display: none;   /* mobilon csak a nagyító ikon, hogy elférjen */
    }

    .header-search-dropdown-submit {
        padding: 0 14px;
    }

    /* Unicornisok filterbar optimalizálás.
       !important nélkül: a responsive.css utolsóként töltődik, és a
       törzs-szabályok (03-pages) azonos specifikusságú, egyszerű
       class-szelektorok — a kaszkád-sorrend önmagában eldönti. */
    .uni-filterbar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        overflow-x: visible;
    }
    .uni-filters {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        width: 100%;
    }
    .uni-filters#uniCatFilters {
        grid-template-columns: repeat(4, 1fr);
    }
    .uni-filter-label {
        grid-column: 1 / -1;
        margin-bottom: 2px;
        display: block;
    }
    .uni-filter {
        width: 100%;
        justify-content: center;
        padding: 5px 2px;
        font-size: 11px;
        box-sizing: border-box;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-flex;
    }
}

/* --------------------------------------------------------------------------
   MOBIL (≤ 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

    /* Alap keretek */
    .site-main {
        --main-pad-top: 20px;
        --main-pad-x: 14px;
        padding: var(--main-pad-top) var(--main-pad-x) 40px;
    }

    /* Főoldal sidebar vissza egy oszlopba */
    .home-side {
        grid-template-columns: 1fr;
    }
    .articles-grid-small {
        grid-template-columns: 1fr;
    }
    .home-main {
        gap: 36px;
    }

    /* Cikk oldal */
    .cikk-layout {
        padding: 0 12px;
        margin: 16px auto 24px;
        gap: 24px;
    }
    .cikk-hero {
        padding: 30px 20px 20px;
    }
    .cikk-hero-title {
        font-size: 24px;
    }
    .cikk-body {
        font-size: 17px;
        line-height: 1.8;
    }
    .cikk-body > p:first-of-type::first-letter {
        font-size: 44px;
    }
    .cikk-body h2 { font-size: 23px; margin: 30px 0 12px; }
    .cikk-body h3 { font-size: 19px; }
    .cikk-body blockquote {
        padding: 16px 18px 16px 24px;
        font-size: 16.5px;
        margin: 24px 0;
    }
    .cikk-body blockquote::before {
        font-size: 40px;
        left: 18px;
    }
    .cikk-ai-analysis {
        padding: 18px 16px;
    }
    .cikk-ai-summary-list li {
        font-size: 14.5px;
    }

    /* Megosztás blokk egymás alá */
    .cikk-share-section {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Hozzászólások mobilon: kisebb avatar, kompaktabb kártyák */
    .comment-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }
    .comment-avatar {
        width: 36px;
        height: 36px;
    }
    .comment-avatar-initials { font-size: 14px; }
    .comment-form { padding: 16px; }
    .comment-form-footer { justify-content: center; }
    .comment-form-hint { order: 2; }
    .comment-guest-prompt { flex-direction: column; text-align: center; }
    .comment-guest-login-link { margin-left: 0; }

    /* Auth (login/regisztráció) */
    .auth-hero {
        padding: 24px 16px 12px;
    }
    .auth-hero .logo-kakastech-frontend {
        font-size: 30px;
    }
    .auth-container .card {
        padding: 22px 18px;
    }

    /* Kategória fejléc (page-hero) mobil optimalizálás */
    .page-hero {
        padding: 30px 16px 36px;
        margin-bottom: 24px;
        text-align: center;
    }
    .page-hero h1 {
        font-size: 26px;
        padding-left: 0;
        margin-bottom: 8px;
    }
    .page-hero h1::before {
        display: none;
    }
    .page-hero p {
        font-size: 13.5px;
        margin: 0 auto;
    }

    /* Táblázatok: vízszintes görgetés kártyán belül, ne törje szét a layoutot */
    .card {
        overflow-x: auto;
    }

    /* Katalógus-keresősáv: mobilon teljes szélesség, a számláló elfér a végén */
    .catalog-search-bar { max-width: 100%; }
    .catalog-search-count { font-size: 10.5px; }

    /* Kategória tabok: mobilon kettesével egymás mellett (2 hasáb) */
    .catalog-tabs {
        flex-wrap: wrap;
        flex-direction: row;
        align-items: stretch;
        overflow-x: visible;
        margin-bottom: 24px;
        gap: 8px;
    }
    .catalog-tabs::-webkit-scrollbar { display: none; }
    .catalog-tab {
        flex: 1 1 calc(50% - 4px);
        min-width: calc(50% - 4px);
        max-width: calc(50% - 4px);
        padding: 8px 4px;
        font-size: 11.5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    .catalog-tab--compare {
        margin-left: 0;
    }

    /* Modell-kártyák egy oszlopba, kompaktabb belső margóval */
    .box-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .catalog-card { padding: 22px; }

    /* Kártya lábléc: a gombok szépen elférnek egymás mellett, nem kell kinyújtani őket */
    .catalog-card-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .catalog-card-actions {
        display: flex;
        gap: 8px;
        width: auto;
    }
    .catalog-card-actions .btn-primary,
    .catalog-card-actions .btn-secondary {
        flex: 0 0 auto;
        width: auto;
        justify-content: center;
    }

    /* Adatlap: az előfizetési csomag-kártyák teljes szélességet kapjanak */
    .package-card {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   KIS MOBIL (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .logo-kakastech-frontend {
        font-size: 28px;
    }
    .cikk-hero-title {
        font-size: 21px;
    }
    .models-aside-grid {
        grid-template-columns: 1fr;
    }
    .google-follow-badge {
        font-size: 12.5px;
        padding: 11px 16px;
    }
    
    /* Nagyon keskeny kijelzőn is egymás mellett maradnak a kártyagombok */
    .catalog-card-actions {
        flex-direction: row;
    }
    .catalog-card-actions .btn-primary,
    .catalog-card-actions .btn-secondary {
        width: auto;
    }
}

/* ============================================================
   MOBIL — KERET NÉLKÜLI, TELJES SZÉLESSÉGŰ CIKK-NÉZET (≤768px)
   Portfolio-jellegű elrendezés: a kártya-keretek eltűnnek, a borítók
   élre futnak (50% − 50vw margó-trükk, mint a page-hero sávnál), a
   cikkeket hajszálvonal tagolja. Desktopon minden változatlan.
   ============================================================ */
@media (max-width: 768px) {

    /* --- Kártya-keretek le (lista + cikkoldal) --- */
    .article-card,
    .cikk-card {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .article-card {
        min-height: 0;
    }

    .article-card:hover {
        transform: none;
        box-shadow: none;
    }

    .article-card:hover .article-card-cover img {
        transform: none;
    }

    /* --- Élre futó lista-konténerek --- */
    .article-lead-wrap,
    .article-grid {
        margin-inline: calc(50% - 50vw);
    }

    /* --- Vezércikk (featured): cím a KÉP ALÁ, üveg-panel nélkül --- */
    .article-card-featured {
        border-radius: 0;
    }

    .article-card-featured-img {
        border-radius: 0;
    }

    .article-card-featured-overlay {
        display: none;
    }

    .article-card-featured-body {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        padding: 10px var(--main-pad-x, 20px) 14px;
        background: none;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
    }

    .article-card-featured-title {
        color: var(--steel-900);
        font-size: 19px;
        line-height: 1.3;
        text-shadow: none;
    }

    /* --- Kis kártyák → kompakt sorok (szöveg balra, thumbnail jobbra) --- */
    .articles-grid-small {
        gap: 0;
    }

    .articles-grid-small .article-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 92px;
        grid-template-areas:
            "badge thumb"
            "body  thumb";
        column-gap: 12px;
        row-gap: 4px;
        align-items: start;
        padding: 12px var(--main-pad-x, 20px);
        border-top: 1px solid var(--steel-100);
        overflow: visible;
    }

    .articles-grid-small .article-card-cover {
        grid-area: thumb;
        width: 92px;
        height: 64px;
        align-self: center;
        border-radius: var(--radius-sharp, 4px);
        overflow: hidden;
    }

    .articles-grid-small .article-card-cover img,
    .articles-grid-small .article-card-cover-placeholder {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .articles-grid-small .article-badge {
        grid-area: badge;
        justify-self: start;
        font-size: 9px;
        padding: 2px 7px;
    }

    .articles-grid-small .article-card-body {
        grid-area: body;
        padding: 0;
    }

    .articles-grid-small .article-card-title {
        font-size: 14px;
        line-height: 1.35;
    }

    /* --- „További cikkek" rács: élre futó borító + hajszál-elválasztó --- */
    .article-grid {
        gap: 0;
    }

    .article-grid .article-card + .article-card {
        border-top: 1px solid var(--steel-100);
    }

    .article-grid .article-card {
        padding-bottom: 16px;
    }

    .article-grid .article-card-cover,
    .article-grid .article-card-cover img {
        border-radius: 0;
    }

    .article-grid .article-card-body {
        padding: 12px var(--main-pad-x, 20px) 0;
    }

    /* --- Cikkoldal: a kártya élre fut (ugyanaz az 50% − 50vw bleed-trükk,
           mint a listáknál — a .site-main --main-pad-x paddingján is átnyúlik);
           a szöveg-margót a hero/törzs saját paddingje adja. Az aside a
           .site-main paddingjából örökli az oldal-margót. --- */
    .cikk-layout {
        padding: 0;
    }

    .cikk-card {
        background: var(--bg-card);
        margin-inline: calc(50% - 50vw);
    }
}

@media (max-width: 480px) {
    .articles-grid-small .article-card {
        grid-template-columns: minmax(0, 1fr) 84px;
    }

    .articles-grid-small .article-card-cover {
        width: 84px;
        height: 58px;
    }

    .article-card-featured-title {
        font-size: 18px;
    }
}