/* ==========================================================================
   Euro Axxid Lanka — responsive.css
   Responsive breakpoints: Tablet (≤1024px) and Mobile (≤768px / ≤480px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Desktop (≤1280px)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Tablet / Small Desktop (≤1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

	/* Typography scale-down */
	:root {
		--text-5xl: 2.5rem;
		--text-4xl: 2rem;
	}

	/* Container padding */
	.container {
		padding-left: var(--space-5);
		padding-right: var(--space-5);
	}

	/* Hero */
	.hero-inner {
		grid-template-columns: 1fr;
		gap: var(--space-6);
		padding: var(--space-10) var(--space-5);
	}

	.hero-title {
		font-size: clamp(2rem, 4vw, 3rem);
	}

	.hero-visual {
		display: none; /* hide DTR badge at tablet, focus on text */
	}

	/* Brands */
	.brands-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}

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

	/* Why Choose */
	.why-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Gallery */
	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Featured Product */
	.featured-product-inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

	/* CTA Banner */
	.cta-banner-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: var(--space-5);
	}

	.cta-banner-inner .cta-btn-whatsapp,
	.cta-banner-inner .cta-btn-call {
		margin: 0 auto;
	}

	/* Footer */
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

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

	/* Single product */
	.single-product-inner {
		grid-template-columns: 1fr;
	}

	/* Contact */
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Mobile (≤768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

	:root {
		--header-height: 84px;
		--space-16: 3rem;
		--space-12: 2.5rem;
	}

	/* Smaller logo on mobile */
	.site-logo img,
	.site-logo .custom-logo,
	.custom-logo-link img {
		width: 110px !important;
		height: 72px !important;
	}

	/* Container */
	.container {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	/* Section titles */
	.section-title {
		font-size: var(--text-2xl);
	}

	.section-title::before,
	.section-title::after {
		width: 30px;
	}

	/* Header */
	.header-inner {
		padding: 0 var(--space-4);
	}

	.primary-nav {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--color-white);
		flex-direction: column;
		align-items: stretch;
		height: auto;
		padding: var(--space-4);
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform var(--transition);
		border-top: 1px solid var(--color-border);
		z-index: 999;
		box-shadow: var(--shadow-xl);
	}

	.primary-nav.is-open {
		transform: translateX(0);
	}

	.primary-nav .menu {
		flex-direction: column;
		height: auto;
		gap: 0;
		width: 100%;
	}

	.primary-nav .menu > li {
		height: auto;
		flex-direction: column;
		align-items: stretch;
		border-bottom: 1px solid var(--color-border);
	}

	.primary-nav .menu > li > a {
		height: auto;
		padding: var(--space-4) var(--space-2);
		font-size: var(--text-base);
		justify-content: space-between;
	}

	.primary-nav .menu > li > a::after {
		display: none;
	}

	.primary-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		border-radius: 0;
		background-color: var(--color-light);
		padding: 0;
		display: none;
	}

	.primary-nav .sub-menu.is-open {
		display: block;
	}

	.primary-nav .sub-menu li a {
		padding: var(--space-3) var(--space-6);
		border-bottom: 1px solid var(--color-border);
	}

	.nav-toggle {
		display: flex;
	}

	/* Hero — stack vertically on mobile */
	.hero {
		min-height: 85vh;
	}

	.hero-inner {
		grid-template-columns: 1fr;
		padding: var(--space-8) var(--space-4) 5rem;
		min-height: auto;
		align-items: flex-end;
	}

	.hero-visual {
		display: none;
	}

	.hero-title {
		font-size: clamp(1.8rem, 7vw, 2.5rem);
	}

	.hero-subtitle {
		font-size: var(--text-base);
	}

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

	.hero-controls {
		bottom: var(--space-4);
	}

	.hero-actions .btn {
		width: 100%;
		justify-content: center;
		max-width: 280px;
	}

	/* Brands — 1 column */
	.brands-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}

	/* Categories — 1 column */
	.category-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}

	/* Why Choose — 1 column */
	.why-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}

	/* Gallery — 2 column */
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-item__caption {
		transform: translateY(0);
	}

	/* Featured Product */
	.featured-product-inner {
		grid-template-columns: 1fr;
	}

	.featured-product-images {
		min-height: 280px;
	}

	.featured-product-features {
		grid-template-columns: 1fr;
	}

	/* CTA Banner */
	.cta-banner {
		padding: var(--space-10) 0;
	}

	.cta-banner-inner {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		text-align: center;
	}

	.cta-btn-whatsapp {
		width: 100%;
		justify-content: center;
	}

	/* Footer */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	/* Product grids */
	.products-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}

	/* Taxonomy header */
	.taxonomy-header .tax-title {
		font-size: var(--text-3xl);
	}

	/* Datasheets */
	.product-datasheets {
		flex-direction: column;
	}

	/* Featured product features */
	.featured-product-features {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Small Mobile (≤480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

	.hero-title {
		font-size: 1.75rem;
	}

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

	.btn-lg {
		padding: 0.875rem 1.5rem;
	}

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

	.section-title::before,
	.section-title::after {
		display: none;
	}

	.category-grid,
	.brands-grid,
	.why-grid,
	.products-grid {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
	.site-header,
	.site-footer,
	.cta-banner,
	.hero-actions,
	.nav-toggle {
		display: none;
	}

	.hero {
		min-height: auto;
		background: none;
	}

	body {
		font-size: 12pt;
		color: #000;
	}
}