/* ------------------------------------------------------------------
   Katalógus listaoldal (.page-catalog-index) — termékkártya-oszlopok
   A motor a kártyákra fixen `col-6 col-lg-4 col-xl-3`-at ad; itt
   `col-12 col-lg-6 col-xl-4` szerint szélesítjük (1 / 2 / 3 oszlop).
   Hatókör: a `#page_container` közvetlen első `.container` eleme (a
   terméklista), hogy más blokkok kártyáit ne érintse.
   ------------------------------------------------------------------ */
.page-catalog-index #page_container > .container:first-of-type .card.col-6.col-lg-4.col-xl-3 {
    width: 100%;
}

@media (min-width: 992px) {
    .page-catalog-index #page_container > .container:first-of-type .card.col-6.col-lg-4.col-xl-3 {
        width: 50%;
    }
}

@media (min-width: 1200px) {
    .page-catalog-index #page_container > .container:first-of-type .card.col-6.col-lg-4.col-xl-3 {
        width: 33.333333%;
    }
}

/* ------------------------------------------------------------------
   Szekcióba ágyazott flip-kártyás dobozok (box_img-title-lead-vertical
   v16/v17): a sablon végig `h-100` láncra épül, ezért magasságot adó
   szülő nélkül 0 px-re esik össze (a kártya és a kép is). A képarány
   (a box_pic származék 600x800-as aránya) adja meg a magasságot.
   ------------------------------------------------------------------ */
.sortable-section .box-fliph,
.sortable-section .box-flipv {
    height: auto;
    aspect-ratio: 3 / 4;
}

/* ------------------------------------------------------------------
   Fejléc: a `.shadow` árnyék eddig NEM látszott, mert a `header` és a
   `main` is `position: static`, így a később következő `main` fehér
   háttere ráfestett. Saját rétegbe emelve az árnyék a tartalom fölé
   kerül, és a fejléc elválik az oldal többi részétől.
   ------------------------------------------------------------------ */
header.v-header-wrap {
    position: relative;
    z-index: 3;
}

/* ------------------------------------------------------------------
   Flip-kártya: a kártya maga Bootstrap `.card`, aminek FEHÉR az alapja.
   Ez a fehér lap a kártya mögött végig ott marad (forgás közben és a
   kép/hátlap mellett is kivillan), és eltakarja a szekció háttérvideóját.
   A kártya-alap átlátszó; a hátoldal saját színes rétege érintetlen marad.
   ------------------------------------------------------------------ */
.sortable-section .box-fliph,
.sortable-section .box-flipv {
    background-color: transparent !important;
    --bs-card-bg: transparent;
}

/* ------------------------------------------------------------------
   Szekció-háttérvideó (YouTube iframe): a sablon `vh`/`vw` egységekkel
   méretez, azaz a VIEWPORT-hoz, nem a szekcióhoz — ezért alacsonyabb
   vagy magasabb szekciónál nem tölti ki. A wrapper méret-konténerré
   tételével a `cq*` egységek már a szekcióhoz viszonyítanak, és a
   min-width/min-height a „cover" méretet kényszeríti (ezek a téma
   `height:auto!important` iframe-szabályát is felülírják, mert más
   tulajdonságok).
   ------------------------------------------------------------------ */
div:has(> .bg-video-iframe) {
    container-type: size;
}

.bg-video-iframe {
    min-width: max(100cqw, 177.7778cqh);
    min-height: max(56.25cqw, 100cqh);
}

/* ------------------------------------------------------------------
   Menü-modul tartalmi oldalai (.page-page-menu) — tipográfiai szépítés
   A szöveg eddig a teljes konténer-szélességben futott (1300 px-es
   sorok), tagolás és márka-jelzés nélkül. Csak megjelenés változik,
   a tartalomhoz nem nyúlunk.
   ------------------------------------------------------------------ */

/* Márka-elválasztó az oldalcím alatt */
.page-page-menu #page_container > .container > h1.v-header-root {
    position: relative;
    padding-bottom: .85rem;
}

.page-page-menu #page_container > .container > h1.v-header-root::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4rem;
    height: 4px;
    border-radius: 2px;
    background-color: rgb(var(--pcolor-rgb));
}

/* Olvasható sorhossz és levegősebb sortáv — csak a szöveg-elemekre,
   hogy a beágyazott blokkok (galéria, űrlap, doboz) szélesek maradjanak */
.page-page-menu .default-style {
    line-height: 1.75;
}

.page-page-menu .default-style > p,
.page-page-menu .default-style > ul,
.page-page-menu .default-style > ol,
.page-page-menu .default-style > h2,
.page-page-menu .default-style > h3,
.page-page-menu .default-style > h4 {
    max-width: 72ch;
}

.page-page-menu .default-style > p {
    margin-bottom: 1.15rem;
}

/* Alcímek elkülönítése a folyószövegtől */
.page-page-menu .default-style > h2,
.page-page-menu .default-style > h3,
.page-page-menu .default-style > h4 {
    margin-top: 2rem;
    margin-bottom: .75rem;
}

/* ------------------------------------------------------------------
   Logó (fejléc + lábléc) — a vektoros (SVG) logó méretezése
   A logó `logo.svg` / `footer-logo.svg`, amit a motor a
   `common/logo.phtml` SVG-ágán INLINE SVG-ként renderel. Ott a téma
   `.main-logo svg` (max 50 px) és a lábléc `mh-60px` korlátja kisebb
   képet adna, mint a korábbi PNG, ezért itt a megszokott 300 × 75 px-re
   állítjuk. A `flex-shrink: 0` azért kell, mert a fejléc-logó flex-elem, és a
   kereső mellett zsugorodna (a PNG-nél az `img` saját minimális mérete
   ezt megakadályozta); a `max-width: 100%` + `height: auto` viszont szűk
   kijelzőn arányos kicsinyítést enged, ahogy korábban is történt.
   ------------------------------------------------------------------ */
.main-logo > svg,
footer a > svg.mh-60px {
    width: 300px;
    height: auto;
    max-width: 100%;
    max-height: none;
    flex-shrink: 0;
}