/**
 * Pelagia Book Store — Responsive Breakpoints
 *
 * Breakpoints:
 *   Desktop  ≥1200px — full layout, all elements visible
 *   Tablet   768–1199px — hamburger, 2-col grids, compact spacing
 *   Mobile   320–767px — single column, stacked footer, mobile header
 *   Small    <480px — single-col cards, minimal gap
 *
 * Applied after all component styles.
 *
 * @package Pelagia
 */

/* ════════════════════════════════════════════════
   TABLET  768px – 1199px
════════════════════════════════════════════════ */
@media (max-width: 1199px) {

	/* Section spacing — slightly reduced on tablet */
	:root {
		--section-pad-y: clamp(2.5rem, 5vw, 3.5rem); /* 40–56px */
		--grid-gap: 1.25rem;
	}

	/* Header — handled in header.css */

	/* Shop grid — 3 columns on tablet */
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	/* Single product — stack on tablet */
	.single-product__grid {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}
}

/* ════════════════════════════════════════════════
   MOBILE  < 768px
════════════════════════════════════════════════ */
@media (max-width: 767px) {

	/* ── Typography ────────────────────────────── */
	:root {
		--text-body: 0.9375rem;       /* 15px on mobile */
		--section-pad-y: 2rem;        /* 32px — compact on mobile */
		--section-pad-y-sm: 1.5rem;   /* 24px */
		--section-pad-y-lg: 2.5rem;   /* 40px */
		--grid-gap: 0.875rem;         /* 14px */
		--container-pad: 1rem;        /* tighter side gutters */
	}

	/* ── Header ────────────────────────────────── */
	/* 3-area grid layout handled in header.css */
	.header-currency-selector { display: none; }

	/* ── Hero ──────────────────────────────────── */
	.hero-banner__inner { grid-template-columns: 1fr; }
	.hero-banner__image-col { min-height: 280px; max-height: 320px; }
	.hero-banner__content-col { padding: var(--space-8) var(--container-pad); }

	/* ── Promo panel ───────────────────────────── */
	.promo-panel__inner { grid-template-columns: 1fr; text-align: center; }

	/* ── Editorial banners ─────────────────────── */
	.editorial-banners { grid-template-columns: 1fr; }
	.editorial-banner { height: 280px; }

	/* ── Author grid ───────────────────────────── */
	.author-grid { grid-template-columns: repeat(2, 1fr); }

	/* ── Shop ──────────────────────────────────── */
	.shop-sidebar { display: none; } /* toggled by JS on mobile */
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }

	/* ── Product cards ─────────────────────────── */
	.product-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }

	/* Best seller carousel layout handled in fp-sections.css */

	/* ── Footer ────────────────────────────────── */
	/* Footer responsive handled in footer.css */

	/* ── Single author ─────────────────────────── */
	.single-author { grid-template-columns: 1fr !important; }

	/* ── Newsletter ────────────────────────────── */
	.newsletter-section__form { flex-direction: column; }
	.newsletter-section__submit { border-radius: var(--radius-sm); }

	/* ── Two-col layout ────────────────────────── */
	.two-col {
		flex-direction: column;
		gap: var(--space-6);
	}
}

/* ════════════════════════════════════════════════
   SMALL MOBILE  < 480px
════════════════════════════════════════════════ */
@media (max-width: 479px) {

	:root {
		--grid-gap: 0.75rem;          /* 12px — tightest gap */
	}

	/* All multi-col product grids collapse to 1 column */
	.product-grid--cols-3,
	.product-grid--cols-4,
	.product-grid--cols-5,
	.product-grid--cols-6 { grid-template-columns: 1fr; }

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

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

	/* Hero CTA stack */
	.hero-banner__cta { flex-direction: column; }
	.hero-banner__cta .btn { width: 100%; }

	/* Best seller also handled in fp-sections.css — do not override here */
}

/* ════════════════════════════════════════════════
   LARGE  > 1400px
════════════════════════════════════════════════ */
@media (min-width: 1400px) {
	.product-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════ */
@media print {
	.site-header,
	.site-footer,
	.hero-banner,
	.newsletter-section { display: none !important; }

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

/* ════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}