/**
 * News Cards — Justified CSS Only
 *
 * All spacing, colors, and typography are expressed as block JSON attributes
 * in the pattern markup. This file contains ONLY rules that blocks cannot
 * express: pseudo-elements, transitions, transforms, complex borders,
 * and WP inline-style overrides.
 *
 * @package Condor
 */

/* --- Section padding (CSS-only so responsive works without !important) --- */

.news-cards {
	padding-block: var(--section-spacing);
}

/* --- Card: flex column, overflow, shadow, hover lift --- */

.news-cards .news-cards__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 2px 8px rgba(0, 0, 0, 0.03);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
	/* Override WP has-background group padding — :where() specificity (0,0,0),
	   our (0,2,0) wins without !important */
	padding: 0;
}

.news-cards .news-cards__card:hover {
	transform: translateY(-2px);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.08),
		0 8px 24px rgba(0, 0, 0, 0.05);
}

/* --- Featured image: overflow clip + hover zoom --- */

.news-cards .wp-block-post-featured-image {
	overflow: hidden;
	margin: 0;
}

.news-cards .wp-block-post-featured-image img {
	transition: transform 0.5s ease-out;
}

.news-cards .news-cards__card:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}

/* --- Card body: fill height + border treatment --- */

.news-cards .news-cards__body {
	flex: 1;
	border: 1px solid var(--wp--preset--color--light-gray);
	border-top: none;
	border-radius: 0 0 8px 8px;
}

/* --- Post template: equal-height card grid --- */

.news-cards .wp-block-post-template > li {
	display: flex;
}

/* --- Post title: link styling + hover --- */

.news-cards .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.news-cards .wp-block-post-title a:hover {
	color: var(--wp--preset--color--red);
}

/* ==========================================================================
   Responsive
   - grid-template-columns: WP generates a container class at (0,1,0), but
     also a 4x-class specificity hack in style.min.css at (0,4,0) for mobile.
     !important is required for the mobile override; kept on tablet for
     defensive consistency.
   - Section padding is CSS-only (no inline style), so no !important needed.
   ========================================================================== */

@media (max-width: 1023px) {
	.news-cards .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 567px) {
	.news-cards .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}