/* ---------- XField Image Gallery — CLEAN + COMPAT ---------- */

/* Base */
ul.xfieldimagegallery{
  margin:16px auto;
  padding:0;
  list-style:none;
}

/* Card */
ul.xfieldimagegallery > li{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* Image */
ul.xfieldimagegallery > li img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  border:0 !important;
  border-radius:0 !important;
  margin:0 !important;
}

/* --- Desktop layouts --- */

/* 4+ photos → 2x2 */
ul.xfieldimagegallery.layout-4{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-gap:14px; /* compat */
  gap:14px;
}
ul.xfieldimagegallery.layout-4 > li{ aspect-ratio:4/3; }

/* 3 photos → big + two small */
ul.xfieldimagegallery.layout-3{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-gap:2px; /* compat */
  gap:2px;
}
ul.xfieldimagegallery.layout-3 > li:first-child{
  grid-row:1 / span 2;
  aspect-ratio:4/3;
}
ul.xfieldimagegallery.layout-3 > li:nth-child(2),
ul.xfieldimagegallery.layout-3 > li:nth-child(3){
  aspect-ratio:4/3;
}

/* Hover (pointer devices only) */
@media (hover:hover){
  ul.xfieldimagegallery > li img{ transition:transform .25s ease; }
  ul.xfieldimagegallery > li:hover img{ transform:scale(1.03); }
}

/* --- Aspect-ratio fallback for old validators/engines --- */
@supports not (aspect-ratio: 1/1){
  /* keep 4:3 with padding hack */
  ul.xfieldimagegallery > li{ position:relative; }
  ul.xfieldimagegallery.layout-4 > li::before,
  ul.xfieldimagegallery.layout-3 > li::before{
    content:""; display:block; padding-top:75%; /* 4/3 */
  }
  ul.xfieldimagegallery > li img{
    position:absolute; inset:0; width:100% !important; height:100% !important;
  }
}

/* --- Mobile: force 2×2 grid + reset spans --- */
@media (max-width:820px){
  ul.xfieldimagegallery,
  ul.xfieldimagegallery.photo-gallery,
  ul.xfieldimagegallery.layout-3,
  ul.xfieldimagegallery.layout-4{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-gap:4px !important; /* compat */
    gap:4px !important;
    padding:0 !important;
  }

  ul.xfieldimagegallery > li{
    float:none !important;
    width:auto !important;
    margin:0 !important;
    aspect-ratio:4/3 !important;
  }

  ul.xfieldimagegallery.layout-3 > li:first-child{
    grid-row:auto !important;
  }

  ul.xfieldimagegallery.layout-3 > li:last-child{
    grid-column:1 / -1 !important;
  }

  /* fallback on mobile if aspect-ratio unsupported */
  @supports not (aspect-ratio: 1/1){
    ul.xfieldimagegallery > li::before{ padding-top:75% !important; }
  }
}