/* Smúz Café — mobil elrendezés-javítások (v1.2.0).
   Az oldal saját CSS-e UTÁN töltődik. Minden szabály valós, telefonon
   bejelentett hibából származik; a felülíráshoz szükséges specificitást
   szándékosan írjuk ki, nem vaktában szórunk !important-ot. */

/* ==================================================================
   1. A HAMBURGER NEM MENT JOBBRA
   Az oldal CSS-ében `.nav .links{flex:1}` tölti ki a helyet a logó és a
   jobb oldali blokk között. Amikor a menüt elrejtjük, ez a kitöltő elem
   eltűnik, és a hamburger beugrik a logó mellé. Vissza kell adni a
   kitolást a jobb oldali blokknak.
   ================================================================== */
#hdr.smz-szuk .nav .smz-right { margin-left: auto; }
#hdr .nav .smz-logo { flex: 0 0 auto; }

/* ==================================================================
   2. SPECIFICITÁS-CSAPDÁK
   A @media blokk nem növeli a specificitást. Ahol a mobil szabály
   kevesebb osztályt sorol fel, mint az asztali, ott a mobil szabály
   némán hatástalan marad. Ezeket itt, azonos vagy nagyobb
   specificitással írjuk felül.
   ================================================================== */

/* .case.rev — a referencia-kártyák (Dove, blublublu, NUXE) mobilon is
   kétoszloposak maradtak, ezért a képek bélyeg méretűre estek össze. */
@media (max-width: 980px) {
  .cases .case.rev,
  .case.rev { grid-template-columns: 1fr; }
  .case.rev .cimgs { order: 0; }
}

/* .insta .grid.reels és .podcast .grid.pod2 — négy oszlop maradt
   telefonon, ez adta a főoldal vízszintes túlcsordulását. */
@media (max-width: 980px) {
  .insta .grid.reels { grid-template-columns: repeat(2, 1fr); }
  .podcast .grid.pod2 { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 520px) {
  .insta .grid.reels { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ==================================================================
   3. VÍZSZINTES TÚLCSORDULÁS
   ================================================================== */

/* Hírlevél-sáv: az input alap min-width-je (kb. 20 karakter) és a gomb
   együtt szélesebb a telefonnál, ezért kilógtak a képernyőről. */
.nl-form { flex-wrap: wrap; }
.nl-form input { min-width: 0; }
@media (max-width: 620px) {
  .nl-form { flex-direction: column; align-items: stretch; }
  .nl-form input,
  .nl-form button { width: 100%; }
}

/* Vélemény-sáv kártyái: fix 360px szélesség 390px-es kijelzőn. */
@media (max-width: 520px) {
  .rev-card { width: min(360px, 82vw); }
}

/* "Amitől nálunk más egy rendezvény" fejléce: `1fr auto` rács, ahol az
   auto oszlopba két kör alakú gomb ÉS egy CTA került — együtt szélesebb,
   mint a képernyő, ezért a cím balról kicsúszott. */
@media (max-width: 900px) {
  .vhead { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .vhead .vnav { flex-wrap: wrap; justify-content: flex-start; }
  .vhead .vnav .btn { margin-left: 0 !important; }
}

/* A hosszú, szóközök nélküli címek (Anton, nagybetűs) ne feszítsék szét
   a rácsot: min-width:0 nélkül a grid/flex elem nem tud a min-content
   alá menni. */
@media (max-width: 900px) {
  .vhead > div,
  .case > div,
  .fgrid > div,
  footer .cols > div { min-width: 0; }
  .vhead h2,
  .case h3 { overflow-wrap: break-word; }
}

/* ==================================================================
   4. LÁBLÉC ELCSÚSZÁS
   Négy oszlopból 980px alatt kettő lett, de 50px réssel: 390px-en
   oszloponként ~146px marad, amiben a nyitvatartási sorok és a 300px-re
   méretezett bemutatkozó szöveg már nem fér el.
   ================================================================== */
@media (max-width: 700px) {
  footer .cols { grid-template-columns: 1fr; gap: 34px; }
  footer .about { max-width: none; }
  footer .fine { flex-direction: column; gap: 10px; }
}
@media (max-width: 980px) {
  footer .cols { gap: 30px 26px; }
  footer li,
  footer .about { overflow-wrap: anywhere; }
}

/* ==================================================================
   5. VÉGSŐ VÉDŐHÁLÓ
   Ha bárhol marad egy nem várt túlnyúló elem, az ne tolja el az egész
   oldalt. A `overflow-x:hidden` már rajta van a html/body-n; itt csak
   azt biztosítjuk, hogy a képek és médiák sose lógjanak ki.
   ================================================================== */
.smz-oldal img,
.smz-oldal video,
.smz-oldal svg:not(.mark):not(.ring) { max-width: 100%; }
.smz-oldal table { display: block; overflow-x: auto; }

/* ==================================================================
   6. INSTAGRAM-SÁV
   A helykitöltő kártyák (.reel-ph) stílusa az oldal CSS-ében van; itt csak
   a valódi elemek kapnak méretet. Ugyanaz az arány, hogy a sáv magassága
   ne ugráljon a feed betöltésétől.
   ================================================================== */
.smz-ig-elem {
  position: relative; display: block; aspect-ratio: 9/16;
  border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .35);
  text-decoration: none;
}
.smz-ig-elem img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease;
}
.smz-ig-elem:hover img { transform: scale(1.05); }
.smz-ig-elem:focus-visible { outline: 2px solid #F4643D; outline-offset: 3px; }
.smz-ig-jel {
  position: absolute; top: 10px; right: 12px;
  color: #fff; font-size: 15px; line-height: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  pointer-events: none;
}