/* ==========================================================================
   Turbo Reman Center: home page
   ========================================================================== */

/* Hero -------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	/* The whole first screen under the header, on any laptop or monitor (560px floor, 1200px ceiling). */
	min-height: max(560px, min(calc(100svh - var(--header-top) - var(--header-nav)), 1200px));
	overflow: hidden;
	background: #0d0d0d;
	color: var(--c-white);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/* The still of the film's first frame, then the film over it: it fades in once it plays (site.js), so the
   change from still to motion is seamless. Without the script only the still shows. */
.hero__poster,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero__video {
	opacity: 0;
	transition: opacity 0.6s var(--ease-out);
}

.hero__video.is-playing {
	opacity: 1;
}

/* Without the upright cut, phones crop the 16:9 still: the new cartridge on the red tray sits left of centre. */
@media (max-width: 1023px) {
	.hero:not(.hero--portrait-cut) .hero__poster {
		object-position: 40% center;
	}
}

/* Phones held upright: the 4:5 cut of the film fills the top of the hero and fades into the black the text
   sits on; the text follows under it, overlapping only the fade. The call button must be on the first screen
   of every phone (owner's call), so the film window is as tall as the screen leaves room for: the whole cut
   on tall screens, lower on shorter ones, where the shots lose their top first (least happens up there).
   --hero-below is the text down to the call button's bottom, less the overlap, plus a margin above the
   browser's own bar; 100svh is the screen with the browser bars shown, as a page opens. */
@media (max-width: 767px) and (orientation: portrait) {
	.hero--portrait-cut {
		--hero-overlap: 80px;
		--hero-below: 286px;
		display: block;
		min-height: 0;
	}

	.hero--portrait-cut .hero__media {
		position: relative;
		inset: auto;
		z-index: 0;
		height: clamp(200px, calc(100vh - var(--header-top) - var(--hero-below)), 125vw);
		height: clamp(200px, calc(100svh - var(--header-top) - var(--hero-below)), 125vw);
	}

	.hero--portrait-cut .hero__poster,
	.hero--portrait-cut .hero__video {
		object-position: 50% 70%;
	}

	.hero--portrait-cut .hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(0deg, #0d0d0d 0, rgb(13 13 13 / 0.72) 72px, rgb(13 13 13 / 0) 160px),
			linear-gradient(180deg, rgb(13 13 13 / 0.18) 0%, rgb(13 13 13 / 0) 22%);
	}

	.hero--portrait-cut::after {
		content: none;
	}

	.hero--portrait-cut .hero__content {
		position: relative;
		z-index: 1;
		margin-top: calc(-1 * var(--hero-overlap));
		padding-block: 0 40px;
	}

	/* A tighter stack than on wide screens: badge, headline, lede and call button read as one group. */
	.hero--portrait-cut .hero__rating {
		margin-bottom: 14px;
	}

	.hero--portrait-cut .hero__lede {
		margin-top: 12px;
	}

	.hero--portrait-cut .hero__actions {
		gap: 10px;
		margin-top: 20px;
	}

	.hero--portrait-cut .hero__toggle {
		top: 12px;
		bottom: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__video {
		transition: none;
	}
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgb(8 8 8 / 0.9) 0%, rgb(8 8 8 / 0.72) 42%, rgb(8 8 8 / 0.3) 100%),
		linear-gradient(0deg, rgb(8 8 8 / 0.7) 0%, rgb(8 8 8 / 0) 45%);
}

/* The rating, headline, lede and buttons sit in the vertical middle of the screen, left-aligned. */
.hero__content {
	padding-block: clamp(56px, 9vh, 104px);
}

.hero__title {
	max-width: 16ch;
	color: var(--c-white);
	font-size: clamp(3rem, 1.6rem + 5.6vw, 5.75rem);
	font-weight: 600;
	line-height: 0.94;
	letter-spacing: -0.01em;
}

.hero__lede {
	max-width: 44ch;
	margin-top: 22px;
	color: rgb(255 255 255 / 0.88);
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
	line-height: 1.5;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

.hero__toggle {
	position: absolute;
	right: var(--gutter);
	bottom: 24px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.4);
	border-radius: 50%;
	background: rgb(10 10 10 / 0.45);
	color: var(--c-white);
	transition: background-color 0.15s ease, transform 0.16s var(--ease-out);
}

