/* ============================================
   Baravin – Instagram feed nad patičkou
   Vlastní výpis místo systémového prvku (ten je v šabloně Classic
   zamčený do sloupce patičky a mřížky 4×4).
   Vyžaduje instagram.js.
   ============================================ */

.brv-instagram {
  --brv-accent: #561729;
  font-family: inherit;
}

/* Systémový prvek zůstává v DOMu jako zdroj dat, ale nezobrazuje se.
   Skrývá se až po úspěšném vykreslení vlastní sekce – kdyby JS selhal,
   zůstane viditelný původní widget místo prázdné patičky. */
.brv-instagram-active .custom-footer__instagram {
  display: none;
}

/* .custom-footer je flex se sloupci na pevné šířce (flex: 0 0 auto).
   Po skrytí Instagramu by zbylé tři zůstaly vlevo a vpravo vznikla
   díra – proto je necháme růst a rozdělit si uvolněné místo.
   Jen od 992px: níž se sloupce zalamují pod sebe a roztažení by je
   naopak stlačilo vedle sebe do nečitelné šířky. */
@media (min-width: 992px) {
  .brv-instagram-active .custom-footer.elements-4 > div {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Sekce se vkládá přímo do body (full width), obsah drží vnitřní container.
   Stejný princip jako .brv-reviews--hp. Body je šedé, proto vlastní
   bílé pozadí i bílý oddělovač nad sekcí. */
.brv-instagram {
  background-color: #fff;
  border-top: 80px solid #fff;
}

/* Bílý oddělovač nad patičkou řeší už tahle sekce. Na detailu produktu
   následuje ještě pruh s benefity, který má vlastní odsazení – i tam
   patří oddělovač pryč. */
.brv-instagram-active .footer {
  border-top: 0 !important;
}

/* Recenze končí vlastním spodním paddingem, takže plných 80px navrch
   dělá přehnanou mezeru – ale nula je taky špatně (sekce by na sebe
   navazovaly bez oddělení). */
.brv-reviews--hp + .brv-instagram {
  border-top-width: 60px;
}

/* Šířky kopírují systémovou .container (šablona Classic), aby mřížka
   lícovala se sloupci patičky. Pevná hodnota by se rozešla – .container
   je 1418px na 1440px, ne 1400px. */
.brv-instagram__container {
  margin: 0 auto;
  padding: 0 10px 60px;
}

@media (min-width: 768px) {
  .brv-instagram__container {
    width: 742px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 992px) {
  .brv-instagram__container {
    width: 972px;
  }
}

@media (min-width: 1200px) {
  .brv-instagram__container {
    width: 1178px;
  }
}

@media (min-width: 1440px) {
  .brv-instagram__container {
    width: 1418px;
  }
}

.brv-instagram__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.brv-instagram__heading {
  text-align: center;
  margin: 0;
}

.brv-instagram__profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--brv-accent);
  text-decoration: none;
}

.brv-instagram__profile:hover {
  color: var(--brv-accent);
  text-decoration: underline;
}

.brv-instagram__logo {
  flex-shrink: 0;
  display: block;
}

/* --- Mřížka dlaždic --- */
/* Mezery i počty odpovídají výpisu na atexsport.cz (hashtagy.blade.php):
   do 767px 2 sloupce / 4 příspěvky, 768–991px 3 / 6, od 992px 6 / 12. */
.brv-instagram__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.brv-instagram__tile:nth-child(n + 5) {
  display: none;
}

/* Poměr 1080/1350 (4:5) je nativní formát instagramového portrétu –
   stejně jako na atexsport.cz. Čtverec by ořezával víc obsahu. */
.brv-instagram__tile {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #f7f7f7;
  aspect-ratio: 1080 / 1350;
}

.brv-instagram__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.brv-instagram__tile:hover .brv-instagram__image {
  transform: scale(1.06);
}

.brv-instagram__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgba(86, 23, 41, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.brv-instagram__tile:hover .brv-instagram__overlay,
.brv-instagram__tile:focus-visible .brv-instagram__overlay {
  opacity: 1;
}

/* --- Responzivita --- */
@media (min-width: 768px) {
  .brv-instagram__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .brv-instagram__tile:nth-child(n + 5) {
    display: block;
  }
  .brv-instagram__tile:nth-child(n + 7) {
    display: none;
  }
}

@media (min-width: 992px) {
  .brv-instagram__head {
    margin-bottom: 40px;
  }
  .brv-instagram__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .brv-instagram__tile:nth-child(n + 7) {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brv-instagram__image,
  .brv-instagram__overlay {
    transition: none;
  }
  .brv-instagram__tile:hover .brv-instagram__image {
    transform: none;
  }
}