/*
 * responsive.css — Breakpoint overrides for tablet and mobile.
 * fredi-theme-vidona
 */

/* ================================================================
   TABLET  ≤ 1024px
   ================================================================ */
@media (max-width: 1024px) {

	/* Nav — hide links, show hamburger */
	.aa-nav__links { display: none; }
	.aa-nav__hamburger { display: flex; }

	/* About — single column */
	.aa-about__grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	/* Stats — stacked */
	.aa-stats__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	/* Archive cards — 2 col */
	.ftvd-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Footer — 2-col + full-width big nav */
	.aa-footer__main {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}

	.aa-footer__nav-big {
		grid-column: 1 / -1;
	}
}

/* ================================================================
   MOBILE  ≤ 768px
   ================================================================ */
@media (max-width: 768px) {

	:root {
		--pad:    1.25rem;
		--gap-lg: 2.5rem;
		/* --gap-xl (section spacing) intentionally not overridden here —
		   the Section Spacing token holds 96–144px vertical at every
		   breakpoint; --section-space's clamp() already scales it down
		   to its 96px floor on narrow viewports. */
	}

	/* Hero */
	.aa-hero__side { display: none; }

	.aa-hero__title {
		font-size: clamp(2rem, 2rem, 5rem);
	}

	/* Portfolio — column count is recalculated by portfolio-grid.js */

	/* Events — stack */
	.aa-events__grid {
		grid-template-columns: 1fr;
	}

	.aa-events__grid img,
	.aa-events__item {
		height: 300px;
	}

	/* Products — 2 col */
	.aa-products {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	/* Archive — single col */
	.ftvd-archive-grid {
		grid-template-columns: 1fr;
	}

	/* Footer — full single col */
	.aa-footer__main {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.aa-footer__nav-big {
		grid-column: auto;
	}
}

/* ================================================================
   SMALL MOBILE  ≤ 480px
   ================================================================ */
@media (max-width: 480px) {

	:root { --pad: 1rem; }

	/* Products — single col */
	.aa-products {
		grid-template-columns: 1fr;
	}

	/* Filters — tighter gap */
	.aa-filters {
		gap: 1.2rem;
	}

	/* Footer big nav smaller */
	.aa-footer__nav-big a,
	.aa-footer__nav-big li a {
		font-size: clamp(2rem, 12vw, 2.8rem);
	}

	/* 404 */
	.ftvd-404-code {
		font-size: clamp(5rem, 28vw, 10rem);
	}
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
	.aa-nav,
	.aa-nav__hamburger,
	.aa-nav__mobile-menu,
	.aa-footer {
		display: none;
	}

	body {
		background: white;
		color: black;
		font-size: 12pt;
	}

	a::after {
		content: ' (' attr(href) ')';
		font-size: 0.8em;
		color: rgba(9, 40, 80, 0.65);
	}
}