/*
============================================================
  ARCA STUDIO — Journal / Blog Article Typography
  ------------------------------------------------------------
  Additive layer for the Journal archive and Single Post
  templates. It ONLY completes the styling of native
  WordPress block elements that appear inside .s-article
  (pull-quotes, in-article images + captions, lists, etc.)
  so posts written in Posts → Add New render in the exact
  ARCA aesthetic.

  • Reuses the existing design tokens (--a-*) from theme.css.
  • Adds no new colours, fonts or spacing values.
  • Scoped to .s-article / .s-journal-card, so nothing
    outside the blog is affected.
  • Enqueued only on blog-post contexts (Journal archive,
    single posts, blog home / post archives / search).
============================================================
*/

/* ==========================================================================
   JOURNAL POST CARD
   --------------------------------------------------------------------------
   Restores the original ARCA Journal card layout beneath each featured image:
   category overline → title → excerpt → "Read article" link. Reuses the
   existing .s-overline, .s-card and .s-link-underline styles/tokens; only the
   card-specific rhythm is defined here so the metadata matches the original.
   ========================================================================== */

/* ---------- GRID & CARD BOX MODEL ----------
   Each card is a normal, independent grid item: no masonry, no negative
   margins, no absolute positioning. Cards are top-aligned and flow in a
   column so a short card can never overlap the row beneath it. */
.s-journal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: var(--a-12, 3rem) var(--a-8, 2rem);
}
.s-journal-grid > .s-journal-card {
	transform: none;
	position: relative;
	align-self: start;
	min-width: 0;
}

.s-journal-card {
	display: flex;
	flex-direction: column;
	height: auto;
	overflow: visible;
}

/* The media wrapper is an <a>, which is inline by default — without an
   explicit display:block the aspect-ratio and overflow below are ignored and
   the image renders at its own proportions, producing unequal rows. */
.s-journal-card > .s-card__media {
	display: block;
	flex: 0 0 auto;
	width: 100%;
}
.s-journal-card .s-card__body {
	flex: 1 1 auto;
}

/* Guarantee the card text is rendered and visible, whatever an optimisation
   plugin or leftover Elementor rule may try to do to it. */
.s-journal-card .s-card__body {
	display: block;
	visibility: visible;
	opacity: 1;
	height: auto;
	max-height: none;
	overflow: visible;
	text-indent: 0;
	font-size: var(--a-body, 1.0625rem);
}
.s-journal-card .s-card__body > * {
	visibility: visible;
	opacity: 1;
}
.s-journal-card { overflow: visible; }

/* Media proportion — matches the original Journal grid (landscape 4:3). */
.s-journal-card .s-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0;
	background: var(--a-greige, #E9E1D4);
}
.s-journal-card .s-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--a-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.s-journal-card:hover .s-card__media img { transform: scale(1.03); }

/* Card shell — transparent, borderless, left-aligned (as in the original). */
.s-journal-card {
	background: transparent;
	border: none;
	border-radius: 0;
}
.s-journal-card:hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}

/* Body spacing. */
.s-journal-card .s-card__body {
	padding: var(--a-4, 1rem) 0 0;
	text-align: left;
	background: transparent;
}

