/**
 * ROYA - Articles and tips archive
 *
 * Figma 18:720 (1440x5378). Page-scoped, loaded on the blog index only
 * (is_home - page #68 'מאמרים' is page_for_posts). The inner-page head and the
 * contact block are shared components and live elsewhere; this sheet is the
 * grid, the rails behind it and the card.
 */

/* ==========================================================================
   Grid
   Two columns of 584 with 77 between them - 1245 across, x94 to x1339, the
   same track the projects archive uses - and 130 between the rows.

   Behind the cards run two 3px אפור גרפיט rails (18:774, 18:775), one down
   the centre of each column, from the top of the first row to the bottom of
   the last (y790 to y3288, 2498 tall - exactly the grid's own height). The
   cards paint over them, so all the reader ever sees is a short connector in
   each row gap.

   Drawn per card rather than as one rail down the grid, because the design's
   six cards fill three whole rows and an archive's last row may not: a rail
   the height of the grid would hang in the empty half of a ragged row. Each
   card carries the connector to the card below it, and the last row - the last
   two cards in a two-column grid - carries none.
   ========================================================================== */

.roya-articles-archive {
	padding-block: var(--roya-section-gap);
}

.roya-articles-archive__grid {
	/* x94 to x1339 in the design. */
	--roya-container: 1245px;
	--roya-row-gap: clamp(2rem, 9.028vw, 8.125rem); /* 130px */

	/* The design starts this grid at y790; the shared section gap alone put
	   it at y744 (08-handover item 8). Corrected together with the projects
	   archive, each to its own frame, so the pair stays honest - the missing
	   46 keeps the head's left half-rule clear of the first row. */
	margin-block-start: clamp(1.25rem, 3.194vw, 2.875rem);

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1rem, 5.347vw, 4.8125rem); /* 77px */
	row-gap: var(--roya-row-gap);
}

/* The rail, in the gap under one card. Scoped to the grid, so the card can be
   dropped into a related-articles strip without dragging a connector with it. */
.roya-articles-archive__grid > .roya-article-card::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	/* PHYSICAL centre - the card fills its column, so 50% is the column's
	   centre line whichever direction the grid flows. */
	left: 50%;
	width: var(--roya-rule-width);
	height: var(--roya-row-gap);
	background-color: var(--roya-rule);
	transform: translateX(-50%);
}

/* The bottom row has nothing to connect to. In a two-column grid that is the
   last two cards, whatever the post count - and the grid's only children are
   cards, so counting them is safe. */
.roya-articles-archive__grid > .roya-article-card:nth-last-child(-n + 2)::after {
	content: none;
}

.roya-articles-archive__empty {
	text-align: center;
}


/* ==========================================================================
   Card
   Figma 18:776-796. An אפור גרפיט frame 584x746 on radius 20 around a שמנת
   card 544x700 on radius 10 - so 20 of graphite showing at the sides and 23
   top and bottom, the projects card's proportions in the other colour.
   Inside: the photograph 544x421 flush to the top, the title at 45, the pill.
   ========================================================================== */

/* position:relative so the grid's rail can hang off the card's bottom edge. */
.roya-article-card {
	position: relative;
	display: flex;
}

.roya-article-card__frame {
	display: flex;
	width: 100%;
	padding: clamp(0.5rem, 1.597vw, 1.4375rem) clamp(0.5rem, 1.389vw, 1.25rem);
	background-color: var(--roya-graphite);
	border-radius: var(--roya-radius-card);
	box-shadow: var(--roya-shadow-box);
	color: inherit;
	text-decoration: none;
}

.roya-article-card__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	/* 25 under the pill; the photograph sets the top, flush at 0. */
	padding-block-end: clamp(0.75rem, 1.736vw, 1.5625rem);
	background-color: var(--roya-cream);
	border-radius: clamp(0.375rem, 0.694vw, 0.625rem); /* 10px */
}

/*
 * Full width of the inner card and square-cornered (18:779 carries no radius),
 * so it covers the card's own 10px top corners and the visible outer curve is
 * the graphite frame's 20. The card has no inline padding for the same reason
 * the project card has none: 100% has to resolve against the whole 544.
 */
.roya-article-card__photo {
	display: block;
	width: 100%;
	aspect-ratio: 544 / 421;
	object-fit: cover;
	box-shadow: var(--roya-shadow-card);
}

.roya-article-card__photo--empty {
	background-color: var(--roya-media-placeholder);
}

.roya-article-card__title {
	/* 51 under the photograph, 46 to the pill. */
	margin: clamp(1rem, 3.542vw, 3.1875rem) 0 clamp(1rem, 3.194vw, 2.875rem);
	/* The inner card is unpadded, so the breathing room for a long title lives
	   here rather than on the box the photograph is measured against. */
	padding-inline: clamp(0.75rem, 2vw, 1.75rem);
	color: var(--roya-text);
	font-size: clamp(1.125rem, 3.125vw, 2.8125rem); /* 45px */
	font-weight: var(--roya-weight-light);
	/* Figma boxes two 45px lines at 103 - 51.5 each. */
	line-height: 1.144;
	text-align: center;
}

/*
 * The section pill at the card's own size: 220x54 with a 37px icon and a 25px
 * label, against the 76-tall 40px version .roya-button ships with. Identical
 * to the projects card's pill except for the 6px icon-to-label gap, which the
 * design draws at 9 there and 6 here.
 *
 * margin-block-start:auto pins it to the card's floor, so a one-line and a
 * two-line title still line their pills up across a row - the design's cards
 * are a fixed 746 and all its titles happen to run to two lines.
 */
.roya-article-card__cta {
	--roya-button-height: clamp(2.25rem, 3.75vw, 3.375rem);  /* 54px */
	--roya-text-button: clamp(0.875rem, 1.736vw, 1.5625rem); /* 25px */
	--roya-icon-size: clamp(1.5rem, 2.569vw, 2.3125rem);     /* 37px */

	gap: clamp(0.25rem, 0.417vw, 0.375rem); /* 6px, node 18:782 to 18:785 */
	margin-block-start: auto;
	padding-block: 0;
	padding-inline: clamp(0.75rem, 1.25vw, 1.125rem); /* 18px each side */
}

/* The whole card is the link, so the hover belongs to the frame. */
.roya-article-card__frame:hover .roya-article-card__cta {
	background-color: var(--roya-graphite);
	box-shadow: var(--roya-shadow-card);
}


/* ==========================================================================
   Pagination
   Not in the design - six cards are drawn and no pager with them. Same plain
   treatment as the projects archive, so the two read as one pattern.
   ========================================================================== */

.roya-articles-archive .navigation.pagination {
	margin-block-start: var(--roya-section-gap);
	text-align: center;
}

.roya-articles-archive .page-numbers {
	display: inline-block;
	padding: var(--roya-space-1) var(--roya-space-2);
	color: var(--roya-heading);
	font-size: clamp(1rem, 1.736vw, 1.5625rem);
	text-decoration: none;
}

.roya-articles-archive .page-numbers.current {
	color: var(--roya-accent);
}


/* Mobile ----------------------------------------------------------------- */

@media (max-width: 900px) {
	/* One column. The card keeps its frame and its proportions; only the grid
	   changes, so nothing about the composition is invented. */
	.roya-articles-archive__grid {
		--roya-row-gap: var(--roya-space-5);

		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked, only the very last card has nothing below it - so the
	   second-to-last gets its connector back. */
	.roya-articles-archive__grid > .roya-article-card:nth-last-child(2)::after {
		content: "";
	}
}