/*
 * the illūminātum — Responsive Patch
 * ─────────────────────────────────────────────────────────────
 * Load AFTER assets/styles/styles.css in data/head.php:
 *
 *   <link rel="stylesheet" href="<?php echo $base_url; ?>assets/styles/responsive-patch.css">
 *
 * This file supplements (does not replace) styles.css.
 * Two sections:
 *   1. Tablet  757 px – 1024 px  (entirely new)
 *   2. Mobile  ≤ 756 px          (fills gaps in the existing mobile block)
 */

@media screen and (max-width: 1024px) {
    .site-tagline {
        display: none;
    }
}

/*
 * ── Hamburger button ─────────────────────────────────────────────
 * Hidden on desktop/tablet. Shown on mobile (below).
 * Lives inside .banner so it sits in the same flex row as the logo
 * and has real rendered height — the old .topnav icon had none.
 * All browser button defaults are reset here.
 */
.hamburger-btn {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 6px 8px;
	margin-left: auto;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

.hamburger-btn:focus {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}


/* ================================================================
   1. TABLET  –  757 px to 1024 px
   ================================================================ */

@media screen and (min-width: 757px) and (max-width: 1024px) {

	/* ── Page container ───────────────────────────────────────── */

	.page {
		width: 88%;
	}


	/* ── Hero banners ─────────────────────────────────────────── */

	.home_image,
	.article_image,
	.resource_image {
		height: 360px;
	}

	/* Listing-page hero headlines (Articles / Resources / About) */
	#article h1,
	#about h1,
	#resource h1 {
		font-size: 52px;
		top: 35%;
	}


	/* ── Navigation ───────────────────────────────────────────── */

	/* Tighten the top menu so all links fit on one line at tablet width */
	.banner .top_menu ul {
		gap: 0;
	}

	.banner .top_menu ul li {
		padding: 0 8px;
		font-size: 0.82em;
	}


	/* ── Main layout: sidebar + content ──────────────────────── */

	aside.side_bar {
		width: 28%;
	}

	div#content {
		width: 70%;
	}


	/* ── Home page: 2-column content blocks ──────────────────── */

	div#content {
		flex-wrap: wrap;
	}

	.home_content_block {
		width: 47%;
		margin-bottom: 16px;
	}

	/* Third block spans full width below the first two */
	.home_content_block:last-child {
		width: 97%;
		border-right: none;
		border-top: solid 1px #ccc;
		padding-top: 14px;
		margin-left: 0;
	}


	/* ── Articles listing: 2-column ──────────────────────────── */

	div#content.collection_page {
		flex-wrap: wrap;
	}

	/* collection_page uses .home_content_block; the rules above apply.
	   Override :last-child so the third article card doesn't go full-width —
	   all three article cards stay roughly equal width on tablet. */
	div#content.collection_page .home_content_block:last-child {
		width: 47%;
		border-top: none;
		padding-top: 0;
		border-right: solid 1px #ccc;
	}


	/* ── Resources page: 2-column ────────────────────────────── */

	div#content.resource_page {
		flex-wrap: wrap;
	}

	.resource_content_block {
		width: 46%;
		margin-bottom: 16px;
	}

	.last_block.resource_content_block {
		width: 97%;
		border-right: none;
	}


	/* ── Article detail pages ────────────────────────────────── */

	/* Article content headline (h1.content-headline inside #content) */
	#article #content h1.content-headline {
		font-size: 32px;
	}


	/* ── About page ───────────────────────────────────────────── */

	.about aside.side_bar {
		width: 30%;
	}

	#about .copy_block {
		min-height: auto;
	}

}


/* ================================================================
   2. MOBILE FIXES  –  ≤ 756 px
   Supplements the existing mobile block in styles.css.
   Rules here are more specific so they safely override where needed.
   ================================================================ */

