/**
 * Image Blur Links Grid (inc/blocks-layout/image-blur-links-grid.php) — a
 * grid of photo tiles, each with a dark blurred overlay and a centered
 * white label.
 *
 * Column count, per chat:
 *   - 1024px+: every tile in a single row, no wrapping — count matches
 *     the actual item count (3-6) via the --ibl-count custom property set
 *     inline from PHP.
 *   - 900px-1023px: fixed 2 columns.
 *   - Below 900px: a single stacked column.
 * Gap is a flat 5px throughout.
 *
 * Each tile is a fixed min-height of 100px — with only a short label as
 * content, that's normally also its actual height, which is what keeps
 * every tile in the grid the same height in practice.
 *
 * The overlay is a separate absolutely-positioned element on top of the
 * photo (not a filter on the photo itself) — backdrop-filter blurs the
 * photo as seen THROUGH the overlay's 55%-opacity black tint, while the
 * label stays sharp on top of that.
 */

.hero-block--advanced + .image-blur-links-grid-block {
	margin-top: -6rem;
}


.image-blur-links-grid-block {
	width: 100%;
}

.iblg-grid {
	max-width: 75rem;
	margin: 0 auto;
	padding: 2rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 5px;
}

@media (min-width: 640px) {
	.iblg-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.iblg-grid {
		grid-template-columns: repeat(var(--ibl-count, 1), 1fr);
	}
}

.iblg-tile {
	position: relative;
	display: block;
	min-height: 100px;
	overflow: hidden;
	text-decoration: none;
  text-shadow: none;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
/* Standardized card/image hover across the theme: lift 3px + a shadow
   (replaces the old top: -4px lift) — the darker overlay + label text-shadow
   on hover are this block's own separate "make the label pop" treatment,
   unrelated to the lift/zoom standardization and left as they were. */
.iblg-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0px 4px 10px rgba(0,0,0,0.25);

  & .iblg-tile-label {
    text-shadow: 0 1px 7px rgba(0,0,0,0.75);
  }
  & .iblg-tile-overlay {
    background: rgba(0, 0, 0, 0.65);
  }
}

.iblg-tile-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iblg-tile-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.iblg-tile-label {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-style: normal;
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ffffff;
}