/* ==========================================================================
   Liszt Ferenc Zongoraterem – egyedi stílusok (a template fölé)
   ========================================================================== */

/* --- Sötét fejléc, hogy az arany logó kiemelkedjen --- */
.tp-header-area.tp-header-style-4 {
   background-color: #0a0a0a;
}
.tp-header-area.tp-header-style-4.tp-header-sticky-cloned.header-sticky {
   background-color: #0a0a0a;
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* --- Logó: reszponzív magasság (mobil → desktop) --- */
.tp-header-logo img {
   height: clamp(34px, 5.2vw, 56px);
   width: auto;
}

/* --- Menü szöveg világos/arany a sötét sávon --- */
.tp-header-style-4 .tp-main-menu-content > ul > li > a {
   color: #f3e3c0;
}
.tp-header-style-4 .tp-main-menu-content > ul > li > a:hover,
.tp-header-style-4 .tp-main-menu-content > ul > li.active > a {
   color: #e9c66b;
}

/* --- Mobil hamburger ikon világos --- */
.tp-header-style-4 .tp-header-bar .tp-menu-bar {
   color: #f3e3c0;
}

/* --- Mobilon a logó-oszlop kapjon elég helyet, a hamburger jobbra --- */
@media (max-width: 991px) {
   .tp-header-area.tp-header-style-4 {
      padding-top: 10px;
      padding-bottom: 10px;
   }
}

/* --- Elegáns talpas címsor-betű (zongoraterem hangulat) --- */
.tp-slider-title,
.tp-section-title,
h1, h2, h3, h4, h5, h6 {
   font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* --- Rólunk képek: WebGL-effekt helyett sima, megbízható megjelenítés --- */
.tp-about-4-thumb-1 .tp-hover-distort-wrapper .canvas,
.tp-about-4-thumb-2 .tp-hover-distort-wrapper .canvas,
.tp-about-4-thumb-1 .tp-hover-distort-img.back,
.tp-about-4-thumb-2 .tp-hover-distort-img.back {
   display: none;
}
.tp-about-4-thumb-1,
.tp-about-4-thumb-2 {
   width: 46%;
}
.tp-about-4-thumb-1 .tp-hover-distort-img.front,
.tp-about-4-thumb-2 .tp-hover-distort-img.front {
   opacity: 1;
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 290 / 422;
   object-fit: cover;
   border-radius: 8px;
}

/* --- Térköz a galéria és a footer között --- */
.tp-service-2-area.tp-service-style-4 {
   padding-bottom: 100px;
}

/* --- Munkáink: kétoszlopos, szabad (masonry) galéria --- */
.zs-masonry {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   max-width: 1140px;
   margin: 0 auto;
}
.zs-mcol {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.zs-mitem {
   overflow: hidden;
   border-radius: 10px;
}
.zs-mitem img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform 0.6s ease;
}
.zs-mitem:hover img {
   transform: scale(1.05);
}
/* A 3. (munka) oszlop álló képeit alacsonyabb arányra vágjuk, hogy az oszlopok egy magasak legyenek */
.zs-masonry .zs-mcol:nth-child(3) .zs-mitem img {
   aspect-ratio: 4 / 3;
   height: auto;
   object-fit: cover;
   object-position: center;
}
@media (max-width: 575px) {
   .zs-masonry {
      flex-direction: column;
   }
}

/* --- Finom, aláhúzott szövegközi link --- */
.subtle-link {
   color: inherit;
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
   text-decoration-color: #6f6647;
   transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.subtle-link:hover {
   color: #6f6647;
   text-decoration-color: #6f6647;
}

/* --- Hero alcím: H2 a SEO-súlyért, de a bekezdés kinézetével --- */
.tp-hero-lead {
   font: inherit;
   margin-top: 0;
}

/* --- Menü jobbra igazítása a fejlécben --- */
.tp-header-style-4 .tp-header-menu {
   text-align: right;
}
.tp-header-style-4 .tp-main-menu-content > ul {
   justify-content: flex-end;
}

/* --- Hero képváltó: egységes négyzetes arány, álló kép szép kitöltése --- */
.tp-slider-2-thumb {
   aspect-ratio: 520 / 512;
   overflow: hidden;
   border-radius: 10px;
}
.tp-slider-2-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 28%;
}

/* --- Offcanvas tömörítése + ikon utáni rés a nyitvatartásnál --- */
.tpoffcanvas__logo { margin-bottom: 28px !important; }
/* Kisebb offcanvas logó + arany szekciócímek (Kapcsolat / Nyitvatartás) */
.tpoffcanvas__logo img { max-height: 68px !important; width: auto !important; height: auto !important; }
.tpoffcanvas__contact-title h5 { color: #D8D2AC !important; text-transform: none !important; letter-spacing: 0.3px !important; font-weight: 500 !important; }
.tpoffcanvas__contact-info { margin-bottom: 22px !important; }
.tpoffcanvas__contact-info ul li { margin-bottom: 10px !important; }
.tpoffcanvas__contact-info ul li span { margin-left: 10px; }

/* --- Facebook ikon: halvány szürke karika, fekete „f" --- */
.tpoffcanvas__social .social-icon a {
   background-color: #ececec !important;
   color: #000 !important;
}
.tpoffcanvas__social .social-icon a:hover {
   background-color: #ffffff !important;
   color: #000 !important;
}

/* --- Kapcsolat csak a mobil offcanvas menüben (a desktop sávból elrejtve) --- */
.tp-header-area .tp-main-menu-content > ul > li.menu-contact { display: inline-block; }
.tp-main-menu-mobile .menu-contact { display: block; }

/* Aside / megjegyzés stílus (egyelőre dőlt) */
.zs-megjegyzes { font-style: italic; }

/* Est. 1993 pecsét a footerben */
.footer-est-badge { width: 88px; height: 88px; display: inline-block; margin-bottom: 16px; }

/* Est. 1993 pecsét a FŐOLDAL fejlécében — pontosan a breadcrumb pecsét mérete */
.tp-header-style-4 .est-header-badge { width: 112px !important; height: 112px !important; }
@media (max-width: 767px) { .tp-header-style-4 .est-header-badge { width: 78px !important; height: 78px !important; } }
/* 2px térköz, hogy a kör ne érjen hozzá a sáv tetejéhez/aljához */
.tp-header-style-4 .tp-header-logo { padding-top: 4px !important; padding-bottom: 4px !important; }

/* A H1 címben a „Zongoraszalon" szó kicsivel lazább betűközzel */
.cim-zongoraszalon { letter-spacing: 2px; }

/* Cím- és alcím-osztályok minden oldalon — Playfair Display, legvékonyabb (400) vágat */
.tp-slider-title,
.tp-section-title,
.tp-project-title,
.tp-project-4-title { font-family: "Playfair Display", Georgia, serif !important; font-weight: 400 !important; }

/* Fő CTA gombok egy fokkal nagyobb felirattal + ne nagybetűsítse a szavakat (pl. „Írjon nekünk") */
.tp-btn-black { font-size: 14px !important; text-transform: none !important; }


/* --- Footer alsó sáv: jobb oldali jogi linkek (ÁSZF / Adatkezelés / Facebook) --- */
/* Méret/szín pontosan mint a copyright szöveg (nem fehér, kisebb) */
.zs-footer-legal { display:inline-flex; gap:34px; list-style:none; margin:0; padding:0; }
.zs-footer-legal a { text-transform:uppercase; letter-spacing:1.2px; font-size:12px !important; font-weight:500; color:rgba(255,255,255,0.6) !important; transition:color .2s ease; }
.zs-footer-legal a:hover { color:#D8D2AC !important; }
@media (max-width:767px) { .zs-footer-legal { gap:22px; margin-top:14px; } }

/* === Teljes szélességű (mega) legördülő a „Szolgáltatások" alatt === */
/* Aloldali fejléc legyen pozícionált ős (a homepage fejléc már absolute) */
.tp-header-2-area { position: relative; }
/* A parent li statikus, hogy a panel a fejléc teljes szélességéhez igazodjon */
.tp-header-menu > nav > ul > li.has-dropdown-2,
.tp-header-2-menu > nav > ul > li.has-dropdown-2 { position: static; }
/* A fehér panel teljes szélességű, a fejléc aljához simul (nincs transform-rés),
   az elemek FÜGGŐLEGES listában, a parent menüpont alá igazítva (a bal paddinget JS állítja).
   A desktop legördülő csak ≥1200px-en látszik. */
.tp-header-menu > nav > ul > li.has-dropdown-2 > .submenu,
.tp-header-2-menu > nav > ul > li.has-dropdown-2 > .submenu {
   left: 0; right: 0; width: 100%;
   display: block;
   padding-top: 16px; padding-bottom: 18px;
   padding-left: 30px; padding-right: 30px;   /* a JS a parent bal széléhez igazítja */
   transform: none !important;                 /* ne csússzon le → ne látszódjon a háttér */
}
.tp-header-menu > nav > ul > li.has-dropdown-2 > .submenu > li,
.tp-header-2-menu > nav > ul > li.has-dropdown-2 > .submenu > li { display: block; }
.tp-header-menu > nav > ul > li.has-dropdown-2 > .submenu > li:not(:last-child),
.tp-header-2-menu > nav > ul > li.has-dropdown-2 > .submenu > li:not(:last-child) { margin-bottom: 4px; }

/* --- Menü legördülő: ne nagybetűsítse a második szót (HTML-ben helyes a kis-/nagybetű) --- */
.tp-submenu li a,
.tp-main-menu-mobile .tp-submenu li a { text-transform: none !important; }

/* --- Footer oszlopcímek kisebbre --- */
.tp-footer-area .tp-footer-title { font-size:18px !important; margin-bottom:24px !important; }

/* --- Copyright szöveg: ugyanakkora, mint a jogi linkek (12px) --- */
.tp-copyright-style-2 .tp-copyright-left p { font-size:12px !important; }

/* --- Footer oszlopok egyenletes elosztása (a sablon aszimmetrikus paddingjeit kioltjuk) --- */
.tp-footer-area [class*="footer-cols-4-"] { padding-left:0 !important; }

/* --- Footer „Elérhetőség": a címke ne csússzon rá az értékre (a sablon abszolút, 80/70/50px-es spanját feloldjuk) --- */
.tp-footer-area .tp-footer-contact ul li,
.tp-footer-style-4 .tp-footer-widge-style-2 .tp-footer-contact ul li { padding-left:0 !important; }
.tp-footer-area .tp-footer-contact ul li span,
.tp-footer-style-4 .tp-footer-widge-style-2 .tp-footer-contact ul li span { position:static !important; display:inline-block; margin-right:6px; }

/* --- Footer „Nyitvatartás" alatti Térkép link --- */
.zs-footer-map { display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:rgba(255,255,255,0.7); font-size:15px; letter-spacing:.4px; transition:color .2s ease; }
.zs-footer-map:hover { color:#D8D2AC; }
.zs-footer-map i { font-size:15px; }

/* === Hover-re EGY teljes szélességű panel, oszlopokban minden menü almenüi (Shop + Szolgáltatások) === */
/* A fejléc réteg a breadcrumb Est.1993 pecsét (z-index:3) FÖLÉ, hogy a panel elfedje
   (a pecsét a helyén marad, csak hoverkor takarja a panel) */
.tp-header-tranparent { z-index: 6; }
/* A per-menü hover panel elnémítva (helyette a közös oszlopos panel jelenik meg) */
.tp-header-menu > nav > ul > li.has-dropdown-2:hover > .submenu,
.tp-header-2-menu > nav > ul > li.has-dropdown-2:hover > .submenu { opacity: 0 !important; visibility: hidden !important; }

.zs-mega-all {
   position: absolute; top: 100%; left: 0; right: 0; width: 100%;
   background: #fff; border-top: 3px solid var(--tp-theme-1);
   box-shadow: rgba(149,157,165,0.2) 0px 8px 24px;
   opacity: 0; visibility: hidden; transition: opacity .25s ease;
   z-index: 1001; padding: 34px 0 40px;
}
.zs-mega-all.open { opacity: 1; visibility: visible; }
.zs-mega-row { display: flex; gap: 90px; flex-wrap: wrap; justify-content: flex-start; padding-right: 30px; }
.zs-mega-col { min-width: 190px; }
.zs-mega-col-title {
   font-family: "Playfair Display", Georgia, serif; font-size: 14px;
   letter-spacing: 1.5px; text-transform: uppercase; color: #A6A182;
   padding-bottom: 12px; margin-bottom: 16px;
   border-bottom: 1px solid rgba(166,161,130,.4);
}
.zs-mega-all .submenu {
   position: static !important; opacity: 1 !important; visibility: visible !important;
   width: auto !important; min-width: 0 !important; display: block !important;
   box-shadow: none !important; border-top: none !important; padding: 0 !important;
   transform: none !important; background: transparent !important;
   left: auto !important; right: auto !important; clip-path: none !important;
}
.zs-mega-all .submenu > li { display: block !important; margin-bottom: 10px !important; }
.zs-mega-all .submenu > li:last-child { margin-bottom: 0 !important; }
.zs-mega-all .submenu > li > a {
   color: #222; font-size: 15px; position: relative; display: inline-block;
}
/* Hover „futó vonal" effekt (mint az eredeti legördülőben) */
.zs-mega-all .submenu > li > a::after {
   content: ""; position: absolute; bottom: -2px; right: 0; left: auto;
   height: 1px; width: 0; background-color: var(--tp-theme-1); transition: width .5s ease;
}
.zs-mega-all .submenu > li > a:hover::after { width: 100%; right: auto; left: 0; }

/* === FŐOLDAL – MOBIL finomítások === */
/* Hero cím nagyobb telefonon */
@media (max-width: 575px) {
   .tp-slider-2-content .tp-slider-title { font-size: 44px !important; }
}
/* MOBIL: a fejléc (hero) váltakozó képet + keretet kivesszük, és a statisztikák után
   csak kis térköz maradjon, majd jöjjenek az alatta lévő (about) képek. */
@media (max-width: 767px) {
   .tp-slider-2-wrapper { display: none !important; }
   .tp-slider-2-height { padding-top: 155px !important; padding-bottom: 10px !important; }
   .tp-about-4-area { padding-top: 24px !important; }
   /* Törzsszöveg + felsorolás picivel nagyobb mobilon (jobb olvashatóság) */
   .tp-about-4-text p { font-size: 16px !important; }
   .tp-about-4-list ul li { font-size: 16px !important; }
   /* A „Segíthetünk?" gomb kicsit lentebb */
   .tp-about-4-right .tp-btn-black { margin-top: 18px; }
}

/* === MOBIL OFFCANVAS (hamburger) MENÜ – egységes betűméret minden oldalon === */
@media (max-width: 767px) {
   .tp-main-menu-mobile ul li a,
   .tp-main-menu-mobile ul li a span,
   .tp-main-menu-mobile ul li a .menu-text { font-size: 16px !important; }
}

/* === MOBIL: aloldali breadcrumb-banner magassága ===
   A korábbi csökkentés (150px) miatt a jobb alsó Est.1993 pecsét belelógott a
   címbe. Visszaállítjuk az eredeti, „zongorajavítás-szerű" magasságra, így a
   pecsétnek elég hely jut és minden aloldal egységes. */
@media (max-width: 767px) {
   .breadcrumb__height { height: 300px !important; }
}

/* === MOBIL menü accordion-nyíl: függőlegesen középre + fehér (jól látszódjon) === */
.tp-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn,
.tp-main-menu-mobile ul li.has-dropdown-2 > a .dropdown-toggle-btn {
   top: 50% !important;
   transform: translateY(-50%) !important;
   color: #ffffff !important;
   border-color: rgba(255,255,255,0.30) !important;
}
.tp-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn i,
.tp-main-menu-mobile ul li.has-dropdown-2 > a .dropdown-toggle-btn i {
   color: #ffffff !important;
}

/* === MOBIL: szolgáltatásaink tartalmi szekció feljebb (a szolgáltatás-aloldalakkal egyező ~80px térköz) ===
   tp-project-4-area kizárólag a szolgáltatásaink oldalon van, így más oldalt nem érint. A fejléc/breadcrumb nem változik. */
@media (max-width: 767px) {
   .tp-project-4-area { padding-top: 80px !important; }
}

/* === MOBIL: footer oszlopok sorrendje (Nyitvatartás, Elérhetőség, Szolgáltatások, További oldalaink) ===
   Csak mobilon (≤767px); desktopon a DOM-sorrend marad. */
@media (max-width: 767px) {
   .tp-footer-area > .container > .row > div:nth-child(1) { order: 4; } /* További oldalaink */
   .tp-footer-area > .container > .row > div:nth-child(2) { order: 3; } /* Szolgáltatások */
   .tp-footer-area > .container > .row > div:nth-child(3) { order: 1; } /* Nyitvatartás */
   .tp-footer-area > .container > .row > div:nth-child(4) { order: 2; } /* Elérhetőség */
}

/* === MOBIL: aloldali TÖRZSSZÖVEG 16px (mint a főoldalon) – címekhez (h4/h6) nem nyúlunk ===
   A teljes tartalmi terület MINDEN bekezdése (tp-sv-details-text/-left/-left-box p stb.) + a felsorolások. */
@media (max-width: 767px) {
   .tp-sv-details-area p { font-size: 16px !important; }
   .zs-lista li { font-size: 16px !important; }
}

/* === MOBIL: kétoszlopos rész címe (Akusztikusan/Digitálisan…) akkora, mint az
   „Applikáció/Keverés" (20px), és a pipa-ikon is nagyobb – minden aloldalon === */
@media (max-width: 767px) {
   .tp-sv-details-left h6 { font-size: 20px !important; }
   .tp-sv-details-left h6 i { font-size: 20px !important; }
}

/* === Kapcsolódó oldalak ("További szolgáltatásaink") – a videók/galéria UTÁN, középre === */
.zs-related { background:#F7F5F0; padding: 2.6rem 0 3rem; text-align:center; }
.zs-related-title { font-family:"Playfair Display",Georgia,serif; font-weight:400; font-size:clamp(1.3rem,2vw,1.7rem); color:#1A1A1A; margin-bottom:1.3rem; }
.zs-related-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 30px; }
.zs-related-list a { color:#1A1A1A; font-size:16px; transition:color .2s ease; }
.zs-related-list a:hover { color:#A6A182; }

/* === MOBIL: kevesebb üres rész az „Írjon nekünk" gomb és a videó/galéria elválasztó között ===
   (a tartalmi szekció pb-150 nagy; felhúzzuk a média-szekciót) */
@media (max-width: 767px) {
   .video-section, .gallery-section { margin-top: -125px !important; padding-top: 1.2rem !important; }
}

/* === Galéria lapozó gombok láthatóbbá (fehér háttéren ne tűnjenek el) === */
.gallery-pager .pgbtn { background: #f1ecdf !important; border: 1px solid #cdc4a8 !important; color: #1A1A1A !important; border-radius: 4px; }
.gallery-pager .pgbtn:hover:not(:disabled) { background: #ffffff !important; border-color: #A6A182 !important; }
.gallery-pager .pgbtn.active { background: #A6A182 !important; border-color: #A6A182 !important; color: #ffffff !important; }
.gallery-pager .pgbtn:disabled { opacity: 0.4 !important; }

/* === MOBIL: galéria lapozó = apró pontok (a fő lapozás a swipe); Előző/Következő gombok el === */
@media (max-width: 767px) {
   .gallery-pager .pgbtn.pgnav { display: none !important; }
   .gallery-pager { gap: 9px !important; }
   .gallery-pager .pgbtn { width: 9px !important; height: 9px !important; padding: 0 !important; min-width: 0 !important; font-size: 0 !important; border-radius: 50% !important; border: none !important; background: #d6cfbb !important; }
   .gallery-pager .pgbtn.active { background: #A6A182 !important; }
}

/* === MOBIL galéria: natív görgethető swipe-sáv (a böngésző saját vízszintes görgetése) === */
@media (max-width: 767px) {
   .gallery-grid.gallery-strip {
      display: flex !important;
      grid-template-columns: none !important;
      flex-wrap: nowrap !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 10px;
      padding-bottom: 8px;
      scrollbar-width: none;
   }
   .gallery-grid.gallery-strip::-webkit-scrollbar { display: none; }
   .gallery-grid.gallery-strip .gallery-item {
      flex: 0 0 82% !important;
      scroll-snap-align: center;
      aspect-ratio: 4 / 3;
      border-radius: 6px;
      overflow: hidden;
   }
   .gallery-grid.gallery-strip .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
   /* a sáv mellett a lapozó pontok feleslegesek */
   .gallery-pager:empty { display: none; }
}

/* Galéria képek: ne legyen natív kép-húzás/long-press menü (zavarná a swipe-ot) */
.gallery-grid img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* === MOBIL: bérbeadás kategória-képek kisebbek + kis felső térköz (ne tapadjanak a szöveghez) === */
@media (max-width: 767px) {
   .zs-kat-thumb { margin-top: 16px; }
   .zs-kat-thumb img { max-width: 55%; }
}

/* === ASZTALI: bérbeadás kategória-képek kicsivel kisebbek, jobbra igazítva === */
@media (min-width: 768px) {
   .zs-kat-thumb img { max-width: 82%; margin-left: auto; display: block; }
}