/**
 * Responsive Breakpoints — indranil-theme
 *
 * Mobile-first responsive overrides. Base styles (defined in base.css,
 * layouts.css, and components.css) target mobile viewports. This file layers
 * on adjustments as the viewport grows using ONLY min-width media queries.
 * Never use max-width queries.
 *
 * Enqueue last in the stylesheet loading order (see inc/enqueue.php) so that
 * these rules can override any earlier declarations at higher specificity isn't
 * needed — cascade order does the work.
 *
 * Breakpoints:
 *   1. Tablet  — 768px+
 *   2. Desktop — 1024px+
 *   3. Wide    — 1280px+
 */

/* ==========================================================================
   1. Tablet — 768px+
   ========================================================================== */

@media (min-width: 768px) {
	.site-container {
		padding-left: var(--space-lg);
		padding-right: var(--space-lg);
	}

	.site-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-grid {
		gap: var(--space-xl);
	}

	.site-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-section {
		padding-top: var(--space-5xl);
		padding-bottom: var(--space-5xl);
	}

	/* ---- Header: show desktop nav, hide mobile toggle ---- */
	.site-header__nav {
		display: block;
	}

	.site-header__toggle {
		display: none;
	}

	/* Force-hide mobile menu at desktop widths even if JS .is-open class is present */
	.site-header__mobile-menu,
	.site-header__overlay {
		display: none !important;
	}

	.site-header__inner {
		padding-left: var(--space-lg);
		padding-right: var(--space-lg);
	}

	/* ---- Footer: 2-column grid ---- */
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-footer__inner {
		padding-left: var(--space-lg);
		padding-right: var(--space-lg);
	}

	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}

	/* ---- Hero: side-by-side layout at tablet ---- */
	.hero__grid {
		flex-direction: row;
		align-items: center;
		gap: var(--space-2xl);
	}

	.hero__media {
		max-width: 280px;
		margin-left: 0;
		margin-right: 0;
	}

	.hero__headline {
		font-size: var(--text-6xl);
	}

	/* ---- Credentials: horizontal layout ---- */
	.credentials__list {
		flex-direction: row;
		justify-content: center;
	}

	.credentials__item {
		flex: 1;
	}

	/* Add visual dividers between credential items at tablet+ */
	.credentials__item + .credentials__item {
		border-left: 1px solid var(--color-gray-200);
		padding-left: var(--space-xl);
	}

	.credentials__number {
		font-size: var(--text-6xl);
	}

	/* ---- Homepage CTA: inline form ---- */
	.homepage-cta__form {
		flex-direction: row;
	}

	.homepage-cta__input {
		flex: 1;
	}

	/* ---- About Page ---- */
	.about-intro__headline {
		font-size: var(--text-6xl);
	}

	.about-connect__actions {
		flex-direction: row;
		justify-content: center;
	}

	.about-domains {
		flex-direction: row;
	}

	.about-domains__group {
		flex: 1;
	}

	/* ---- Blog Templates ---- */
	.archive-header__title {
		font-size: var(--text-5xl);
	}

	.article-header__title {
		font-size: var(--text-5xl);
	}

	.article-nav {
		flex-direction: row;
	}

	.article-nav__item {
		flex: 1;
	}

	.author-bio__avatar {
		width: 80px;
		height: 80px;
	}

	/* ---- Contact Page ---- */
	.contact-channels {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ---- Portfolio Page: staggered layout ---- */
	.portfolio-project {
		flex-direction: row;
		align-items: center;
	}

	.portfolio-project:nth-child(even) {
		flex-direction: row-reverse;
	}

	.portfolio-project__media {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.portfolio-header__title {
		font-size: var(--text-5xl);
	}

	.portfolio-enterprise__stats {
		flex-direction: row;
		justify-content: center;
	}

	.portfolio-enterprise__stat {
		flex: 1;
	}

	.portfolio-enterprise__stat + .portfolio-enterprise__stat {
		border-left: 1px solid rgba(255, 255, 255, 0.1);
		padding-left: var(--space-xl);
	}
}

/* ==========================================================================
   2. Desktop — 1024px+
   ========================================================================== */

@media (min-width: 1024px) {
	.site-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-container {
		padding-left: var(--space-xl);
		padding-right: var(--space-xl);
	}

	/* ---- Header: wider padding ---- */
	.site-header__inner {
		padding-left: var(--space-xl);
		padding-right: var(--space-xl);
	}

	/* ---- Footer: 4-column grid ---- */
	.site-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
	}

	.site-footer__inner {
		padding-left: var(--space-xl);
		padding-right: var(--space-xl);
	}

	/* ---- Hero: more generous padding at desktop ---- */
	.hero {
		padding-top: calc(var(--space-4xl) + var(--space-lg));
		padding-bottom: calc(var(--space-4xl) + var(--space-lg));
	}

	.hero__media {
		max-width: 360px;
	}

	.hero__description {
		font-size: var(--text-2xl);
	}

	/* ---- Post card image height increase ---- */
	.post-card__image {
		height: 300px;
	}

	/* ---- About Page ---- */
	.about-intro {
		padding-top: calc(var(--space-4xl) + var(--space-lg));
	}

	.about-pullquote p {
		font-size: var(--text-3xl);
	}

	/* ---- Blog Templates ---- */
	.archive-header {
		padding-top: calc(var(--space-4xl) + var(--space-lg));
	}

	.article-header {
		padding-top: calc(var(--space-4xl) + var(--space-lg));
	}

	/* ---- Contact Page ---- */
	.contact-header {
		padding-top: calc(var(--space-4xl) + var(--space-lg));
	}

	/* ---- Portfolio Page ---- */
	.portfolio-header {
		padding-top: calc(var(--space-4xl) + var(--space-lg));
	}
}

/* ==========================================================================
   3. Wide — 1280px+
   ========================================================================== */

@media (min-width: 1280px) {
	/* ---- Hero: max headline size ---- */
	.hero__headline {
		font-size: var(--text-7xl);
	}

	.about-intro__headline {
		font-size: var(--text-7xl);
	}

	/* ---- Post card image: taller at wide ---- */
	.post-card__image {
		height: 320px;
	}

	/* ---- 404: scale the big number ---- */
	.error-404__code {
		font-size: 12rem;
	}
}