/* Beyond Affairs — styles_responsive.css
   All @media overrides. No visual defaults here.
   Breakpoints from responsive-breakpoints.md reference doc. */


/* ============================================================
   Article layout — 1100px: tighten sidebar gap
   ============================================================ */

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

	.article-layout__inner {
		grid-template-columns: 1fr 256px;
		gap: 40px;
	}

}


/* ============================================================
   1300px — content area gains breathing room
   ============================================================ */

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

	/* padding-inline: logical property for left/right padding */
	.pad {
		padding-inline: 48px;
	}

}


/* ============================================================
   1280px — nav gap narrows
   ============================================================ */

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

	#navBar ul {
		gap: 1.4em;
	}

}


/* ============================================================
   1030px — hamburger activates, CTAs consolidate
   ============================================================ */

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

	/* Nav flyout and hamburger are handled by Max Mega Menu at this breakpoint. */

	/* Restore MMM's toggle button at mobile */
	#mega-menu-wrap-primary .mega-menu-toggle {
		display: flex !important;
	}

	/* Show mobile-only CTA items in the flyout */
	#mega-menu-primary > li.mobile-nav-cta {
		display: list-item !important;
	}

	/* Hide header CTAs — they are in the MMM flyout as menu items instead */
	.hdrCTAs {
		display: none;
	}

	#hdrLogo img {
		height: 44px;
	}

	/* Hero */
	#hero {
		min-height: 460px;
	}

	.heroText {
		max-width: 480px;
	}

	/* Meet Anne & Brian — stack to single column */
	.mabInner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.mabPhotoCardOffset {
		margin-top: 0;
	}

	.mabPhotos {
		max-width: 440px;
		margin: 0 auto;
	}

	/* Offerings — 2 columns */
	.offeringsGrid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Articles — 2 columns */
	.articlesGrid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Events — 2 columns */
	.eventsGrid {
		grid-template-columns: repeat(2, 1fr);
	}

}


/* ============================================================
   970px — footer panel stacks; Brian photo flips right
   ============================================================ */

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

	.ftrPanelCols {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-inline: auto;
	}

	/* Brian's photo moves to the right of his blurb */
	.ftrPanelCol:nth-child(2) {
		flex-direction: row-reverse;
	}

}


/* ============================================================
   870px — article sidebar stacks
   ============================================================ */

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

	/* Article sidebar stacks below content */
	.article-layout__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.article-sidebar {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		align-items: start;
	}

	.sidebar-widget--cta {
		grid-column: 1 / -1;
	}

}


/* ============================================================
   768px — mobile layout
   ============================================================ */

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

	/* Header */
	.site-header {
		height: 70px;
	}

	#navBar {
		top: 70px;
	}

	#hdrLogo img {
		height: 40px;
	}

	.hdrRight {
		gap: 16px;
	}

	/* Hero */
	#hero {
		height: auto;
		min-height: 480px;
		background-position: right center;
	}

	/* Top-and-bottom shade: text sits at top and bottom on mobile */
	#hero::after {
		background: linear-gradient(
			to bottom,
			rgba(20, 30, 40, 0.75) 0%,
			rgba(20, 30, 40, 0.18) 32%,
			rgba(20, 30, 40, 0.18) 62%,
			rgba(20, 30, 40, 0.78) 100%
		);
	}

	.heroInner {
		padding: 36px 5% 40px;
		align-items: stretch;
	}

	/* Split top (eyebrow+heading) and bottom (sub+buttons) to opposite ends */
	.heroText {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		max-width: 100%;
		width: 100%;
	}

	.heroSub {
		max-width: 100%;
		margin-bottom: 20px;
	}

	/* Article hero — matches inner-hero height */
	.article-hero {
		height: 280px;
	}

	.article-hero:not(.article-hero--img) {
		background-position: center 18%;
	}

	.articles-hub-hero {
		height: 280px;
		background-position: center 35%;
	}

	.inner-hero--healing-from-home {
		background-position: center 55%;
	}

	.article-hero__title {
		font-size: 1.6rem;
	}

	.article-hero__inner {
		padding-bottom: 24px;
	}

	/* Article layout */
	.article-layout {
		padding: 40px 0 64px;
	}

	/* Articles hub: list collapses to single column */
	.articles-hub__list {
		grid-template-columns: 1fr;
	}

	.articles-hub__item:nth-child(2n) {
		padding-left: 0;
		border-left: none;
	}

	.articles-hub {
		padding: 40px 0 64px;
	}

	/* What We Offer grid — single column on mobile */
	.wwo-grid {
		grid-template-columns: 1fr;
	}

	/* Sidebar collapses to single column on mobile */
	.article-sidebar {
		grid-template-columns: 1fr;
	}

	/* Prev/next nav: stack to single column */
	.entry-article__nav {
		grid-template-columns: 1fr;
	}

	.entry-article__nav-link--next {
		text-align: left;
	}

	/* Page banner */
	.page-banner {
		padding: 40px 0 32px;
	}

	/* Entry content */
	.entry-content {
		padding: 36px 0 56px;
	}

	.entry-content p {
		font-size: 1rem;
	}

	/* Testimonials — stack at 768px */
	.testimonialsLayout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.videoPlaceholder {
		aspect-ratio: 16 / 9;
	}

	/* Stats — 2×2 grid; remove vertical dividers */
	.statsRow {
		grid-template-columns: repeat(2, 1fr);
	}

	.statItem + .statItem {
		border-left: none;
	}

	/* Section padding reduction */
	#meetAnneBrian,
	#offerings,
	#articlesFeatured,
	#eventsUpcoming {
		padding: var(--section-pad-sm) 0;
	}

	#qualifications {
		padding: 48px 0;
	}

	#ctaFinal {
		padding: 72px 0;
	}

	.sectionHeader {
		margin-bottom: 40px;
	}

}


