/* Artmark Photo Mosaic widget — a heading over a grid of photos of mixed
   sizes, with a notched gradient quote band underneath.

   Namespaced .am-mosaic.

   Layout note: the mosaic is a plain CSS grid of equal row units. Each photo
   declares how many columns and rows it covers, and normal (sparse) auto
   placement drops the rest into the gaps — no masonry library, no measuring.
   The design's arrangement is 1x1, 1x2, 1x2, 1x2, 1x3, 2x2, 1x2, which fills
   four columns of four rows exactly. */

.am-mosaic {
	width: 100%;
	background-color: #ffffff;
}

.am-mosaic__inner {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

/* Head ------------------------------------------------------------- */

.am-mosaic__head {
	margin-bottom: 34px;
}

.am-mosaic__title {
	margin: 0;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #0b1016;
}

/* Grid ------------------------------------------------------------- */

/* Row height: artmark-mosaic.js sets --am-mo-rowauto from the measured
   column width (Row Height > Scales with the photo width), so photos keep
   the same shape on a 3440px monitor as on a laptop. Fixed mode leaves it
   unset and the --am-mo-row control value applies. */
.am-mosaic__grid {
	display: grid;
	grid-template-columns: repeat(var(--am-mo-cols, 4), minmax(0, 1fr));
	grid-auto-rows: var(--am-mo-rowauto, var(--am-mo-row, 169px));
	column-gap: var(--am-mo-gap, 16px);
	row-gap: var(--am-mo-rowgap, 16px);
}

.am-mosaic__item {
	position: relative;
	grid-column: span 1;
	grid-row: span var(--rspan, 1);
	min-width: 0;
	overflow: hidden;
	background-color: #eef1f4;
	color: inherit;
	text-decoration: none;
}

/* Column spans are classes rather than a custom property so the narrower
   breakpoints below can clamp them — `span min()` is not valid in grid. */
.am-mosaic__item--c2 {
	grid-column: span 2;
}

.am-mosaic__item--c3 {
	grid-column: span 3;
}

.am-mosaic__item--c4 {
	grid-column: span 4;
}

.am-mosaic__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--am-mo-focal, center center);
	transition: transform var(--am-mo-zoomdur, 0.6s) ease;
}

.am-mosaic__item:hover img {
	transform: scale(var(--am-mo-zoom, 1));
}

/* Linked tiles: themes repaint links on hover/focus/active and a pseudo-class
   selector beats a bare class, so every state is neutralised here. */
a.am-mosaic__item,
a.am-mosaic__item:hover,
a.am-mosaic__item:focus,
a.am-mosaic__item:focus-visible,
a.am-mosaic__item:active {
	background-image: none;
	border: 0;
	box-shadow: none;
	outline: 0;
	color: inherit;
	text-decoration: none;
	transform: none;
}

a.am-mosaic__item:focus-visible {
	outline: 2px solid var(--am-mo-focus, #0080b8);
	outline-offset: 2px;
}

/* Quote band ------------------------------------------------------- */

.am-mosaic__band {
	--am-mo-bn-tr: 40px;
	--am-mo-bn-bl: 40px;
	position: relative;
	margin-top: var(--am-mo-bandtop, 42px);
	padding: 40px;
	overflow: hidden;
	background-color: var(--am-mo-band-a, #4aa3e8);
	background-image: linear-gradient(
		var(--am-mo-band-angle, 100deg),
		var(--am-mo-band-a, #4aa3e8),
		var(--am-mo-band-b, #1668c9)
	);
	clip-path: polygon(
		0 0,
		calc(100% - var(--am-mo-bn-tr)) 0,
		100% var(--am-mo-bn-tr),
		100% 100%,
		var(--am-mo-bn-bl) 100%,
		0 calc(100% - var(--am-mo-bn-bl))
	);
}

.am-mosaic__band-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--am-mo-band-imgop, 1);
	pointer-events: none;
}

.am-mosaic__quote {
	position: relative;
	z-index: 2;
	max-width: var(--am-mo-quotew, 1060px);
	margin: 0 auto;
	text-align: center;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: #ffffff;
}

/* Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
	.am-mosaic__grid {
		--am-mo-cols: 2;
	}

	/* Nothing can span more columns than the grid has. */
	.am-mosaic__item--c3,
	.am-mosaic__item--c4 {
		grid-column: span 2;
	}

	.am-mosaic__title {
		font-size: 32px;
	}

	.am-mosaic__quote {
		font-size: 19px;
	}
}

@media (max-width: 767px) {
	.am-mosaic__grid {
		--am-mo-cols: 1;
	}

	/* One column: the mixed sizes have nowhere to go, so every photo takes a
	   single full-width cell of the same height. */
	.am-mosaic__item,
	.am-mosaic__item--c2,
	.am-mosaic__item--c3,
	.am-mosaic__item--c4 {
		grid-column: span 1;
		grid-row: span 1;
	}

	.am-mosaic__title {
		font-size: 26px;
	}

	.am-mosaic__band {
		--am-mo-bn-tr: 24px;
		--am-mo-bn-bl: 24px;
		padding: 28px 22px;
	}

	.am-mosaic__quote {
		font-size: 17px;
	}
}