/* Category overline — uppercase, letter-spaced, taupe. */
.s-journal-card .s-card__body .s-overline,
.s-journal-card .s-journal-card__cat {
	display: inline-block;
	font-family: var(--a-font-body, 'Jost', -apple-system, sans-serif);
	font-size: var(--a-overline, 0.75rem);
	font-weight: 500;
	letter-spacing: var(--a-tracking-overline, 0.32em);
	text-transform: uppercase;
	color: var(--a-taupe, #9B9184);
	margin-bottom: var(--a-3, 0.75rem);
	text-decoration: none;
	transition: color 0.3s ease;
}
a.s-journal-card__cat:hover,
.s-journal-card .s-card__body a.s-overline:hover { color: var(--a-charcoal, #2C2A28); }

/* Title — Cormorant Garamond, 1.5rem, weight 400 (matching the original). */
.s-journal-card .s-card__body h3,
.s-journal-card .s-journal-card__title {
	font-family: var(--a-font-display, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0.2rem 0 0.7rem;
	color: var(--a-charcoal, #2C2A28);
}
.s-journal-card .s-card__body h3 a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}
.s-journal-card .s-card__body h3 a:hover { color: var(--a-taupe, #9B9184); }

/* Excerpt — secondary text tone, comfortable measure. */
.s-journal-card .s-card__body p,
.s-journal-card .s-journal-card__excerpt {
	font-family: var(--a-font-body, 'Jost', -apple-system, sans-serif);
	font-size: var(--a-small, 0.9375rem);
	line-height: 1.7;
	color: var(--a-stone, #6E6A63);
	margin: 0 0 var(--a-4, 1rem);
}

/* "Read article" link inherits the existing .s-link-underline style. */
.s-journal-card .s-card__body .s-link-underline {
	color: var(--a-charcoal, #2C2A28);
}

/* ---------- SUBTITLE / INTRODUCTION ----------
   The single-post subtitle reuses .s-lead; this just guarantees
   comfortable rhythm beneath the title on article headers. */
.s-page-hero .s-lead {
	font-style: normal;
}

/* ---------- ARTICLE FLOW ----------
   theme.css already sets .s-article font-size/line-height,
   paragraph spacing, h2 margin-top and img radius/margins.
   The rules below only fill the gaps for block-editor output. */

/* Headings: keep the display face and a clear first-heading rhythm. */
.s-article h2 {
	font-family: var(--a-font-display, 'Cormorant Garamond', Georgia, serif);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: var(--a-4, 1rem);
}
.s-article h2:first-child { margin-top: 0; }

.s-article h3 {
	font-family: var(--a-font-display, 'Cormorant Garamond', Georgia, serif);
	font-weight: 400;
	line-height: 1.25;
	margin-top: var(--a-8, 2rem);
	margin-bottom: var(--a-3, 0.75rem);
}

/* Links inside the article: subtle underline in the ink tone. */
.s-article a {
	color: var(--a-charcoal, #2C2A28);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--a-stone, #C3B8A8);
	transition: text-decoration-color 0.3s ease;
}
.s-article a:hover { text-decoration-color: var(--a-charcoal, #2C2A28); }

/* Lists: match paragraph rhythm and indentation. */
.s-article ul,
.s-article ol {
	margin: 0 0 var(--a-6, 1.5rem);
	padding-left: 1.4em;
}
.s-article li { margin-bottom: 0.5em; }

/* ---------- PULL QUOTE (core/quote) ----------
   theme.css styles the bare <blockquote>; normalise the Gutenberg
   wrapper margins and add a touch more breathing room so the quote
   reads as a considered pause in the article. */
.s-article .wp-block-quote {
	margin: var(--a-10, 3rem) 0;
	padding-left: var(--a-6, 1.5rem);
	border-left: 1px solid var(--a-taupe, #9B9184);
}
.s-article .wp-block-quote p {
	font-family: var(--a-font-display, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.7rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--a-charcoal, #2C2A28);
	margin-bottom: 0.4em;
}
.s-article .wp-block-quote cite,
.s-article .wp-block-quote__citation {
	display: block;
	font-family: var(--a-font-body, 'Jost', -apple-system, sans-serif);
	font-size: var(--a-overline, 0.72rem);
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--a-taupe, #9B9184);
	margin-top: var(--a-3, 0.75rem);
}

/* ---------- IN-ARTICLE IMAGE (core/image) ----------
   theme.css rounds .s-article img and spaces it; complete the
   figure/caption treatment for a premium editorial feel. */
.s-article figure.wp-block-image {
	margin: var(--a-10, 3rem) 0;
}
.s-article figure.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--a-radius-md, 4px);
}
.s-article figure.wp-block-image figcaption,
.s-article .wp-element-caption {
	margin-top: var(--a-3, 0.75rem);
	font-family: var(--a-font-body, 'Jost', -apple-system, sans-serif);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--a-stone, #C3B8A8);
	text-align: center;
	font-style: italic;
}

/* Full-width images can breathe slightly beyond the narrow measure. */
.s-article figure.wp-block-image.alignwide {
	width: 100%;
}

/* ---------- FIRST PARAGRAPH LEAD-IN ----------
   A gentle, optional editorial touch: the opening paragraph sits a
   touch larger, echoing premium magazine layouts — without changing
   the body size the client sees while typing. */
.s-article > p:first-of-type {
	font-size: 1.2rem;
	line-height: 1.75;
	color: var(--a-concrete, #6E6A63);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
	.s-journal-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--a-8, 2rem);
	}
}
@media (max-width: 640px) {
	.s-journal-grid {
		grid-template-columns: 1fr;
		gap: var(--a-8, 2rem);
	}
}
@media (max-width: 640px) {
	.s-article .wp-block-quote p { font-size: 1.4rem; }
	.s-article > p:first-of-type { font-size: 1.1rem; }
}