/* Layer: feature-specific */
/* Scope: termékgaléria – nagy kép + miniképek, JS nélküli váltás (radio + label) */
/* Used by: prototypes/webshop/termekadatlap.html */

.galeria { display: flex; flex-direction: column; gap: var(--usps); }
.galeria-nagy { position: relative; }
.galeria-nagy img {
  display: none; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius);
}
#gf1:checked ~ .galeria-nagy .gf-1,
#gf2:checked ~ .galeria-nagy .gf-2,
#gf3:checked ~ .galeria-nagy .gf-3,
#gf4:checked ~ .galeria-nagy .gf-4 { display: block; }

.galeria-mini { display: flex; gap: var(--uspxs); flex-wrap: wrap; }
.galeria-mini label {
  cursor: pointer; inline-size: 4.5rem; border: 2px solid transparent;
  border-radius: var(--radius-sm); overflow: hidden;
}
.galeria-mini label:hover { border-color: var(--c1); }
.galeria-mini img { display: block; inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
#gf1:checked ~ .galeria-mini label[for="gf1"],
#gf2:checked ~ .galeria-mini label[for="gf2"],
#gf3:checked ~ .galeria-mini label[for="gf3"],
#gf4:checked ~ .galeria-mini label[for="gf4"] { border-color: var(--c3); }
@media (prefers-reduced-motion: reduce) {
  .galeria-nagy { position: relative; }
.galeria-nagy img { transition: none; }
}