/* SIRO Gallery — grid, pill filters, hover caption. Paired with class-gallery.php. */
.siro-gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--siro-space-2, 8px);
  justify-content: center;
  margin-bottom: var(--siro-space-6, 24px);
}

.siro-gallery__filter {
  font-family: var(--siro-font-body, inherit);
  font-size: var(--siro-fs-sm, 14px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 11px 18px;
  border: 1px solid var(--siro-outline-strong, rgba(195, 198, 211, 0.5));
  border-radius: 999px;
  background: var(--siro-surface, #fff);
  color: var(--siro-text-muted, #6a7080);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.siro-gallery__filter:hover,
.siro-gallery__filter:focus-visible {
  color: var(--siro-color-primary, #00377e);
  border-color: var(--siro-color-primary, #00377e);
}

.siro-gallery__filter.is-active {
  background: var(--siro-color-primary, #00377e);
  border-color: var(--siro-color-primary, #00377e);
  color: var(--siro-text-inverse, #fff);
}

.siro-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.siro-gallery__item {
  margin: 0;
  min-width: 0;
}

.siro-gallery__item[hidden] { display: none; }

.siro-gallery__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--siro-surface-low, #f2f4f6);
}

/* Specificity AND structure both matter here.
 * 1. Elementor's base `.elementor-widget img { height: auto }` is (0,1,1) and outranks a
 *    single-class rule, so `.siro-gallery__img` alone loses and every tile falls back to its native
 *    aspect ratio. Measured 2026-08-25 on /mansarda-pod/: 612px, 344px and 258px tiles side by side.
 * 2. The image optimiser wraps every <img> in a <picture>, so the img is NOT a direct child of the
 *    link — a child combinator matches nothing. Descendant selectors only.
 * A gallery of uniformly 4:3 photos hides both bugs; one portrait frame exposes them. */
.siro-gallery__link picture {
  display: block;
  width: 100%;
  height: 100%;
}

.siro-gallery__link .siro-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.165, .84, .44, 1);
}

.siro-gallery__link:hover .siro-gallery__img,
.siro-gallery__link:focus-visible .siro-gallery__img { transform: scale(1.05); }

.siro-gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 14px 12px;
  font-size: 13px;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(to top, rgba(7, 20, 38, .82), rgba(7, 20, 38, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}

.siro-gallery__link:hover .siro-gallery__caption,
.siro-gallery__link:focus-visible .siro-gallery__caption { opacity: 1; transform: none; }

@media (max-width: 1024px) { .siro-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 720px) {
  .siro-gallery__grid { grid-template-columns: 1fr; gap: 10px; }
  .siro-gallery__filter { font-size: 13px; padding: 9px 14px; }
  /* Touch has no hover: show the caption so the context is not lost on phones. */
  .siro-gallery__caption { opacity: 1; transform: none; }
}