/* ============================================================================
   gryphon-replica — blog.css
   RECON-DESIGN §15.2 — index cards carry "by <Author><Date>" ABOVE the title;
   the article repeats that order: author + date, then the h1.
   ========================================================================= */

.gr-blog { padding: 24px 0 64px; }
.gr-blog .gr-breadcrumb { margin: 0 0 14px; }

.gr-blog-title {
	font-family: Vollkorn, serif;        /* the source's stack, deliberately not loaded */
	font-weight: 500;
	font-size: 38px;
	line-height: 1.2;
	color: var(--color-heading);
	text-align: center;
	margin: 0 0 32px;
}

.gr-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 30px;
}

.gr-blogcard { margin: 0; }
.gr-blogcard-img { display: block; margin: 0 0 12px; }
.gr-blogcard-img img {
	display: block;
	width: 100%;
	height: 220px;        /* measured: the source crops its blog thumb to 220px at EVERY width */
	object-fit: cover;
	background: var(--color-bg-alternative);
}

/* byline sits ABOVE the title — measured, not assumed */
.gr-blogcard-meta,
.gr-article-meta {
	margin: 0 0 6px;
	font-family: var(--font-family);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #9a9894;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.gr-byline { color: var(--color-primary); font-weight: 700; }

.gr-blogcard-title {
	font-family: var(--font-family-header);
	font-weight: var(--font-weight-header);
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 8px;
}
.gr-blogcard-title a { color: var(--color-heading); }
.gr-blogcard-title a:hover { color: var(--color-primary); }
.gr-blogcard-excerpt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-body); }

/* ---- article ---- */
.gr-article { padding: 24px 0 64px; }
/* The source's text column is bootstrap's .col-md-8.col-md-offset-2: 66.6667% of the 1170px inner
   container (780px box, 750px of text) from 992px up, and FULL WIDTH below that — the offset
   collapses with the md grid. A fixed 760px max-width got 1440 roughly right and left 1024 at
   760px where the source is 617. */
.gr-article-body {
	width: 100%;
	max-width: 780px;
	padding: 0 15px;
	margin: 0 auto;
}
@media (min-width: 992px) {
	.gr-article-body { width: 66.6667%; max-width: 780px; }
}

/* Head and hero sit OUTSIDE the text column, across the container. */
.gr-article-head { margin: 0 0 15px; }
.gr-article-head .gr-article-meta { text-align: center; }
/* The source's hero sits inside a padded .col-md-12, so its box is 1140 at a 1170 container —
   not 1170. 15px each side, measured. */
.gr-article-hero { margin: 0 0 30px; padding: 0 15px; }
.gr-article-hero img {
	display: block;
	width: 100%;
	height: auto;
	/* The source CROPS this band: 1140x450 at 1440 and 940x384 at 1024, from a 1242x744 original.
	   object-fit reproduces the crop; letting the photo through at its own aspect would add ~230px
	   of height that the source does not have. */
	aspect-ratio: 1140 / 450;
	object-fit: cover;
}
@media (max-width: 767px) {
	/* 330x422 at 390 — the band becomes TALLER than wide on a phone. */
	.gr-article-hero img { aspect-ratio: 330 / 422; }
}
.gr-article-meta { justify-content: center; margin-bottom: 10px; }
/* Measured live, at all three viewports: Vollkorn 400, 45px/45px, letter-spacing 3px, CENTRED,
   and the box is the full container — it is the theme's page-header-title band, not a heading
   inside the text column. It keeps 45px on a phone and wraps to three lines (135px). */
.gr-article-title {
	font-family: Vollkorn, serif;
	font-weight: 400;
	font-size: 45px;
	line-height: 45px;
	letter-spacing: 3px;
	text-align: center;
	color: var(--color-heading);
	margin: 0 0 15px;
}
/* .rte-page { font-size: var(--font-size-rte) } and --font-size-rte is 19px at source, at EVERY
   breakpoint — the article body does not shrink on a phone. Ours was 17px, dropping to 16px under
   768px, which is a visibly lighter article and ~1,000px of the height difference.

   ⚠ The source also omits `height:auto` from its image rule (styles.css gives .rte-page img only
   max-width:100%), so its photos keep the 568px `height` attribute and stretch vertically on a
   narrow screen — 330x557 at 390 instead of 330x198. That is a source DEFECT, and it is most of
   the remaining height gap on this page. We do not reproduce it, for the same reason the build
   strips PageFly's "Drop element here" placeholders: a visible distortion shipped to the owner's
   customers is not fidelity. Recorded in PROJECT-BRIEF. */
.gr-article .gr-entry { font-size: 19px; line-height: 1.5; }
.gr-article .gr-entry img { display: block; max-width: 100%; height: auto; margin: 22px auto; }
/* The source's inline photo captions are LINKS ("c.1900 A.A. Farland Concert Grand Banjo »"). */
.gr-article .gr-entry a { text-decoration: underline; }

.gr-article-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	max-width: 760px;
	margin: 44px auto 0;
	padding-top: 22px;
	border-top: 1px solid #e3e0da;
	font-size: 14px;
}
.gr-article-nav a { color: var(--color-body); }
.gr-article-nav a:hover { color: var(--color-primary); }
.gr-article-next { text-align: right; }

/* ============================================================================
   RESPONSIVE — full selectors repeated; media queries add no specificity.
   ========================================================================= */
@media (max-width: 991px) {
	.gr-blog .gr-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
	.gr-blog .gr-blog-title { font-size: 30px; }
}
@media (max-width: 767px) {
	.gr-blog .gr-blog-grid { grid-template-columns: 1fr; gap: 26px; }
	.gr-blog .gr-blog-title { font-size: 26px; }
	/* the article body stays 19px on a phone at source — see above */
	.gr-article .gr-article-nav { flex-direction: column; gap: 10px; }
	.gr-article .gr-article-next { text-align: left; }
}