/* ==========================================================================
   Shared .bar-card archetype — the SINGLE source of truth for the card used by
   the News grid AND the (image-style) Studies grid, so both are visually the
   same card with different elements. Loaded globally (inc/enqueue.php) because
   block stylesheets only load on pages where that block appears, and the two
   grids don't always co-occur.

   News cards:   image + heading + body + one "Read more" button.
   Study cards:  the same, plus .bar-card__status, .bar-card__meta (dates) and a
                 second .bar-card__btn--secondary ("Join Study").
   ========================================================================== */

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card {
	display: flex;
	height: 100%;
}

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	color: inherit;
}

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--bar-radius-base, 8px);
}

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 381 / 246;
	object-fit: cover;
	border-radius: inherit;
	transition: transform 0.25s ease;
}

/* The signature 80px corner belongs to the FIRST card of the grid only —
 * every other card keeps the uniform 8px radius. */
:is(.bar-news-grid__grid, .bar-study-grid__grid, .bar-recommended__grid) > .bar-card:first-child .bar-card__media,
:is(.bar-news-grid__grid, .bar-study-grid__grid, .bar-recommended__grid) > .bar-card:first-child .bar-card__image {
	border-radius: var(--bar-radius-card-img, 80px 8px 8px 8px);
}

/* Gentle image zoom on hover — whole-card link OR the image's own link */
.bar-news-grid a.bar-card__inner:hover .bar-card__image,
.bar-news-grid a.bar-card__inner:focus-visible .bar-card__image,
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) a.bar-card__media:hover .bar-card__image,
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) a.bar-card__media:focus-visible .bar-card__image {
	transform: scale(1.04);
}

/* Title link — inherits the heading colour, no underline, shifts on hover */
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__heading-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__heading-link:hover,
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__heading-link:focus-visible {
	color: var(--wp--preset--color--secondary, #397767);
}

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__content {
	padding: 0;
	display: flex;
	flex: 1; /* fills the card so the button can sit on the foot */
	flex-direction: column;
	gap: 4px;
}

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(20px, 4vw, 24px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary, #104246);
	margin: 0;
}

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__body {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--wp--preset--color--grey-600, #444444);
	margin: 0;
}

/* Dark emerald "Read more" / "Learn more" button */
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__btn {
	align-self: flex-start;
	margin-top: auto;
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: clamp(16px, 3vw, 20px);
	line-height: 1.5;
	color: #ffffff;
	background: var(--wp--preset--color--primary, #104246);
	border-radius: var(--bar-radius-button, 20px 8px 20px 8px);
	padding: 12px 24px;
	text-decoration: none;
	box-shadow: var(--bar-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__btn:hover,
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__btn:focus-visible {
	background: var(--wp--preset--color--secondary, #397767);
	/* Keep white text — theme.json's global link:hover would otherwise darken it */
	color: #ffffff;
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
 * Study-card extras on the shared .bar-card (image-style studies)
 * --------------------------------------------------------------------------- */

/* Status pill (Open / Closed) */
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__status {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #104246);
	background: var(--wp--preset--color--accent-soft, #bbdee7);
	border-radius: 4px;
	padding: 3px 10px;
}

/* Date line — sits between the title and body */
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(14px, 3vw, 16px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--primary, #104246);
}

/* Two-button row (Learn more + Join Study) pinned to the card foot.
 * padding-top gives a comfortable gap above the buttons (matching the rhythm
 * between the other elements) even when the card content fills the height. */
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

/* Buttons inside the actions row don't need the single-button auto push */
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__actions .bar-card__btn {
	margin-top: 0;
}

/* Secondary "Join Study" button — outline of the primary */
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__btn--secondary {
	background: transparent;
	color: var(--wp--preset--color--primary, #104246);
	border: 2px solid var(--wp--preset--color--primary, #104246);
	box-shadow: none;
	padding: 10px 22px; /* 2px less to account for the border */
}

:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__btn--secondary:hover,
:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__btn--secondary:focus-visible {
	background: var(--wp--preset--color--primary, #104246);
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__image,
	:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__btn,
	:is(.bar-news-grid, .bar-study-grid, .bar-recommended, .bar-success-stories) .bar-card__btn:hover {
		transition: none;
		transform: none;
	}
}