/* ==================================================
   Publikus /programok lista + egyedi program oldal
   Reszponzív: mobil → tablet → desktop
================================================== */

/* ==================================================
   /programok = MEGNYITOTT "submenu-text expanded" PANEL.

   A teljes oldal úgy néz ki és úgy viselkedik, mintha a főoldalon megnyitottunk
   volna egy expanded menüpontot. A body megkapja az .sg-fullpanel osztályt
   (PHP body_class, lásd cpt-eloadas.php), és erre épül minden alábbi szabály.

   Réteg-sorrend (PONTOSAN mint a főoldali megnyitott panelnél):
     1) VIDEÓ (legalul) ............ .sg-bg-video   (a .sg-bg-layer-en belül)
     2) GALÉRIA-ELFEDŐ (opálos) .... .sg-bg-cover   (galeriahatter, elfedi a videót)
     3) TARTALOM-DOBOZ ............. .sg-programok / .sg-program (lebegő, görgethető)
     4) KATLAN PNG-KERET (legfelül)  .sg-bg-frame ::before / ::after
        — betöltéskor animáltan szétnyílik (body.sg-open), mint egy menü nyitásakor.
   Csak a /programok oldalakon hat (a programok.css csak ott töltődik be). */

/* 1) + 2) Háttér-réteg: legalul a videó, fölötte az opálos galéria-elfedő. */
.sg-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;             /* a tartalom mögött (a body háttere fölött) */
    overflow: hidden;
    pointer-events: none;
}
.sg-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
/* Opálos galeriahatter — PONTOSAN mint a főoldali .submenu-background nyitott
   menünél: elfedi a videót, és erre kerül a tartalom. A /programok oldalon
   MINDIG látszik (az oldal eleve "megnyitott panel" állapotban van). */
.sg-bg-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: url('../images/galeriahatter.png') center / cover no-repeat;
}

/* 4) KATLAN PNG-KERET — a legfelső réteg (mint a főoldali .hero-overlay). */
.sg-bg-frame {
    position: fixed;
    inset: 0;
    z-index: 7;
    pointer-events: none;
}
.sg-bg-frame::before {   /* FELSŐ kép */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: url('../images/katlan_fejlec.png') center top / 100% auto no-repeat;
    transition: transform .6s ease;
}
.sg-bg-frame::after {    /* ALSÓ kép */
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: url('../images/katlan_lablec.png') center bottom / 100% auto no-repeat;
    transition: transform .6s ease;
}
/* Szétnyílás — PONTOSAN a főoldali 247px és .6s ease. A png betöltéskor zárva
   indul, majd a JS hozzáadja a body.sg-open osztályt (egy frame-mel később),
   így a szétnyílás ANIMÁLTAN játszódik le, mint egy expanded menü nyitásakor.
   KIKAPCSOLVA 2026-05-29: a keretek nem mozdulnak el. A kód szándékosan
   benn marad (kommentben) — visszakapcsoláshoz csak a komment-jelet vedd le. */
/*
@media (min-width: 1025px) {
    body.sg-fullpanel.sg-open .sg-bg-frame::before {
        transform: translateY(-247px);
    }
    body.sg-fullpanel.sg-open .sg-bg-frame::after {
        transform: translateY(247px);
    }
}
*/

/* 3) TARTALOM-DOBOZ — a főoldali body.expanded-mode .submenu-text geometriája:
   középre igazított, max 1200px széles, 60vh magas, belül görgethető. */
.sg-programok,
.sg-program {
    width: 92vw;
    max-width: 1200px;
    height: 100vh;
    height: 100svh;
    /* Függőlegesen középre: 20vh fent + 60vh doboz + 20vh lent = 100vh, így a
       tartalom lejjebb kerül és nem marad nagy kihasználatlan sáv az oldal alján. */
    margin: 10vh auto;
    padding: 10vw 10px 22vw;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    position: relative;
    z-index: 1;              /* a galéria-elfedő (.sg-bg-layer, z-index:-1) fölött */
    /* Firefox scrollbar (a .sorszam-info-box stílusával egyezően) */
    scrollbar-width: thin;
    scrollbar-color: #3f4a36 transparent;
}

/* Görgetősáv — pontosan mint a .sorszam-info-box-nál (WebKit/Chrome/Safari) */
.sg-programok::-webkit-scrollbar,
.sg-program::-webkit-scrollbar {
    width: 8px;
}
.sg-programok::-webkit-scrollbar-track,
.sg-program::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}
.sg-programok::-webkit-scrollbar-thumb,
.sg-program::-webkit-scrollbar-thumb {
    background: #3f4a36;
    border-radius: 10px;
}
.sg-programok::-webkit-scrollbar-thumb:hover,
.sg-program::-webkit-scrollbar-thumb:hover {
    background: #2e3b2f;
}

