/*
 * Opravy responzivity pre mobil a tablet.
 * Načítava sa ako posledný štýl na každej stránke. Selektory majú prefix "html body",
 * aby prebili pôvodné pravidlá z Bricks (vrátane ich !important) bez zásahu do desktopu.
 * Breakpointy zodpovedajú Bricks: 991px (tablet), 767px (veľký mobil), 478px (mobil).
 */

/* ── Karty portfólia (homepage + /portfolio/) ─────────────────────────────── */
@media (max-width: 991px) {
  /* desktop má 260–300px medzeru pre scroll animáciu; na menšom displeji je to prázdne miesto */
  html body .brxe-yarvim .brxe-tzzvta.brxe-block,
  html body .brxe-rvneln .brxe-xlucka.brxe-block {
    margin-bottom: 72px !important;
  }

  /* karta a obrázok na celú šírku namiesto 74 % / 80 % */
  html body .brxe-yarvim .brxe-krsuks.brxe-block,
  html body .brxe-yarvim .brxe-tcxbbw.brxe-div,
  html body .brxe-rvneln .brxe-cjvfqg.brxe-block,
  html body .brxe-rvneln .brxe-zqelbj.brxe-div {
    width: 100% !important;
  }

  html body .brxe-yarvim .brxe-uodkiy.brxe-image,
  html body .brxe-rvneln .brxe-fpxoub.brxe-image {
    width: 100% !important;
    margin-top: 0 !important;
  }

  /* horná medzera sekcie s portfóliom */
  html body #brxe-wyaykz,
  html body #brxe-wvvlfl {
    padding-top: 120px !important;
  }
}

@media (max-width: 767px) {
  html body .brxe-yarvim .brxe-tzzvta.brxe-block,
  html body .brxe-rvneln .brxe-xlucka.brxe-block {
    margin-bottom: 48px !important;
  }

  html body .brxe-yarvim .brxe-krsuks.brxe-block,
  html body .brxe-rvneln .brxe-cjvfqg.brxe-block {
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: flex-start !important;
  }

  html body .brxe-yarvim .brxe-hrxvvq.brxe-block,
  html body .brxe-rvneln .brxe-jqrmxk.brxe-block,
  html body .brxe-yarvim .brxe-kmldfg.brxe-block,
  html body .brxe-yarvim .brxe-mpsyqd.brxe-block {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  html body #brxe-wyaykz,
  html body #brxe-wvvlfl {
    padding-top: 72px !important;
  }
}

/* ── Detail portfólia: sekcie s height:100% sa na tablete naťahovali na výšku celej stránky ── */
@media (max-width: 991px) {
  html body #brxe-fysvdd,
  html body #brxe-tqwpfl,
  html body #brxe-zfnzie,
  html body #brxe-zuqhcf {
    height: auto !important;
  }
}

/* ── Homepage: tlačidlo „Zobraziť všetky“ malo -150px a prekrývalo poslednú kartu ── */
@media (max-width: 991px) {
  html body #brxe-aeadsa {
    margin-top: 0 !important;
  }
}

/* ── Homepage: hero video – vertikálna verzia aj pre väčšie telefóny (479–767px) ── */
@media (max-width: 767px) {
  html body #brxe-skifha.meliora-video-full {
    display: none !important;
  }

  html body #brxe-cvjmgc {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    position: relative;
  }
}

/* ── Homepage: sekcia „Kreativita má zmysel…“ mala pevnú výšku 100vh (na tablete prázdno) ── */
@media (max-width: 991px) {
  html body #brxe-ukynjl {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
}

@media (max-width: 478px) {
  html body #brxe-ukynjl {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* ── Homepage: obálka pri „Kontaktujte nás“ prekrývala nadpis ── */
@media (max-width: 991px) {
  html body #brxe-zswmpf {
    top: auto !important;
    bottom: 100% !important;
    left: auto !important;
    right: 0 !important;
    margin-bottom: 8px;
  }
}

/* ── Detail portfólia: úvodný obrázok (sekcia 100vh, obrázok len 16:9) ── */
@media (max-width: 991px) {
  html body .ilustracny.brxe-section {
    height: auto !important;
  }

  html body .ilustracny .ilustarcny-obrazok,
  html body .ilustracny .ilustarcny-obrazok img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* ── Homepage: textový blok v sekcii Služby (pevných 350px + 50px padding) pretŕčal ── */
@media (max-width: 767px) {
  html body #brxe-yiytqt {
    flex-direction: column !important;
    gap: 16px;
  }

  html body #brxe-diaftp {
    width: 100% !important;
    padding-right: 0 !important;
    align-items: flex-start !important;
  }
}

/* text nad padajúcimi ikonami služieb, aby ho neprekrývali */
@media (max-width: 991px) {
  html body #brxe-yiytqt {
    position: relative;
    z-index: 2;
    pointer-events: none;
  }
}

/* ── Formulár „Zavoláme vám“ (homepage + detail portfólia): pod sebou, na celú šírku ── */
@media (max-width: 768px) {
  html body #brxe-udkecn,
  html body #brxe-dfsgrq {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  html body #brxe-udkecn .form-group,
  html body #brxe-dfsgrq .form-group {
    width: 100% !important;
  }

  html body #brxe-udkecn .submit-button-wrapper,
  html body #brxe-dfsgrq .submit-button-wrapper {
    align-items: flex-start !important;
  }

  html body #brxe-dihdre {
    width: 100% !important;
  }
}

/* ── Newsletter popup: krížik mal 11×14px – na dotyk príliš malý ── */
html body .popup-4__icon-close-wrapper {
  min-width: 44px;
  min-height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ── Karty portfólia: kontajner mal pevných 1600px (max 1366px) → pretŕčal na každej obrazovke < 1366px ── */
html body .brxe-yarvim .brxe-afvmuo.brxe-container,
html body .brxe-rvneln .brxe-luebzl.brxe-container {
  width: 100% !important;
  max-width: 1366px;
}

html body .brxe-yarvim .brxe-hdypjs.brxe-block,
html body .brxe-rvneln .brxe-bgubam.brxe-block {
  width: 100% !important;
}

/* ── Kontakt: obálka a odznak Google Partner prekrývali nadpis formulára ── */
@media (max-width: 767px) {
  html body #brxe-aaf493 {
    padding-top: 90px;
  }

  html body #brxe-a883d5 {
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
  }
}