/* ==========================================================================
   Widget — Image Tiles (Link Grid)
   Figma node 25:171. Six photographic link tiles, 3 x 2 at 1920, edge to edge
   with no gap. Mobile-first: one column, two from 768px, three from 1025px.

   The column count, gap, tile shape, scrim and title size are all driven by
   custom properties so the Elementor controls can set them per breakpoint
   without this file knowing about them.
   ========================================================================== */

.o-tiles {
	/*
	 * Fallbacks only. Elementor writes --o-tiles-cols per breakpoint from the
	 * "Columns" control, and --o-tile-ratio is set inline by the widget.
	 */
	--o-tiles-cols: 1;
	--o-tile-ratio: 1.6;

	display: grid;
	grid-template-columns: repeat(var(--o-tiles-cols), minmax(0, 1fr));
	gap: 0;
}

@media (min-width: 768px) {
	.o-tiles {
		--o-tiles-cols: 2;
	}
}

@media (min-width: 1025px) {
	.o-tiles {
		--o-tiles-cols: 3;
	}
}

/* --------------------------------------------------------------------------
   The tile
   Rendered as <a> when it has a link and <div> when it does not, so both need
   the same box. Navy underneath means a tile with no photograph yet still
   reads as a tile rather than a hole in the grid.
   -------------------------------------------------------------------------- */
.o-tile {
	--o-tile-scrim: #000000;
	--o-tile-scrim-opacity: 0.45;
	--o-tile-scrim-opacity-hover: 0.6;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: var(--o-tile-ratio);
	background-color: var(--o-navy);
	color: var(--o-white);
	text-decoration: none;
}

.o-tile:hover {
	color: var(--o-white);
}

/*
 * Tiles butt together, so an outline drawn outside the box would be clipped by
 * the neighbour. Pull it inside instead, and drop the global corner radius.
 */
.o-tile:focus-visible {
	outline: 3px solid var(--o-focus);
	outline-offset: -3px;
	border-radius: 0;
}

.o-tile__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.o-tile__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--o-tile-scrim);
	opacity: var(--o-tile-scrim-opacity);
	pointer-events: none;
	transition: opacity var(--o-transition);
}

.o-tile:hover .o-tile__scrim,
.o-tile:focus-visible .o-tile__scrim {
	opacity: var(--o-tile-scrim-opacity-hover);
}

/* --------------------------------------------------------------------------
   Copy
   The comp pads 96px either side of a 640 tile. That is there to hold the
   title off the edge rather than to set a measure, so it is expressed as a
   proportion here and the title is free to use the room on a narrow tile.
   -------------------------------------------------------------------------- */
.o-tile__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: var(--o-space-lg) clamp(1.25rem, 8%, 6rem);
	text-align: center;
}

.o-tile__title {
	margin: 0;
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); /* 28 -> 48, per the comp */
	line-height: 1.07;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

/*
 * The whole tile is the link, so this is a span wearing the .o-textlink
 * treatment rather than an anchor of its own. Hover therefore has to come from
 * the tile, not from the element itself.
 */
.o-tile__cta {
	color: var(--o-white);
}

.o-tile:hover .o-tile__cta,
.o-tile:focus-visible .o-tile__cta {
	color: var(--o-accent);
}

.o-tile:hover .o-textlink__chevrons,
.o-tile:focus-visible .o-textlink__chevrons {
	transform: translateX(0.25em);
}

/* --------------------------------------------------------------------------
   Hover zoom
   -------------------------------------------------------------------------- */
.o-tiles--zoom .o-tile__img {
	transition: transform var(--o-transition-slow);
}

.o-tiles--zoom .o-tile:hover .o-tile__img,
.o-tiles--zoom .o-tile:focus-visible .o-tile__img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.o-tiles--zoom .o-tile__img {
		transition: none;
	}

	.o-tiles--zoom .o-tile:hover .o-tile__img,
	.o-tiles--zoom .o-tile:focus-visible .o-tile__img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Optional heading above the grid
   The section runs full bleed so the grid can reach the edges, which leaves
   the heading block with no gutter of its own.
   -------------------------------------------------------------------------- */
.o-section--image-tiles .o-section-heading {
	padding-inline: var(--o-gutter);
}