/* ==========================================================================
   Blog index — /atlantic-gmat-blog/
   Loaded only where [agm_blog_index] renders (inc/agm-blog-index.php).

   Everything is namespaced .agm-blog-* and nothing here references an Astra
   class, because this page has to survive the migration off Astra and
   Elementor unchanged.

   Type and colour follow the site's existing system (see the .agre block in
   customizer.css): Georgia, 16px/1.6 body, navy #1b4e82, square corners, thin
   borders, no shadows. The 921px breakpoint is Astra's, so this page steps
   down at the same width as the rest of the site.

   No JavaScript: <details> collapses the year lists and anchors drive the
   chips. If that ever changes, the script must go on WP Rocket's delay-JS
   exclusion list.
   ========================================================================== */

.agm-blog {
	--agm-blog-navy: #1b4e82;
	--agm-blog-navy-dark: #123456;
	--agm-blog-ink: #1c1c1c;
	--agm-blog-muted: #555;
	--agm-blog-line: #dfe5ec;
	--agm-blog-rule: #d9d9d9;
	--agm-blog-tint: #f5f8fa;

	font-family: Georgia, "Times New Roman", Times, serif;
	color: var(--agm-blog-ink);
	font-size: 16px;
	line-height: 1.6;
}

.agm-blog a {
	color: var(--agm-blog-navy);
}

.agm-blog a:hover,
.agm-blog a:focus {
	color: var(--agm-blog-navy-dark);
}

.agm-blog :focus-visible {
	outline: 2px solid var(--agm-blog-navy);
	outline-offset: 2px;
}

/* ---------- intro ------------------------------------------------------ */

.agm-blog-intro {
	margin: 0 0 2.2em;
}

/* The doubled class is deliberate, not a typo. The child theme's own style.css sets
   `.site-content h2, .site-content .entry-content h2 { font-size: 1.7rem }` — (0,2,1),
   which outranks a plain `.agm-blog .agm-blog-h2` at (0,2,0) and rendered every section
   heading at 34px instead of 22px. Repeating the class buys (0,3,0) without an
   !important and without naming a single Astra or child-theme selector, so this block
   keeps its own type scale and stays portable off Astra. */
.agm-blog .agm-blog-h1.agm-blog-h1 {
	font-size: 32px;
	line-height: 1.35;
	font-weight: 700;
	margin: 0 0 .35em;
}

.agm-blog-lede {
	font-size: 18px;
	line-height: 1.55;
	color: #444;
	max-width: 62ch;
	margin: 0;
}

/* ---------- headings --------------------------------------------------- */

.agm-blog .agm-blog-h2.agm-blog-h2 {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 .25em;
}

.agm-blog-blurb {
	font-size: 16px;
	color: var(--agm-blog-muted);
	margin: 0 0 1.2em;
	max-width: 62ch;
}

/* ---------- sections --------------------------------------------------- */

.agm-blog-start,
.agm-blog-section {
	margin: 0 0 2.8em;
	padding-top: 1.6em;
	border-top: 1px solid var(--agm-blog-rule);
	/* The chip row is sticky-free, so anchored jumps land under the site header
	   without a scroll-margin the header height would have to be guessed for.
	   28px is the section's own top padding plus a line of breathing room. */
	scroll-margin-top: 28px;
}

.agm-blog-start {
	border-top: 0;
	padding-top: 0;
}

/* ---------- card grid -------------------------------------------------- */

.agm-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 1.4em;
	align-items: stretch;
}

.agm-blog-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--agm-blog-line);
	background: #fff;
	color: var(--agm-blog-ink);
	text-decoration: none;
	transition: border-color .15s ease;
}

.agm-blog-card:hover,
.agm-blog-card:focus {
	border-color: var(--agm-blog-navy);
	color: var(--agm-blog-ink);
}

/* A third of the library has no featured image. A tinted, type-only card says
   "this post is text" rather than "an image failed to load" — which is why no
   generic placeholder image is substituted. */
.agm-blog-card-plain {
	background: var(--agm-blog-tint);
}

/* The 16:9 frame is held here, not by the file on disk: many of these
   attachments predate the agm-blog-card size and are served at their original
   680x232, and the ratio has to hold anyway or the grid shifts as images
   arrive. aspect-ratio plus the img's own width/height keeps CLS at zero.

   `contain`, not `cover`. The dominant image in this library is a 680x232
   typographic page banner — nearly 3:1 — and covering that into 16:9 crops
   about 40% of its width, which cuts the banner's own words in half: the
   study-schedule banner reads "GMAT SCHEDULE" with both ends sliced off. Words
   chopped mid-letter read as a broken image, not a stylish crop. Letterboxed on
   the same tint the image-less cards already use, the banner stays legible and
   the frame stays uniform, which is what the grid actually needs. */
.agm-blog-card-img {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--agm-blog-tint);
}

.agm-blog-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	margin: 0;
}

.agm-blog-card-body {
	display: block;
	padding: 16px 18px 18px;
}