.hero__toggle .icon {
	width: 18px;
	height: 18px;
}

.hero__toggle-play,
.hero__toggle[aria-pressed="true"] .hero__toggle-pause {
	display: none;
}

.hero__toggle[aria-pressed="true"] .hero__toggle-play {
	display: block;
}

.hero__toggle:active {
	transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
	.hero__toggle:hover {
		background: rgb(10 10 10 / 0.75);
	}
}

/* Google rating badge above the headline. The G sits on a white disc, the way Google shows its mark on dark. */
.hero__rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(18px, 2.4vh, 26px);
	padding: 6px 18px 6px 6px;
	border: 1px solid rgb(255 255 255 / 0.22);
	border-radius: var(--radius-pill);
	background: rgb(10 10 10 / 0.5);
	color: var(--c-white);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hero__rating-g {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--c-white);
}

.hero__rating strong {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
}

.hero__rating .stars .icon {
	width: 16px;
	height: 16px;
}

.hero__rating-count {
	color: rgb(255 255 255 / 0.86);
}

@media (hover: hover) and (pointer: fine) {
	.hero__rating:hover {
		border-color: rgb(255 255 255 / 0.42);
		background: rgb(10 10 10 / 0.72);
		color: var(--c-white);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero__rating,
	.hero__title,
	.hero__lede,
	.hero__actions {
		animation: trc-rise 0.7s var(--ease-out) both;
	}

	.hero__title {
		animation-delay: 0.07s;
	}

	.hero__lede {
		animation-delay: 0.14s;
	}

	.hero__actions {
		animation-delay: 0.21s;
	}
}

@keyframes trc-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@media (max-width: 639px) {
	.hero__actions .btn {
		width: 100%;
	}
}

/* Social: follower counts + Facebook reels --------------------------------- */

.social {
	padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 112px);
	border-top: 1px solid var(--c-dark-3);
	background: var(--c-dark);
	color: var(--c-on-dark-muted);
}

.social__head {
	display: grid;
	gap: 24px 48px;
	margin-bottom: clamp(28px, 4vw, 44px);
}

.social__title {
	color: var(--c-white);
	font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
}

.social__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
}

.social-stat {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 14px 18px 14px 14px;
	border: 1px solid var(--c-dark-3);
	border-radius: var(--radius-lg);
	background: var(--c-dark-2);
	color: var(--c-white);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.16s var(--ease-out);
}

.social-stat:active {
	transform: scale(0.98);
}

.social-stat__logo {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--c-white);
}

.social-stat__logo .icon {
	width: 36px;
	height: 36px;
}

.social-stat__text {
	display: grid;
	min-width: 0;
}

