/*
 * Cards styles — brand-templated for engagement isjac.
 *
 * Source: vendor/zysys/wp-runtime/assets/css/cards.css.template
 * Built:  wp-content/zysys-generated/isjac/css/cards.css
 *
 * The template substitutes isjac at composer install. To change
 * a rule, edit this template and re-run `composer install` (or
 * `composer update`) in the consumer repo.
 *
 * Naming convention: <brand>-<class> per ADR-002.
 */

/*
 * Card components — used by both the Query Loop archive AND the
 * featured-posts shortcode. Single source of truth for card styling.
 *
 * Spacing follows the 1:2 micro-to-macro ratio:
 *   --isjac-pad-md (16px) inside, --isjac-gap-default (24px) between.
 *
 * ---------------------------------------------------------------------------
 * Lift pattern — when does a card carry a resting box-shadow?
 * ---------------------------------------------------------------------------
 *
 * Two card archetypes across the site, each with its own shadow rule. The
 * choice is semantic, not aesthetic — pick by what the card IS, not what
 * looks good in isolation.
 *
 *   Resting shadow (always-on lift)
 *   ───────────────────────────────
 *   Use when the card is a SURFACE — a self-contained section the user
 *   reads or interacts with in place, with its own internal CTAs, content,
 *   or controls. The shadow signals "container," not "target."
 *   Examples: dashboard hero, opportunity cards, manage-membership cards,
 *             event band, single-post body container.
 *
 *   Hover-only shadow (rest flat, lift on interaction)
 *   ──────────────────────────────────────────────────
 *   Use when the entire card IS a single tap target — wrapped in one link,
 *   no internal CTAs competing for attention. Flat-at-rest keeps a grid of
 *   tiles quiet; hover-lift rewards interaction and confirms "I am clickable."
 *   Examples: artist-blog post tiles, featured-posts cards.
 *
 * Test: "Is the entire card one link?" → hover-only. "Does the card hold
 * its own buttons or read-in-place content?" → resting shadow.
 *
 * The shared base below applies to the post tiles (hover-only). The dashboard
 * surfaces apply --isjac-shadow-card directly in their own component CSS.
 */

/* ---------- Shared card base ----------
 * Both `.isjac-featured-posts__card` (shortcode) and the Query Loop's
 * `.wp-block-query .wp-block-post-template > li` are styled together so
 * they can never drift visually. */
