/* ═══════════════════════════════════════════════════════════════
   Gerege — Responsive Fixes (supplements responsive.css)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Global: Prevent horizontal scroll ─── */
html, body {
	overflow-x: hidden !important;
	max-width: 100vw;
}

/* ─── 2. Global: All images respect container ─── */
img {
	max-width: 100%;
	height: auto;
}
iframe {
	max-width: 100%;
}
video {
	max-width: 100%;
}

/* ─── Product Detail Pages ─── */
@media only screen and (max-width: 768px) {
	.pdp-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.pdp-gallery {
		position: static;
	}
	.pdp-thumbs {
		flex-direction: row;
		overflow-x: auto;
	}
	.pdp-section {
		padding: 100px 0 40px;
	}
	.pdp-info {
		padding: 0 16px;
	}
}

@media only screen and (max-width: 480px) {
	.pdp-title {
		font-size: 24px;
	}
	.pdp-price {
		font-size: 28px;
	}
	.pdp-container,
	.prod-container {
		padding: 0 16px;
	}
}

/* ─── Product Cards Grid ─── */
@media only screen and (max-width: 768px) {
	.prod-card {
		grid-template-columns: 1fr;
	}
}

/* ─── 3. Nav / Header on mobile ─── */
@media only screen and (max-width: 1023px) {
	.mobile-menu {
		width: 85vw;
		max-width: 360px;
	}
	/* Prevent header items causing overflow (visible for cart dropdown) */
	.main-header .inner-container {
		overflow: visible;
	}
	.header-login {
		flex-shrink: 0;
	}
	.header-login .login-btn {
		font-size: 13px;
		white-space: nowrap;
	}
	/* Ensure mobile nav toggler is always visible */
	.mobile-nav-toggler {
		display: flex !important;
		align-items: center;
		cursor: pointer;
		flex-shrink: 0;
	}
}

@media only screen and (max-width: 480px) {
	/* Hide login text on very small screens, keep cart/lang */
	.header-login .login-btn {
		font-size: 12px;
		padding: 0 4px;
	}
	.lang-toggle .lang-label {
		font-size: 12px;
	}
}

/* ─── 4. Hero sections overflow fix ─── */
@media only screen and (max-width: 767px) {
	.banner-one {
		padding: 120px 0 60px;
		overflow: hidden;
	}
	.banner-one_heading {
		font-size: 44px;
		line-height: 50px;
		word-break: break-word;
	}
	.banner-one_text {
		font-size: 16px;
		line-height: 24px;
	}
	/* 3D robot overflow on mobile */
	.robot {
		width: 100% !important;
		right: 0 !important;
		overflow: hidden;
	}
	.robot iframe {
		max-width: 100%;
	}
	/* Banner video */
	.banner-video-bg {
		object-fit: cover;
		width: 100%;
	}
}

@media only screen and (max-width: 479px) {
	.banner-one_heading {
		font-size: 36px;
		line-height: 42px;
	}
	.banner-one_content-inner {
		padding: 0 16px;
	}
}

/* ─── 5. Hero font-size gap fix ─── */
@media only screen and (max-width: 650px) {
	h1 {
		line-height: 60px;
		font-size: 60px;
	}
}

@media only screen and (max-width: 520px) {
	h1 {
		line-height: 48px;
		font-size: 48px;
	}
}

@media only screen and (max-width: 400px) {
	h1 {
		line-height: 38px;
		font-size: 36px;
	}
}

/* ─── 6. Heading font-size scaling on mobile ─── */
@media only screen and (max-width: 767px) {
	h2 {
		font-size: 28px !important;
		line-height: 36px !important;
	}
	h3 {
		font-size: 22px;
		line-height: 30px;
	}
	.sec-title_heading {
		font-size: 28px !important;
		line-height: 36px !important;
	}
	.page-title_heading {
		font-size: 36px !important;
		line-height: 44px !important;
	}
	.awards-block_one-title {
		font-size: 18px;
		line-height: 26px;
	}
}