.agm-blog-card-label {
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--agm-blog-navy);
	margin: 0 0 .5em;
}

.agm-blog .agm-blog-card-title.agm-blog-card-title {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 .45em;
	color: var(--agm-blog-ink);
}

.agm-blog-card:hover .agm-blog-card-title,
.agm-blog-card:focus .agm-blog-card-title {
	color: var(--agm-blog-navy);
}

.agm-blog-card-excerpt {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--agm-blog-muted);
}

/* ---------- chip row --------------------------------------------------- */

.agm-blog-chips {
	margin: 0 0 2.4em;
	padding: 1.1em 0;
	border-top: 1px solid var(--agm-blog-rule);
	border-bottom: 1px solid var(--agm-blog-rule);
}

.agm-blog-chips-label {
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--agm-blog-muted);
	margin: 0 0 .8em;
}

.agm-blog-chips-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.agm-blog-chip {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--agm-blog-navy);
	color: var(--agm-blog-navy);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.agm-blog-chip:hover,
.agm-blog-chip:focus {
	background: var(--agm-blog-navy);
	color: #fff;
}

/* The one chip that leaves the page. The arrow is the only thing marking it,
   because it should read as part of the same row, not as a separate CTA. */
.agm-blog-chip-out::after {
	content: " \2192";
}

/* ---------- recent list ------------------------------------------------ */

.agm-blog-recent {
	list-style: none;
	margin: 0 0 1.1em;
	padding: 0;
	border-top: 1px solid var(--agm-blog-line);
}

.agm-blog-recent li {
	margin: 0;
	border-bottom: 1px solid var(--agm-blog-line);
}

.agm-blog-recent a {
	display: block;
	padding: 10px 2px;
	text-decoration: none;
	line-height: 1.4;
}

.agm-blog-recent a:hover,
.agm-blog-recent a:focus {
	text-decoration: underline;
}

.agm-blog-more {
	margin: 0;
	font-size: 15px;
}

.agm-blog-more a {
	font-weight: 700;
	text-decoration: none;
}

.agm-blog-more a:hover,
.agm-blog-more a:focus {
	text-decoration: underline;
}

/* ---------- explanations panel ----------------------------------------- */

.agm-blog-questions {
	margin: 0 0 2.8em;
}

.agm-blog-questions a {
	display: block;
	padding: 26px 30px;
	background: var(--agm-blog-navy);
	color: #fff;
	text-decoration: none;
	font-size: 17px;
	line-height: 1.55;
	transition: background-color .15s ease;
}

.agm-blog-questions a:hover,
.agm-blog-questions a:focus {
	background: var(--agm-blog-navy-dark);
	color: #fff;
}

.agm-blog-questions strong {
	display: block;
	font-size: 19px;
	margin-bottom: .25em;
}

/* ---------- all articles ----------------------------------------------- */

.agm-blog-all {
	margin: 0 0 1em;
	padding-top: 1.6em;
	border-top: 1px solid var(--agm-blog-rule);
	scroll-margin-top: 28px;
}

.agm-blog-year {
	border-bottom: 1px solid var(--agm-blog-line);
}

.agm-blog-year > summary {
	cursor: pointer;
	padding: 12px 2px;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

/* Safari still paints the default triangle without this. */
.agm-blog-year > summary::-webkit-details-marker {
	display: none;
}

.agm-blog-year > summary::before {
	content: "+";
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	color: var(--agm-blog-muted);
	width: 14px;
	flex: none;
}

.agm-blog-year[open] > summary::before {
	content: "\2212";
}

.agm-blog-year-n {
	font-weight: 700;
	font-size: 17px;
}

.agm-blog-year-c {
	font-size: 14px;
	color: var(--agm-blog-muted);
}

.agm-blog-year-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0 0 0 26px;
	columns: 2;
	column-gap: 36px;
}

.agm-blog-year-list li {
	margin: 0 0 7px;
	break-inside: avoid;
}

.agm-blog-year-list a {
	text-decoration: none;
	line-height: 1.4;
}

.agm-blog-year-list a:hover,
.agm-blog-year-list a:focus {
	text-decoration: underline;
}

/* ---------- 921px: Astra's breakpoint ---------------------------------- */

@media (max-width: 921px) {
	.agm-blog .agm-blog-h1.agm-blog-h1 {
		font-size: 28px;
	}

	.agm-blog .agm-blog-h2.agm-blog-h2 {
		font-size: 20px;
	}

	.agm-blog-lede {
		font-size: 17px;
	}

	.agm-blog-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	/* The chip row scrolls sideways rather than stacking into eight rows that
	   push the first section off the screen. The negative margins let it bleed
	   to the viewport edge so the cut-off chip reads as scrollable. */
	.agm-blog-chips-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		margin: 0 -20px;
		padding: 0 20px 6px;
	}

	.agm-blog-year-list {
		columns: 1;
	}

	.agm-blog-questions a {
		padding: 22px 20px;
		font-size: 16px;
	}

	.agm-blog-questions strong {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agm-blog * {
		transition: none !important;
	}
}