/**
 * Car photo gallery on the single-car template: one large photograph over a
 * strip of thumbnails. The fullscreen layer is car-lightbox.css.
 */

@layer components {
	.hauto-car-gallery {
		margin-block-start: var(--wp--preset--spacing--50);
	}

	.hauto-car-gallery__hero {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--surface-strong);
		aspect-ratio: 4 / 3;

		& img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.hauto-car-gallery__count {
		position: absolute;
		inset-block-end: var(--wp--preset--spacing--30);
		inset-inline-end: var(--wp--preset--spacing--30);
		display: inline-flex;
		gap: var(--wp--preset--spacing--10);
		align-items: center;
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
		border-radius: var(--hauto-radius-pill);
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--contrast) 72%,
			transparent
		);
		color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-car-gallery__strip {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: var(--wp--preset--spacing--20);
		margin: var(--wp--preset--spacing--20) 0 0;
		padding: 0;
		list-style: none;
	}

	/* The strip stops at five; the fifth carries the "+N" overlay onto the rest,
	   and car-gallery.php counts on the same number. */
	.hauto-car-gallery__item:nth-child(n + 6) {
		display: none;
	}

	.hauto-car-gallery__link {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--surface-strong);
		aspect-ratio: 4 / 3;

		& img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.hauto-car-gallery__more {
		position: absolute;
		inset: 0;
		display: grid;
		place-content: center;
		padding: var(--wp--preset--spacing--10);
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--contrast) 60%,
			transparent
		);
		color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		text-align: center;
	}
}