/* ────────────────────────────────────────────────────────────
   03-card-collection.css — N-column card grid
   Section uses: .card-collection [.two-column | .three-column | .four-column]
   Card chrome (white fill, soft shadow, flush image, centered
   copy, orange "Read More →") is constant across all bg variants.
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
.card-collection {
	padding: var(--spacing-4xl) var(--spacing-md);
}

/* ── Inner: max-width container ───────────────────────────── */
.card-collection__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
}

/* ── Inner: 2-across override max-width container ───────────────────────────── */
.card-collection.two-column .card-collection__inner {
	max-width: var(--container-narrow);
}

/* ── Inner: 3-across gap overrides ───────────────────────────── */
.card-collection.three-column .card-collection__grid {
	gap: var(--spacing-lg);
}

/* ── Inner: 4-across override max-width container ───────────────────────────── */
.card-collection.four-column .card-collection__inner {
	max-width: var(--container-wide);
}

.card-collection.four-column .card-collection__grid {
	gap: var(--spacing-lg);
}

/* ── Section heading + intro ─────────────────────────────── */
.card-collection h2 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-heading);
	text-align: center;
	margin: 0 0 var(--spacing-sm) 0;
}

.card-collection__intro {
	max-width: var(--content-max-prose);
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: var(--text-heading-sm);
	line-height: var(--line-height-loose);
	color: var(--color-text-body);
	text-align: center;
}

/* ── Grid ─────────────────────────────────────────────────── */
.card-collection__grid {
	display: grid;
	gap: var(--spacing-2xl);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--spacing-xl);
}

.card-collection.two-column   .card-collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-collection.three-column .card-collection__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-collection.four-column  .card-collection__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Card ─────────────────────────────────────────────────── */
.card {
	background-color: var(--color-white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease-in-out;
}

.card:hover {
	box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.09);
}

/* Image: full-bleed at card top, forced 16:9 crop */
.card figure img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Card body: carries all padding so image bleeds flush to edges */
.card .card-body {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--spacing-sm);
}

.card h3 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-md);
	line-height: var(--line-height-snug);
	color: var(--color-text-heading);
	text-align: center;
	margin: 0;
	font-weight: var(--font-weight-bold);
}

.card p {
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
	text-align: center;
	margin: 0;
}

/* Pin button group to bottom of card body */
.card .wp-block-buttons {
	display: flex;
	margin-top: auto;
	justify-content: center;
}

/* ── Dark-bg overrides ────────────────────────────────────── */
/* is-style-bg-dark is on the core/group outer; .card-collection
   is on the inner GB element — must use descendant selector. */

/* Section heading: GB text block, not .wp-block-heading — needs explicit inversion */
.is-style-bg-dark .card-collection h2 {
	color: var(--color-text-body-inverse);
}

/* Card stays white on dark bg — re-pin text to on-light colors.
   02-style-variations.css inverts all p and headings globally;
   these rules restore card interior to dark-text-on-white. */
.is-style-bg-dark .card h3 {
	color: var(--color-text-heading);
}

.is-style-bg-dark .card p {
	color: var(--color-text-body);
}

/* 02-style-variations.css inverts all buttons to white fill on
   dark bg — restore card's no-style button to orange link. */
.is-style-bg-dark .card .wp-block-button.is-style-no-style .wp-block-button__link,
.is-style-bg-dark .card .wp-block-button.is-style-no-style a.wp-block-button__link {
	background-color: transparent;
	color: var(--color-orange-primary);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1023px) {
	.card-collection.three-column .card-collection__grid,
	.card-collection.four-column  .card-collection__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.card-collection { padding: var(--spacing-2xl) var(--spacing-sm); }

	.card-collection__grid,
	.card-collection.two-column   .card-collection__grid,
	.card-collection.three-column .card-collection__grid,
	.card-collection.four-column  .card-collection__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Editor: card image flush fix ─────────────────────────────
   The editor wraps every block in .wp-block (with margin) and
   .wp-block-image figures also get default margins and may carry
   Gutenberg alignment/resize classes that constrain their width.
*/
.editor-styles-wrapper .card .wp-block,
.editor-styles-wrapper .card figure,
.editor-styles-wrapper .card .wp-block-image,
.editor-styles-wrapper .card .wp-block-image figure {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.editor-styles-wrapper .card figure img,
.editor-styles-wrapper .card .wp-block-image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}