/* === HanaBau – egyedi CSS (2026-08-28) === */

/* A szolgáltatás-leírás sima szövegként tárolódik (a jelenlegi admin-verzió escape-eli a HTML-t),
   ezért a bekezdéseket a sortörésekből jelenítjük meg. */
body.page-services-details .v-content-content-desc {
    white-space: pre-line;
}

/* Olvasható sorhossz a hosszabb szöveges blokkokon (a kártyás .row-k teljes szélesek maradnak). */
body.page-services-details .v-content-content-desc,
body.page-page-menu .default-style > p,
body.page-page-menu .default-style > ul,
body.page-page-menu .default-style > ol,
body.page-page-menu .default-style > h2 {
    max-width: 78ch;
}

/* Egységes térköz a nyitólapi szekció-címek (cím + elválasztó vonal) ALATT.
   A section-title_v1 sablon `mb-0`-t ad a vonalra, a galéria-szekció wrappere `my-5`-öt,
   a GYIK-harmonika `my-4`-et — ezek Bootstrap-utility osztályok (!important), ezért kell ide is. */
[id^="section_"] .v-section-title-002 {
    margin-bottom: 1.5rem !important;
}
[id^="section_"] .v-start-medialibrary-001,
[id^="section_"] .accordion {
    margin-top: 0 !important;
}

/* Az info-line-ba került kereső (`search_input_type=v1`) `flex-grow-1`, ezért 1200 px alatt
   odatapad a jobb oldali szöveghez — kap egy térközt. */
header .v-info-line-003 {
    margin-right: 1.5rem;
    justify-content: center;
}
header .v-info-line-002 {
    margin-right: 0 !important;
}
@media (min-width: 992px) {
    header section.d-lg-flex:has(.v-info-line-003) > .flex-shrink-0 {
        flex: 1 1 0 !important;
        min-width: max-content;
    }
    header .v-info-line-003 {
        margin-right: 0;
    }
}

/* Az IKONOS kereső (`search_input_type=v3`, marker: .v-info-line-004) a felső sáv JOBB oldalára,
   a nyelvváltó mellé kerül. A sablon sorrendje bal-szöveg / menü / kereső / nyelvváltó, ezért elég
   a bal blokkal felszívatni a szabad helyet, a kereső és a nyelvváltó így jobbra tapad.
   A fenti :has(.v-info-line-003) kapu miatt a v1-es (beviteli mezős) kereső középre igazítása
   érintetlen marad, ha a beállítás visszavált. */
@media (min-width: 992px) {
    header section.d-lg-flex:has(.v-info-line-004) > .flex-shrink-0:first-child {
        flex: 1 1 auto !important;
        min-width: max-content;
    }
    header section.d-lg-flex:has(.v-info-line-004) > .v-info-line-004,
    header section.d-lg-flex:has(.v-info-line-004) > .flex-shrink-0:last-child {
        flex: 0 0 auto !important;
    }
    header .v-info-line-004 {
        margin-right: .75rem;
    }
}
header .v-info-line-003 .search-form {
    width: 100%;
    max-width: 420px;
}

/* A lábléc-logó a `common_logo=v2` miatt `mh-90px`-et kap, de `img-fluid` NÉLKÜL — 408 px széles,
   így 1300 px alatt kilóg a `col-lg-4`-es hasábból (mérve: 992 px-en 116 px túlfolyás).
   Arányos zsugorodást kap, a magasság-korlát marad a sablonból. */
footer .v-footer-boxes-014 img {
    max-width: 100%;
    height: auto;
    max-height: 48px;
}

/* Az info-line social ikonjai jobbra igazítva. A `<ul>` csak flex-ELEM a jobb oldali blokkban
   (a rá tett `justify-content` a saját `<li>`-jeit rendezné), ezért a BLOKK tartalmát toljuk jobbra.
   Csak a fejléc-csíkra szkópolva — a mobil offcanvas ikonjai maradnak középen. */
