/* Subsectors block — FE: .sub-sectors (component; section padding/bg = outer Group) */

.sub-sectors {
	color: var(--text-on-light);
	box-sizing: border-box;
}

.sub-sectors__inner {
	display: flex;
	flex-direction: column;
	gap: var(--default-gap);
	box-sizing: border-box;
}

.sub-sectors__title {
	margin: 0;
	color: var(--text-on-light);
}

/* Flat card list — grid placement via :nth-child(4n+…) repeats per quartet */
.sub-sectors__grids {
	display: grid;
	width: 100%;
	gap: var(--default-gap);
	grid-template-columns: minmax(0, 1fr);
	box-sizing: border-box;
}

.sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1) {
	aspect-ratio: 528 / 813;
}

.sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2) {
	aspect-ratio: 736 / 390.5;
}

.sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3),
.sub-sectors__grids > .sub-sectors__card:nth-child(4n) {
	aspect-ratio: 352 / 390.5;
}

.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1),
.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2),
.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3),
.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n) {
	aspect-ratio: 304 / 406;
}

.sub-sectors--layout-columns-2 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1),
.sub-sectors--layout-columns-2 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2),
.sub-sectors--layout-columns-2 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3),
.sub-sectors--layout-columns-2 .sub-sectors__grids > .sub-sectors__card:nth-child(4n) {
	aspect-ratio: 352 / 390.5;
	height: auto;
}

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

	.sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1) {
		grid-column: 1;
		aspect-ratio: 352 / 390.5;
	}

	.sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2) {
		grid-column: 2;
		aspect-ratio: 352 / 390.5;
	}

	.sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3) {
		grid-column: 1;
	}

	.sub-sectors__grids > .sub-sectors__card:nth-child(4n) {
		grid-column: 2;
	}

	.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1),
	.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2),
	.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3),
	.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n) {
		aspect-ratio: 304 / 406;
	}
}

