/* ==========================================================================
   Page: Projects
   Loaded after the homepage sheet (pages/home.css), whose logo strip and
   reviews the page reuses. The hero and closing panel are shared components
   (components.css: .page-hero, .cta-panel).
   ========================================================================== */


/* ==========================================================================
   Grid of project cards
   ========================================================================== */

.projects__grid {
	display: grid;
	gap: var(--space-5);
}

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

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

.project-card {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--white);
	transition: box-shadow var(--dur-3) ease, border-color var(--dur-3) ease;
}

.project-card:hover {
	border-color: var(--green-200);
	box-shadow: var(--shadow-md);
}

/* --- Photos: a one-photo-wide carousel ----------------------------------- */

.project-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--plate);
}

.project-card__photos {
	height: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	container-type: inline-size;
}

.project-card__photos::-webkit-scrollbar {
	display: none;
}

.project-card__photos:focus-visible {
	box-shadow: inset 0 0 0 3px var(--green-500);
	outline: none;
}

.project-card__photos .carousel__track {
	height: 100%;
	gap: 0;
	padding: 0;
}

.project-card__photo {
	flex: 0 0 100cqw;
	height: 100%;
	scroll-snap-align: start;
}

.project-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Arrows over the photo; the carousel hides them when there is one photo. */
.project-card__nav {
	position: absolute;
	right: 0.75rem;
	bottom: 1.1rem;
	gap: 0.4rem;
}

.project-card__nav .icon-btn {
	width: 38px;
	height: 38px;
	background: rgb(255 255 255 / 0.92);
	box-shadow: var(--shadow-sm);
}

.project-card__nav .icon-btn:disabled {
	opacity: 0.45;
}

.project-card__count {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3rem 0.65rem;
	border-radius: var(--radius-pill);
	background: rgb(15 26 18 / 0.62);
	color: var(--white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.project-card__progress {
	position: absolute;
	left: 0.75rem;
	bottom: 0.6rem;
	width: calc(100% - 7.5rem);
	max-width: none;
	background: rgb(255 255 255 / 0.55);
}

/* --- Words ---------------------------------------------------------------- */

.project-card__body {
	display: grid;
	align-content: start;
	gap: 0.6rem;
	padding: 1.25rem 1.35rem 1.5rem;
}

.project-card__title {
	color: var(--ink-900);
	font-size: 1.1875rem;
	font-weight: var(--fw-heavy);
	letter-spacing: -0.018em;
	line-height: 1.3;
}

.project-card__text {
	display: grid;
	gap: 0.6em;
	color: var(--ink-500);
	font-size: var(--fs-sm);
	line-height: 1.6;
}


/* ==========================================================================
   The reused logo strip has no top padding (it follows a white section on
   the homepage). Straight after the hero, it needs its own.
   ========================================================================== */

.page-hero + .clients {
	padding-top: var(--section-y);
}