.wp-block-query .wp-block-post-template > li,
.isjac-featured-posts__card {
	background: var(--isjac-surface-card);
	border: 1px solid var(--isjac-border-default);
	border-radius: var(--isjac-radius-md);
	box-shadow: var(--isjac-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Brand-guide §A cards do not lift on hover — interaction signal is the
 * underline + color shift on the heading link inside the card. The resting
 * shadow above is the brand's "lift via shadow + border, not contrast"
 * (card surface = paper, page surface = paper; shadow + border carry the
 * elevation). Restoring a hover-lift requires an ADR. */

/* ---------- Card grid ---------- *
 * Responsive column count: 3 desktop → 2 tablet → 1 mobile.
 * Gutenberg's Query Loop bakes columnCount:3 into inline grid-template-columns,
 * so we explicitly redefine the template at each breakpoint. Cards become
 * unreadable below 320px wide; collapse before that happens. */
.wp-block-query .wp-block-post-template,
.isjac-featured-posts__grid {
	gap: var(--isjac-gap-default);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.wp-block-query .wp-block-post-template,
	.isjac-featured-posts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.wp-block-query .wp-block-post-template,
	.isjac-featured-posts__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Featured image area ---------- */
.wp-block-query .wp-block-post-featured-image,
.isjac-featured-posts__media {
	margin: 0;
	display: block;
	line-height: 0;
}

.wp-block-query .wp-block-post-featured-image img,
.isjac-featured-posts__image {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/* ---------- Inner card body container ----------
 * Reset Kadence/WP defaults on the inner group container, then set OUR
 * card-body padding. Source order matters: the reset must come first so
 * the styled rule below wins on same-specificity ties. */
.wp-block-query .wp-block-post-template > li > .wp-block-group {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Card body padding — 16px standard; 24px on wider viewports for editorial feel.
 * The inner group is the second child of <li> (figure is first), so target it
 * by structural position rather than `:not(:first-child)`, which would also
 * match ancestor-chain ambiguity in editor previews. */
.wp-block-query .wp-block-post-template > li > .wp-block-group + .wp-block-group,
.wp-block-query .wp-block-post-template > li > .wp-block-post-featured-image + .wp-block-group,
.wp-block-query .wp-block-post-template > li > .wp-block-group:only-of-type,
.isjac-featured-posts__body {
	padding: var(--isjac-pad-md);
	display: flex;
	flex-direction: column;
	gap: var(--isjac-pad-sm);
	flex: 1;
}

@media (min-width: 768px) {
	.wp-block-query .wp-block-post-template > li > .wp-block-group + .wp-block-group,
	.wp-block-query .wp-block-post-template > li > .wp-block-post-featured-image + .wp-block-group,
	.wp-block-query .wp-block-post-template > li > .wp-block-group:only-of-type,
	.isjac-featured-posts__body {
		padding: var(--isjac-pad-lg);
	}
}

/* ---------- Title ---------- *
 * Card titles render at h4-scale even when the markup is <h3> — a 32px
 * section-h3 inside a card competes with the card photo + read-more for
 * attention. Prefix the selector with `.entry-content` so this rule
 * outranks the default `.entry-content h3` brand-h3 rule in
 * typography.css.template. */
.entry-content .wp-block-query .wp-block-post-title,
.entry-content .isjac-featured-posts__title {
	margin: 0;
	font-family: var(--isjac-h4-font-family);
	font-size: var(--isjac-h4-font-size);
	font-weight: var(--isjac-h4-font-weight);
	line-height: var(--isjac-h4-line-height);
	letter-spacing: var(--isjac-h4-letter-spacing);
	color: var(--isjac-h4-color);
}

/* Card title link colors must beat the global prose-link rule in
 * typography.css.template (specificity 0,6,1 — `.entry-content a:not()×5`).
 * Match its `:not()` chain so this rule resolves at 0,7,1 and wins
 * without `!important`. Card titles need ink (not link-blue) so the
 * photo + title + read-more reads as one unit. Hover/focus deliberately
 * falls through to the global brand-deep + underline. */
.entry-content .wp-block-query .wp-block-post-title a:not(.wp-block-button__link):not(.page-numbers):not(.wp-element-button):not(.isjac-btn):not(.kb-button),
.entry-content .isjac-featured-posts__title a:not(.wp-block-button__link):not(.page-numbers):not(.wp-element-button):not(.isjac-btn):not(.kb-button) {
	color: var(--isjac-color-ink);
	text-decoration: none;
}

.wp-block-query .wp-block-post-title a:hover,
.wp-block-query .wp-block-post-title a:focus-visible,
.isjac-featured-posts__title a:hover,
.isjac-featured-posts__title a:focus-visible {
	color: var(--isjac-color-brand-deep);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Excerpt ---------- */
/* Explicit font-family per brand-guide body spec — without this the
 * excerpt inherits whatever the card / article element resolves to,
 * which on pages where Kadence wraps content in a DM-Sans-flavoured
 * container can drift the excerpt away from Inter. Pinning the body
 * face here makes the card excerpt brand-conformant regardless of
 * surrounding markup. */
.wp-block-query .wp-block-post-excerpt,
.isjac-featured-posts__excerpt {
	margin: 0;
	font-family: var(--isjac-body-font-family);
	font-size: var(--isjac-body-font-size);
	line-height: var(--isjac-body-line-height);
	color: var(--isjac-color-ink);
}

/* ---------- Read more affordance ----------
 * `align-self: flex-start` keeps the link tight to its text content
 * inside the card body's flex column, so the underline-on-hover and
 * the arrow don't span the full card width. */
/* Brand-guide §A link: brand-mid default, brand-deep + underline on hover.
 * Matches .isjac-link / .isjac-btn--ghost so every "secondary CTA / read more"
 * across the site reads as the same visual element. */
:where(
	.wp-block-query .wp-block-post-excerpt__more-link,
	.isjac-featured-posts__more
) {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.25rem;
	color: var(--isjac-color-brand-mid);
	font-weight: var(--isjac-font-weight-medium);
	text-decoration: none;
	margin-top: var(--isjac-pad-sm);
	transition: color 150ms ease-out, text-decoration-color 150ms ease-out;

	&:hover,
	&:focus-visible {
		color: var(--isjac-color-brand-deep);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* Brand-guide §13: prose links and read-more affordances render bare —
 * no trailing arrow decoration. The arrow + 3px hover-slide pattern
 * was removed by the brand-conform pass (T-102 for .isjac-link /
 * .isjac-btn--ghost; T-112 here for card read-more affordances).
 * If the arrow is intentionally part of a ISJAC link treatment in
 * the future, add an --isjac-link-trailing-glyph token and reinstate
 * via that token, not by hardcoding in the shortcode template. */

/* ---------- Date — pinned to card bottom for visual rhythm ---------- */
.wp-block-query .wp-block-post-date {
	font-size: 0.875rem;
	color: var(--isjac-text-muted);
	margin-top: auto;
	padding-top: var(--isjac-pad-sm);
}