/* ==========================================================================
   Epic Softwares — responsive.css
   Breakpoint overrides. main.css holds the desktop-first base styles;
   everything here narrows the layout down for tablet and mobile.
   ========================================================================== */

/* ---------------------------------------------------------------
 * ~1180px — container gutters tighten slightly before anything reflows
 * ------------------------------------------------------------- */
@media (max-width: 1180px) {
	.services-grid,
	.why-grid,
	.clients-grid,
	.testimonials-grid,
	.insights-grid,
	.blog-grid,
	.values-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.process-timeline,
	.client-process-steps {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.hero__inner {
		gap: 40px;
	}
}

/* ---------------------------------------------------------------
 * ~960px — two-column page layouts stack; mission/about visuals stack
 * ------------------------------------------------------------- */
@media (max-width: 960px) {
	.hero__inner {
		grid-template-columns: 1fr;
	}

	.hero-visual {
		height: 320px;
		order: -1;
	}

	.hero {
		padding-bottom: 72px;
	}

	.about-preview__grid,
	.mission-vision-grid,
	.contact-grid,
	.contact-preview__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.site-footer__top {
		grid-template-columns: 1fr;
		gap: 40px;
	}

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

	.single-content__layout.has-sidebar {
		grid-template-columns: 1fr;
	}

	.widget-area {
		border-top: 1px solid var(--color-border);
		padding-top: 32px;
	}
}

/* ---------------------------------------------------------------
 * ~880px — mobile navigation kicks in
 * ------------------------------------------------------------- */
@media (max-width: 880px) {
	.primary-navigation {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background: var(--color-white);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 8px 24px 32px;
		overflow-y: auto;
		transform: translateX(100%);
		opacity: 0;
		visibility: hidden;
		transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
		z-index: 998;
		box-shadow: var(--shadow-lg);
	}

	.primary-navigation.is-open {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		width: 100%;
		padding-top: 16px;
	}

	.primary-menu > li > a {
		padding: 16px 12px;
		font-size: 1.05rem;
		border-bottom: 1px solid var(--color-border);
	}

	.primary-menu .sub-menu {
		display: block;
		position: static;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 16px;
		min-width: 0;
	}

	.primary-menu .sub-menu a {
		padding: 12px 8px;
	}

	.menu-toggle {
		display: block;
	}

	.header-cta {
		padding: 0.6em 1.1em;
		font-size: 0.82rem;
	}

	.services-grid,
	.why-grid,
	.clients-grid,
	.testimonials-grid,
	.insights-grid,
	.blog-grid,
	.values-grid,
	.culture-grid {
		grid-template-columns: 1fr;
	}

	.process-timeline,
	.client-process-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.section {
		padding: 72px 0;
	}

	.section--tight {
		padding: 48px 0;
	}

	.final-cta {
		padding: 56px 32px;
		margin: 0 16px;
	}
}

/* ---------------------------------------------------------------
 * ~640px — form rows, post navigation, and footer columns stack
 * ------------------------------------------------------------- */
@media (max-width: 640px) {
	.container {
		padding: 0 18px;
	}

	.form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.post-nav {
		grid-template-columns: 1fr;
	}

	.post-nav__item--next {
		text-align: left;
	}

	.footer-columns {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.site-footer__bottom {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}

	.stats-grid,
	.process-timeline,
	.client-process-steps {
		grid-template-columns: 1fr;
	}

	.epic-form {
		padding: 28px 22px;
	}

	.hero-visual {
		height: 260px;
	}

	.hero-visual__panel--code {
		font-size: 0.68rem;
		width: 72%;
	}

	.hero-visual__panel--main {
		width: 86%;
	}

	.final-cta__actions,
	.error-404__actions {
		flex-direction: column;
	}

	.final-cta__actions .button,
	.error-404__actions .button {
		width: 100%;
	}
}

/* ---------------------------------------------------------------
 * ~420px — smallest phones
 * ------------------------------------------------------------- */
@media (max-width: 420px) {
	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .button {
		width: 100%;
	}

	.site-branding__name {
		display: none;
	}

	.job-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.job-card .button {
		width: 100%;
		text-align: center;
	}
}