/* ==================================================
   PANEL-ÁLLAPOT (body.sg-fullpanel) — fejléc/lábléc elrejtve, görgetés zárolva,
   bezáró (×) gomb látszik. PONTOSAN mint egy megnyitott expanded menüpontnál.
================================================== */

/* Háttér-görgetés zárolása — a tartalom a dobozon belül görög. */
body.sg-fullpanel { overflow: hidden; }
html:has(body.sg-fullpanel) { overflow: hidden; }

/* Fejléc: desktopon eltüntetve (mint body.expanded-mode), minden méreten nem kattintható. */
@media (min-width: 1025px) {
    body.sg-fullpanel .site-header {
        opacity: 0;
        transition: opacity .3s ease;
    }
}
body.sg-fullpanel .site-header,
body.sg-fullpanel .site-header * {
    pointer-events: none !important;
}

/* Mobilon (≤1024px) a fejléc látszik a /programok oldalon is, és ő a navigáció:
   a logó (főoldalra) és a "Keresel valamit?" gomb kattintható kell maradjon.
   Specificitás (0,3,1) > a fenti tiltó (0,2,2) !important. Desktop érintetlen. */
@media (max-width: 1024px) {
    body.sg-fullpanel .site-header .hero-title-box,
    body.sg-fullpanel .site-header .hero-title-box *,
    body.sg-fullpanel .site-header .hero-title-link,
    body.sg-fullpanel .site-header .mobile-search-toggle,
    body.sg-fullpanel .site-header .mobile-search-toggle * {
        pointer-events: auto !important;
    }
}

/* Lábléc (szponzorok) elrejtve — a panel-nézetben nincs lábléc. */
body.sg-fullpanel .footer-sponsors {
    display: none !important;
}

/* Bezáró (×) + vissza gomb megjelenítése (mint body.menu-open / expanded-mode). */
body.sg-fullpanel .submenu-nav-btns {
    display: flex;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 1024px) {
    body.sg-fullpanel .submenu-nav-btns {
        top: 22vw !important;
        right: 20px !important;
        transform: none !important;
    }
}

/* ---- Lista fejléc ---- */
.sg-programok__header h1 {
    margin: 0 0 16px;
    font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
    line-height: 1.15;
}
.sg-programok__year-label {
    opacity: .7;
    font-weight: 400;
    font-size: .8em;
}

/* ---- Szűrősor ---- */
.sg-programok__filters {
    display: grid;
    gap: 10px 14px;
    grid-template-columns: 1fr;
    margin: 16px 0 24px;
    padding: 14px;
    background: rgba(0, 0, 0, .03);
    border-radius: 10px;
}
@media (min-width: 640px) {
    .sg-programok__filters {
        grid-template-columns: 1fr 1fr;
    }
    .sg-programok__search {
        grid-column: 1 / -1;
    }
}
@media (min-width: 960px) {
    .sg-programok__filters {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
        align-items: end;
    }
    .sg-programok__search {
        grid-column: auto;
    }
}
.sg-programok__filters label {
    display: block;
    font-size: 12px;
    opacity: .8;
    margin-bottom: 4px;
}
.sg-programok__filters input,
.sg-programok__filters select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}
.sg-programok__reset {
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, .15);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.sg-programok__reset:hover {
    background: rgba(0, 0, 0, .04);
}

.sg-programok__count {
    margin: 0 0 12px;
    opacity: .7;
    font-size: 14px;
}

.sg-programok__empty,
.sg-programok__empty-static {
    text-align: center;
    padding: 40px 12px;
    opacity: .7;
}

/* ---- Nézet-váltó tabok ---- */
.sg-programok__views {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 16px;
}
.sg-view-tab {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .15);
    background: #fff;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: background .12s ease, border-color .12s ease;
}
.sg-view-tab:hover {
    background: rgba(0, 0, 0, .04);
}
.sg-view-tab.is-active {
    background: #3f4a36;
    border-color: #3f4a36;
    color: #fff;
}

/* ---- Csoportos nézet (műfaj / falu) ---- */
.sg-programok__groups {
    display: grid;
    gap: 32px;
}
.sg-group[hidden] { display: none; }
.sg-group__title {
    margin: 0 0 14px;
    font-size: 1.35rem;
    border-bottom: 2px solid rgba(0, 0, 0, .1);
    padding-bottom: 6px;
}
.sg-group__count {
    opacity: .55;
    font-weight: 400;
    font-size: .8em;
}

