/**
 * Responsive overrides — desktop-first.
 *
 * Loaded LAST so its rules can override component-level defaults at the
 * relevant breakpoints. Feature-based media queries (prefers-reduced-motion,
 * hover capability) live with their components.
 *
 * Convention: this stylesheet uses MAX-WIDTH (desktop-first) queries
 * exclusively. Each tier should override only what truly differs at that
 * size — keep desktop styles authoritative.
 *
 * Breakpoint scale (max-width):
 *   - 1024px : large tablet / small laptop
 *   -  782px : WordPress admin bar (do not change — WP's own breakpoint)
 *   -  768px : tablet / mobile (primary nav swap)
 *   -  520px : narrow phone
 *   -  380px : smallest phones
 */

/* ============================================================
   Large tablet / small laptop  ( ≤ 1024px )
   ============================================================ */
@media only screen and (max-width: 1024px) {
	/* Tighten outer container slightly so content doesn't crowd edges. */
	#inner-content.wrap,
	.wrap {
		width: min(94%, 1024px);
	}

	/* Three-col gutters can collapse a touch — content column gets more room. */
	body .mtp-three-col {
		grid-template-columns: 8% 84% 8% !important;
	}
}

/* ============================================================
   WP admin bar height transition  ( ≤ 782px )
   ============================================================ */
@media screen and (max-width: 782px) {
	body.admin-bar section#nav {
		top: 46px;
	}
}

/* ============================================================
   Tablet / mobile  ( ≤ 768px )
   Primary breakpoint where the layout shifts from desktop to mobile.
   ============================================================ */
@media only screen and (max-width: 768px) {
	/* Nav: swap desktop layout for collapsed mobile bar. */
	.desktop-nav {
		display: none;
	}
	.mobile-nav {
		display: flex;
	}

	/* Layout: collapse three-col gutters and stack two-col grid. */
	body .mtp-three-col {
		grid-template-columns: 2% 96% 2% !important;
		gap: 0;
	}
	body .mtp-two-col {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding-left: 0;
	}

	/* Single post: full-width reading column. */
	.blog-content {
		width: 100%;
		max-width: 700px;
		margin: 0 auto;
	}

	/* Blog cards: lighten internal padding to claw back screen real estate. */
	.mtp-two-col li.mtp-blog-item {
		padding: clamp(1rem, 4vw, 1.35rem);
	}

	/* Comments: tighten outer spacing on small screens. */
	.mtp-comment-form-wrapper {
		margin: 40px auto;
		padding: 0 15px;
	}
	.mtp-comment-form {
		padding: 30px 20px;
	}
	#comments {
		padding: 0 15px;
	}

	/* Comment replies indent — 40px is too much on narrow screens. */
	.commentlist .children,
	.commentlist .children ol,
	.commentlist ol.children {
		padding-left: 24px;
	}

	/* Pagination chips a little smaller. */
	ul.page-numbers li > a.page-numbers,
	ul.page-numbers li > span.page-numbers {
		min-width: 2.25rem;
		min-height: 2.25rem;
		padding: 0 0.55rem;
		font-size: 0.85rem;
	}
}

/* ============================================================
   Narrow phone  ( ≤ 520px )
   ============================================================ */
@media only screen and (max-width: 520px) {
	/* Home hero: drop the negative-offset caption — at narrow widths the
	   tuck-into-corner trick pushes the caption off-screen. Stack instead. */
	.home-logo-area__caption {
		top: 0;
		left: 0;
		margin-top: 0.5rem;
		padding: 0 1rem;
	}
	.home-logo-area__title {
		/* Slightly tighter clamp lower bound to make sure "the backlog_"
		   stays on a single line even on 320px screens. */
		font-size: clamp(1.85rem, 9vw, 2.5rem);
	}

	/* Single post header + meta: stack fully. */
	.post-meta__primary {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.post-meta__divider {
		display: none;
	}
	.post-meta__group {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.45rem;
	}
	.post-meta__group-label {
		min-width: unset;
	}

	/* Single post: kill horizontal padding to claim every pixel for reading. */
	#blog-header.single-post-header,
	.single-post-header {
		width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Comment replies indent — collapse further on tiny screens. */
	.commentlist .children,
	.commentlist .children ol,
	.commentlist ol.children {
		padding-left: 16px;
		margin-top: 16px;
	}

	/* Mobile menu panel: take more of the viewport on narrow phones. */
	.mtp-mobile-menu__panel {
		width: min(360px, 92vw);
		max-width: 92vw;
	}

	/* Section header layout: row gets crowded — drop the count to its own line. */
	.mtp-blog-section-header__title-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	/* Footer: kill huge top margin on tiny screens. */
	.footer {
		margin-top: clamp(1.5rem, 6vw, 2rem);
	}
}

/* ============================================================
   Smallest phones  ( ≤ 380px )
   ============================================================ */
@media only screen and (max-width: 380px) {
	/* Container: kill outer padding entirely. */
	#inner-content.wrap,
	.wrap {
		width: 100%;
	}

	/* Comment form: minimal padding. */
	.mtp-comment-form {
		padding: 20px 14px;
	}

	/* Mobile menu panel: full screen for max touch target. */
	.mtp-mobile-menu__panel {
		width: 100vw;
		max-width: 100vw;
	}

	/* Single post entry-title: dial down clamp lower bound a touch. */
	.single-post-header .entry-title {
		font-size: clamp(1.7rem, 7vw, 2.1rem);
	}
}