/**
 * MIDHATI — Responsive stylesheet (Phase 8)
 * Single source for all layout media queries across the theme.
 *
 * Breakpoint reference (document only — use literal values in @media):
 * --bp-mobile:  480px
 * --bp-tablet:  767px
 * --bp-laptop:  1024px
 * --bp-desktop: 1200px
 */

/* ==========================================================================
   SECTION 6 — Global rules
   ========================================================================== */

html,
body {
	overflow-x: hidden;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

iframe,
embed {
	display: block;
	max-width: 100%;
	width: 100%;
	border: 0;
}

.table-wrap,
.wp-block-table,
figure.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

table {
	max-width: 100%;
}

/* ==========================================================================
   SECTION 1 — Header
   Desktop: 1024px+ (base styles in header.css)
   ========================================================================== */

@media (min-width: 1024px) {
	:root {
		--header-height: 140px;
	}

	.header-logo-card {
		width: 80px;
		height: 80px;
	}

	.menu-toggle {
		display: none;
	}

	.main-nav {
		position: static;
		inset: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding: 0;
		overflow: visible;
		background: transparent;
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.nav-list {
		flex-direction: row;
		align-items: center;
		gap: 30px;
		width: auto;
	}

	.nav-link {
		display: inline-block;
		width: auto;
		padding: 8px 2px;
		border-bottom: 0;
	}

	.header-actions .header-lang {
		display: inline-flex;
	}

	.header-lang--mobile {
		display: none;
	}

	.header-cta {
		display: inline-flex;
		padding: 11px 22px;
		font-size: 0.9rem;
	}
}

/* Tablet: 768px–1023px — compact header, hamburger nav, compact CTA */
@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--header-height: 90px;
	}

	.header-logo-card {
		width: 60px;
		height: 60px;
	}

	.header-cta {
		display: inline-flex;
		padding: 9px 16px;
		font-size: 0.85rem;
	}

	.header-actions .header-lang {
		display: none;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.main-nav {
		flex: none;
		display: block;
		position: fixed;
		inset: var(--header-height) 0 0 0;
		background: var(--color-navy-header);
		padding: 28px var(--container-padding);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
		overflow-y: auto;
		z-index: 9998;
	}

	.main-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
		width: 100%;
	}

	.nav-link {
		display: block;
		width: 100%;
		padding: 14px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		color: rgba(255, 255, 255, 0.88);
	}

	.header-lang--mobile {
		display: inline-flex;
	}
}

/* Mobile: max 767px — logo + hamburger only, hide CTA */
@media (max-width: 767px) {
	:root {
		--header-height: 72px;
	}

	.header-logo-card {
		width: 48px;
		height: 48px;
	}

	.header-cta {
		display: none;
	}

	.header-actions .header-lang {
		display: none;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.main-nav {
		flex: none;
		display: block;
		position: fixed;
		inset: var(--header-height) 0 0 0;
		background: var(--color-navy-header);
		padding: 28px var(--container-padding);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
		overflow-y: auto;
		z-index: 9998;
	}

	.main-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
		width: 100%;
	}

	.nav-link {
		display: block;
		width: 100%;
		padding: 14px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		color: rgba(255, 255, 255, 0.88);
	}

	.header-lang--mobile {
		display: inline-flex;
	}
}

/* ==========================================================================
   SECTION 2 — Footer
   ========================================================================== */

@media (min-width: 1024px) {
	.footer-grid {
		grid-template-columns: 1.4fr 1fr 1.1fr;
	}

	.footer-col--brand {
		grid-column: auto;
	}

	.footer-bottom-inner {
		flex-direction: row;
		text-align: left;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl);
	}

	.footer-col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-top: var(--space-xl);
		padding-bottom: 28px;
		text-align: center;
	}

	.footer-col--brand {
		grid-column: auto;
	}

	.footer-logo-link {
		justify-content: center;
	}

	.footer-social-list {
		justify-content: center;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
	}

	.footer-copyright,
	.footer-credit {
		font-size: 0.875rem; /* 14px minimum on mobile */
	}
}

