/**
 * Hayder Voice — Responsive Styles
 * Mobile-first overrides in @layer overrides.
 */

@layer overrides {

	/* ============================================================
	 * TABLET (max 1024px)
	 * ============================================================ */

	@media (max-width: 1024px) {

		/* Site footer */
		.site-footer__top {
			grid-template-columns: 1fr 1fr;
			gap: 2.5rem;
		}

		.site-footer__brand {
			grid-column: span 2;
		}

		.site-footer__newsletter {
			grid-column: span 2;
		}

		/* Featured post */
		.featured-post__grid {
			grid-template-columns: 1fr;
			gap: 2.5rem;
		}

		.featured-post__image-wrap {
			order: -1;
		}

		.featured-post__image {
			aspect-ratio: 16 / 9;
		}

		/* About intro */
		.about-intro__grid {
			grid-template-columns: 1fr 2fr;
			gap: 3rem;
		}

		/* Recent essays grid */
		.recent-essays__grid {
			grid-template-columns: repeat(2, 1fr);
		}

		/* Related posts */
		.related-posts__grid {
			grid-template-columns: repeat(2, 1fr);
		}

		/* Archive grid */
		.archive-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.archive-grid__item:first-child {
			grid-column: span 2;
		}

	}

	/* ============================================================
	 * MOBILE (max 768px)
	 * ============================================================ */

	@media (max-width: 768px) {

		/* Header: hide desktop nav, show mobile button */
		.site-header__nav { display: none; }
		.site-header__mobile-btn { display: inline-flex; }

		/* Hero */
		.hero__title { font-size: clamp(2.5rem, 8vw, 4rem); }
		.hero__subtext { font-size: var(--text-base); }
		.hero__actions { gap: 0.75rem; }
		.hero__scroll-hint { display: none; }

		/* Hero marquee — simplify on mobile */
		.hero__marquee { bottom: 1.5rem; }

		/* Hide loader on mobile */
		#site-loader { display: none !important; }

		/* Hide cursor on mobile */
		.custom-cursor { display: none !important; }

		/* Hide grain animations on mobile (performance) */
		.hero__grain,
		.newsletter-section__grain,
		.archive-hero__grain,
		.about-hero__grain,
		.error-404__grain {
			display: none;
		}

		/* Footer */
		.site-footer__top {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		.site-footer__brand { grid-column: span 1; }
		.site-footer__nav-group { display: flex; flex-direction: column; gap: 2rem; }
		.site-footer__newsletter { grid-column: span 1; }

		.site-footer__bottom-inner {
			flex-direction: column;
			text-align: center;
			gap: 0.5rem;
		}

		/* Post grid: single column */
		.post-grid--2col,
		.post-grid--3col,
		.post-grid--4col,
		.recent-essays__grid,
		.related-posts__grid,
		.archive-grid {
			grid-template-columns: 1fr;
		}

		.archive-grid__item:first-child {
			grid-column: span 1;
		}

		/* Featured post */
		.featured-post__grid {
			grid-template-columns: 1fr;
		}

		.featured-post__title {
			font-size: clamp(1.75rem, 5vw, 2.5rem);
		}

		/* Post hero */
		.post-hero { min-height: 60svh; }
		.post-hero__title { font-size: clamp(1.75rem, 6vw, 2.5rem); }

		/* Tales slider */
		.tales-slider__item { flex: 0 0 min(280px, 80vw); }

		/* Archive */
		.archive-hero__title { font-size: clamp(2rem, 7vw, 3rem); }

		/* About page */
		.about-intro__grid {
			grid-template-columns: 1fr;
		}

		.about-intro__photo {
			position: static;
			max-width: 240px;
		}

		/* Emotions grid */
		.emotions-grid__list {
			grid-template-columns: repeat(2, 1fr);
		}

		/* Post footer */
		.post-footer__inner {
			flex-direction: column;
		}

		/* Author bio */
		.author-bio {
			flex-direction: column;
			align-items: flex-start;
		}

		/* Search hero */
		.search-hero__title { font-size: clamp(1.75rem, 5vw, 2.5rem); }

		/* Next post */
		.next-post { min-height: 30svh; }

		/* Error 404 */
		.error-404__ghost {
			font-size: clamp(6rem, 25vw, 14rem);
		}

		.error-404__title { font-size: clamp(1.5rem, 5vw, 2.5rem); }

		/* Pagination */
		.nav-links { gap: 0.35rem; }
		.page-numbers { width: 36px; height: 36px; font-size: var(--text-xs); }

		/* Newsletter form */
		.newsletter-form__field,
		.newsletter-form__row {
			flex-direction: column;
		}

		.newsletter-form__btn {
			border-radius: var(--radius-full);
		}

		/* Back to top */
		.back-to-top {
			bottom: 1rem;
			right: 1rem;
		}

		/* Mobile nav */
		.nav-menu--mobile .dropdown-menu {
			grid-template-columns: 1fr;
		}

	}

	/* ============================================================
	 * SMALL MOBILE (max 480px)
	 * ============================================================ */

	@media (max-width: 480px) {

		:root {
			--header-height: 56px;
		}

		/* Emotions grid single column */
		.emotions-grid__list {
			grid-template-columns: 1fr;
		}

		.hero__title { font-size: clamp(2rem, 10vw, 3rem); }

		.featured-post__title { font-size: clamp(1.5rem, 6vw, 2rem); }

		/* Share buttons stack */
		.post-footer__share-buttons { flex-wrap: wrap; }

		/* Comments */
		.comment-item .children { padding-left: 1rem; }

	}

	/* ============================================================
	 * LANDSCAPE MOBILE
	 * ============================================================ */

	@media (max-width: 768px) and (orientation: landscape) {
		.hero { min-height: auto; padding: calc(var(--header-height) + 3rem) 0 3rem; }
	}

	/* ============================================================
	 * HIGH CONTRAST MODE
	 * ============================================================ */

	@media (forced-colors: active) {
		.btn--amber { border: 2px solid ButtonText; }
		.post-card__image { border: 1px solid ButtonText; }
		.site-header { border-bottom: 1px solid ButtonText; }
	}

	/* ============================================================
	 * PRINT
	 * ============================================================ */

	@media print {
		.site-header,
		.site-footer,
		.reading-progress,
		.back-to-top,
		.site-loader,
		#site-loader,
		.page-transition,
		.hero__marquee,
		.hero__scroll-hint,
		.related-posts,
		.next-post,
		.post-footer__share,
		.tales-slider,
		.newsletter-section {
			display: none !important;
		}

		body {
			background: white;
			color: black;
			font-size: 12pt;
		}

		.post-hero {
			min-height: auto;
			padding: 2rem 0;
		}

		a { color: inherit; text-decoration: none; }

		h1, h2, h3, h4, h5, h6 { color: black; }

		.prose { color: black; }
	}

	/* ============================================================
	 * MOBILE — GLOBAL SPACING
	 * ============================================================ */

	@media (max-width: 767px) {
		.container {
			padding-left: 1.25rem;
			padding-right: 1.25rem;
		}
		section {
			padding-top: 3rem;
			padding-bottom: 3rem;
		}
	}

} /* @layer overrides */