/**
 * LM Beauty Studio — Responsive Styles
 *
 * @package LM_Beauty_Studio
 * @since   1.0.0
 */

/* ══════════════════════════════════════════════════════════════════════════
   Tablet — max-width: 1024px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	:root {
		--font-size-4xl: 2.5rem;
		--font-size-3xl: 2rem;
	}

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

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

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

	.about-preview__container {
		grid-template-columns: 1fr 1.8fr 1fr;
		gap: var(--spacing-lg);
	}

	.about-preview__img-col--left,
	.about-preview__img-col--right {
		transform: none;
	}

	.separator-section__wrapper {
		height: 460px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile & Tablet — max-width: 991px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
	:root {
		--font-size-4xl: 2rem;
		--font-size-3xl: 1.75rem;
		--font-size-2xl: 1.5rem;
		--spacing-4xl: 3rem;
		--header-height: 64px;
	}

	/* ── Header Mobile ─────────────────────────────────────────────────── */
	.site-header {
		position: sticky !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		z-index: var(--z-header) !important;
	}

	.admin-bar .site-header {
		top: 46px !important;
	}

	.site-header__container {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding-top: var(--spacing-sm) !important;
		padding-bottom: var(--spacing-sm) !important;
		padding-left: var(--container-padding) !important;
		padding-right: var(--container-padding) !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.site-header__branding {
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		flex: 0 1 auto !important;
		min-width: 0 !important;
	}

	.site-header__logo {
		max-width: 180px !important;
		max-height: 42px !important;
		width: auto !important;
		height: auto !important;
		display: block !important;
		object-fit: contain !important;
	}

	.menu-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		padding: 8px !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
		position: relative !important;
	}

	.site-header__nav--left,
	.site-header__nav--right,
	.site-header__social,
	.site-header__account {
		display: none !important;
	}

	.mobile-menu {
		display: block;
	}


	/* ── About Preview ─────────────────────────────────────────────────── */
	.about-preview {
		min-height: auto;
		padding: var(--spacing-3xl) 0;
	}

	.about-preview__container {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}

	.about-preview__center {
		order: 1;
	}

	.about-preview__img-col--left {
		order: 2;
		align-self: center;
		transform: none;
	}

	.about-preview__img-col--right {
		order: 3;
		align-self: center;
		transform: none;
	}

	.about-preview__img-wrapper {
		max-width: 260px;
	}

	/* ── Separator Mobile ──────────────────────────────────────────────── */
	.separator-section {
		margin: var(--spacing-2xl) 0;
		padding: 0;
	}

	.separator-section__wrapper {
		height: 350px;
		border-radius: 0;
	}

	/* ── Services Editorial Mobile ─────────────────────────────────────── */
	.services-editorial {
		padding: var(--spacing-3xl) 0 var(--spacing-2xl);
	}

	.services-editorial__info-bar {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
		padding-top: var(--spacing-lg);
	}

	.services-editorial__info-col {
		padding: var(--spacing-xs) 0;
	}

	.services-editorial__info-col:not(:last-child)::after {
		display: none;
	}

	/* ── Professional Section Mobile ───────────────────────────────────── */
	.professional-section__grid {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.professional-section__image {
		order: 0;
		aspect-ratio: 16 / 11;
	}

	.professional-section__content {
		order: 1;
		padding: var(--spacing-3xl) var(--spacing-xl);
		text-align: center;
	}

	.professional-section__cta {
		align-self: center;
	}

	/* ── Text Separator Mobile ─────────────────────────────────────────── */
	.text-separator {
		padding: var(--spacing-sm) var(--container-padding);
		margin: 24px 0;
	}

	.text-separator__text {
		font-size: clamp(1.1rem, 4vw, 1.6rem);
		letter-spacing: 0.03em;
		line-height: 1.35;
	}

	/* ── Courses Carousel Mobile ───────────────────────────────────────── */
	.courses-carousel__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}

	.courses-carousel__subtitle {
		text-align: left;
		max-width: 100%;
	}

	.courses-carousel__arrow {
		display: none !important;
	}

	.courses-carousel__viewport {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--spacing-md);
		width: 100%;
		max-width: 100%;
	}

	.courses-carousel__track {
		gap: var(--spacing-md);
	}

	.course-card {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}

	.services-filter__list {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* ── Footer Mobile ─────────────────────────────────────────────────── */
	.site-footer {
		padding: 0 0 var(--spacing-sm);
	}

	.site-footer__card {
		padding: var(--spacing-3xl) var(--spacing-xl);
	}

	.site-footer__social {
		top: var(--spacing-md);
		right: var(--spacing-md);
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
		text-align: center;
	}

	.site-footer__col--brand {
		align-items: center;
	}

	.site-footer__divider {
		display: none;
	}

	.site-footer__col--hours {
		padding-left: 0;
		align-items: center;
	}

	.site-footer__schedule-row {
		justify-content: center;
		gap: var(--spacing-lg);
	}

	/* ── About Us Page Mobile ──────────────────────────────────────────── */
	.about-hero__grid {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.about-hero__image {
		order: 0;
		aspect-ratio: 16 / 11;
	}

	.about-hero__content {
		order: 1;
		padding: var(--spacing-3xl) var(--spacing-xl);
		text-align: center;
	}

	.about-gallery__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.about-gallery__item--left .about-gallery__img-wrapper,
	.about-gallery__item--center .about-gallery__img-wrapper,
	.about-gallery__item--right .about-gallery__img-wrapper {
		aspect-ratio: 16 / 11;
	}

	.about-statement__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
		text-align: center;
	}

	.about-certifications-section {
		padding: var(--spacing-3xl) 0;
		margin-top: var(--spacing-xl);
	}

	.about-certifications__item {
		font-size: 0.8rem;
		line-height: 1.5;
	}

	/* ── Academy Page Mobile ───────────────────────────────────────────── */
	.academy-hero__grid {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.academy-hero__image {
		order: 0;
		aspect-ratio: 16 / 11;
	}

	.academy-hero__content {
		order: 1;
		padding: var(--spacing-3xl) var(--spacing-xl);
		text-align: center;
	}

	.academy-courses__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.academy-why__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}

	.academy-why__img-wrapper {
		aspect-ratio: 16 / 11;
	}

	.academy-faqs__trigger {
		padding: 16px 18px;
	}

	.academy-faqs__question {
		font-size: 0.88rem;
		margin-left: 12px;
	}

	.academy-faqs__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/* ── Contact Us Page Mobile ────────────────────────────────────────── */
	.contact-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}

	.contact-hero__image-col {
		order: 0;
	}

	.contact-hero__content-col {
		order: 1;
	}

	.contact-hero__img-wrapper {
		aspect-ratio: 16 / 11;
	}

	.contact-map__wrapper {
		height: 350px;
	}

	/* ── Services Page Mobile ──────────────────────────────────────────── */
	.services-hero__grid {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.services-hero__image {
		order: 0;
		aspect-ratio: 16 / 11;
	}

	.services-hero__content {
		order: 1;
		padding: var(--spacing-3xl) var(--spacing-xl);
		text-align: center;
	}

	.services-faqs__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/* ── WooCommerce Mobile ────────────────────────────────────────────── */
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-md);
	}

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

	/* ── Posts ──────────────────────────────────────────────────────────── */
	.posts-grid {
		grid-template-columns: 1fr;
	}

	/* ── Entry ─────────────────────────────────────────────────────────── */
	.entry {
		padding: var(--spacing-lg) var(--container-padding);
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Small Mobile — max-width: 480px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	:root {
		--font-size-4xl: 1.75rem;
		--font-size-3xl: 1.5rem;
		--container-padding: 1rem;
	}

	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}


	.cta-section__buttons {
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.cta-section__buttons .btn {
		width: 100%;
	}
}