/* ---- Táblázatos nézet ---- */
.sg-programok__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sg-programok__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.sg-programok__table th,
.sg-programok__table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    vertical-align: top;
}
.sg-programok__table th {
    font-weight: 700;
    background: rgba(0, 0, 0, .03);
    position: sticky;
    top: 0;
}
.sg-trow[hidden] { display: none; }
.sg-trow__title a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.sg-trow__title a:hover { text-decoration: underline; }
.sg-trow__change {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #fff8db;
    color: #6b4f00;
}

/* ---- Változás-badge a kártyán ---- */
.sg-card__change-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #fff8db;
    color: #6b4f00;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.sg-card__image { position: relative; }

/* ---- Kártyalista ---- */
.sg-programok__list {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 560px) {
    .sg-programok__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
    .sg-programok__list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .sg-programok__list { grid-template-columns: repeat(4, 1fr); }
}

.sg-card {
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sg-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
.sg-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.sg-card__image {
    aspect-ratio: 16 / 10;
    background: rgba(0, 0, 0, .06);
    overflow: hidden;
}
.sg-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sg-card__image--placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.06) 75%);
}
.sg-card__body {
    padding: 12px 14px 16px;
}
.sg-card__title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    line-height: 1.25;
}
.sg-card__creators {
    margin: 0 0 4px;
    font-size: 14px;
    opacity: .85;
}
.sg-card__genres {
    margin: 0 0 4px;
    font-size: 13px;
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.sg-card__where {
    margin: 6px 0 0;
    font-size: 13px;
    opacity: .75;
}

/* ---- Egyedi program oldal ---- */
.sg-program__back {
    margin: 0 0 16px;
}
.sg-program__back a {
    text-decoration: none;
    opacity: .75;
}
.sg-program__back a:hover { opacity: 1; }

.sg-program__image {
    margin: 0 0 20px;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, .06);
}
.sg-program__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sg-program__header h1 {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 3vw + 1rem, 2.8rem);
    line-height: 1.1;
}
.sg-program__year {
    margin: 0 0 12px;
    opacity: .6;
}
.sg-program__creators,
.sg-program__genres {
    margin: 0 0 4px;
}
.sg-program__label {
    opacity: .6;
    margin-right: 6px;
}
.sg-program__description {
    margin: 24px 0;
    line-height: 1.6;
    font-size: 16px;
}

