/* ==========================================================================
   fb_murales.css — Modulo FB Murales
   Autore: Francesco Borriello
   CSS estratto e adattato dal tema borriellotheme
   ========================================================================== */

/* ── Titolo pagina ─────────────────────────────────────────────────────── */
.fb-murales-page-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 2.2rem;
  margin-bottom: 10px;
}

/* ── Sezione wrapper ───────────────────────────────────────────────────── */
.fb-murales-section {
  padding: 40px 0 60px;
}

/* ── GRIGLIA MASONRY — CSS Grid con column-span dinamico ──────────────── */
.fb-murales-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 4px;
}

/* Item base — stesso stile ib-editorial-item del tema */
.fb-murales-item {
  display: block;
  overflow: hidden;
  position: relative;
  background: #f3f3f3;
  cursor: pointer;
  text-decoration: none;
}

.fb-murales-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease, opacity .35s ease;
}

.fb-murales-item:hover img {
  transform: scale(1.04);
  opacity: .94;
}

/* ── Regole di spanning per creare il "masonry look" ──────────────────── */
/* Ogni 7 immagini il pattern si ripete (rispecchia il tema originale)    */

/* Posizioni 1, 8, 15, 22, … → grande a sinistra  (colonna 1, 3 righe) */
.fb-murales-item:nth-child(7n+1) {
  grid-column: span 2;
  grid-row: span 2;
}

/* Posizioni 2, 9, 16, … → media in alto a destra */
.fb-murales-item:nth-child(7n+2) {
  grid-column: span 1;
  grid-row: span 2;
}

/* Posizioni 3, 10, … → piccola top-right */
.fb-murales-item:nth-child(7n+3) {
  grid-column: span 1;
  grid-row: span 1;
}

/* Posizioni 4, 11, … → piccola */
.fb-murales-item:nth-child(7n+4) {
  grid-column: span 1;
  grid-row: span 1;
}

/* Posizioni 5, 12, … → media destra */
.fb-murales-item:nth-child(7n+5) {
  grid-column: span 1;
  grid-row: span 2;
}

/* Posizioni 6, 13, … → larga orizzontale */
.fb-murales-item:nth-child(7n+6) {
  grid-column: span 2;
  grid-row: span 1;
}

/* Posizioni 7, 14, … → piccola angolo */
.fb-murales-item:nth-child(7n+0) {
  grid-column: span 1;
  grid-row: span 1;
}

/* ── Caption overlay ───────────────────────────────────────────────────── */
.fb-murales-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: .8rem;
  padding: 6px 10px;
  text-align: center;
  transform: translateY(100%);
  transition: transform .28s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-murales-item:hover .fb-murales-caption {
  transform: translateY(0);
}

/* ── MODAL — estratto identico da ib-gallery-modal del tema ───────────── */
#ib-gallery-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
}

#ib-gallery-modal.show,
#ib-gallery-modal.in {
  display: block;
}

#ib-gallery-modal .modal-dialog {
  max-width: 1100px;
  width: calc(100% - 40px);
  margin: 40px auto;
}

#ib-gallery-modal .modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

#ib-gallery-modal .modal-body {
  position: relative;
  padding: 0;
  text-align: center;
}

#ib-gallery-modal .ib-gallery-modal-image {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
}

#ib-gallery-modal .ib-gallery-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  border: 0;
  background: #fff;
  color: #111;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform .18s;
}

#ib-gallery-modal .ib-gallery-close:hover { transform: scale(1.08); }

#ib-gallery-modal .ib-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  border: 0;
  background: rgba(255, 255, 255, 0.96);
  color: #111;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform .18s;
}

#ib-gallery-modal .ib-gallery-prev { left: 12px; }
#ib-gallery-modal .ib-gallery-next { right: 12px; }
#ib-gallery-modal .ib-gallery-arrow:hover { transform: translateY(-50%) scale(1.07); }

.fb-modal-caption {
  color: #fff;
  text-align: center;
  margin-top: 14px;
  font-size: .95rem;
  min-height: 22px;
  letter-spacing: .04em;
}

body.ib-gallery-open { overflow: hidden; }

/* ── TABLET ─────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .fb-murales-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .fb-murales-item:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
  .fb-murales-item:nth-child(7n+2) { grid-column: span 1; grid-row: span 2; }
  .fb-murales-item:nth-child(7n+3) { grid-column: span 1; grid-row: span 1; }
  .fb-murales-item:nth-child(7n+4) { grid-column: span 1; grid-row: span 1; }
  .fb-murales-item:nth-child(7n+5) { grid-column: span 1; grid-row: span 1; }
  .fb-murales-item:nth-child(7n+6) { grid-column: span 2; grid-row: span 1; }
  .fb-murales-item:nth-child(7n+0) { grid-column: span 1; grid-row: span 1; }
}

/* ── MOBILE ──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .fb-murales-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
  }

  /* reset tutti gli span al default 1x1 */
  .fb-murales-item:nth-child(7n+1),
  .fb-murales-item:nth-child(7n+2),
  .fb-murales-item:nth-child(7n+3),
  .fb-murales-item:nth-child(7n+4),
  .fb-murales-item:nth-child(7n+5),
  .fb-murales-item:nth-child(7n+6),
  .fb-murales-item:nth-child(7n+0) {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* il primo rimane un po' più grande */
  .fb-murales-item:nth-child(7n+1) {
    grid-column: span 2;
    grid-row: span 1;
  }

  #ib-gallery-modal .ib-gallery-arrow { width: 40px; height: 40px; font-size: 22px; }
  #ib-gallery-modal .ib-gallery-prev { left: 6px; }
  #ib-gallery-modal .ib-gallery-next { right: 6px; }
}