/* ==========================================================================
   article-listing-card.css
   Structural layout for the article listing on articles.php.

   Scope: layout, spacing, grid/flex relationships, and positioning only.
   Decorative styling (colors, font weights, hover states, pill background,
   typography) is left to the main stylesheet.

   Hooks introduced:
     .category_content_block                — per-category wrapper
     .category_content_block__category      — the H2 category heading
     .article-listing-card                  — a single article card
     .article-listing-card--coming-soon     — state modifier
     .article-listing-card__pill            — "Coming soon" indicator
     .article-listing-card__image-link      — anchor wrapping the image
     .article-listing-card__image           — the 16:9 listing image
     .article-listing-card__title           — the H3 article title (overlaid)
     .article-listing-card__title-line1     — first line of two-line titles
     .article-listing-card__title-line2     — second line of two-line titles
     .article-listing-card__meta            — date container (extensible)
     .article-listing-card__date            — the publish date <time>
     .article-listing-card__abstract        — the abstract paragraph
     .article-listing-card__cta             — the call-to-action wrapper
   ========================================================================== */


/* ── Category group wrapper ──────────────────────────────────────────────── */
/* Two-up grid: cards lay out in two columns on screens 720px+, single column */
/* below. The H2 spans the full row above the cards.                          */

.category_content_block {
	display: grid;
	grid-template-columns: 1fr;
	gap: .75rem;
	padding-bottom: 20px;
	margin-bottom: 0;
}

.category_content_block:last-child {
	margin-bottom: 0;
}

@media (min-width: 720px) {
	.category_content_block {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 0.5rem;
	}
}

#article #content .collection_page {
    flex-direction: column;
    border-right: solid 1px #ccc;
    margin-right: 10px;
    display: inline-grid;
    width: 70%;
}

h2.category_content_block__category {
	/* H2 spans both columns above its cards. */
	grid-column: 1 / -1;
	font-size: 18px;
	font-family: 'Raleway';
	color: #333;
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	padding: 10px 0;
	margin: 0;
	text-transform: uppercase;
	margin-right: 0;
}


/* ── The listing card ────────────────────────────────────────────────────── */

.article-listing-card {
	display: flex;
	flex-direction: column;
	/*border-bottom: solid 1px #ccc;*/
	padding: 0;
	width: 95%;
	/* No bottom margin — spacing between cards is handled by grid `gap`. */
}


/* ── Image (16:9 aspect, with title-overlay gradient) ────────────────────── */

.article-listing-card__image-link {
	display: block;
	margin: 0 0 1rem 0;
	/* Reserve the 16:9 box so layout does not shift as the image loads. */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}

.article-listing-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Top-down gradient over the image to ensure title legibility. */
.article-listing-card__image-link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}


/* ── Coming-soon pill ────────────────────────────────────────────────────── */
/* Currently hidden pending A/B test. To re-enable, change display from none */
/* and consider how the pill should sit relative to the overlaid title.     */

.article-listing-card__pill {
	display: none;
	/* When re-enabled, the absolute-positioned title will overlap with this  */
	/* pill in document flow. Likely solution: position the pill absolutely   */
	/* inside .article-listing-card__image-link as well (e.g., top-left or   */
	/* top-right corner of the image), or render it above the image entirely */
	/* outside the overlay context.                                           */
}


/* ── Title (H3, overlaid on image) ───────────────────────────────────────── */

.article-listing-card__title {
	margin: 0 0 0.4rem 0;
	position: absolute;
	max-width: 420px;
	color: #fff;
	padding: 10px 20px;
}

h3.article-listing-card__title a {
	color: #fff;
}

.article-listing-card__title a {
	color: inherit;
	text-decoration: none;
}

span.article-listing-card__title-line1 {
	font-size: 20px;
	display: block;
}

span.article-listing-card__title-line2 {
	font-size: 16px;
	display: block
}


/* ── Meta row (date, and any future sibling metadata) ────────────────────── */

.article-listing-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 0.75rem 0;
}

.article-listing-card__date {
	font-size: .8em;
	margin: 0;
	font-style: italic;
	font-weight: 600;
}


/* ── Abstract ────────────────────────────────────────────────────────────── */

.article-listing-card__abstract {
	margin: 0 0 1rem 0;
	font-size: .85em;
	font-weight: 400;
}


/* ── CTA ─────────────────────────────────────────────────────────────────── */

.article-listing-card__cta {
	margin: 0;
	font-size: 0.8rem;
}

.article-listing-card__cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}


/* ==========================================================================
   ORPHAN-CARD HANDLING (categories with an odd number of articles)
   --------------------------------------------------------------------------
   When a category has an odd number of articles, the last article will sit
   alone in the left column with empty space to the right. Three options:

   OPTION 1 (default): accept the orphan column.
   No additional CSS needed. Visually fine, indicates "no more in this
   category."

   OPTION 2: stretch the orphan to full width (uncomment to enable).
   Use when you want to give the last article in an odd-numbered category
   stronger visual emphasis.

   @media (min-width: 720px) {
       .article-listing-card:last-child:nth-child(odd) {
           grid-column: 1 / -1;
       }
   }

   OPTION 3: center the orphan in the row (uncomment to enable).
   Treats the orphan as a centered, half-width card rather than a left-
   aligned one.

   @media (min-width: 720px) {
       .article-listing-card:last-child:nth-child(odd) {
           grid-column: 1 / -1;
           max-width: calc(50% - 1.25rem);
           margin: 0 auto;
       }
   }
   ========================================================================== */

@media (max-width: 720px) {
	.article-listing-card {
		width: 100%;
	}
}