@media screen and (max-width: 756px) {

	/* ── Hamburger button ────────────────────────────────────────── */

	/* Show the button (hidden by default outside media queries) */
	.hamburger-btn {
		display: block;
	}

	/* Prevent the logo from squeezing the button in the flex row */
	.logo_type {
		flex-shrink: 1;
		min-width: 0;
	}

	/*
	 * Two fixes for the dropdown appearing invisible / behind the page:
	 *
	 * 1. header has z-index:1 in styles.css — not high enough to clear
	 *    the .page div that follows it in the DOM. Raise it to 300 so
	 *    the open dropdown paints on top of all page content.
	 *
	 * 2. styles.css sets overflow:hidden on .topnav (to collapse it when
	 *    the menu is closed). That same rule clips the dropdown's background
	 *    paint so it appears transparent. Switch to overflow:visible here
	 *    and let the solid #myLinks background do the work instead.
	 */
	header {
		z-index: 300;
	}

	/*
	 * Hero image cropping: overflow:visible is required on the containers so the
	 * hamburger dropdown can escape them. But that means tall images are no longer
	 * cropped by the container. Fix: crop the <img> directly with a fixed height
	 * and object-fit:cover — the container doesn't need overflow:hidden at all.
	 */
	.home_image,
	.article_image,
	.resource_image,
	.about_image {
		overflow: visible;
		height: auto;
	}

	.home_image > img,
	.article_image > img,
	.resource_image > img,
	.about_image > img {
		display: block;
		width: 100%;
		height: 260px;
		object-fit: cover;
		object-position: center;
	}

	#home h1 {
        font-family: "Raleway", sans-serif;
        position: relative;
        top: 20%;
        color: #fff;
        width: 100%;
        z-index: 1;
        height: auto;
        text-align: center;
        font-size: 19px;
        font-weight: 500;
        padding-bottom: 10px;
		left: 0;
		right: 0;
	}
	
	.site-tagline__primary, h1 .tag-1 {
		font-size: 18px;
	}
	
	.site-tagline__secondary, h1 .tag-2 {
		font-size: 9px;
	}
	
	.article-carousel {
		margin: 0;
		top: -13px;
	}
	
	.home_content_block h3.opp-block__heading {
		width: 100%;
	}
	
	.opp-card__meta {
		gap: 0.5rem 1.25rem;
		gap: 0.5rem 1.25rem;
	}


	.opp-card__title {
		font-size: 1rem;
	}
	
	.sib-form-container .divider {
		border: none;
	}
	
	footer .left p {
        line-height: 36px;
        padding-bottom: 36px;
    }
	
	.hamburger-btn .fa {
        font: normal normal normal 36px / 1 FontAwesome ! Important;
    }
	
	section {
		margin: 0px;
	}

	#home section {
        margin: 10px 0 0;
    }
	
	.topnav {
		overflow: visible;
		position: relative;
		z-index: 300;
		background-color: transparent;
	}

	#myLinks {
		background-color: #fff;
		border-top: 2px solid #333;
		padding: 0 16px 8px;
		position: relative;
		z-index: 300;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* subtle shadow to separate from page */
	}

	#myLinks a {
		border-bottom-color: #ddd; /* softer than the default solid black */
	}



	/* ── Sidebar order ────────────────────────────────────────────
	 * Sidebar ordering is handled at the PHP level: each page template
	 * includes side_bar.html AFTER <div id="content"> so it naturally
	 * stacks below on mobile (normal flow) without any CSS tricks.
	 * See: index.php, articles.php, resources.php, and all article
	 * detail pages — the include is now after </div> closing #content.
	 */



	/* ── Hero headlines ───────────────────────────────────────── */

	/*
	 * Critical fix: the listing-page hero h1 was never reduced from 84 px.
	 * Targets: <h1>Articles</h1>, <h1>Resources</h1>, <h1>About Us</h1>
	 * which live inside div.article_image / .resource_image / .about_image.
	 */
	#article h1,
	#about h1,
	#resource h1 {
		display: block;
		font-size: 54px;
		margin: 0;
	}

	/* Article detail page: content headline (not a hero — it's in the page body).
	   Overrides the desktop 44 px which is too large on a phone. */
	#article #content h1.content-headline {
		font-size: 24px;
		position: relative;
		top: auto;
		width: 97%;
		color: #333;
	}

	/* Banner image heights: let non-home banners scale naturally */
	.article_image,
	.resource_image {
		height: auto;
		min-height: 160px;
	}
	
	#about .copy_block {
		min-height: auto;
}


	/* ── Articles listing: force single column ────────────────── */

	/*
	 * Without !important, the div#content.collection_page rule in styles.css
	 * uses flex-direction: row !important which overrides the mobile column rule.
	 */
	div#content.collection_page,
	div#content.resource_page {
		flex-direction: column !important;
	}
	
	#article #content, #resource #content {
		flex-direction: column;
		border-right: none;
		margin-right: 10px;
	}

	#article .content_block_image img {
		width: 100%;
	}
	
	#article .article_title {
		width: 100%;
	}

	#article #content p, #resource #content p {
		padding: 0;
	}

	/* Each article card: full width, separated by a bottom rule */
	div#content.collection_page .home_content_block {
		width: 100%;
		border-right: none;
		/*border-bottom: solid 1px #ccc;*/
		padding-bottom: 16px;
		margin-bottom: 10px;
	}
	
	.home_content_block img, .resource_content_block img {
		width: 100%;
	}

	#article .story_block {
		width: 100%;
	}

	div#content.collection_page .home_content_block:last-child {
		border-bottom: none;
		border-top: none;
		padding-top: 0;
	}
	
	#about .attribution {
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		position: absolute;
		bottom: 5px;
		right: 2%;
		text-align: right;
	}
	
	#article .divider {
    width: 100%;
}


	/* ── Resources page: single column ──────────────────────── */

	.resource_content_block {
		width: 100%;
		border-right: none;
		/*border-bottom: solid 1px #ccc;*/
		padding-bottom: 16px;
		margin-bottom: 10px;
	}

	.last_block.resource_content_block {
		border-bottom: none;
		margin-bottom: 0;
	}
	
	.home_content_block h2, .side_bar_content h3, .side_bar_content h2, #about .content .copy_block h2, .resource_content_block h2 {
		border-bottom: solid 1px #ccc;
		margin-right: 0;
		padding-bottom: 10px;
		margin-bottom: 10px;
		margin-top: 0;
		border-top: solid 1px #ccc;
		padding-top: 10px;
	}
	
