/*
 * SECTION STYLE: SELECTED WORK.
 *
 * The warm brown band of the home page (plan v2, Home "Our work").
 * The yellow label, the project cards in two columns (1064 px, the
 * column left of the sticky panel) and the client logo on the cover.
 */

.aitio-front-section--selected_work {
	background: var(--aitio-brown);
	color: var(--aitio-white);
}

/* The band: 155 px above the label, 124 px under the cards (1440). */
.aitio-work-band {
	background: var(--aitio-brown);
	color: var(--aitio-white);
	padding: clamp(56px, 10.76vw, 155px) 0 clamp(40px, 8.6vw, 124px);
}

/* ---- the yellow label --------------------------------------------- */

.aitio-work-band__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 63px;
}

.aitio-work-band__label {
	display: inline-block;
	padding: 4px 6px;
	background: var(--aitio-yellow);
	color: var(--aitio-black);
	font-size: 15.6px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
}

/* ---- the cards ----------------------------------------------------- */

.aitio-work-band__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 35px 25px;
	/* The column left of the sticky panel (plan v2, chapter 7). */
	max-width: var(--aitio-col-panel);
}

.aitio-work-card {
	display: flex;
	flex-direction: column;
}

.aitio-work-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.aitio-work-card__media {
	position: relative;
	aspect-ratio: 518.84 / 275.56;
	background: var(--aitio-cream-deep);
	overflow: hidden;
}

.aitio-work-card__image,
.aitio-work-card__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--aitio-ease);
}

.aitio-work-card__link:hover .aitio-work-card__image,
.aitio-work-card__link:hover .aitio-work-card__video {
	transform: scale(1.03);
}

.aitio-work-card__placeholder {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 20%, var(--aitio-yellow-soft), transparent 55%),
		var(--aitio-cream-deep);
}

/* The white client logo sits in the middle of the cover. */
.aitio-work-card__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 48%;
	max-height: 73%;
	width: auto;
	height: auto;
	object-fit: contain;
	pointer-events: none;
}

.aitio-work-card__title {
	margin: 18px 0 0;
	font-family: var(--aitio-font);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.03em;
	color: var(--aitio-white);
}

.aitio-work-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--aitio-white);
}

.aitio-work-card__client {
	font-weight: 500;
	letter-spacing: -0.03em;
}

/* The service names: smaller, dimmer and separated with a dot. */
.aitio-work-card__tag {
	position: relative;
	margin-left: 20px;
	padding-left: 20px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(249, 249, 249, 0.6);
}

.aitio-work-card__tag::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: rgba(249, 249, 249, 0.6);
}

@media (max-width: 1023px) {

	.aitio-work-band__grid {
		max-width: none;
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.aitio-work-card__title {
		font-size: 20px;
	}
}