/* =========================================================
   Four Image Grid
   ========================================================= */
.acf-four-image-grid { padding: 3rem 0 0rem; }
.single .acf-four-image-grid {
	padding: 1rem 0rem;
}
.acf-four-image-grid .fig-inner {
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Grid */
.acf-four-image-grid .fig-grid {
  --fig-ratio: 16 / 9;          /* controlled by template inline style */
  --fig-radius: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  margin:1rem 0rem 0rem;
}
.acf-four-image-grid .fig-grid.gap-md {
    gap: 1rem;
    padding: 0;
}
/* Gaps */
.acf-four-image-grid .fig-grid.gap-sm { gap: 0.75rem; }
.acf-four-image-grid .fig-grid.gap-md { gap: 1rem; }
.acf-four-image-grid .fig-grid.gap-lg { gap: 1.5rem; }

/* Card */
.acf-four-image-grid .fig-card {
  list-style: none;
}

/* Aspect + image */
.acf-four-image-grid .fig-aspect {
  aspect-ratio: var(--fig-ratio);
  border-radius: var(--fig-radius);
  overflow: hidden;
  background: #eee;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.acf-four-image-grid .fig-aspect img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;             /* matches the screenshot layout */
  transform: translateZ(0);
  transition: transform .4s ease;
}
@media (hover:hover) {
  .acf-four-image-grid .fig-card:hover img { transform: scale(1.06); }
}

/* Responsive */
@media (max-width: 1024px) {
  .acf-four-image-grid .fig-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .acf-four-image-grid .fig-grid { grid-template-columns: 1fr; }
  .acf-four-image-grid .fig-grid.gap-md {
    gap: 0rem;
}
/* 🔽 Mobile: only show the first image */
  .acf-four-image-grid .fig-card {
    display: none;
  }
  .acf-four-image-grid .fig-card:first-child {
    display: block;
  }
	.acf-four-image-grid .fig-grid.fig-cols-1 { grid-template-columns: 1fr !important; }
	.acf-four-image-grid .fig-grid.fig-cols-2 { grid-template-columns: 1fr !important; }
	.acf-four-image-grid .fig-grid.fig-cols-3 { grid-template-columns: 1fr !important; }
	.acf-four-image-grid .fig-grid.fig-cols-4 { grid-template-columns: 1fr !important; }
}

/* -------------------------------------------
   Background tints (use your standard palette)
   ------------------------------------------- */
.bg-white       { background: #ffffff; }
.bg-tint-ivory  { background: #fffaf0; }  /* required */
.bg-tint-mint   { background: #edf7f7; }  /* required */

/* Optional extras (only if you ever want more) */
.bg-tint-peach  { background: #fff0d9; }
.bg-tint-gold   { background: #f5e0b0; }
.bg-tint-seafoam{ background: #d6f5eb; }
.bg-tint-teal   { background: #8ac9c2; }

/* -------------------------------------------
   Reveal hooks (use your existing system)
   If your project uses different class names,
   swap .reveal/.reveal-up below with yours.
   ------------------------------------------- */
.acf-four-image-grid .reveal { opacity: 0; transform: translateY(14px); }
.acf-four-image-grid .reveal.is-visible { opacity: 1; transform: none; transition: all .6s ease; }
/* Column options */
.acf-four-image-grid .fig-grid.fig-cols-1 { grid-template-columns: 1fr; }
.acf-four-image-grid .fig-grid.fig-cols-2 { grid-template-columns: repeat(2, 1fr); }
.acf-four-image-grid .fig-grid.fig-cols-3 { grid-template-columns: repeat(3, 1fr); }
.acf-four-image-grid .fig-grid.fig-cols-4 { grid-template-columns: repeat(4, 1fr); }

a.fig-link {
	box-shadow:none !important;
}
a.fig-link:hover::before {
	height:0% !important;}