/* Website Project Showcase widget — page 1 opens with a hero row: the
   first project's own card (thumbnail + footer, same as every other
   card) at 2/3 width beside a 1/3 panel (subheading, heading, text, and
   a corner-bracket CTA button), then a row of 2, then a row of 3 (6
   projects). Every later page drops the hero and uses two rows of 2
   plus a row of 3 instead (7 projects). Each card's thumbnail fills the
   space edge-to-edge at a fixed 16:9 ratio (object-fit: cover — no inset
   background/padding), then a footer (client logo/name, flag/location,
   hover-underlined title, tag pills), an optional badge, and a
   bottom-right page changer that cross-fades between pages. Headings
   (card titles, hero heading) use Anton; everything else uses Poppins. */

.aiol-wps-wrap {
	--aiol-wps-gap: 24px;
	--aiol-wps-fade: 250ms;

	position: relative;
}

.aiol-wps-pages {
	position: relative;
}

.aiol-wps-page {
	display: flex;
	flex-direction: column;
	gap: var(--aiol-wps-gap);
	opacity: 1;
	transition: opacity var(--aiol-wps-fade) ease;
}

.aiol-wps-page[hidden] {
	display: none;
}

.aiol-wps-page.is-fading {
	opacity: 0;
}

/* ---------- Row structure ---------- */
.aiol-wps {
	display: grid;
	gap: var(--aiol-wps-gap);
}

.aiol-wps__row--hero {
	grid-template-columns: 2fr 1fr;
	align-items: stretch;
}

.aiol-wps__row--2 {
	grid-template-columns: repeat( 2, 1fr );
}

.aiol-wps__row--3 {
	grid-template-columns: repeat( 3, 1fr );
}

@media ( max-width: 1024px ) {
	.aiol-wps__row--3 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 900px ) {
	.aiol-wps__row--hero {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 640px ) {
	.aiol-wps__row--2,
	.aiol-wps__row--3 {
		grid-template-columns: 1fr;
	}
}

.aiol-wps__card {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
}

/* ---------- Thumbnail — the screenshot fills the box completely at a
   fixed aspect ratio; the background color only ever shows through as a
   placeholder when no image is uploaded. ---------- */
.aiol-wps__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	max-height: 280px;
	overflow: hidden;
	background-color: #F1EFFB;
}

/* ---------- Hero row (page 1) ---------- */
.aiol-wps__row--hero .aiol-wps__card {
	height: 100%;
}

.aiol-wps__hero-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
}

.aiol-wps__hero-subheading {
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #8a8a8a;
}

.aiol-wps__hero-heading {
	margin: 0;
	font-family: 'Anton', sans-serif;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.2;
	color: #141515;
}

.aiol-wps__hero-desc {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #5c5c5c;
}

/* ---------- CTA button — corner brackets that extend slightly outward
   on hover, plus a small solid square (its layout space always
   reserved, so the button never changes width) that's invisible by
   default and, on hover, repeatedly grows from zero to full size then
   instantly resets back to zero — a sawtooth, never shrinking back down
   — just left of the text (matches the original boyc-theme "Project
   Details" button). ---------- */
.aiol-wps__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	padding: 16px 30px;
	text-decoration: none;
	color: #141515;
}

.aiol-wps__cta-text {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.aiol-wps__cta-corner {
	position: absolute;
	width: 16px;
	height: 16px;
	border: 0 solid #141515;
	transition: width 0.6s ease, height 0.6s ease;
}

.aiol-wps__cta-corner--tl {
	top: 0;
	left: 0;
	border-top-width: 2px;
	border-left-width: 2px;
}

.aiol-wps__cta-corner--tr {
	top: 0;
	right: 0;
	border-top-width: 2px;
	border-right-width: 2px;
}

.aiol-wps__cta-corner--bl {
	bottom: 0;
	left: 0;
	border-bottom-width: 2px;
	border-left-width: 2px;
}

.aiol-wps__cta-corner--br {
	bottom: 0;
	right: 0;
	border-bottom-width: 2px;
	border-right-width: 2px;
}

.aiol-wps__cta:hover .aiol-wps__cta-corner {
	width: 20px;
	height: 20px;
}

/* Its layout space (width + gap) is always reserved so the button never
   changes size — it's just invisible (scaled to nothing) until hover,
   then repeatedly grows from nothing up to full size — each loop resets
   straight back to zero instead of shrinking back down — for as long as
   the button is hovered. */
.aiol-wps__cta-icon {
	display: inline-block;
	width: 4px;
	height: 4px;
	background-color: currentColor;
	flex-shrink: 0;
	transform: scale( 0 );
}

.aiol-wps__cta:hover .aiol-wps__cta-icon {
	animation: aiol-wps-cta-grow 2.2s ease-out infinite;
}

@keyframes aiol-wps-cta-grow {
	0% {
		transform: scale( 0 );
	}
	100% {
		transform: scale( 1 );
	}
}

.aiol-wps__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aiol-wps__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background-color: #141515;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	line-height: 1;
}

/* ---------- Footer ---------- */
.aiol-wps__footer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 24px 28px;
	background-color: #FAFAFA;
	flex-grow: 1;
}

.aiol-wps__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.aiol-wps__logo {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
}

.aiol-wps__client {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #141515;
}

.aiol-wps__divider {
	color: #8a8a8a;
	font-size: 13px;
}

.aiol-wps__flag {
	font-size: 14px;
	line-height: 1;
}

.aiol-wps__location {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: #8a8a8a;
}

.aiol-wps__title {
	margin: 0;
	font-family: 'Anton', sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	color: #141515;
	text-decoration-line: none;
	text-decoration-color: #141515;
	text-underline-offset: 4px;
	transition: text-decoration-line 0.2s ease;
}

.aiol-wps__card:hover .aiol-wps__title {
	text-decoration-line: underline;
}

.aiol-wps__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.aiol-wps__tag {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	background-color: #EDEDED;
	color: #5c5c5c;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

/* ---------- Page changer ---------- */
.aiol-wps__pager {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
}

.aiol-wps__pager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background-color: #EDEDED;
	color: #5c5c5c;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.aiol-wps__pager-btn:hover {
	background-color: #d8d8d8;
}

.aiol-wps__pager-btn.is-active {
	background-color: #141515;
	color: #ffffff;
}

@media ( max-width: 600px ) {
	.aiol-wps__thumb {
		max-height: 200px;
	}

	.aiol-wps__footer {
		padding: 20px 20px 24px;
	}

	.aiol-wps__title {
		font-size: 19px;
	}

	.aiol-wps__hero-heading {
		font-size: 22px;
	}
}