@media only screen and (max-width: 479px) {
	h2 {
		font-size: 24px !important;
		line-height: 32px !important;
	}
	.sec-title_heading {
		font-size: 24px !important;
		line-height: 32px !important;
	}
	.page-title_heading {
		font-size: 28px !important;
		line-height: 36px !important;
	}
}

/* ─── 7. Gallery grids — 1 column on mobile ─── */
@media only screen and (max-width: 767px) {
	.gallery-one .row .gallery-block_one {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.gallery-block_one-inner {
		margin-bottom: 20px;
	}
	.gallery-block_one-image img {
		width: 100%;
		height: auto;
	}
	.gallery-block_one-heading a {
		font-size: 16px;
	}
}

/* ─── 8. Footer — stack columns vertically on mobile ─── */
@media only screen and (max-width: 767px) {
	.main-footer .widgets-section .row {
		flex-direction: column;
	}
	.main-footer .footer-column {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 30px;
	}
	.main-footer h2 {
		font-size: 22px !important;
		line-height: 30px !important;
	}
	.footer_socials {
		flex-wrap: wrap;
	}
	.footer_navs {
		margin-top: 0;
	}
	.footer-bottom .d-flex {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}
}

@media only screen and (max-width: 599px) {
	.footer-style-one_top h2 {
		font-size: 28px;
		line-height: 36px;
	}
}

/* ─── Service blocks responsive ─── */
@media only screen and (max-width: 599px) {
	.service-block_one {
		padding: 20px 16px;
	}
	.service-block_one-inner {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
	.service-block_one-heading {
		font-size: 18px;
	}
}

/* ─── 9. MedTech page specific ─── */
@media only screen and (max-width: 991px) {
	.medtech-cap-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.medtech-solutions-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.medtech-bento-grid {
		grid-template-columns: 1fr;
	}
	.medtech-cta-inner {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 767px) {
	/* MedTech hero */
	.medtech-hero {
		overflow: hidden;
	}
	.medtech-hero-inner {
		padding: 0 16px;
	}
	.medtech-hero-title {
		font-size: 40px !important;
		line-height: 1.1 !important;
		word-break: break-word;
	}
	/* MedTech grids — all 1 column */
	.medtech-cap-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.medtech-solutions-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.medtech-bento-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* MedTech capabilities header */
	.medtech-cap-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.medtech-cap-header-title {
		font-size: 28px;
	}
	.medtech-cap-header-right {
		text-align: left;
		max-width: none;
	}
	/* MedTech CTA */
	.medtech-cta-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	/* MedTech services section */
	.medtech-services .row {
		flex-direction: column;
	}
	/* MedTech news section */
	.medtech-news-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	/* MedTech videos */
	.medtech-video-section video {
		width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 479px) {
	.medtech-hero-title {
		font-size: 32px !important;
	}
	.medtech-hero-subtitle {
		font-size: 14px;
	}
	.medtech-cap-item {
		padding: 20px 16px;
	}
	.medtech-solutions-grid .medtech-sol-card {
		padding: 20px 16px;
	}
}

/* ─── EdTech responsive ─── */
@media only screen and (max-width: 991px) {
	.edtech-cap-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.edtech-solutions-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 767px) {
	.edtech-cap-grid {
		grid-template-columns: 1fr;
	}
	.edtech-solutions-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── 10. About page — Timeline on mobile ─── */
@media only screen and (max-width: 767px) {
	/* Timeline slides */
	.tl-card {
		flex-direction: column;
		text-align: center;
		gap: 20px;
		padding: 16px;
	}
	.tl-year-box {
		width: 160px !important;
		height: 160px !important;
		margin: 0 auto;
	}
	.tl-text h3 {
		font-size: 18px;
		line-height: 26px;
	}
	.tl-text p {
		font-size: 14px;
		line-height: 22px;
	}
	.tl-header {
		padding-top: 50px;
	}
	.tl-header h2 {
		font-size: 28px !important;
	}
	/* Timeline bar markers */
	.tl-marker-label {
		font-size: 10px;
	}
	.tl-bar-inner {
		padding: 0 8px;
	}
	/* Team section on about page */
	.team-one .row .col-lg-4,
	.team-one .row .col-lg-3,
	.team-one .row .col-md-6 {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.team-block_one-image {
		height: 260px !important;
	}
}

@media only screen and (max-width: 479px) {
	.tl-year-box {
		width: 130px !important;
		height: 130px !important;
	}
	.tl-text-year {
		font-size: 32px;
	}
	.tl-text h3 {
		font-size: 16px;
		line-height: 24px;
	}
}

/* ─── All Devices / Shop page ─── */
@media only screen and (max-width: 768px) {
	.shop-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media only screen and (max-width: 480px) {
	.shop-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── Checkout modal responsive ─── */
@media only screen and (max-width: 768px) {
	.checkout-modal-content {
		width: 95vw;
		max-height: 90vh;
		padding: 24px 16px;
	}
}

/* ─── POS / Kiosk hero text responsive ─── */
@media only screen and (max-width: 479px) {
	.pos-hero-text {
		font-size: 36px !important;
		left: 5%;
		max-width: 70%;
	}
	.pos-hero-subtitle {
		font-size: 15px;
	}
	.kiosk-hero-text {
		font-size: 36px !important;
		left: 5%;
		max-width: 70%;
	}
	.kiosk-hero-subtitle {
		font-size: 14px;
	}
}

/* ─── POS login modal responsive ─── */
@media only screen and (max-width: 480px) {
	.pos-modal-card {
		flex-direction: column;
	}
	.pos-modal-left {
		display: none;
	}
	.pos-modal-right {
		padding: 24px 16px;
	}
}

/* ─── Contact form responsive ─── */
@media only screen and (max-width: 599px) {
	.contact-form .row {
		gap: 0;
	}
	.contact-form input,
	.contact-form textarea {
		font-size: 16px; /* prevent iOS zoom */
	}
}

/* ─── Stats section responsive ─── */
@media only screen and (max-width: 767px) {
	.stats-one .inner-container .clearfix {
		display: flex;
		flex-wrap: wrap;
	}
	.counter-block_one {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.stats-one_contact-column {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media only screen and (max-width: 599px) {
	.counter-block_one {
		padding: 20px 10px;
	}
	.counter-block_one-count,
	.counter-block_one-counter {
		font-size: 36px;
	}
}

@media only screen and (max-width: 479px) {
	.counter-block_one {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ─── Mongolian text responsive adjustments ─── */
@media only screen and (max-width: 767px) {
	html.lang-mn .sec-title_heading {
		font-size: 24px;
		line-height: 32px;
	}
	html.lang-mn .banner-one_text {
		font-size: 14px;
		line-height: 22px;
	}
	html.lang-mn h2 {
		font-size: 22px !important;
		line-height: 30px !important;
	}
}

/* ─── Cart dropdown responsive ─── */
@media only screen and (max-width: 480px) {
	.cart-dropdown {
		right: -60px;
		width: 300px;
	}
}

/* ─── Swiper / Carousel on mobile ─── */
@media only screen and (max-width: 767px) {
	.swiper-container {
		overflow: hidden;
	}
	.testimonial-block_one-inner {
		padding: 24px 16px;
	}
}

/* ─── Journal / Video background section ─── */
@media only screen and (max-width: 767px) {
	.journal-one {
		overflow: hidden;
	}
	.journal-video-bg {
		width: 100%;
		object-fit: cover;
	}
	.journal-main-heading {
		font-size: 32px !important;
		line-height: 40px !important;
	}
}

/* ─── Awards / Mid Journey (index page) ─── */
@media only screen and (max-width: 767px) {
	.awards-block_one-content {
		flex-wrap: wrap;
		gap: 8px;
	}
	.awards-block_one-title {
		font-size: 16px;
		line-height: 24px;
	}
	.awards-block_one-title span {
		display: block;
	}
}

/* ─── Kiosk showcase section ─── */
@media only screen and (max-width: 767px) {
	.kiosk-showcase {
		padding: 60px 0;
	}
	.kiosk-showcase-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ─── Auto-container padding on small screens ─── */
@media only screen and (max-width: 479px) {
	.auto-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}