.social-stat__num {
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.social-stat__label {
	margin-top: 4px;
	color: var(--c-on-dark-muted);
	font-size: 0.875rem;
	line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
	.social-stat:hover {
		border-color: var(--c-red);
		color: var(--c-white);
	}

}

@media (max-width: 639px) {
	.social-stat {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 14px;
	}

	.social-stat__logo {
		width: 34px;
		height: 34px;
	}

	.social-stat__logo .icon {
		width: 30px;
		height: 30px;
	}
}

@media (min-width: 1024px) {
	.social__head {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: end;
	}

	.social__stats {
		justify-self: end;
		width: min(100%, 820px);
	}

	.social-stat {
		gap: 16px;
		padding: 16px 20px 16px 16px;
	}

	.social-stat__logo {
		width: 52px;
		height: 52px;
	}

	.social-stat__logo .icon {
		width: 44px;
		height: 44px;
	}
}

/* Reels strip: a row of "slots" (1 phone, 2 tablet, 4 desktop). Reels outside the slots wait in a
   queue: site.js shrinks and fades them by distance, so the next ones read as "scroll for more". */
.strip {
	position: relative;
}

.strip__list {
	--strip-inset: max(var(--gutter), calc((100% - var(--container)) / 2));
	--strip-gap: 12px;
	--strip-slots: 1;
	display: grid;
	grid-auto-columns: calc(100vw - 2 * var(--gutter) - 36px);
	grid-auto-flow: column;
	gap: var(--strip-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 4px var(--strip-inset) 12px;
	scroll-padding-inline: var(--strip-inset);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}

.strip__list::-webkit-scrollbar {
	display: none;
}

@media (min-width: 640px) {
	.strip__list {
		--strip-slots: 2;
		grid-auto-columns: calc((100vw - 2 * var(--gutter) - var(--strip-gap) - 72px) / 2);
	}
}

@media (min-width: 1024px) {
	.strip__list {
		--strip-gap: 16px;
	}

	.strip--reels .strip__list {
		--strip-slots: 4;
		grid-auto-columns: calc((min(100vw, var(--container) + 2 * var(--gutter)) - 2 * var(--gutter) - 3 * var(--strip-gap)) / 4);
	}
}

.strip__item {
	scroll-snap-align: start;
	transform-origin: left center;
}

.strip__item.is-queued {
	cursor: pointer;
}

.strip__arrow {
	position: absolute;
	top: calc(50% - 22px);
	z-index: 2;
	display: none;
	place-items: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-red);
	color: var(--c-white);
	box-shadow: 0 0 0 6px rgb(229 39 39 / 0.18), 0 12px 28px -8px rgb(0 0 0 / 0.7);
	transform: translateY(-50%);
	transition: opacity 0.2s ease, transform 0.16s var(--ease-out), background-color 0.15s ease;
}

.strip__arrow .icon {
	width: 24px;
	height: 24px;
}

.strip__arrow--prev {
	left: max(12px, calc((100% - var(--container)) / 2 - 30px));
}

.strip__arrow--prev .icon {
	transform: rotate(180deg);
}

.strip__arrow--next {
	right: max(12px, calc((100% - var(--container)) / 2 - 30px));
}

.strip__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.strip__arrow:active {
	transform: translateY(-50%) scale(0.94);
}

@media (min-width: 768px) {
	.strip__arrow {
		display: grid;
	}
}

@media (hover: hover) and (pointer: fine) {
	.strip__arrow:hover {
		background: var(--c-red-600);
	}
}

.strip__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
	padding-inline: var(--gutter);
}

.strip__dot {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgb(229 39 39 / 0.35);
	transition: width 0.25s var(--ease-out), background-color 0.2s ease;
}

/* 10px dots, 44px tap targets. */
.strip__dot::before {
	content: "";
	position: absolute;
	inset: -17px -6px;
}

.strip__dot[aria-current="true"] {
	width: 32px;
	background: var(--c-red-on-dark);
}

@media (hover: hover) and (pointer: fine) {
	.strip__dot:not([aria-current="true"]):hover {
		background: rgb(229 39 39 / 0.7);
	}
}

.reel {
	position: relative;
	isolation: isolate;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--c-dark-2);
	color: var(--c-white);
	text-decoration: none;
	transition: transform 0.16s var(--ease-out);
}

.reel:active {
	transform: scale(0.98);
}

.reel__poster {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}

.reel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgb(8 8 8 / 0.72) 0%, rgb(8 8 8 / 0) 38%);
}

.reel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgb(229 39 39 / 0.94);
	box-shadow: 0 12px 24px -10px rgb(0 0 0 / 0.6);
	transform: translate(-50%, -50%);
	transition: transform 0.25s var(--ease-out), background-color 0.15s ease;
}

.reel__play .icon {
	width: 24px;
	height: 24px;
	margin-left: 3px;
}

.reel__meta {
	position: absolute;
	right: 16px;
	bottom: 14px;
	left: 16px;
}

.reel__views {
	font-size: 0.9375rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.reel--more {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--c-dark-3);
	text-align: center;
}

.reel--more::after {
	display: none;
}

.reel__fb {
	width: 48px !important;
	height: 48px !important;
	color: var(--c-white);
}

.reel__more-title {
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.05;
	text-wrap: balance;
}

