/* =========================================================
   Video Background Section and Columns blocks
   (assets/js/custom-blocks.js). Uses the surface/border/text
   tokens from style.css, so both adapt to dark mode.
   ========================================================= */

/* ---------- Video background section ---------- */
.ust-video-bg { position: relative; overflow: hidden; display: flex; align-items: center; background-size: cover; background-position: center; }
.ust-video-bg__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
	.ust-video-bg__video { display: none; }
}
.ust-video-bg__overlay { position: absolute; inset: 0; }

/* ---------- Columns (ust/columns) ---------- */
.ust-columns {
	display: grid;
	grid-template-columns: repeat(var(--ust-columns-desktop, 3), 1fr);
	gap: var(--ust-columns-gap, 24px);
}
/* A grid item's default minimum size is based on its own content, not its
   grid track — without this, a wide image or a long unbroken word/URL
   inside a column can refuse to shrink to the column's actual width,
   pushing the whole grid wider than its container. Most visible exactly
   where this block is used most: a single narrow column stacked full-
   width on a phone screen still has this problem if the content itself
   (e.g. a Media & Text block's own image) doesn't shrink to fit it. */
.ust-columns > * { min-width: 0; }
@media (min-width: 783px) {
	.ust-columns[data-ust-hide-desktop="1"] { display: none; }
}
@media (max-width: 782px) and (min-width: 601px) {
	.ust-columns { grid-template-columns: repeat(var(--ust-columns-tablet, 2), 1fr); }
	.ust-columns[data-ust-hide-tablet="1"] { display: none; }
}
@media (max-width: 600px) {
	.ust-columns { grid-template-columns: repeat(var(--ust-columns-mobile, 1), 1fr); }
	.ust-columns[data-ust-hide-mobile="1"] { display: none; }
}
.ust-video-bg__content { position: relative; z-index: 1; width: 100%; padding: 60px 24px; }