/**
 * Ordinary category archives, dressed as the Press Features cards.
 *
 * Loaded by inc/category-archive.php on every category archive except Press
 * Features itself, which has its own template and its own stylesheet.
 *
 * Nothing here changes any markup. The cards are still the ones Blocksy's
 * `blocksy_render_archive_cards()` draws, and which layers they contain is
 * still whatever Appearance -> Customize -> Blog -> Categories has switched on.
 * This file only restates the values, so the same grid, the same card, the same
 * headline and the same footer row come out - see
 * assets/css/wildcare-press-features.css for the original of each, and the
 * README for the two layers worth turning on to complete the match.
 *
 * Two conventions run through the whole file.
 *
 * **Blocksy's own custom properties are set wherever it has one** - the grid
 * columns, the card padding, the space between a card's layers. Its rules then
 * do the work, so a card the Customizer can build that we have not thought
 * about still lands somewhere sensible instead of half-styled.
 *
 * **Selectors carry the full `.entries[data-archive="default"]
 * .entry-card.card-content` prefix and are not trimmed down.** Blocksy's card
 * CSS arrives from two places, and neither can be beaten on source order:
 * `static/bundle/entries.min.css` is enqueued in the middle of the loop and so
 * prints *after* this file, and `uploads/blocksy/css/global.css` carries
 * Customizer rules as specific as `[data-prefix="categories"]
 * [data-archive="default"] .card-content .entry-meta[data-id="meta_2"]`. Each
 * rule here is written to out-specify both outright. `.card-content` is in the
 * prefix for a second reason: Blocksy drops that class on the `simple` archive
 * layout, where a row of cards is not what is being drawn and none of this
 * should apply.
 *
 * Colours come from Blocksy's palette custom properties, each with the literal
 * it currently resolves to as a fallback - same as the press stylesheet, and
 * for the same reason: this listing has no controls of its own, so it follows
 * the customiser.
 */

/* The knobs. Declared on the plain `.entries` so an override in Appearance ->
   Customize -> Additional CSS can be written against the same one-class
   selector and win on source order. */
.entries {
	--wca-gap: 32px;
	--wca-min: 300px;

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

	/* Blocksy's own image ratio (Customize -> Categories -> Card -> Featured
	   Image) is overridden by this, because the press cards are 16/10 and the
	   whole point here is that the two listings match. Change it here rather
	   than there. */
	--wca-media-ratio: 16 / 10;

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

	/* Two lines for the same reason the press cards clamp to two: a headline is
	   the one field on a card with no length limit behind it, and one long
	   headline otherwise sets the height of its whole row. Three is the other
	   sensible value. */
	--wca-title-lines: 2;
	--wca-title-size: 19px;
	--wca-excerpt-lines: 3;
}

/* Grid --------------------------------------------------------------------- */

/* Blocksy already draws `[data-layout*="grid"]` as a grid off these two
   properties, so the columns are handed over rather than restated. Its own
   value is a fixed `repeat(3, minmax(0, 1fr))` written three times over, once
   per breakpoint; `auto-fill` replaces all three, which is what makes a card
   the same width here as it is on the press listing whatever the container. */
.entries[data-archive="default"][data-layout="grid"] {
	--grid-template-columns: repeat(auto-fill, minmax(var(--wca-min), 1fr));
	--grid-columns-gap: var(--wca-gap);
}

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

/* `--card-inner-spacing` is the padding *and* the distance the boundless
   featured image bleeds back out by - Blocksy pulls the image out with a
   negative margin of exactly this size, which is what puts it flush against the
   card's edges. Setting the one property keeps the two in step.

   `position: relative` is not decoration: it is what the headline link's
   stretched `::after` measures itself against. */
.entries[data-archive="default"] .entry-card.card-content {
	--card-inner-spacing: var(--wca-card-pad);
	--card-element-spacing: 12px;
	--theme-border-radius: var(--wca-card-radius);
	--card-border: 1px solid var(--wca-card-border);
	--theme-box-shadow: none;

	position: relative;
	overflow: hidden;
	background-color: var(--wca-card-bg);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.entries[data-archive="default"] .entry-card.card-content: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. */
.entries[data-archive="default"] .entry-card.card-content:focus-within {
	border-color: var(--wca-more-color);
}

/* Featured image ----------------------------------------------------------- */

/* The ratio has to be stated on the container, not on the image: Blocksy writes
   its own `aspect-ratio` into the image's `style` attribute, and an inline
   style can only be beaten with `!important`. Giving the container a ratio and
   the image both of its dimensions sidesteps that - `aspect-ratio` applies to a
   box only while one of its dimensions is auto, so the inline value goes quiet
   on its own.

   `flex: none` because the container is a flex item in the card's column: with
   the ratio supplying its height it would otherwise be a candidate for
   shrinking, and a shrunk card would crop differently from its neighbours. */
.entries[data-archive="default"] .entry-card.card-content .ct-media-container {
	--card-element-spacing: var(--wca-card-pad);

	flex: none;
	aspect-ratio: var(--wca-media-ratio);
}

.entries[data-archive="default"] .entry-card.card-content .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.entries[data-archive="default"] .entry-card.card-content:hover .ct-media-container img {
	transform: scale(1.04);
}

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

/* 1.45 rather than the 1.3 Blocksy sets: the site runs Devanagari headlines in
   places, and Devanagari hangs its vowel marks above the line and its conjuncts
   below it - at 1.3 the two lines of a wrapped 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. */
.entries[data-archive="default"] .entry-card.card-content .entry-title {
	--theme-font-size: var(--wca-title-size);
	--theme-line-height: 1.45;
	--theme-font-weight: 700;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wca-title-lines);
	line-clamp: var(--wca-title-lines);
	overflow: hidden;
	color: var(--wca-title-color);
}

