/**
 * GuruPrasadam9 Responsive Stylesheet
 * Tested across 320px, 375px, 430px, 768px, 1024px, 1440px, and 1920px
 */

/* ==========================================================================
   Large Displays (1440px - 1920px+)
   ========================================================================== */
@media (min-width: 1440px) {
	:root {
		--gp9-container-max: 1360px;
	}

	.gp9-hero {
		min-height: 720px;
	}

	.gp9-hero-content {
		max-width: 1040px;
	}
}

/* ==========================================================================
   Desktop & Laptop Breakpoints (1025px - 1439px)
   ========================================================================== */
@media (max-width: 1200px) {
	.gp9-main-nav > li > a {
		padding: 10px 10px;
		font-size: 13.5px;
	}

	.gp9-videos-grid {
		gap: 22px;
	}

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

/* ==========================================================================
   Tablets Landscape & Smaller Screens (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.gp9-nav-menu-wrap {
		display: none; /* Hide desktop nav; show mobile drawer */
	}

	.gp9-mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

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

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

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

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

	.gp9-featured-video-card {
		grid-template-columns: 1fr;
	}

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

	.gp9-gurbani-showcase-grid {
		grid-template-columns: 1fr !important;
	}

	.gp9-hero {
		min-height: 560px;
		padding: 60px 0 80px 0;
	}
}

/* ==========================================================================
   Tablets Portrait (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
	:root {
		--gp9-container-pad: 18px;
	}

	.gp9-topbar {
		font-size: 11.5px;
		padding: 6px 0;
	}

	.gp9-topbar-gurmat {
		font-size: 11.5px;
	}

	.gp9-header-inner {
		height: 70px;
	}

	.gp9-brand-name {
		font-size: 19px;
	}

	.gp9-brand-emblem {
		width: 38px;
		height: 38px;
	}

	.gp9-brand-emblem img, .gp9-brand-emblem svg {
		width: 30px;
		height: 30px;
	}

	.gp9-hero-ekonkar img, .gp9-hero-ekonkar svg {
		width: 58px;
		height: 58px;
	}

	.gp9-hero-punjabi-title {
		font-size: 28px;
	}

	.gp9-hero-english-title {
		font-size: 20px;
	}

	.gp9-hero-actions {
		flex-direction: column;
		width: 100%;
	}

	.gp9-hero-actions .gp9-btn {
		width: 100%;
		max-width: 320px;
	}

	.gp9-hero-pillars {
		gap: 10px;
	}

	.gp9-pillar-pill {
		font-size: 12px;
		padding: 5px 12px;
	}

	.gp9-mool-mantar-card {
		padding: 30px 20px;
	}

	.gp9-mool-mantar-gurmukhi {
		font-size: 20px;
		line-height: 1.7;
	}

	.gp9-nitnem-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.gp9-videos-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.gp9-articles-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.gp9-newsletter-box {
		padding: 30px 20px;
	}

	.gp9-newsletter-form {
		flex-direction: column;
	}

	.gp9-newsletter-form .gp9-btn {
		width: 100%;
	}

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

	.gp9-footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.gp9-featured-video-content {
		padding: 26px 20px;
	}

	.gp9-featured-title {
		font-size: 22px;
	}
}

/* ==========================================================================
   Large Smartphones (iPhone Pro Max, Samsung Galaxy+ - max-width: 430px)
   ========================================================================== */
@media (max-width: 430px) {
	:root {
		--gp9-container-pad: 15px;
	}

	.gp9-topbar-gurmat span {
		display: none; /* Keep icon & compact text on tight screens */
	}

	.gp9-topbar-gurmat::after {
		content: "ਵਾਹਿਗੁਰੂ ਜੀ";
		font-family: var(--gp9-font-gurmukhi);
		color: var(--gp9-gold-light);
	}

	.gp9-brand-tagline {
		display: none;
	}

	.gp9-categories-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.gp9-nitnem-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.gp9-hero-search-form {
		flex-direction: column;
		border-radius: var(--gp9-radius-md);
		padding: 10px;
		gap: 8px;
	}

	.gp9-hero-search-input {
		width: 100%;
		padding: 8px 6px;
		text-align: center;
	}

	.gp9-hero-search-submit {
		width: 100%;
	}

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

	.gp9-video-filter-bar {
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}

	.gp9-filter-btn {
		flex-shrink: 0;
	}
}

/* ==========================================================================
   Small Mobile Phones (320px - 375px)
   ========================================================================== */
@media (max-width: 375px) {
	.gp9-brand-name {
		font-size: 17px;
	}

	.gp9-hero-punjabi-title {
		font-size: 22px;
	}

	.gp9-hero-english-title {
		font-size: 17px;
	}

	.gp9-section-title-punjabi {
		font-size: 20px;
	}

	.gp9-section-title {
		font-size: 22px;
	}

	.gp9-mool-mantar-gurmukhi {
		font-size: 18px;
	}

	.gp9-btn {
		padding: 11px 20px;
		font-size: 14px;
	}
}

/* Ensure no elements cause horizontal scrolling */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}