/*	.home_content_block h2:first-child {
        border-top: none;
		padding-top: 10px;
    }
*/

	/* ── Article detail pages ────────────────────────────────── */

	/* Hero image inside the content area */
	#article #content .article_image {
		width: 100%;
	}

	/* Lead paragraph */
	#article p.leadin,
	#resource p.leadin {
		font-size: 17px;
		line-height: 26px;
	}

	/* Resources section at bottom of articles */
	#article #content .article_resources, .resource_entry {
		width: 100%;
	}
	
	.resource_entry:last-child {
		border-bottom: 0px;
	}
	
	#resource aside.side_bar {
        border-left: none;
        display: block;
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        height: auto;
        padding-top: 10px;
        margin: 0 auto;
    }
	

	/* ── .ilu-article (article body typography) ──────────────── */

	/* Already has padding: 0 1.25rem which handles most of it.
	   Just ensure pull quotes don't overflow on very narrow screens. */
	.ilu-article .ilu-pullquote {
		padding: 1.2rem 1.2rem 1rem;
		margin: 1.5rem 0;
	}

	.ilu-article .ilu-invitation {
		padding: 1.5rem 1.2rem;
		margin: 2rem 0;
	}


	/* ── About page copy blocks ──────────────────────────────── */

	/* The two copy blocks sit side-by-side on desktop.
	   On mobile they need a gap between them. */
	#about .copy_block + .copy_block {
		/*border-top: solid 1px #ccc;*/
		padding-top: 16px;
		margin-top: 8px;
	}


	/* ── Footer ──────────────────────────────────────────────── */

	footer .left p {
		margin: 0 10px;
		font-size: 1rem;
	}

}
/* ── Related articles ─────────────────────────────────────────────── */

@media (max-width: 700px) {
    .related-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .related-card a {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: .75rem;
        align-items: start;
    }
	
    .related-card__thumb {
        margin-bottom: 0;
        aspect-ratio: 1 / 1;
		position: relative;
		top: 5px;
    }
	
    .related-block__heading {
        font-size: 1.1rem;
    }
}