@media (min-width: 1024px) {
	.sub-sectors__grids {
		max-width: 1296px;
	}

	.sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1),
	.sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2),
	.sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3),
	.sub-sectors__grids > .sub-sectors__card:nth-child(4n) {
		aspect-ratio: auto;
		align-self: stretch;
		min-height: 0;
	}

	/* Featured left (default when not featured-right / columns) */
	.sub-sectors--layout-featured-left .sub-sectors__grids,
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids {
		container-type: inline-size;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr);
		grid-auto-rows: minmax(calc(min(1296px, 100cqw) * 813 / 1296 / 2), 1fr);
	}

	.sub-sectors--layout-featured-left .sub-sectors__grids:has(> .sub-sectors__card:nth-child(4):last-child),
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids:has(> .sub-sectors__card:nth-child(4):last-child) {
		aspect-ratio: 1296 / 813;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-auto-rows: unset;
	}

	.sub-sectors--layout-featured-left .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1),
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids
		> .sub-sectors__card:nth-child(4n + 1) {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.sub-sectors--layout-featured-left .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2),
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids
		> .sub-sectors__card:nth-child(4n + 2) {
		grid-column: 2 / span 2;
		grid-row: 1;
	}

	.sub-sectors--layout-featured-left .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3),
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids
		> .sub-sectors__card:nth-child(4n + 3) {
		grid-column: 2;
		grid-row: 2;
	}

	.sub-sectors--layout-featured-left .sub-sectors__grids > .sub-sectors__card:nth-child(4n),
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids
		> .sub-sectors__card:nth-child(4n) {
		grid-column: 3;
		grid-row: 2;
	}

	/* Second quartet (items 5–8) — explicit rows so bands repeat */
	.sub-sectors--layout-featured-left .sub-sectors__grids > .sub-sectors__card:nth-child(8n + 5),
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids
		> .sub-sectors__card:nth-child(8n + 5) {
		grid-row: 3 / span 2;
	}

	.sub-sectors--layout-featured-left .sub-sectors__grids > .sub-sectors__card:nth-child(8n + 6),
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids
		> .sub-sectors__card:nth-child(8n + 6) {
		grid-row: 3;
	}

	.sub-sectors--layout-featured-left .sub-sectors__grids > .sub-sectors__card:nth-child(8n + 7),
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids
		> .sub-sectors__card:nth-child(8n + 7) {
		grid-row: 4;
	}

	.sub-sectors--layout-featured-left .sub-sectors__grids > .sub-sectors__card:nth-child(8n + 8),
	.sub-sectors:not(.sub-sectors--layout-featured-right):not(.sub-sectors--layout-columns-4):not(
			.sub-sectors--layout-columns-2
		)
		.sub-sectors__grids
		> .sub-sectors__card:nth-child(8n + 8) {
		grid-row: 4;
	}

	/* Featured right */
	.sub-sectors--layout-featured-right .sub-sectors__grids {
		container-type: inline-size;
		grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
		grid-auto-rows: minmax(calc(min(1296px, 100cqw) * 813 / 1296 / 2), 1fr);
	}

	.sub-sectors--layout-featured-right .sub-sectors__grids:has(> .sub-sectors__card:nth-child(4):last-child) {
		aspect-ratio: 1296 / 813;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-auto-rows: unset;
	}

	.sub-sectors--layout-featured-right .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1) {
		grid-column: 3;
		grid-row: 1 / span 2;
	}

	.sub-sectors--layout-featured-right .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2) {
		grid-column: 1 / span 2;
		grid-row: 1;
	}

	.sub-sectors--layout-featured-right .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3) {
		grid-column: 1;
		grid-row: 2;
	}

	.sub-sectors--layout-featured-right .sub-sectors__grids > .sub-sectors__card:nth-child(4n) {
		grid-column: 2;
		grid-row: 2;
	}

	.sub-sectors--layout-featured-right .sub-sectors__grids > .sub-sectors__card:nth-child(8n + 5) {
		grid-row: 3 / span 2;
	}

	.sub-sectors--layout-featured-right .sub-sectors__grids > .sub-sectors__card:nth-child(8n + 6) {
		grid-row: 3;
	}

	.sub-sectors--layout-featured-right .sub-sectors__grids > .sub-sectors__card:nth-child(8n + 7) {
		grid-row: 4;
	}

	.sub-sectors--layout-featured-right .sub-sectors__grids > .sub-sectors__card:nth-child(8n + 8) {
		grid-row: 4;
	}

	/* 4 equal columns per row */
	.sub-sectors--layout-columns-4 .sub-sectors__grids {
		max-width: var(--site-container-width);
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1) {
		grid-column: 1;
		grid-row: auto;
	}

	.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2) {
		grid-column: 2;
	}

	.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3) {
		grid-column: 3;
	}

	.sub-sectors--layout-columns-4 .sub-sectors__grids > .sub-sectors__card:nth-child(4n) {
		grid-column: 4;
	}

	/* 2 equal columns */
	.sub-sectors--layout-columns-2 .sub-sectors__grids {
		max-width: var(--site-container-width);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	.sub-sectors--layout-columns-2 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 1),
	.sub-sectors--layout-columns-2 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 2),
	.sub-sectors--layout-columns-2 .sub-sectors__grids > .sub-sectors__card:nth-child(4n + 3),
	.sub-sectors--layout-columns-2 .sub-sectors__grids > .sub-sectors__card:nth-child(4n) {
		grid-column: auto;
		grid-row: auto;
		height: auto;
		aspect-ratio: 352 / 390.5;
	}
}

.sub-sectors__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--spacing-12);
	min-width: 0;
	min-height: 0;
	height: 100%;
	padding: var(--spacing-16);
	border-radius: var(--radius-12);
	overflow: hidden;
	color: var(--text-1-on-bg-2);
	box-sizing: border-box;
}

.sub-sectors__media {
	position: absolute;
	inset: 0;
	background: var(--grey-5);
	pointer-events: none;
}

.sub-sectors__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.sub-sectors__overlay {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 15.865%, rgba(0, 0, 0, 0.4) 71.619%);
	pointer-events: none;
}

.sub-sectors__card-title {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--text-1-on-bg-2);
}

.sub-sectors__card-title + * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.sub-sectors__card-text {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--font-headings);
	font-size: var(--font-size-default);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body-m);
	color: var(--text-1-on-bg-2);
	margin: 0 !important;
}

h3.sub-sectors__card-title + p {
	margin-top: 0 !important;
}