/* ---- Alkalmak ---- */
.sg-program__instances h2 {
    margin: 32px 0 12px;
    font-size: 1.25rem;
}
.sg-instances {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.sg-instances__item {
    display: grid;
    gap: 4px 12px;
    grid-template-columns: 1fr;
    padding: 12px 14px;
    background: rgba(0, 0, 0, .03);
    border-radius: 8px;
    border-left: 4px solid rgba(0, 0, 0, .15);
}
@media (min-width: 720px) {
    .sg-instances__item {
        grid-template-columns: 220px 1fr auto;
        align-items: center;
    }
}
.sg-instances__when {
    font-weight: 600;
}
.sg-instances__sep { opacity: .5; margin: 0 4px; }
.sg-instances__where { opacity: .9; }
.sg-instances__flags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.sg-flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.sg-flag--canceled { background: #fdecea; color: #7a0b0b; }
.sg-flag--changed  { background: #fff8db; color: #6b4f00; }
.sg-flag--ticketed { background: #e7f7ec; color: #145a1f; }

/* Sorszámos magyarázat-link a sorszámos tag alatt
   ("Mit jelent, hogy sorszámos a program?" → /?menu=sorszamok, új lapon) */
.sg-ticketed-help {
    margin-top: .3rem;
    font-size: .9em;
    line-height: 1.35;
}
.sg-ticketed-help__link {
    color: #3f4a36;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.sg-ticketed-help__link:hover,
.sg-ticketed-help__link:focus-visible {
    color: #2e3b2f;
    text-decoration-thickness: 2px;
}
.sg-ticketed-help__icon {
    margin-left: .25em;
    font-size: .95em;
    text-decoration: none;
    display: inline-block;
}

.sg-instances__item.is-canceled .sg-instances__when,
.sg-instances__item.is-canceled .sg-instances__where {
    text-decoration: line-through;
    opacity: .55;
}

/* =========================================================
   📱 FEKVŐ MOBIL — GÖRGETHETŐ EGÉSZ /programok OLDAL
   Ugyanaz a megoldás, mint a főoldali menünél: a fixed katlan-keret
   ([felső][alsó] 50%+50%, hézag nélkül) fedte a tartalmat, ezért fekvő
   telefonon (max-width 1024 + landscape + max-height 600) feloldjuk a
   görgetés-zárat, elrejtjük a fixed keretet, és a tartalom-doboz kap saját,
   FOLYÁSBAN lévő felső/alsó keretet → [felső kép][tartalom][alsó kép].
   A keretek teljes méretben (natív arány), semmi levágás. Desktop érintetlen.
   ========================================================= */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {

  /* 1) Görgetés feloldása — az egész oldal görögjön hosszú lapként */
  body.sg-fullpanel,
  html:has(body.sg-fullpanel) {
    overflow: auto !important;
  }

  /* 2) A fixed katlan-keretet elrejtjük (ez fedte a tartalmat) */
  body.sg-fullpanel .sg-bg-frame {
    display: none !important;
  }

  /* 3) A tartalom-doboz természetes magasságú és görgethető (nem 75vh-s belső görgetés),
        és saját, FOLYÁSBAN lévő felső/alsó keretet kap. */
  .sg-programok,
  .sg-program {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px 24px !important;
  }
  /* Felső keretkép — a tartalom mindig EZUTÁN kezdődik (natív arány: 1920×486).
     A negatív oldalmargó + calc szélesség kivezeti a keretet a doboz 12px paddingjából,
     így a kép a KÉPERNYŐ SZÉLÉIG ér (full-bleed), miközben a tartalom inset marad. */
  .sg-programok::before,
  .sg-program::before {
    content: "";
    display: block;
    width: calc(100% + 24px);
    margin: 0 -12px 12px;
    aspect-ratio: 1920 / 486;
    background: url('../images/katlanhaterfelso.png') center top / 100% auto no-repeat;
  }
  /* Alsó keretkép — a tartalmat EZ zárja, közvetlenül utána (natív arány: 1920×402) */
  .sg-programok::after,
  .sg-program::after {
    content: "";
    display: block;
    width: calc(100% + 24px);
    margin: 16px -12px 0;
    aspect-ratio: 1920 / 402;
    background: url('../images/katlanhateralso.png') center bottom / 100% auto no-repeat;
  }

  /* Bezáró (×) gomb a jobb felső sarokba */
  body.sg-fullpanel .submenu-nav-btns {
    top: 8px !important;
    right: 12px !important;
    transform: none !important;
  }

}

/* MOBIL ÁLLÓ NÉZET — külön háttérképek kizárólag portrait mobilon a fixed
   katlan-kereten (.sg-bg-frame). Minden más (méret, pozíció, ismétlés,
   szétnyílás-animáció, layout) változatlan marad; csak a background-image
   URL-t cseréljük le a mob-verziókra.

   Plusz: a tartalom-doboz álló mobilon kicsit lejjebb kezdődjön — felső
   margin 10vh helyett 20vh. A horizontal auto és a 10vh alsó margin
   érintetlen (margin-top csak a top-ot írja felül). */
/* =========================================================
   📱 MOBIL + TABLET PORTRÉ — keret-kép csere + scroll-padding
   A *mob.png képek (51.4% top / 40.8% bottom h/w arány) takarják a
   viewport tetejét/alját. A tartalom (z-index:1) görgéskor mögé csúszik
   a fixed kereten (z-index:7), de scroll=0 / max esetén a kép-magasságú
   padding biztosítja, hogy az első/utolsó sor teljesen olvasható legyen.

   FONTOS: box-sizing: border-box. Content-box esetén a height:100vh +
   padding > 100vh → az elem túlnyúlik a viewporton, a padding-bottom a
   viewport ALATT → sosem látszik. Border-box-szal az elem PONTOSAN 100vh,
   mindkét padding a viewporton belül van.
   ========================================================= */
@media (max-width: 1024px) and (orientation: portrait) {
  .sg-bg-frame::before {
    background-image: url('../images/katlanhaterfelsomob.png');
  }
  .sg-bg-frame::after {
    background-image: url('../images/katlanhateralsomob.png');
  }
  .sg-programok,
  .sg-program {
    box-sizing: border-box !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 auto !important;
    padding: 54vw 10px 43vw !important;
  }
}

/* =========================================================
   📱 FEKVŐ TABLET (≈iPad mini 1024×768)
   - Alsó keret-kép: katlan_lablec.png (a fekvő 16:9-hez méretezett,
     laposabb verzió, 20.9% h/w aránnyal).
   - Felső keret marad a desktop katlanhaterfelso.png (24.3% h/w).
   - Scroll-padding: 26vw top / 22vw bottom = teljes kép-magasság + buffer.
     768px magasságon ~310px látható tartalom-területet hagy.
   - min-height:601 kizárja a fekvő telefont (utóbbi a max-height:600-as
     blokkból kap teljes-oldal-görgetést).
   ========================================================= */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1024px) and (min-height: 601px) {
  .sg-bg-frame::after {
    background-image: url('../images/katlan_lablec.png') !important;
  }
  .sg-programok,
  .sg-program {
    box-sizing: border-box !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 auto !important;
    padding: 26vw 10px 22vw !important;
  }
}