/*
 * Sziszi – 2026-10-07 (kérésre, a jóváhagyott design szerint)
 * 1) Galéria, Keresés, Kapcsolat: rendezett, reszponzív elrendezés (sz-* osztályok, minden szélességen).
 * 2) Évadok, Előadás, Alkotók, Alkotó: asztalon változatlan, csak mobilon (< 768 px) igazítás – a régi elemek,
 *    színek, szövegek és sorrend maradnak, csak a kilógó / szétcsúszó részek javulnak.
 * A <body> osztályát App\Sziszi::bodyClass() adja (szb-plays, szb-play, szb-artists, szb-artist, szb-gallery…).
 */

/* ---------------------------------------------------------------- közös sz-* elemek */
.sz-gal, .sz-search-page, .sz-contact-page { font-size: 16px; line-height: 1.55; padding-bottom: 24px; }
.sz-pt { margin: 20px 0 24px; font-size: 36px; font-weight: 600; color: #111; text-align: center; line-height: 1.15; }
.sz-pt.left { text-align: left; }
.sz-muted { color: #6b6b6b; }
.sz-seg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; justify-content: safe center; margin-bottom: 20px; }
.sz-seg::-webkit-scrollbar { display: none; }
.sz-chip { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: 1px solid #d5d5d5; border-radius: 999px; background: #fff; color: #333;
  font-size: 15px; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }
.sz-chip:hover, .sz-chip:focus { color: #8b0000; border-color: #8b0000; text-decoration: none; }
.sz-chip.on, .sz-chip.on:hover { background: #8b0000; border-color: #8b0000; color: #fff; font-weight: 600; }
.sz-chip.sm { min-height: 36px; min-width: 36px; padding: 0 12px; justify-content: center; font-size: 14px; }
.sz-chip.dark.on, .sz-chip.dark.on:hover { background: #222; border-color: #222; }

/* ---------------------------------------------------------------- galéria */
.sz-gplay { padding: 28px 0; border-top: 1px solid #e5e5e5; }
.sz-gplay h2 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; }
.sz-gplay h2 a { color: #111; }
.sz-gplay h2 a:hover { color: #8b0000; text-decoration: none; }
.sz-gmeta { color: #6b6b6b; font-size: 15px; margin: 2px 0 14px; }
.sz-gthumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sz-gthumbs a { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #eee; }
.sz-gthumbs a[hidden] { display: none; }
.sz-gthumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sz-gthumbs a:hover img { transform: scale(1.05); }
.sz-gthumbs .sz-more { display: flex; align-items: center; justify-content: center; background: #222; color: #fff; font-weight: 600; font-size: 17px; }
.sz-gthumbs .sz-more:hover { background: #8b0000; color: #fff; text-decoration: none; }
.sz-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 24px 0 0; border-top: 1px solid #e5e5e5; }
.sz-pager .sz-muted { margin: 0 6px; }

/* ---------------------------------------------------------------- keresés */
.sz-sbox { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; }
.sz-sbox input { flex: 1; min-width: 0; min-height: 52px; padding: 0 20px; border: 1px solid #bbb; border-radius: 999px; font-size: 18px; color: #111; }
.sz-btnp { min-height: 52px; padding: 0 24px; border-radius: 999px; background: #8b0000; color: #fff; border: 0; font-weight: 600; }
.sz-btnp:hover { background: #6e0000; }
.sz-count { text-align: center; color: #6b6b6b; margin: 12px 0 0; }
.sz-rh { font-size: 22px; font-weight: 700; color: #111; margin: 36px 0 16px; display: flex; align-items: baseline; gap: 8px; }
.sz-rh small { color: #6b6b6b; font-weight: 400; font-size: 16px; }
.sz-people { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 16px; }
.sz-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: #111; font-size: 15px; line-height: 1.3; }
.sz-person:hover { color: #8b0000; text-decoration: none; }
.sz-person img { width: 100%; max-width: 130px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; background: #eee; }
.sz-posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.sz-pc { display: flex; flex-direction: column; gap: 6px; color: #111; }
.sz-pc:hover { color: #8b0000; text-decoration: none; }
.sz-pc .im { aspect-ratio: 7 / 10; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); margin-bottom: 6px; }
.sz-pc .im img { width: 100%; height: 100%; object-fit: contain; }
.sz-pc b { font-size: 17px; line-height: 1.25; text-align: center; }
.sz-pc small { color: #6b6b6b; text-align: center; font-size: 14px; }

/* ---------------------------------------------------------------- kapcsolat */
.sz-contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.sz-form { display: flex; flex-direction: column; gap: 18px; }
.sz-form label { display: block; font-weight: 700; color: #111; margin: 0 0 6px; font-size: 15px; }
.sz-inp { display: block; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #bbb; border-radius: 4px; color: #111; background: #fff; }
.sz-inp:focus { border-color: #8b0000; outline: 2px solid rgba(139, 0, 0, .15); }
textarea.sz-inp { min-height: 170px; resize: vertical; }
.sz-send { align-self: flex-start; min-height: 46px; padding: 0 28px; background: #222; color: #fff; border: 0; border-radius: 4px; font-weight: 600; }
.sz-send:hover { background: #8b0000; }
.sz-addr { padding: 22px 24px; background: #f6f6f6; border-radius: 4px; }
.sz-addr h2 { margin: 0 0 10px; font-size: 20px; color: #111; font-weight: 600; }
.sz-addr p { margin: 0 0 12px; }
.sz-addr p:last-child { margin: 0; }
.sz-addr a { color: #8b0000; }

@media (max-width: 991px) {
  .sz-gthumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sz-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sz-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sz-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------------------------------------------------------------- mobil (< 768 px) */
@media (max-width: 767px) {
  .sz-pt { margin: 10px 0 16px; font-size: 28px; }
  .sz-seg { justify-content: flex-start; }
  .sz-gthumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sz-gplay h2 { font-size: 21px; }
  .sz-people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; }
  .sz-person { font-size: 14px; }
  .sz-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .sz-pc b { font-size: 15px; }
  .sz-btnp { padding: 0 16px; }
  .sz-sbox input { font-size: 16px; }

  /* Évadok: a négy évtized kifér, a plakátok 2 oszlopban */
  .szb-plays #decade-strip .timeline-item { padding: 0 6px; }
  .szb-plays .season-row { padding: 0 8px 8px; }
  .szb-plays .season-row .play-card.col-xs-12 { width: 50%; padding: 0 7px; margin-bottom: 18px; }
  .szb-plays .season-row .play-card .play-poster-wrap { height: auto; aspect-ratio: 7 / 10; padding: 6px; background: #fff; }
  .szb-plays .season-row .play-card .play-details { font-size: 13px; padding-bottom: 4px; }
  .szb-plays .season-row .play-card .play-details .caltitle { font-size: 16px; line-height: 1.2; margin-top: 4px; }

  /* Előadás: kisebb plakát, adatok 2×2, szereposztás két oszlopban, műsorfüzet 2, galéria 3 oszlop */
  .szb-play .contentplay > .col-sm-4 > a > img { max-width: 240px; margin: 0 auto; }
  .szb-play .contentplay > .col-sm-8 > .col-sm-3 { width: 50%; float: left; min-height: 74px; }
  .szb-play .contentplay .row > .col-sm-12 > .col-md-4:first-child { width: 42%; float: left; }
  .szb-play .contentplay .row > .col-sm-12 > .col-md-4:nth-child(2) { width: 58%; float: left; }
  .szb-play .contentplay .row > .col-sm-12 > .col-md-4 .szereposztas { margin: 0 0 4px; }
  .szb-play #musorfuzet, .szb-play #media, .szb-play #sajto { padding: 0 15px; }
  .szb-play #musorfuzet .play_gallery { margin: 0 -5px; }
  .szb-play #musorfuzet .item.col-sm-3 { width: 50%; float: left; padding: 0 5px; margin-bottom: 10px; }

  /* Előadás + alkotó galéria: 3 oszlop, négyzetes bélyegképek */
  .szb-play #galeria .item.col-sm-3,
  .szb-artist #galeria .item.col-sm-3 { width: 33.3333%; float: left; padding: 3px; margin: 0; }
  .szb-play #galeria .item img,
  .szb-artist #galeria .item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

  /* Alkotók: a négy gomb 2×2-ben, kártyák 2 oszlopban, az évfolyam-sáv jobbra elhalványul */
  .szb-artists .btn-group-justified { display: flex; flex-wrap: wrap; }
  .szb-artists .btn-group-justified > .btn-group { display: block; width: 50%; float: none; }
  .szb-artists .btn-group-justified > .btn-group > .btn { width: 100%; border-radius: 0; }
  .szb-artists .alumni-timeline-strip::-webkit-scrollbar { display: none; }
  .szb-artists .alumni-timeline-strip { display: flex; scrollbar-width: none;-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .szb-artists .text_large,
  .szb-artists .alumni-milestone-row > .row { display: flex; flex-wrap: wrap; }
  .szb-artists .alumni-milestone-row > .row::before,
  .szb-artists .alumni-milestone-row > .row::after { display: none; }
  .szb-artists .text_large > a,
  .szb-artists .alumni-milestone-row > .row > a { width: 50%; }
  .szb-artists .text_large > a > .artistlist,
  .szb-artists .alumni-milestone-row > .row > a > .artistlist { width: 100%; float: none; }
  .szb-artists .artistlist img { width: 110px; height: 110px; }

  /* Alkotó: kisebb fotó */
  .szb-artist .contentplay > .col-sm-4 img.artist-img { max-width: 200px; margin: 0 auto; }
}

/* 2026-10-19 (kérésre, minden szélességen): az alkotó fotója kör legyen, ne ovális – a nem négyzetes kép
   (pl. a 220×300-as placeholder-uat.jpg) négyzetre vágva; arcképnél kicsit feljebb, a helyettesítőnél középen. */
.szb-artist img.artist-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; }
.szb-artist img.artist-img[src*="placeholder-uat"] { object-position: 50% 50%; }

/* Alkotói munkák (díszlet, zene, koreográfia…) – a „Rendezései…” blokk mintájára */
.szb-artist .sz-crew-works .sz-crew-role { color: #777; }

/* Lightbox2 nagyító nyitva: a görgetést a lightbox-fit.js eseménytiltással fogja meg (az overflow: hidden mobilon a tetejére ugrana);
   itt csak a „túlgörgetés” (pull-to-refresh, láncolt görgetés) tiltása */
html.sz-lb-open, html.sz-lb-open body { overscroll-behavior: none; }