/* =========================================================
   threeColContentTemplate
   Generic band: optional heading + 3 columns + optional row.
   Mobile-first. Columns stack on mobile, 3-up on desktop.
   ========================================================= */

/* Containing card: background + rounded corners + padding.
   Mirrors genericContentTemplate's container convention. */
.threecol-container {
  padding: 1.5rem;
}

@media (min-width: 900px) {
  .threecol-container {
    padding: 2rem;
  }
}

.threecol-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* --- Band 1: heading --- */
.threecol-heading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* --- Band 2: three columns --- */
/* Mobile: single column stack */
.threecol-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Desktop: strictly three equal columns */
@media (min-width: 900px) {
  .threecol-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
  }
}

.threecol-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.threecol-col-heading {
  margin-bottom: 0.25rem;
}

.threecol-col-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- Shared blocks --- */
.threecol-block {
  min-width: 0;
}

.threecol-block--image {
  display: block;
  line-height: 0; /* remove inline-image gap */
}

.threecol-block--image img {
  display: block;
  width: 100%;      /* fluid: scales with its box */
  height: auto;     /* preserve aspect ratio */
  border-radius: var(--radius-component, var(--radius-xl, 12px));
}

/* Optional size caps.
   width:100% keeps images responsive; max-width caps how large they get.
   Capped images are centered so they don't hug the column's left edge.
   Set via block field: "size": "full" | "lg" | "md" | "sm" (default full). */
.threecol-block--image.is-size-lg img { max-width: 320px; }
.threecol-block--image.is-size-md img { max-width: 200px; }
.threecol-block--image.is-size-sm img { max-width: 120px; }

.threecol-block--image.is-size-lg,
.threecol-block--image.is-size-md,
.threecol-block--image.is-size-sm {
  display: flex;
  justify-content: flex-start;
}

.threecol-block--text {
  line-height: 1.45;
}

.threecol-block--button {
  display: inline-flex;
  align-self: flex-start;
}

/* --- Band 3: optional generic row (evenly spaced, wraps) --- */
.threecol-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.threecol-row-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

/* Row images: no rounded corners, and by default (size "full") they shrink
   to a logo-strip height rather than stretching full-width like column images.
   When an explicit size (lg/md/sm) is set, the shared width caps above apply
   instead, so the row honours the same size vocabulary as the columns. */
.threecol-block--row.threecol-block--image img {
  border-radius: 0;
}

.threecol-block--row.threecol-block--image.is-size-full img {
  width: auto;
  max-width: 100%;
  max-height: 40px;
}