/**
 * Aura Hair & Beauty Atelier - Responsive Stylesheet
 * Responsive breakpoints: 1200px, 1024px, 768px, 480px, 360px
 */

/* ==========================================================================
   1. LAPTOP & SMALL DESKTOP (<= 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
	.hero-container {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 2.5rem;
	}

	.hero-ref-composition {
		max-width: 500px;
		height: 500px;
	}

	.frame-top-left {
		width: 235px;
		height: 255px;
		left: -28px;
	}

	.frame-bottom-left {
		width: 260px;
		height: 300px;
		top: 195px;
		left: 10px;
	}

	.frame-main-right {
		width: 285px;
		height: 410px;
		top: 18px;
		right: 15px;
	}

	.ref-monogram-badge {
		top: 160px;
		left: 150px;
		width: 78px;
		height: 78px;
	}

	.ref-floating-services-card {
		bottom: 35px;
		right: -10px;
		padding: 0.9rem 1.15rem;
	}

	.gallery-row-top {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

/* ==========================================================================
   2. TABLET LANDSCAPE (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	/* Header Navigation switch */
	.desktop-navigation,
	.btn-header-cta {
		display: none;
	}

	.mobile-toggle {
		display: flex;
	}

	/* Services Grid becomes 2 Columns */
	.services-fullwidth-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Team Grid becomes 3 Columns or responsive */
	.team-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	/* Reviews Grid */
	.reviews-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}

	/* Footer */
	.footer-main-row {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}

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

