/**
 * Three Column Features Section Styles
 *
 * CSS for three-column feature card grid with photo, title, and description.
 * Supports 4 variants: info, link, toggle, video.
 * Loaded conditionally when core/group blocks are present.
 *
 * @package Condor
 */

/* ==========================================================================
   Three Column Features Container
   ========================================================================== */

.three-column-features {
	padding: 3rem 0;
}

@media (min-width: 768px) {
	.three-column-features {
		padding: 6rem 0 4rem 0;
	}
}

.three-column-features + .three-column-features {
	padding-top: 0;
}

.three-column-features .features-header {
	padding-bottom: 1.25rem;
}

/* ==========================================================================
   Features Grid
   ========================================================================== */

.three-column-features .features-grid {
	display: grid;
	gap: 6rem 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 568px) {
	.three-column-features .features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.three-column-features .features-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Photo Treatment
   ========================================================================== */

.three-column-features .photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

.three-column-features .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ==========================================================================
   Info Variant (.info-feature)
   ========================================================================== */

.three-column-features .photo + .info {
	padding-top: 1.25rem;
}

.three-column-features .info-feature .copy,
.three-column-features .link-feature .copy {
	padding-top: 1rem;
}

.three-column-features .info .cta {
	padding-top: 2rem;
}

/* ==========================================================================
   Link Variant (.link-feature)
   ========================================================================== */

.three-column-features .link-feature .cta {
	padding-top: 1rem;
}

.three-column-features .link-feature .cta a:hover {
	text-decoration: none;
}

/* ==========================================================================
   Video Variant (.video-feature)
   Spacing between thumbnail and info handled by blockGap in JSON.
   ========================================================================== */

/* Discover video play button overlay */
.three-column-features .discover-video {
	position: relative;
}

.three-column-features .discover-video .play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

/* Video thumbnail uses same aspect ratio as photos */
.three-column-features .discover-video__thumbnail {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

.three-column-features .discover-video__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ==========================================================================
   Toggle Variant (.toggle-feature)
   ========================================================================== */

.three-column-features .toggle-feature .text-toggle {
	color: var(--wp--preset--color--bright-red);
	display: inline-block;
	text-decoration: underline;
	font-size: 1rem;
	font-weight: bold;
}

.three-column-features details summary {
	color: var(--wp--preset--color--bright-red);
	font-weight: bold;
	cursor: pointer;
	list-style: none;
}

.three-column-features details summary::-webkit-details-marker {
	display: none;
}

.three-column-features details summary::marker {
	display: none;
}

.three-column-features details[open] summary {
	margin-bottom: 1rem;
}