/* ============================================================
   Freaura — JOURNAL (blog) listing restyle
   archive.php  → wireframe .journal-grid listing
   (single blog posts are left as Astra's default rendering)
   Uses --font-* tokens (bare --display/--serif/--sans collide
   with Elementor and are avoided per the child-theme rules).
   ============================================================ */

/* Full-width cream canvas + hide Astra's default archive chrome
   (archive.php renders its own .frx-journal-header). */
body.blog,
body.archive {
	background: var(--cream);
}
body.blog .ast-archive-description,
body.archive .ast-archive-description,
body.blog .entry-title,
body.archive .entry-title { display: none; }

/* Break out of Astra's fixed container so the header divider is edge-to-edge.
   Astra sets `.site-content .ast-container{display:flex;flex-direction:row}`
   at >=922px, which puts our page-header and grid SIDE BY SIDE. Force the
   container to stack so the full-width header sits ABOVE the full-width grid. */
body.blog #content .ast-container,
body.archive #content .ast-container {
	display: block !important;
	max-width: 100%; padding-left: 0; padding-right: 0; width: 100%;
}
body.blog #primary, body.archive #primary,
body.blog #main.site-main, body.archive #main.site-main {
	padding-top: 0 !important; margin-top: 0 !important;
	width: 100% !important; max-width: 100% !important;
}
/* direct children (header + grid) span the full container width; the grid's
   own max-width (1400px, wireframe) then re-centers its inner content. */
body.blog #content .ast-container > *,
body.archive #content .ast-container > * {
	width: 100%; float: none;
}

/* ---------- shared page header (matches wireframe .page-header) ---------- */
.frx-journal-header {
	width: 100%; padding: 100px 50px 80px; text-align: center;
	border-bottom: 0.5px solid var(--line); margin: 0;
}
.frx-journal-header .breadcrumb {
	font-family: var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.32em;
	text-transform: uppercase; color: var(--ink-soft); margin-bottom: 24px;
}
.frx-journal-header .breadcrumb a { color: var(--ink-soft); text-decoration: none; transition: color 0.3s; }
.frx-journal-header .breadcrumb a:hover { color: var(--brass); }
.frx-journal-header .breadcrumb .sep { color: var(--brass); margin: 0 12px; }
.frx-journal-header h1 {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(48px, 6vw, 88px); line-height: 1.05; text-transform: none;
	color: var(--ink); margin: 0 0 18px;
}
.frx-journal-header h1 .it { font-style: italic; color: var(--emerald); }
.frx-journal-header .sub {
	font-family: var(--font-serif); font-style: italic; font-size: 20px; font-weight: 400;
	color: var(--ink-soft); line-height: 1.5; max-width: 520px; margin: 0 auto;
}

/* ---------- listing grid (wireframe .journal-grid) ---------- */
.frx-journal-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px;
	max-width: 1400px; margin: 0 auto; padding: 70px 50px 100px;
}
.frx-journal-card { display: block; text-decoration: none; }
.frx-journal-img {
	aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-deep);
	margin-bottom: 22px;
}
.frx-journal-img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.frx-journal-card:hover .frx-journal-img img { transform: scale(1.05); }
.frx-journal-meta {
	font-family: var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.4em;
	text-transform: uppercase; color: var(--brass); margin-bottom: 12px;
}
.frx-journal-title {
	font-family: var(--font-display); font-size: 26px; font-weight: 400;
	line-height: 1.25; color: var(--ink); margin: 0 0 12px;
	text-transform: none; transition: color 0.3s;
}
.frx-journal-title .it { font-style: italic; color: var(--emerald); }
.frx-journal-card:hover .frx-journal-title { color: var(--emerald); }
.frx-journal-excerpt {
	font-family: var(--font-serif); font-size: 18px; font-weight: 400; color: var(--ink-soft);
	line-height: 1.7; margin: 0;
}

/* empty-state (no posts yet) */
.frx-journal-empty {
	max-width: 620px; margin: 0 auto; padding: 90px 50px 120px; text-align: center;
	font-family: var(--font-serif); font-size: 18px; color: var(--ink-soft);
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.frx-journal-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; padding: 56px 30px 80px; }
	.frx-journal-header { padding: 48px 30px 60px; }
	.frx-journal-header h1 { font-size: 42px; }
}
@media (max-width: 782px) {
	.frx-journal-grid { grid-template-columns: 1fr; gap: 44px; padding: 44px 24px 72px; }
	.frx-journal-header { padding: 40px 24px 44px; }
	.frx-journal-header h1 { font-size: 34px; }
}
@media (max-width: 480px) {
	.frx-journal-header { padding: 32px 20px 36px; }
	.frx-journal-grid { padding: 36px 20px 60px; }
}