.reel__more-cta {
	color: var(--c-on-dark);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--c-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

@media (hover: hover) and (pointer: fine) {
	.reel:hover {
		color: var(--c-white);
	}

	.reel:hover .reel__poster {
		transform: scale(1.04);
	}

	.reel:hover .reel__play {
		background: var(--c-red-600);
		transform: translate(-50%, -50%) scale(1.06);
	}

	.reel--more:hover {
		border-color: var(--c-red);
	}
}

/* Reel player dialog: Facebook's official embedded player, loaded on demand. */
.reel-modal {
	width: min(92vw, calc(min(84dvh, 760px) * 9 / 16));
	max-width: none;
	max-height: none;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	transition:
		opacity 0.22s var(--ease-out),
		transform 0.22s var(--ease-out),
		overlay 0.22s allow-discrete,
		display 0.22s allow-discrete;
}

.reel-modal[open] {
	opacity: 1;
	transform: scale(1);
}

@starting-style {
	.reel-modal[open] {
		opacity: 0;
		transform: scale(0.96);
	}
}

.reel-modal::backdrop {
	background: rgb(6 6 6 / 0);
	transition:
		background-color 0.22s ease,
		overlay 0.22s allow-discrete,
		display 0.22s allow-discrete;
}

.reel-modal[open]::backdrop {
	background: rgb(6 6 6 / 0.86);
}

@starting-style {
	.reel-modal[open]::backdrop {
		background: rgb(6 6 6 / 0);
	}
}

.reel-modal__frame {
	aspect-ratio: 9 / 16;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: #000;
}

.reel-modal__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.reel-modal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 12px;
}

.reel-modal__link {
	color: var(--c-white);
	font-weight: 500;
	text-decoration-color: var(--c-red);
	text-decoration-thickness: 2px;
}

/* Categories: four studio tiles straight after the hero ------------------ */

.categories {
	padding-block: clamp(48px, 6vw, 88px) var(--space-section);
}

.categories__title {
	margin-bottom: clamp(20px, 3vw, 32px);
}

.categories__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
}

@media (min-width: 1024px) {
	.categories__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
}

.categories__grid > li {
	display: flex;
}

/* The tile is a photo booth: the grey studio backdrop of the shop's product shots, lit from above. */
.cat-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: radial-gradient(120% 85% at 50% 36%, #4a4a47 0%, #383836 48%, #292927 100%);
	color: var(--c-white);
	text-decoration: none;
	transition: transform 0.16s var(--ease-out);
}

.cat-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(70% 55% at 50% 38%, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.cat-card:active {
	transform: scale(0.985);
}

.cat-card__stage {
	display: grid;
	flex: 1;
	place-items: center;
	aspect-ratio: 1 / 1;
	padding: 7% 6% 2%;
}

.cat-card__img {
	width: var(--img-w, 70%);
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 18px rgb(0 0 0 / 0.42));
	transition: transform 0.3s var(--ease-out);
}

.cat-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 0 20px 20px;
}

.cat-card__title {
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: clamp(1.1875rem, 0.95rem + 0.85vw, 1.75rem);
	font-weight: 600;
	line-height: 1.05;
	text-wrap: balance;
}

.cat-card__go {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-red);
	color: var(--c-white);
	transition: background-color 0.15s ease;
}

.cat-card__go .icon {
	width: 20px;
	height: 20px;
	transition: transform 0.25s var(--ease-out);
}

@media (max-width: 639px) {
	.cat-card__foot {
		padding: 0 14px 14px;
		gap: 8px;
	}

	.cat-card__go {
		width: 34px;
		height: 34px;
	}

	.cat-card__go .icon {
		width: 16px;
		height: 16px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.cat-card:hover {
		color: var(--c-white);
	}

	.cat-card:hover::before {
		opacity: 1;
	}

	.cat-card:hover .cat-card__img {
		transform: translateY(-6px) scale(1.04);
	}

	.cat-card:hover .cat-card__go {
		background: var(--c-red-600);
	}

	.cat-card:hover .cat-card__go .icon {
		transform: translateX(2px);
	}
}

/* Promises ---------------------------------------------------------------- */

.promises {
	border-block: 1px solid var(--c-line);
	background: var(--c-surface);
}

.promises__list {
	display: grid;
	list-style: none;
}

.promise {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 28px 0;
}

.promise + .promise {
	border-top: 1px solid var(--c-line);
}

.promise__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-red);
	box-shadow: inset 0 0 0 1px var(--c-line);
}