.entries[data-archive="default"] .entry-card.card-content .entry-title a {
	color: inherit;
	text-decoration: none;
}

.entries[data-archive="default"] .entry-card.card-content .entry-title a:hover,
.entries[data-archive="default"] .entry-card.card-content .entry-title a:focus {
	color: var(--wca-title-color-hover);
}

/* One link stretched over the whole card, the way a press card works. Blocksy
   already gives the card two anchors to the same post - the image and the
   headline - so this adds no link a screen reader can reach, it only makes the
   space between them clickable. `z-index` puts it over the media container,
   which isolates itself into its own stacking context. */
.entries[data-archive="default"] .entry-card.card-content .entry-title a::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

/* Summary ------------------------------------------------------------------ */

.entries[data-archive="default"] .entry-card.card-content .entry-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wca-excerpt-lines);
	line-clamp: var(--wca-excerpt-lines);
	overflow: hidden;
	color: var(--wca-text-color);
	font-size: 15px;
	line-height: 1.6;
}

/* Footer row --------------------------------------------------------------- */

/* The press card's bottom row is the date on the left and the publication on
   the right. Blocksy's meta list holds the date and the author, author first in
   the markup, so the date is pulled back to the front and the author takes the
   place - and the small uppercase setting - that the outlet's name has over
   there.

   `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. Blocksy
   applies it already when the meta is the card's last layer; stating it here
   covers the case where a "Continue reading" link follows, which would
   otherwise take the free space for itself. */
.entries[data-archive="default"] .entry-card.card-content > .entry-meta:last-of-type {
	--card-element-spacing: 0px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--wca-meta-color);
}

/* The list's own separators go with the flex row: `gap` and `space-between`
   already do the spacing, and a slash floating between the two ends of a
   justified row reads as a stray character. */
.entries[data-archive="default"] .entry-card.card-content > .entry-meta:last-of-type li {
	display: inline-flex;
	align-items: center;
	margin-inline-end: 0;
}

.entries[data-archive="default"] .entry-card.card-content > .entry-meta:last-of-type li::after {
	content: none;
}

/* The date is the fixed half of this row - it never wraps, and whatever it does
   not use belongs to the author. */
.entries[data-archive="default"] .entry-card.card-content > .entry-meta:last-of-type .meta-date {
	order: -1;
	flex: none;
	gap: 8px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

/* The press cards' calendar, drawn as a mask rather than as a background image
   so it takes the row's own colour - an SVG in a `url()` cannot read
   `currentColor`. Same path as `wildcare_press_icon( 'calendar' )`; if that one
   is ever redrawn, this is the second copy. */
.entries[data-archive="default"] .entry-card.card-content > .entry-meta:last-of-type .meta-date::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1zm12 8H5v9h14v-9zM5 6v2h14V6H5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1zm12 8H5v9h14v-9zM5 6v2h14V6H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Where the outlet's name sits on a press card, set the same way. */
.entries[data-archive="default"] .entry-card.card-content > .entry-meta:last-of-type .meta-author {
	justify-content: flex-end;
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: right;
	text-transform: uppercase;
}

/* Continue reading --------------------------------------------------------- */

/* Only rendered when Customize -> Categories -> Card -> Read More is switched
   on; Blocksy ships it off. It arrives as a filled `.ct-button`, and the press
   card's equivalent is a line of accent text above a rule, so the button is
   unmade rather than restyled.

   `position: relative` and the `z-index` lift it back above the headline's
   stretched `::after` - without them the one thing on the card that is not the
   headline's link would be covered by it.

   `align-self` is stated because Blocksy shrink-wraps the button to its own
   text - `.entry-button { align-self: var(--horizontal-alignment, flex-start) }`
   - which is right for a button and wrong for a rule that is meant to run the
   width of the card, the way the press card's does. `justify-content` then
   keeps the text at the left of the stretched box. */
.entries[data-archive="default"] .entry-card.card-content .entry-button {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	justify-content: flex-start;
	gap: 8px;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--wca-card-border);
	border-radius: 0;
	background: none;
	color: var(--wca-more-color);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

/* Its own margin, stated because Blocksy hands the card's free space to
   whichever layer comes last - which with a Read More layer on is this one, and
   the footer row above has already claimed it. */
.entries[data-archive="default"] .entry-card.card-content .entry-button:last-child {
	margin-top: 16px;
}

.entries[data-archive="default"] .entry-card.card-content .entry-button svg {
	width: 14px;
	height: 14px;
	margin-inline-end: 0;
	transition: transform 0.25s ease;
}

.entries[data-archive="default"] .entry-card.card-content:hover .entry-button svg {
	transform: translateX(2px);
}

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

/* One column, stated rather than reached by setting `--wca-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) {
	.entries[data-archive="default"][data-layout="grid"] {
		--wca-gap: 24px;
		--wca-card-pad: 20px;

		--grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.entries[data-archive="default"] .entry-card.card-content,
	.entries[data-archive="default"] .entry-card.card-content .ct-media-container img,
	.entries[data-archive="default"] .entry-card.card-content .entry-button svg {
		transition: none;
	}

	.entries[data-archive="default"] .entry-card.card-content:hover,
	.entries[data-archive="default"] .entry-card.card-content:hover .ct-media-container img,
	.entries[data-archive="default"] .entry-card.card-content:hover .entry-button svg {
		transform: none;
	}
}