/* ==========================================================================
   3. TABLET PORTRAIT & MOBILE (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
	:root {
		--header-height: 58px;
	}

	/* Add bottom padding to body for floating mobile CTA */
	body {
		padding-bottom: 60px;
	}

	/* 1. Mobile Header (Dynamic Contrast: Black logo when light, White logo when dark) */
	.site-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		padding: 0.5rem 1.15rem;
		background-color: rgba(243, 238, 232, 0.94);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-bottom: 1px solid var(--border-light);
		transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	}

	/* Header Beyazken / Açıkken: Logo ve Toggle Buton Siyah */
	.site-header:not(.is-scrolled) {
		background-color: rgba(243, 238, 232, 0.94);
		border-bottom: 1px solid var(--border-light);
	}

	.site-header:not(.is-scrolled) .brand-title {
		color: #151312 !important;
	}

	.site-header:not(.is-scrolled) .brand-slogan {
		color: #9A7B5F !important;
	}

	.site-header:not(.is-scrolled) .mobile-toggle {
		color: #151312 !important;
	}

	.site-header:not(.is-scrolled) .hamburger-bar {
		background-color: #151312 !important;
	}

	.site-header:not(.is-scrolled) .brand-logo-svg {
		color: #151312 !important;
	}

	/* Header Aşağı Kaydırılınca (Siyahken): Logo ve Toggle Buton Beyaz / Altın */
	.site-header.is-scrolled {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba(21, 19, 18, 0.96) !important;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	}

	.site-header.is-scrolled .brand-title {
		color: #FFFFFF !important;
	}

	.site-header.is-scrolled .brand-slogan {
		color: var(--accent-gold) !important;
	}

	.site-header.is-scrolled .brand-logo-svg {
		color: var(--accent-gold) !important;
	}

	.site-header.is-scrolled .mobile-toggle {
		color: #FFFFFF !important;
	}

	.site-header.is-scrolled .hamburger-bar {
		background-color: #FFFFFF !important;
	}

	.brand-logo-svg {
		width: 38px;
		height: 38px;
	}

	.header-branding {
		flex-shrink: 0;
	}

	.drawer-brand-logo {
		width: 44px;
		height: 44px;
		color: var(--text-primary);
	}

	.brand-title {
		font-size: clamp(1.05rem, 4.8vw, 1.2rem);
		letter-spacing: 0.08em;
		line-height: 1;
		white-space: nowrap;
		transition: color 0.3s ease;
	}

	.brand-slogan {
		font-size: 0.4375rem;
		letter-spacing: 0.16em;
		margin-top: 2px;
		transition: color 0.3s ease;
	}

	.mobile-toggle {
		width: 36px;
		height: 36px;
		padding: 6px;
		transition: color 0.3s ease;
	}

	.hamburger-bar {
		width: 18px;
		height: 1.5px;
		transition: background-color 0.3s ease, transform var(--transition-fast), opacity var(--transition-fast);
	}

	/* Show Floating Mobile Bar */
	.floating-mobile-bar {
		display: block;
		padding: 0.5rem 1.15rem;
		padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
	}

	.floating-title {
		font-size: 0.9375rem;
		font-weight: 500;
	}

	.floating-subtitle {
		font-size: 0.625rem;
	}

	.btn-floating-cta {
		padding: 0.55rem 1.15rem;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		border-radius: 100px;
	}

	/* ==========================================
	   HERO SECTION (FULL COVER TOP, ZERO GAP)
	   ========================================== */
	.hero-section {
		min-height: auto;
		padding-top: 0 !important;
		padding-bottom: 2.75rem;
		position: relative;
		overflow: hidden;
		background-color: var(--bg-primary);
		display: flex;
		flex-direction: column;
	}

	/* Full Top Cover Hero Image Slider */
	.hero-mobile-bg-slider {
		display: block;
		position: relative;
		width: 100%;
		height: 56vh;
		min-height: 360px;
		max-height: 440px;
		z-index: 1;
		overflow: hidden;
	}

	.mobile-bg-slide {
		position: absolute;
		inset: 0;
		background-size: cover !important;
		background-position: center top !important;
		background-repeat: no-repeat;
		opacity: 0;
		transform: scale(1.05);
		transition: opacity 1.6s ease-in-out, transform 6s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: opacity, transform;
	}

	.mobile-bg-slide.active {
		opacity: 1;
		transform: scale(1);
	}

	/* Soft Transparent-to-Cream Luxury Gradient */
	.mobile-bg-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(21, 19, 18, 0.25) 0%,
			rgba(243, 238, 232, 0) 30%,
			rgba(243, 238, 232, 0.5) 65%,
			rgba(243, 238, 232, 0.95) 88%,
			rgba(243, 238, 232, 1) 100%
		);
		pointer-events: none;
	}

	/* Seamless Overlap connecting Image to Content */
	.hero-container {
		position: relative;
		z-index: 2;
		grid-template-columns: 1fr;
		gap: 0;
		width: 100%;
		margin-top: -35px;
		padding-top: 0;
	}

	/* Hide Desktop Visual Composition on Mobile */
	.hero-visual {
		display: none !important;
	}

	/* Mobile Hero Content Hierarchy */
	.hero-content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}

	/* 1. Remove Eyebrow Badge on Mobile */
	.hero-eyebrow-wrap {
		display: none !important;
	}

	/* 2. Main Heading (Editorial Serif) */
	.hero-headline {
		order: 2;
		font-size: clamp(2rem, 6.8vw, 2.45rem);
		line-height: 1.1;
		font-weight: 400;
		margin-bottom: 0.55rem;
		text-align: left;
		color: var(--text-primary);
	}

	.headline-line-wrap {
		display: block;
		text-align: left;
	}

	.headline-line {
		display: block;
		text-align: left;
	}

	/* 3. Elegant Short Italic Subtitle */
	.hero-subtitle {
		order: 3;
		font-size: 0.8125rem;
		font-style: italic;
		margin-bottom: 0.65rem;
		color: var(--accent-taupe);
		text-align: left;
		font-weight: 400;
	}

	/* 4. Short Supporting Paragraph */
	.hero-description {
		order: 4;
		font-size: 0.8125rem;
		line-height: 1.6;
		color: var(--text-secondary);
		margin-bottom: 1.25rem;
		max-width: 100%;
		text-align: left;
		font-weight: 300;
	}

	/* 5. Trust Indicators (Positioned BEFORE CTAs) */
	.hero-trust-grid {
		order: 5;
		margin: 0 0 1.25rem 0;
		padding-top: 1rem;
		border-top: 1px solid rgba(154, 123, 95, 0.18);
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}

	.trust-item {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 0.4rem;
		padding: 0.45rem 0.6rem;
		background: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		border: 1px solid rgba(154, 123, 95, 0.12);
		border-radius: 10px;
	}

	.trust-item:not(:last-child) {
		border-right: 1px solid rgba(154, 123, 95, 0.12);
	}

	.trust-icon-box {
		color: var(--accent-taupe);
		height: auto;
		flex-shrink: 0;
	}

	.trust-icon-box svg {
		width: 16px;
		height: 16px;
	}

	.trust-text {
		align-items: flex-start;
	}

	.trust-label-top,
	.trust-label-bottom {
		font-size: 0.53125rem;
		letter-spacing: 0.08em;
		line-height: 1.2;
	}

	/* 6. CTAs / Action Buttons (Positioned AFTER Trust Indicators) */
	.hero-actions {
		order: 6;
		margin-bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
	}

	.btn-hero-cta {
		padding: 0.8rem 1.4rem;
		font-size: 0.75rem;
		letter-spacing: 0.12em;
		width: 100%;
		justify-content: center;
	}

	.hero-secondary-btn {
		padding: 0.7rem 1.25rem;
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
		width: 100%;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.85);
	}

	/* Services Grid stays 2 Columns with ZERO gap */
	.services-fullwidth-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-desc {
		display: none; /* Hide description on mobile cards to keep titles crisp */
	}

	.service-card-body {
		padding: 1rem;
	}

	.service-title {
		font-size: 1.125rem;
		margin-bottom: 0;
	}

	/* Service Modal (1 Column) */
	.aura-modal {
		padding: 0.75rem;
	}

	.aura-modal-content-grid {
		grid-template-columns: 1fr;
	}

	.aura-modal-media {
		min-height: 240px;
		max-height: 280px;
	}

	.aura-modal-info {
		padding: 1.5rem;
	}

	/* Gallery on Mobile */
	.gallery-row-top,
	.gallery-row-bottom {
		grid-template-columns: 1fr;
	}

	.gallery-stack-col {
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr;
	}

	.item-large { min-height: 320px; }
	.item-stacked { min-height: 180px; }
	.item-wide { min-height: 240px; }
	.item-portrait { min-height: 280px; }

	/* Instagram Banner on Mobile */
	.gallery-instagram-banner {
		padding: 1.75rem 1.25rem;
		border-radius: 14px;
	}

	.instagram-banner-inner {
		flex-direction: column;
		text-align: center;
		align-items: center;
		gap: 1.25rem;
	}

	.instagram-banner-left {
		flex-direction: column;
		text-align: center;
		align-items: center;
		gap: 1rem;
	}

	.instagram-banner-desc {
		font-size: 0.8125rem;
	}

	.instagram-banner-action {
		width: 100%;
	}

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

	/* Team Grid: 1 Column on Mobile */
	.team-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
		gap: 2.5rem;
	}

	/* Reviews Grid: 1 Column on Mobile */
	.reviews-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Contact & Map Section: 1 Column */
	.contact-two-columns {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.contact-map-col {
		min-height: 380px;
	}

	.map-wrapper,
	.google-map-iframe {
		min-height: 380px;
	}

	/* Footer */
	.footer-main-row {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-bottom-row {
		flex-direction: column;
		gap: 1rem;
		text-align: center;
	}
}

/* ==========================================================================
   4. SMALL MOBILE SCREENS (<= 480px & <= 360px)
   ========================================================================== */
@media (max-width: 480px) {
	.brand-title {
		font-size: 1.5rem;
	}

	.hero-headline {
		font-size: 2.35rem;
	}

	.section-title {
		font-size: 2rem;
	}

	.hero-ref-composition {
		max-width: 320px;
		height: 330px;
	}

	.frame-top-left {
		width: 145px;
		height: 165px;
		left: -10px;
	}

	.frame-bottom-left {
		width: 165px;
		height: 190px;
		top: 130px;
		left: 5px;
	}

	.frame-main-right {
		width: 180px;
		height: 265px;
		top: 10px;
		right: 5px;
	}

	.ref-monogram-badge {
		top: 100px;
		left: 95px;
		width: 54px;
		height: 54px;
	}

	.ref-script-signature {
		top: 100px;
		right: -5px;
		font-size: 1.25rem;
	}

	.ref-floating-services-card {
		bottom: 18px;
		right: -5px;
		padding: 0.5rem 0.7rem;
	}

	.google-rating-badge {
		flex-direction: column;
		gap: 0.4rem;
		padding: 0.75rem 1.25rem;
	}

	.google-badge-label {
		border-left: none;
		padding-left: 0;
	}
}

@media (max-width: 360px) {
	/* On extra narrow screens, switch services to 1 column for pristine readability */
	.services-fullwidth-grid {
		grid-template-columns: 1fr;
	}

	.service-desc {
		display: -webkit-box;
	}

	.gallery-stack-col {
		grid-template-columns: 1fr;
	}

	.hero-trust-grid {
		grid-template-columns: 1fr;
	}
}