/**
 * PackPlus V2 — Responsive
 *
 * Single mobile threshold (900px) plus a phone-specific refinement
 * pass (480px), matching the rest of the page's spacing system.
 * Mobile gets an intentional stacked composition per section — never
 * the desktop grid simply scaled down (see CLAUDE.md section 19).
 * Reviewed at ~1440/1024/768/390px; no rule below introduces
 * horizontal overflow at any of those widths.
 */

/*
 * Nav breakpoint: matches the hero's own 900px collapse below, kept
 * intentionally as the single mobile threshold for the whole page
 * rather than introducing per-section breakpoints.
 */
@media (max-width: 900px) {
	.pp-nav__links,
	.pp-nav__cta {
		display: none;
	}

	.pp-nav__mobile {
		display: block;
	}
}

@media (max-width: 900px) {
	.pp-hero {
		grid-template-columns: 1fr;
		padding-top: calc(var(--pp-nav-height) + var(--pp-gutter));
	}

	.pp-hero__content {
		grid-column: 1;
		max-width: none;
	}

	.pp-hero__visual {
		grid-column: 1;
		height: min(56vh, 30rem);
		margin-top: var(--pp-gutter);
	}

	.pp-hero__media {
		margin-left: 0;
	}

	.pp-hero__label {
		left: 0;
		bottom: 1rem;
	}

	.pp-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pp-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.pp-nav__inner {
		padding: 0 var(--pp-gutter);
	}

	.pp-nav__mark img {
		height: 26px;
	}

	.pp-preloader__mark {
		font-size: 1rem;
	}

	.pp-preloader__count {
		font-size: 2.25rem;
	}
}

/*
 * Sections 02–09 mobile composition. Each section gets an intentional
 * stacked layout below 900px rather than a scaled-down desktop grid
 * (see CLAUDE.md section 19).
 */
@media (max-width: 900px) {
	/* Packaging Universe: the desktop editorial collage grid becomes a
	   deliberate stacked column — desktop absolute spans are not
	   preserved on mobile. */
	.pp-universe__collage {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: var(--pp-space-md);
	}

	.pp-universe__item {
		grid-column: 1;
		grid-row: auto;
	}

	.pp-universe__item .pp-media {
		aspect-ratio: 4 / 5;
		height: auto;
	}

	/* Product Category Journey: single column, text always before visual. */
	.pp-category {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.pp-category--reverse .pp-category__text,
	.pp-category--reverse .pp-category__visual {
		grid-column: 1;
	}

	.pp-category__visual {
		grid-row: 2;
		height: 16rem;
	}

	/* Industries: stacked tabs above a full-width image + preview —
	   the image is never hidden behind a desktop-only interaction. */
	.pp-industries__layout {
		grid-template-columns: 1fr;
	}

	/* Packaging in the Wild: reduced 2-column grid, natural aspect
	   ratios instead of desktop's fixed row-line spans. */
	.pp-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
	}

	.pp-gallery__item {
		grid-column: auto;
		grid-row: auto;
	}

	.pp-gallery__item .pp-media {
		aspect-ratio: 4 / 5;
		height: auto;
	}

	.pp-gallery__item--06 {
		grid-column: 1 / 3;
	}

	.pp-gallery__item--06 .pp-media {
		aspect-ratio: 16 / 9;
	}

	/* Why PackPlus: left-aligned chapters at every width on mobile. */
	.pp-chapter:nth-of-type(even) {
		text-align: left;
	}

	/* Footer: stack nav groups. */
	.pp-footer__groups {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

@media (max-width: 480px) {
	.pp-process__timeline {
		padding-left: 2rem;
	}

	.pp-process__step-tick {
		left: -2rem;
	}

	/* Phone: the reduced 2-column gallery still crowds a 390px
	   viewport — collapse to a single column. */
	.pp-gallery {
		grid-template-columns: 1fr;
	}

	.pp-gallery__item--06 {
		grid-column: 1;
	}

	.pp-hero__label {
		max-width: none;
	}
}