/**
 * Responsive CSS
 *
 * Mobile-first breakpoint overrides for the Stellar theme.
 * Base styles are in main.css (mobile, 320px+).
 * This file scales up with min-width media queries.
 *
 * Breakpoints:
 *   768px  — Tablet
 *   1024px — Desktop
 *   1440px — Large Desktop
 *
 * @package Stellar
 * @since   1.0.0
 */

/* ============================================================
   TABLET  (768px+)
   ============================================================ */

@media (min-width: 768px) {

	/* Header */
	.site-header .menu-toggle {
		display: none;
	}

	.primary-navigation {
		display: flex;
	}

	/* Hero */
	.hero-cta-group {
		flex-direction: row;
		justify-content: center;
	}

	/* Stats bar */
	.stats-bar-inner {
		grid-template-columns: repeat(4, 1fr);
	}

	/* How it works */
	.how-it-works-grid {
		grid-template-columns: repeat(3, 1fr);
	}

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

	/* Order form */
	.form-step {
		padding: 48px 56px;
	}

	/* Testimonials - show 3 on tablet */
	.testimonial-card {
		flex: 0 0 calc(100% / 3);
	}

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

	/* Footer */
	.footer-top {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}

	/* Star map canvas taller on tablet */
	#stellar-star-map-canvas {
		height: 600px;
	}

	/* Footer bottom */
	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	/* Blog */
	.site-main .stellar-container {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: 48px;
		align-items: start;
	}

	/* Single post */
	.single-post-content {
		padding-left: 0;
		padding-right: 0;
	}

	/* Touch hint hidden on tablet+ */
	.star-map-touch-hint {
		display: none !important;
	}
}

/* ============================================================
   DESKTOP  (1024px+)
   ============================================================ */

@media (min-width: 1024px) {

	/* Stats bar */
	.stat-number {
		font-size: 3rem;
	}

	/* Packages featured card scale */
	.package-card.featured {
		transform: scale(1.04);
	}

	.package-card.featured:hover {
		transform: scale(1.07) translateY(-6px);
	}

	/* Star map canvas */
	#stellar-star-map-canvas {
		height: 680px;
	}

	/* Testimonials larger */
	.testimonials-track {
		/* desktop shows 3 side by side */
	}

	/* CTA section */
	.cta-section {
		min-height: 70vh;
	}

	/* 404 */
	.stellar-404-number {
		font-size: 16rem;
	}
}

/* ============================================================
   LARGE DESKTOP  (1440px+)
   ============================================================ */

@media (min-width: 1440px) {

	/* Star map canvas max height */
	#stellar-star-map-canvas {
		height: 760px;
	}

	/* Testimonials carousel: show all 3 side by side */
	.testimonials-carousel {
		overflow: visible;
	}

	.testimonials-track {
		gap: 24px;
	}

	.testimonial-card {
		flex: 1;
		min-width: 0;
	}

	/* Occasion cards larger */
	.occasion-card {
		aspect-ratio: 1;
	}
}

/* ============================================================
   MOBILE ONLY (max-width 767px)
   ============================================================ */

@media (max-width: 767px) {

	/* Smaller section padding on mobile */
	.stellar-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	/* How cards icon smaller */
	.how-card {
		padding: 28px 24px;
	}

	/* Package cards full-width, featured not scaled */
	.package-card.featured {
		transform: none;
	}

	/* Form step padding smaller */
	.form-step {
		padding: 28px 20px;
	}

	/* Form nav stacks on very small */
	.form-nav {
		flex-direction: column-reverse;
	}

	.form-nav .btn {
		width: 100%;
	}

	/* Progress labels hidden on tiny screens */
	.progress-step-label {
		display: none;
	}

	/* Testimonials carousel: single card */
	.testimonial-card {
		flex: 0 0 100%;
	}

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

	/* Footer widgets stack */
	.footer-top {
		grid-template-columns: 1fr;
	}

	/* Blog sidebar hidden on mobile */
	.site-sidebar {
		display: none;
	}

	/* FAQ */
	.faq-question {
		font-size: 0.875rem;
		padding: 16px 18px;
	}

	/* Star map touch hint visible on mobile */
	.star-map-touch-hint {
		display: block;
	}

	/* Buttons full width in hero */
	.hero-cta-group .btn {
		width: 100%;
		max-width: 320px;
	}

	/* 404 page */
	.stellar-404-number {
		font-size: 7rem;
	}
}

/* ============================================================
   VERY SMALL (max-width 375px)
   ============================================================ */

@media (max-width: 375px) {

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

	.form-step {
		padding: 20px 16px;
	}

	.package-card {
		padding: 28px 20px;
	}

	.how-card {
		padding: 24px 16px;
	}

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