.block-grid-layout--full {
  display: block;
  inline-size: 100%;
}
.block-grid-layout--half,
.block-grid-layout--thirds {
  display: grid;
  gap: 20px;
  inline-size: 100%;
}
.block-grid-layout--half {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.block-grid-layout--thirds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Image block (BlockElement_media) - fills its container at a consistent
   ratio, cropped as needed, instead of overflowing at native pixel size */
.block-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.block-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}



/* Layout section background images (Settings tab, decorative) -
   fill their section without tiling or stretching */
.block-grid-layout--full,
.block-grid-layout--half,
.block-grid-layout--thirds {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Embedded video iframes (YouTube etc.) carry hardcoded width/height HTML
   attributes - without this, they ignore their grid column entirely and
   force it wider than its fair share, which is what was actually causing
   the uneven "stretching" of the Half/Thirds columns above. */
iframe {
  max-width: 100%;
  height: auto;
}

@media (min-width: 769px) {
  .umb-block-grid__area {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * FREEFORM SECTION - PARTIAL-COLUMN GRID (csFreeform.cshtml)
 * Migrated out of an inline <style> block in csFreeform.cshtml so it loads
 * once per page via _BlocklistCssOnce.cshtml instead of being duplicated
 * in the page markup once per section. No selector below overlapped with
 * anything already in this file, so nothing here was skipped or replaced.
 * ═══════════════════════════════════════════════════════════════════════ */

/* PARTIAL-COLUMN WRAPPER
   Columns are ALWAYS side-by-side (nowrap). They shrink proportionally
   on narrower viewports rather than wrapping. Bootstrap's .row > *
   padding and max-width are neutralised so they don't fight flex. */
.grid-col-partial-wrap {
  display:         flex          !important;
  flex-direction:  row           !important; /* explicit: never column */
  flex-wrap:       nowrap        !important; /* always side-by-side    */
  justify-content: center        !important; /* centre the group        */
  align-items:     center        !important; /* vertical centre         */
  align-content:   center        !important;
  gap:             20px          !important;
  /* width intentionally omitted - flex handles it */
}

/* Custom-gap variant */
.grid-col-partial-wrap.grid-gap-row {
  gap: var(--grid-gap, 20px) !important;
}

/* Column children: override Bootstrap .row > * interference.
   Bootstrap 5 sets padding-left/right via --bs-gutter-x and clamps
   max-width to 100%. We neutralise both so our flex widths work
   correctly. */
.grid-col-partial-wrap > [class*="col-"] {
  /* Equal share of available space; shrinks together when viewport narrows */
  flex:       1 1 0%   !important;
  /* Remove Bootstrap gutter padding that disrupts flex gap */
  padding-left:  0     !important;
  padding-right: 0     !important;
  /* Neutralise Bootstrap's max-width:100% cap */
  max-width:  none     !important;
  /* Allow shrinking below natural content width */
  min-width:  0        !important;
}

/* Custom-gap: honour explicit per-column widths */
.grid-col-partial-wrap.grid-gap-row > .col-md-6 {
  flex: 0 0 calc(50%      - var(--grid-gap, 0px) / 2)      !important;
}
.grid-col-partial-wrap.grid-gap-row > .col-md-4 {
  flex: 0 0 calc(33.3333% - var(--grid-gap, 0px) * 2 / 3)  !important;
}
.grid-col-partial-wrap.grid-gap-row > .col-md-3 {
  flex: 0 0 calc(25%      - var(--grid-gap, 0px) * 3 / 4)  !important;
}

/* Full-width wrapper (col-md-12) */
.grid-col-full-wrap {
  display:   flex;
  flex-wrap: wrap;
  width:     100%;
}

/* RESPONSIVE EMBED CONTAINER (Vimeo / YouTube / any iframe)
   Uses modern aspect-ratio with a padding-bottom fallback for older
   browsers. The iframe fills the container 100% x 100%. */
.embed-container {
  position:     relative;
  width:        100%;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  background:   #000;
}

/* Padding-bottom fallback (ignored when aspect-ratio is supported) */
@supports not (aspect-ratio: 16/9) {
  .embed-container {
    padding-bottom: 56.25%;  /* 9/16 = 56.25% */
    height: 0;
  }
}

.embed-container iframe,
.embed-container video,
.embed-container object,
.embed-container embed {
  position: absolute;
  top:    0;
  left:   0;
  width:  100% !important;  /* override inline width on the iframe */
  height: 100% !important;  /* override inline height on the iframe */
  border: 0;
}

/* Stack to a single column below your existing md breakpoint,
   otherwise 2-3 columns (and partial-width freeform columns) will get
   crushed on phones */
@media (max-width: 768px) {
  .block-grid-layout--half,
  .block-grid-layout--thirds {
    grid-template-columns: 1fr;
  }

  .grid-col-partial-wrap {
    flex-wrap:      wrap      !important;
    flex-direction: column    !important;
    gap:            16px      !important;
  }

  .grid-col-partial-wrap > [class*="col-"] {
    flex:      0 0 100% !important;
    width:     100%     !important;
    max-width: 100%     !important;
  }
  
}