/*
 * archive.css — recipe CPT archive (/recipes/), template: archive-recipe.html
 * Mockup parity: <main data-page="archive"> in _design/site-mockup.html.
 *
 * REUSES (do NOT redefine here): .ka-page-head, .ka-crumb, .ka-toolbar,
 * .ka-seg, .ka-select, .ka-spacer, .ka-pager (assets/css/pages/_base.css);
 * .ka-rcard, .ka-rcard__thumb, .ka-rcard__cat, .ka-rcard__body,
 * .ka-rcard__meta, .ka-rec-grid (+ .cols4) (style.css).
 *
 * This file only bridges the gap between core block markup
 * (post-template / post-featured-image / post-terms / post-title /
 * post-date) and those existing static .ka-* component styles. RTL-only.
 */

/* ----- the dynamic grid: core post-template -> reuse .ka-rec-grid.cols4 ----- */
/* core gives .wp-block-post-template a flex/list layout; force the grid +
   strip list chrome so the 4/3/2/1 columns from _base.css win. */
.wp-block-query .wp-block-post-template.ka-rec-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* grid items are <li> (or <div>) wrappers — make them transparent pass-throughs
   so the inner .ka-rcard is the visible card. min-width:0 = RTL overflow safety. */
.wp-block-query .wp-block-post-template.ka-rec-grid > li,
.wp-block-query .wp-block-post-template.ka-rec-grid > div {
	min-width: 0;
	margin: 0;
	list-style: none;
}

/* a card may sit on the <li> itself or be the first child group */
.ka-rcard { min-width: 0; }

/* ----- featured image fills .ka-rcard__thumb (thumb keeps aspect-ratio 16/11) ----- */
/* post-featured-image renders <figure class="wp-block-post-featured-image">,
   optionally wrapping an <a> (isLink), wrapping the <img>. Make every layer
   fill the thumb so the existing img { object-fit:cover } rule in style.css
   actually has a sized box to cover. */
.ka-rcard__thumb .wp-block-post-featured-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.ka-rcard__thumb .wp-block-post-featured-image,
.ka-rcard__thumb .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.ka-rcard__thumb .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.ka-rcard:hover .ka-rcard__thumb .wp-block-post-featured-image img {
	transform: scale(1.06);
}

/* graceful fallback when a recipe has no featured image: keep the box filled */
.ka-rcard__thumb .wp-block-post-featured-image.wp-block-post-featured-image--placeholder,
.ka-rcard__thumb:empty {
	background: var(--wp--preset--color--surface-2);
}

/* ----- category pill overlay: post-terms -> .ka-rcard__cat ----- */
/* post-terms outputs <div class="...ka-rcard__cat"><a>التصنيف</a></div>;
   the static .ka-rcard__cat (style.css) is already an absolute pill, so we
   only normalise the inner link + keep z-index above the image. */
.ka-rcard__thumb .ka-rcard__cat {
	z-index: 2;
	max-width: calc(100% - 24px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ka-rcard__thumb .ka-rcard__cat,
.ka-rcard__thumb .ka-rcard__cat a {
	color: #3f5417;            /* on-image dark text, matches static pill */
	text-decoration: none;
	font-weight: 600;
	font-size: .78rem;
	line-height: 1.2;
}

.ka-rcard__thumb .ka-rcard__cat a:hover { text-decoration: underline; }

/* if a recipe is filed under several categories, only show the first */
.ka-rcard__thumb .ka-rcard__cat a + a { display: none; }

/* ----- title: core post-title -> display font + heading color (h3 look) ----- */
.ka-rcard__body .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--heading);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	overflow-wrap: anywhere;
}

.ka-rcard__body .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.ka-rcard__body .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* ----- meta row: core post-date -> .ka-rcard__meta border-top strip ----- */
/* .ka-rcard__meta (style.css) is flex with a top border; post-date is a single
   line, so just give it breathing room and tabular figures for the date. */
.ka-rcard__body .wp-block-post-date.ka-rcard__meta {
	margin-top: .9rem;
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.ka-rcard__thumb .wp-block-post-featured-image img,
	.ka-rcard:hover .ka-rcard__thumb .wp-block-post-featured-image img {
		transition: none;
		transform: none;
	}
}