/* ==========================================================================
   SECTION 3 — Homepage
   ========================================================================== */

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
	.hero {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.hero-grid {
		padding-bottom: 2.5rem;
	}

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

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

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

	.hero-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hero-sub {
		margin-inline: auto;
	}

	.hero-actions,
	.trust-strip {
		justify-content: center;
	}

	.hero-seal-wrap {
		order: -1;
	}

	.hero-seal {
		width: 170px;
		margin-bottom: 12px;
	}

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

	.about-visual {
		order: -1;
	}

	.internship-card {
		grid-template-columns: 1fr;
		padding: 40px 28px;
		text-align: center;
	}

	.internship-roles {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.internship-visual {
		order: -1;
	}

	.internship-visual svg {
		width: 100px;
		height: 100px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.hero {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.hero-grid {
		padding-bottom: 2rem;
	}

	.grid-5,
	.grid-4,
	.grid-3 {
		grid-template-columns: 1fr;
	}

	.section {
		padding: 64px 0;
	}

	.section-head {
		margin-bottom: 36px;
	}

	.hero-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hero-sub {
		margin-inline: auto;
	}

	.hero-actions,
	.trust-strip {
		justify-content: center;
	}

	.hero-seal-wrap {
		order: -1;
	}

	.hero-seal {
		width: 150px;
		margin-bottom: 12px;
	}

	.hero-image-wrap,
	.hero-image {
		display: none;
	}

	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.about-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.about-visual {
		order: -1;
	}

	.about-points {
		grid-template-columns: 1fr;
	}

	.about-image {
		height: auto;
		max-height: 420px;
	}

	.internship-card {
		grid-template-columns: 1fr;
		padding: 32px 20px;
		text-align: center;
	}

	.internship-roles {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.internship-visual {
		order: -1;
	}

	body {
		font-size: max(0.875rem, 14px);
	}
}

/* Laptop down — stack hero / about before mobile-specific rules */
@media (max-width: 1023px) {
	.hero-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hero-sub {
		margin-inline: auto;
	}

	.hero-actions,
	.trust-strip {
		justify-content: center;
	}

	.hero-seal-wrap {
		order: -1;
	}

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

	.about-visual {
		order: -1;
	}

	.internship-card {
		grid-template-columns: 1fr;
		padding: 40px 28px;
	}

	.internship-roles {
		grid-template-columns: 1fr;
	}

	.internship-visual {
		order: -1;
	}
}

/* ==========================================================================
   SECTION 4 — Contact page
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
	.contact-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-cards-wrap {
		margin-top: -36px;
	}

	.contact-main {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 767px) {
	.contact-cards-grid {
		grid-template-columns: 1fr;
	}

	.contact-cards-wrap {
		margin-top: -24px;
	}

	.contact-main {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.contact-form-card {
		padding: 28px 20px;
	}

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

	.page-hero {
		padding-bottom: 60px;
	}
}

/* ==========================================================================
   SECTION 5 — Inner pages (About, Internship, RTI, Blogs)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
	.page-hero {
		padding: 48px 0 44px;
	}

	.page-hero-heading {
		font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
	}

	.midhati-rti-page__content .lead {
		font-size: 1rem;
	}
}

@media (max-width: 767px) {
	.section {
		padding: 64px 0;
	}

	.page-hero {
		padding: 40px 0 36px;
	}

	.page-hero h1,
	.page-hero-heading {
		font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem);
	}

	.page-hero-sub,
	.midhati-rti-page__content .lead {
		font-size: 0.95rem;
	}

	.page-hero-actions {
		flex-direction: column;
		align-items: center;
	}

	.page-hero-actions .btn,
	.page-hero-actions .btn-ghost-white {
		width: 100%;
		max-width: 300px;
		justify-content: center;
	}

	.midhati-rti-page__content {
		padding-inline: var(--container-padding);
	}
}