/* ============================================================
   640px — panels stack
   ============================================================ */

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

	.pad {
		padding-inline: 24px;
	}

	/* Our Marriage photos — unstack floats on small screens */
	.marriage-photo,
	.entry-content .marriage-photo ~ .marriage-photo {
		float: none;
		clear: none;
		width: 100% !important;
		max-width: 420px;
		margin: 0 auto 2rem;
	}

	.ftrNewsletterInner {
		flex-direction: column;
	}

	/* Hero buttons: stay side-by-side, stretch equally, tighter padding */
	.heroBtns {
		flex-wrap: wrap;
	}

	.heroBtns .btn-roadmap,
	.heroBtns .btn-ghost-light {
		flex: 1;
		min-width: 120px;
		text-align: center;
		padding: 11px 10px;
		font-size: 0.78rem;
	}

	/* All grids collapse to single column */
	.offeringsGrid,
	.articlesGrid,
	.eventsGrid {
		grid-template-columns: 1fr;
	}

	/* Photos stack at 640px */
	.mabPhotos {
		grid-template-columns: 1fr 1fr;
		max-width: 340px;
	}

	/* Article hero */
	.article-hero {
		height: 260px;
	}

	.articles-hub-hero {
		height: 230px;
		background-position: center 30%;
	}

	.inner-hero--healing-from-home {
		background-position: center 50%;
	}

	.article-hero__meta {
		font-size: 0.74rem;
	}

	/* Meta bar: stack back link + reading time */
	.entry-article__meta-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	/* Jump-nav: hide label on small screens to save space */
	.articles-jumpnav__label {
		display: none;
	}

}


/* ============================================================
   Inner-page heroes — 768px
   ============================================================ */

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

	.inner-hero {
		height: 280px;
	}

	/* Shift retreats couple further right as image crops on mobile */
	.inner-hero--retreats,
	.inner-hero--retreat {
		background-position: 20% center;
	}

	/* Recovery Roadmap: recentre crop on mobile */
	.inner-hero--recovery-roadmap {
		background-position: center 20%;
	}

	/* About/Our Marriage: Brian toward right edge on mobile */
	.inner-hero--about {
		background-position: 40% center;
	}

	.inner-hero--anne {
		background-position: 62% center;
	}

	.inner-hero--brian {
		background-position: 40% center;
	}

	.inner-hero__inner {
		padding-bottom: 28px;
	}

}


/* ============================================================
   Inner-page heroes — 480px
   ============================================================ */

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

	.inner-hero {
		height: 220px;
	}

	/* Pull couples further right on smallest screens */
	.inner-hero--retreats,
	.inner-hero--retreat {
		background-position: 15% center;
	}

	.inner-hero--about {
		background-position: 43% center;
	}

	.inner-hero--anne {
		background-position: 65% center;
	}

}


/* ============================================================
   480px — small mobile
   ============================================================ */

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

	#hero {
		min-height: 420px;
	}

	.heroHeading {
		font-size: 1.6rem;
	}

	/* Article hero — smallest size */
	.article-hero {
		height: 220px;
	}

	.article-hero__title {
		font-size: 1.35rem;
	}

	.page-banner {
		padding: 32px 0 24px;
	}

	#ftrBar .pad {
		gap: 12px;
	}

	.ftrBarLinks {
		gap: 8px 16px;
	}

	.ftrBarBottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
		border-top: none;
		padding-top: 0;
	}

	/* Newsletter name row — collapse to single column */
	.ftrNameRow {
		grid-template-columns: 1fr;
	}

	/* CTA buttons stack */
	.ctaFinalBtns {
		flex-direction: column;
		align-items: center;
	}

	.ctaFinalBtns .btn-primary-inv,
	.ctaFinalBtns .btn-ghost-light {
		width: 100%;
		text-align: center;
	}

	/* Photos single column at smallest size */
	.mabPhotos {
		grid-template-columns: 1fr;
		max-width: 220px;
	}

	/* Tighten section padding */
	#ctaFinal {
		padding: 56px 0;
	}

}


/* ============================================================
   500px — footer panel cards go vertical
   ============================================================ */

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

	.ftrPanelCols {
		max-width: 100%;
	}

	.ftrPanelCol,
	.ftrPanelCol:nth-child(2) {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 16px;
	}

	.ftrPanelPhoto {
		width: 110px;
	}

	.ftrPanelContactRow {
		justify-content: center;
	}

}