/**
 * Press Features — the card grid on the Press Features category archive.
 *
 * Loaded by inc/press-features.php on that one archive and nowhere else.
 *
 * Colours come from Blocksy's palette custom properties rather than the hex
 * values the widget stylesheets in this folder use. Those widgets each expose
 * their colours as Elementor controls, so an editor can put them back in step
 * with the site by hand; this listing has no controls, so it follows the
 * customiser instead. Each has a literal fallback for the case where Blocksy is
 * not the parent theme any more.
 */

.wcpf {
	--wcpf-gap: 32px;
	--wcpf-min: 300px;

	--wcpf-card-bg: var(--theme-palette-color-8, #fff);
	--wcpf-card-border: var(--theme-palette-color-5, #edeff2);
	--wcpf-card-radius: 8px;
	--wcpf-card-pad: 24px;

	--wcpf-media-ratio: 16 / 10;

	--wcpf-title-color: var(--theme-headings-color, var(--theme-palette-color-4, #111518));
	--wcpf-title-color-hover: var(--theme-palette-color-1, #e55c00);
	--wcpf-text-color: var(--theme-text-color, var(--theme-palette-color-3, #687279));
	--wcpf-meta-color: var(--theme-palette-color-3, #687279);
	--wcpf-more-color: var(--theme-palette-color-1, #e55c00);

	--wcpf-logo-height: 38px;

	/* Two lines is the default because it is what keeps a row of cards the same
	   shape — a headline is the one field here with no length limit behind it,
	   and the Nepali ones run long. Three is the other sensible value; see the
	   README for the one line of Additional CSS that switches it. */
	--wcpf-title-lines: 2;
	--wcpf-excerpt-lines: 3;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--wcpf-min), 1fr));
	gap: var(--wcpf-gap);
}

/* Card --------------------------------------------------------------------- */

/* `position: relative` is not decoration — it is what the headline link's
   stretched `::after` measures itself against. */
.wcpf__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wcpf-card-border);
	border-radius: var(--wcpf-card-radius);
	background: var(--wcpf-card-bg);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.wcpf__card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 14px 34px rgba(17, 21, 24, 0.12);
}

/* The card lifts on hover but the focus ring belongs to the link inside it, so
   draw the ring on the card and let the link keep its accessible name. */
.wcpf__card:focus-within {
	border-color: var(--wcpf-more-color);
}

.wcpf__media {
	position: relative;
	aspect-ratio: var(--wcpf-media-ratio);
	overflow: hidden;
	background: var(--theme-palette-color-6, #f9fafb);
}

.wcpf__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.wcpf__card:hover .wcpf__media img {
	transform: scale(1.04);
}

.wcpf__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wcpf-card-pad);
}

/* Headline ----------------------------------------------------------------- */

/* 1.45 rather than the 1.3-ish a Latin headline this size would take: several of
   these are Nepali, and Devanagari hangs its vowel marks above the line and its
   conjuncts below it. At 1.35 the two lines of a wrapped Devanagari headline
   touch. */
/* Clamped on the h2 rather than on the link inside it, so the ellipsis belongs
   to the headline and not to the anchor's text. The link's stretched `::after`
   is unaffected by this `overflow: hidden`: its containing block is the card,
   which is an ancestor of the h2, and an overflow that is not an absolutely
   positioned box's containing block does not clip it. */
.wcpf__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wcpf-title-lines);
	line-clamp: var(--wcpf-title-lines);
	overflow: hidden;
	margin: 0;
	color: var(--wcpf-title-color);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
}

.wcpf__link {
	color: inherit;
	text-decoration: none;
}

.wcpf__link:hover,
.wcpf__link:focus {
	color: var(--wcpf-title-color-hover);
}

/* One link per card, stretched to cover it — rather than an anchor per element,
   which would give a screen reader three links to the same article. `z-index`
   keeps it over the media's own stacking context. */
.wcpf__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.wcpf__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wcpf-excerpt-lines);
	line-clamp: var(--wcpf-excerpt-lines);
	overflow: hidden;
	margin: 12px 0 0;
	color: var(--wcpf-text-color);
	font-size: 15px;
	line-height: 1.6;
}

/* Date, logo, continue reading --------------------------------------------- */

/* `margin-top: auto` is what lines the cards up: whatever the headline and the
   summary come to, every card's footer sits on the same baseline. */
.wcpf__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 18px;
}

/* The date is the fixed half of this row — it never wraps, and whatever it does
   not use belongs to the logo. */
.wcpf__date {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	color: var(--wcpf-meta-color);
	font-size: 13px;
	line-height: 1.2;
}

.wcpf__icon {
	flex: none;
	width: 15px;
	height: 15px;
}

/* Given the rest of the row rather than a percentage of it. Most mastheads are
   wordmarks — wide and short — so a fixed share of the width, not the height cap,
   is what ends up deciding how big they look, and a share picked in advance is
   always either starving a wide logo or crowding a long date. Taking what the
   date leaves means `--wcpf-logo-height` is the setting that actually governs,
   which is what makes it worth exposing. */
.wcpf__outlet {
	display: inline-flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
}

.wcpf__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--wcpf-logo-height);
	object-fit: contain;
}

/* The stand-in for an outlet with a name but no logo yet. Set in caps at the
   size of the date so the row stays balanced whichever of the two a post has. */
.wcpf__outlet--text {
	color: var(--wcpf-meta-color);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: right;
	text-transform: uppercase;
}

.wcpf__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--wcpf-card-border);
	color: var(--wcpf-more-color);
	font-size: 14px;
	font-weight: 600;
}

.wcpf__more .wcpf__icon {
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease;
}

.wcpf__card:hover .wcpf__more .wcpf__icon {
	transform: translate(2px, -2px);
}

/* Visually hidden, still read aloud — the "(opens in a new tab)" note. Defined
   here rather than leaning on the parent's `.screen-reader-text` so this file
   does not need Blocksy loaded to be correct. */
.wcpf__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------- */

/* One column, stated rather than reached by setting `--wcpf-min` to 100%: a
   percentage as the minimum of an `auto-fill` track resolves against the grid's
   own size, which is exactly the value the track count is being computed to
   decide. Engines disagree about that, and the disagreement shows up as a card
   wider than the screen. */
@media (max-width: 500px) {
	.wcpf {
		--wcpf-gap: 24px;
		--wcpf-card-pad: 20px;

		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcpf__card,
	.wcpf__media img,
	.wcpf__more .wcpf__icon {
		transition: none;
	}

	.wcpf__card:hover,
	.wcpf__card:hover .wcpf__media img,
	.wcpf__card:hover .wcpf__more .wcpf__icon {
		transform: none;
	}
}