/**
 * Shared sector-grid card styles.
 * SAVE AS: inc/shared/assets/css/sector-grid.css
 *
 * Used by:
 *  - [dhg_sector_grid] shortcode (inc/shortcodes.php)
 *  - Service page's "Image Column Grid" section
 *    (inc/service/template-parts/single-service-section-column-grid.php)
 *
 * Extracted out of shortcodes.php's inline dhg_print_sector_grid_styles()
 * into one real stylesheet, enqueued site-wide (see shared-styles.php),
 * so both consumers stay visually identical instead of maintaining two
 * copies of the same hover/zoom logic that could drift apart over time.
 */

.dhg-sector-grid {
	display: grid;
	grid-template-columns: repeat( var( --dhg-sector-grid-columns, 2 ), 1fr );
	gap: 15px;
}

@media (max-width: 700px) {
	.dhg-sector-grid {
		grid-template-columns: 1fr;
	}
}

.dhg-sector-card {
	position: relative;
	isolation: isolate; /* Needed so the ::after z-index below stacks against this card only, not the whole grid */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* aspect-ratio: 4 / 3;*/
	min-height: 480px;
	background-size: cover;
	background-position: center;
	background-color: #1c1c1c;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	padding: 40px 20px;
	border-bottom: 10px solid var(--e-global-color-accent);
}

/* Zoom on hover: background-size can't transition smoothly from
   `cover` (it's a keyword, not a length/percentage), so the image
   is duplicated onto its own layer here and scaled with `transform`
   instead -- that animates cleanly no matter how the image is
   sized. `cover` stays on .dhg-sector-card itself so the resting
   state still fills the box properly with no gaps. */
.dhg-sector-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 0.5s ease;
	z-index: -1;
}

.dhg-sector-card:hover::after {
	transform: scale(1.2);
}

.dhg-sector-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 50% );
	transition: background-color 0.2s ease;
}

.dhg-sector-card:hover::before {
	background: var(--e-global-color-accent);
	mix-blend-mode: multiply;
}

.dhg-sector-card__arrow {
	width: 22px;
	height: 22px;
	color: var(--e-global-color-accent);
	transition: transform 0.3s ease;
	z-index: 1;
}

.dhg-sector-card__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dhg-sector-card:hover .dhg-sector-card__arrow {
	transform: rotate(90deg);
	color: #fff;
}

.dhg-sector-card__title {
	position: relative;
	z-index: 1;
	font-size: 38px;
	line-height: 120%;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.dhg-sector-card__description {
	position: relative;
	z-index: 1;
	font-size: 18px;
	line-height: 120%;
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
	color: #fff;
}

.dhg-sector-card:hover .dhg-sector-card__description {
	margin-top: 50px;
	max-height: 200px;
	opacity: 1;
}

@media (max-width: 1366px) {
	.dhg-sector-grid {
		--dhg-sector-grid-columns: 2 !important;
	}
}

@media (max-width: 767px) {
	.dhg-sector-grid {
		--dhg-sector-grid-columns: 1 !important;
	}

	.dhg-sector-card__title {
		font-size: 35px;
	}
}