.promise__icon .icon {
	width: 24px;
	height: 24px;
}

.promise__title {
	display: block;
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.4375rem;
	font-weight: 600;
	line-height: 1.15;
}

.promise__text {
	display: block;
	margin-top: 4px;
	color: var(--c-muted);
}

a.promise__text {
	display: inline-block;
	color: var(--c-red-600);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.promise__note {
	display: block;
	margin-top: 2px;
	color: var(--c-muted);
	font-size: 0.9375rem;
	text-wrap: pretty;
}

@media (min-width: 900px) {
	.promises__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.promise {
		padding: 36px 32px;
	}

	.promise:first-child {
		padding-left: 0;
	}

	.promise + .promise {
		border-top: 0;
		border-left: 1px solid var(--c-line);
	}
}

/* Google reviews ------------------------------------------------------------ */

.greviews {
	padding-block: clamp(56px, 7vw, 104px);
	background: var(--c-surface);
}

.greviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 32px;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.greviews__title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.25rem);
}

.greviews__title .google-g {
	flex: none;
	width: clamp(32px, 2rem + 1vw, 44px);
	height: auto;
}

.greviews__score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-top: 12px;
}

.greviews__rating {
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
}

.greviews__stars .icon {
	width: 24px;
	height: 24px;
}

.greviews__count {
	color: var(--c-text);
	font-weight: 500;
}

.greviews__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

@media (max-width: 559px) {
	.greviews__actions {
		width: 100%;
	}

	.greviews__actions .btn {
		flex: 1 1 0;
		padding-inline: 1em;
	}
}

.greviews__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	list-style: none;
}

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

@media (min-width: 1024px) {
	.greviews__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

/* A card spans three rows of the grid (who, words, media), so the photos of a row line up. */
.gcard {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	gap: 14px;
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--shadow-1);
}

.gcard__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.gcard__head .google-g {
	align-self: start;
}

.gcard__avatar {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-line);
	object-fit: cover;
}

.gcard__avatar--initial {
	background: var(--c-ink);
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
}

.gcard__who {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.gcard__name {
	overflow: hidden;
	color: var(--c-ink);
	font-weight: 600;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gcard__stars .icon {
	width: 16px;
	height: 16px;
}

.gcard__text {
	color: var(--c-ink);
	font-size: 1rem;
	line-height: 1.55;
}

/* Media laid out the way Google does: one fills the box, two side by side, three as one tall and two
   stacked, four in a 2 x 2 grid; more than four shows "+N" on the last tile. */
.gcard__media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	align-self: end;
	gap: 3px;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--c-surface);
}

.gcard__media--1 .gcard__tile {
	grid-area: 1 / 1 / -1 / -1;
}

.gcard__media--2 .gcard__tile,
.gcard__media--3 .gcard__tile:first-child {
	grid-row: 1 / -1;
}

.gcard__tile {
	position: relative;
	display: block;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--c-line);
	color: var(--c-white);
	text-decoration: none;
	cursor: zoom-in;
}

.gcard__tile[hidden] {
	display: none;
}

.gcard__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}

.gcard__tile:focus-visible {
	outline-offset: -3px;
}

.gcard__tile--video {
	cursor: pointer;
}

.gcard__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgb(229 39 39 / 0.94);
	box-shadow: 0 12px 24px -10px rgb(0 0 0 / 0.6);
	transform: translate(-50%, -50%);
	transition: transform 0.25s var(--ease-out), background-color 0.15s ease;
}

.gcard__play .icon {
	width: 24px;
	height: 24px;
	margin-left: 3px;
}

.gcard__duration {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	background: rgb(10 10 10 / 0.72);
	font-size: 0.8125rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.gcard__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgb(10 10 10 / 0.52);
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
	.gcard__tile:hover {
		color: var(--c-white);
	}

	.gcard__tile:hover img {
		transform: scale(1.05);
	}

	.gcard__tile--video:hover .gcard__play {
		background: var(--c-red-600);
		transform: translate(-50%, -50%) scale(1.06);
	}
}