/* ==========================================================================
   Boxes Grid Module
   Layout: headline + subhead + up to 4 linked boxes (logo + label)
   Features:
     - Flex wrap grid (rows auto-center)
     - Equal logo height
     - Styled / Unstyled variants
     - Responsive 4 → 3 → 2 → 1
   ========================================================================== */

.acf-boxes-grid {
  padding: 3rem 1rem;
}

.acf-boxes-grid .boxes-inner {
  max-width: 1250px;
  margin-inline: auto;
}

/* -------------------------------
   Header
-------------------------------- */
.acf-boxes-grid .boxes-header {
  text-align: center;
  margin-bottom: clamp(1.6rem, 3vw, 2rem);
}

.acf-boxes-grid .boxes-title {
  line-height: 1.2;
font-style:italic;
	color: #BA3357;
}
.acf-boxes-grid h2.boxes-title  {
	margin-bottom: .5rem;
}
.acf-boxes-grid .boxes-subhead {
  margin: 0;
    font-family: 'gotham', sans-serif;
    font-weight:400;
  color: rgba(0,0,0,.75);
}

/* -------------------------------
   Grid container (flex-based)
-------------------------------- */
.acf-boxes-grid .boxes-grid {
  --cols: 5;                                /* 1–4 from PHP */
  --gap: clamp(1rem, 3vw, 1rem);
  --card-w: 230px;                           /* desktop card width; fits 4 inside 1100 */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;                   /* center each row when 1–3 items */
  max-width: calc(var(--cols) * var(--card-w) + (var(--cols) - 1) * var(--gap));
  margin-inline: auto;
  align-items: stretch;
}
.acf-boxes-grid .boxes-grid .box--unstyled {
	--card-w: 230px;
}
/* -------------------------------
   Card base
-------------------------------- */
.acf-boxes-grid .box-card {
  box-sizing: border-box;                    /* ✅ include padding/border in width */
  width: var(--card-w);
  text-align: center;
  text-decoration: none;
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  padding: 1rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Styled state (default) */
.acf-boxes-grid .box--styled {
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.05);
	transition: all .2s ease-in-out !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

.acf-boxes-grid .box--styled:hover {
  transform: translateY(-2px);
  box-shadow: 2px 2px 3px 1px rgba(0,0,0,.15) !important;
	color: purple !important;
}
/* Unstyled state */
.acf-boxes-grid .box--unstyled {
  background: transparent !important;
  border: 0 !important;
  padding: .25rem;
  box-shadow: none;
}

/* -------------------------------
   Media/logo
-------------------------------- */
.acf-boxes-grid .box-media {
width: 81%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;

}

.acf-boxes-grid .box-logo {
  max-height: 160px;              /* keeps all logos aligned */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

/* -------------------------------
   Text label
-------------------------------- */
.acf-boxes-grid .box-text {
  font-weight: 600;
  line-height: 1.3;
	padding: .6rem 0 0;
}

/* -------------------------------
   Responsive
-------------------------------- */
@media (max-width: 900px) {
  .acf-boxes-grid .boxes-grid {
    --cols: 3;
    --card-w: 240px;
  }
}
@media (max-width: 700px) {
  .acf-boxes-grid .boxes-grid {
    --cols: 2;
    --card-w: 240px;

  }

	.acf-boxes-grid .box-card {
  box-sizing: border-box;                    /* ✅ include padding/border in width */
  width: var(--card-w);
  padding: 1rem !important;
}
	.acf-boxes-grid .box-media {
  width: 81%;
		height: auto;    }
}


/* -------------------------------
   Background tint helpers
-------------------------------- */
.bg-white   { background-color: #ffffff; }
.bg-fffaf0  { background-color: #fffaf0; }
.bg-edf7f7  { background-color: #edf7f7; }
.bg-fff0d9  { background-color: #fff0d9; }
.bg-f5e0b0  { background-color: #f5e0b0; }
.bg-d6f5eb  { background-color: #d6f5eb; }
.bg-8ac9c2  { background-color: #8ac9c2; }
/* Override global link animation inside Boxes Grid */
/* ============================================================
   Prevent global WYSIWYG link styles from affecting box links
   ============================================================ */

/* Remove inherited link animation/underline, but preserve box hover */
.acf-boxes-grid a.box-card,
.acf-boxes-grid .box-card a {
  color: inherit !important;
	border:1px solid #DE4D3B;
  text-decoration: none !important;    /* remove underline */
  box-shadow: none !important;         /* removes global bottom border underline */
  background: #FFFAF0;         /* removes pseudo bg fill */
  position: relative;                  /* keep for transform hover */
  z-index: auto;
}

/* Remove pseudo-elements created by global link animation */
.acf-boxes-grid a.box-card::before,
.acf-boxes-grid .box-card a::before {
  content: none !important;
}
/* Make per-card --reveal-delay actually apply */
.acf-boxes-grid .box-card.reveal {
  transition-delay: var(--reveal-delay, 0ms) !important;
  animation-delay:  var(--reveal-delay, 0ms) !important; /* if your reveal uses keyframes */
}
.page-id-679 .acf-boxes-grid .box-logo {
	max-height:100%;}
.page-id-679 .acf-boxes-grid .box-card {
	padding:0 !important;}
.page-id-679 .acf-boxes-grid .box-media {
	width: 100%;}
.page-id-679 .acf-boxes-grid {
    padding: 3rem 1rem 0rem;
}
.page-id-2 .acf-boxes-grid {
    padding: 1rem 1rem 3rem;
}
@media (max-width: 480px) {
  .acf-boxes-grid .boxes-grid {
    --cols: 2;
    --card-w: 150px;
  }
	.acf-boxes-grid .box-logo {
  max-height: 110px;   
	}
	.page-id-679 .acf-boxes-grid .box-logo {
  max-height: 200px;  
	}
/* ✅ Unstyled cards: force 2 columns */
  .acf-boxes-grid .box-card.box--unstyled {
    width: calc((100% - var(--gap)) / 2) !important;  /* two-up */
    padding: 0 !important;                             /* optional: tighter, logo-only feel */
  }

  .acf-boxes-grid .box-card.box--unstyled .box-media {
    width: 100%;
  }

  .acf-boxes-grid .box-card.box--unstyled .box-logo {
    max-height: 140px; /* keep consistent */
  }}