/**
 * 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);

	/* Match the champ-* section gutter pattern from championship.css so the
	   news section aligns with the rest of the championship page. Without
	   this, the section's header + card column sit flush to the viewport
	   edges on mobile while neighboring champ-* sections have side gutters.
	   Values mirror `section[class*="champ-"]` at line 69-75 of
	   championship.css. */
	padding-inline: var(--wp--preset--spacing--60);
}

@media (min-width: 768px) {
	.news-cards {
		padding-inline: var(--wp--preset--spacing--70);
	}
}

/* Zero the legacy list indent that `style.css` line 708 applies to every
   <ol>/<ul> inside .site-content (`margin-left: 2.5rem`). The news post
   template renders as <ol class="wp-block-post-template">, so it inherits
   that indent and pushes the card column rightward, misaligned with the
   section header. Our selector (0,2,0) beats the legacy (0,1,1). */
.news-cards .wp-block-post-template {
	margin-left: 0;
}

/* --- 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;
	}
}