header section.d-lg-flex > .flex-shrink-0:last-child {
    justify-content: flex-end;
}

/* Mobil fejléc: a logó, a kereső-ikon és a hamburger EGY vonalba. A hamburger-wrapper `d-block`,
   ezért a benne lévő inline `<span>` (kereső) és az inline-flex gomb a SZÖVEG-ALAPVONALRA igazodott
   (mérve 390 px-en: logó-középvonal 38 px, kereső 43,5 px, hamburger 33 px). Flex + align-items
   megoldja, a kereső-ikon `h-100`-a pedig fix magasságot kap, mert inline szülőben összeomlott. */
@media (max-width: 991.98px) {
    .v-navigation-section-006 {
        display: flex !important;
        align-items: center;
    }
    .v-navigation-section-006 .v-hamburger-001 {
        display: inline-flex;
        align-items: center;
    }
    .v-navigation-section-006 .search-icon svg {
        height: 26px;
    }
}

/* Fő logó mérete (common_logo = v2). A sablon `mh-90px`-et ad, és a global.js `logoHide()` 100 px
   görgetés fölött `mh-60px`-re CSERÉLI az osztályt — ezért mindkét állapotot állítani kell.
   1200 px alatt kisebb, mert az egysoros fejlécben a 6 menüpont 730 px-et kér (mérve). */
header .main-logo-img.mh-90px {
    max-height: 64px;
}
header .main-logo-img.mh-60px {
    max-height: 44px;
}
@media (max-width: 1199.98px) {
    header .main-logo-img.mh-90px {
        max-height: 40px;
    }
    header .main-logo-img.mh-60px {
        max-height: 32px;
    }
}

/* Az egysoros fejléc menü-wrapperén a sablon `px-lg-5`-öt (2 × 48 px) ad — ez a hely a menünek kell. */
@media (min-width: 992px) {
    .v-navigation-section-003,
    .v-navigation-section-004 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* --- REFERENCIA-KÁRTYA: kép-zoom hover (medialib_item = v5) --- */
/* A v5 sablon a képet a `.v-item-001` HÁTTÉRKÉPEKÉNT adja, ezért a dsc `zoom-img-hover` effektje
   (ami `picture img`-et keres) nem tud rá hatni. Egy azonos háttérképű ::before réteget nagyítunk:
   a kártya mérete így nem változik (a szülő `overflow-hidden`-je vág), a felirat pedig éles marad. */
[id^="section_medialibrary"] .v-item-001,
body.page-gallery-folder .v-item-001 {
    position: relative;
}
[id^="section_medialibrary"] .v-item-001::before,
body.page-gallery-folder .v-item-001::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform .6s ease;
}
[id^="section_medialibrary"] a:hover .v-item-001::before,
body.page-gallery-folder a:hover .v-item-001::before {
    transform: scale(1.12);
}
[id^="section_medialibrary"] .v-item-002,
body.page-gallery-folder .v-item-002 {
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    [id^="section_medialibrary"] .v-item-001::before,
    body.page-gallery-folder .v-item-001::before,
    [id^="section_medialibrary"] a:hover .v-item-001::before,
    body.page-gallery-folder a:hover .v-item-001::before {
        transition: none;
        transform: none;
    }
}

/* --- RÓLUNK: az "Amiben mások vagyunk" dobozok sávra igazítása (usp-grid) ---
   A három doboz címe 1-3 sor hosszú, ezért a szöveg eltérő magasságban indult. A sort CSS-rácsra
   tesszük, a hasábok és a bennük lévő fehér dobozok pedig subgriddel öröklik a sorokat, így a cím
   és a leírás sávja mindhárom dobozban egy vonalban áll. A Bootstrap g-4 térköze paddinggal
   dolgozik, rácsban a gap veszi át a szerepét. */
@media (min-width: 992px) {
    .usp-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-left: 0;
        margin-right: 0;
    }
    .usp-grid > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }
    .usp-grid > [class*="col-"] > div {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        align-content: start;
    }
}