/**
 * PressKit Pro — Responsive Layout
 *
 * Mobile-first responsive layout with breakpoints:
 *   480px  — Small mobile → Larger mobile
 *   768px  — Mobile → Tablet (two-column begins)
 *   1024px — Tablet → Desktop (full layout with sticky sidebar)
 *   1440px — Desktop → Wide desktop
 *
 * @package PressKit_Pro
 */

@layer pkp-layout {
	/* ──────────────────────────────────────────────────────
	   Mobile-first base (< 480px)
	   ────────────────────────────────────────────────────── */

	/* Main layout: single column on mobile */
	.pkp-main {
		grid-template-columns: 1fr;
		padding: var(--pkp-spacing-lg) var(--pkp-spacing-md);
		gap: var(--pkp-spacing-lg);
	}

	/* Sidebar: not sticky on mobile, flows in document order */
	.pkp-sidebar {
		position: static;
	}

	/* Hero: reduced sizing for mobile */
	.pkp-hero {
		min-height: 200px;
		padding: var(--pkp-spacing-xl) var(--pkp-spacing-md);
	}

	.pkp-hero__title {
		font-size: 1.5rem;
	}

	.pkp-hero__tagline {
		font-size: 1rem;
	}

	/* Navigation: hidden by default on mobile, toggled by hamburger */
	.pkp-nav__links {
		display: none;
		flex-direction: column;
		width: 100%;
		overflow-x: visible;
	}

	.pkp-nav__links--open {
		display: flex;
	}

	.pkp-nav {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.pkp-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-inline-start: auto;
		padding: 0;
		background: transparent;
		border: none;
		color: var(--pkp-color-text);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition:
			color 0.2s var(--pkp-ease-out),
			transform 0.2s var(--pkp-ease-out);
	}

	.pkp-nav__toggle:hover {
		color: var(--pkp-color-primary);
	}

	.pkp-nav__toggle:active {
		transform: scale(0.95);
	}

	.pkp-nav__toggle:focus-visible {
		outline: 2px solid var(--pkp-color-primary);
		outline-offset: -2px;
		border-radius: var(--pkp-border-radius);
	}

	.pkp-nav__toggle-icon {
		width: 24px;
		height: 24px;
		transition: transform 0.3s var(--pkp-ease-out);
	}

	.pkp-nav__toggle[aria-expanded="true"] .pkp-nav__toggle-icon {
		transform: rotate(90deg);
	}

	.pkp-nav__links {
		justify-content: flex-start;
	}

	.pkp-nav__link {
		width: 100%;
		padding: 12px var(--pkp-spacing-md);
		border-bottom: none;
		border-inline-start: 3px solid transparent;
	}

	/* Reset underline animation on mobile */
	.pkp-nav__link::after {
		display: none;
	}

	.pkp-nav__link:hover,
	.pkp-nav__link:focus-visible,
	.pkp-nav__link--active {
		border-bottom: none;
		border-inline-start-color: var(--pkp-color-primary);
		transform: none;
	}

	/* Screenshot grid: 1 column on mobile */
	.pkp-screenshots-grid {
		grid-template-columns: 1fr;
	}

	/* GIFs grid: 1 column on mobile */
	.pkp-gifs-grid {
		grid-template-columns: 1fr;
	}

	/* Logos grid: 2 columns on mobile */
	.pkp-logos-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Team grid: 1 column on mobile */
	.pkp-team-grid {
		grid-template-columns: 1fr;
	}

	.pkp-team-member__photo {
		width: 120px;
		height: 120px;
	}

	/* Download buttons: always visible on touch devices (no hover) */
	.pkp-screenshot__download,
	.pkp-gif__download {
		opacity: 1;
	}

	/* Section title: slightly smaller */
	.pkp-section__title {
		font-size: 1.1rem;
	}

	/* Credits: stack on small screens */
	.pkp-credit {
		flex-direction: column;
		gap: 2px;
	}

	.pkp-credit__name {
		text-align: start;
	}

	/* B-Roll: wrap on small screens */
	.pkp-broll-item {
		flex-wrap: wrap;
	}

	/* Footer download button: full width on mobile */
	.pkp-footer__download-btn {
		width: 100%;
		justify-content: center;
	}

	/* Section header: stack on mobile when needed */
	.pkp-section-header {
		flex-wrap: wrap;
	}

	/* Archive: single column on mobile, smaller padding */
	.pkp-archive {
		padding: var(--pkp-spacing-lg) var(--pkp-spacing-md);
	}

	.pkp-archive__grid {
		grid-template-columns: 1fr;
	}

	/* ──────────────────────────────────────────────────────
	   480px — Larger Mobile
	   ────────────────────────────────────────────────────── */
	@media (min-width: 480px) {
		.pkp-hero__title {
			font-size: 1.8rem;
		}

		.pkp-hero__tagline {
			font-size: 1.1rem;
		}

		/* Screenshot grid: 2 columns */
		.pkp-screenshots-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		/* GIFs grid: 2 columns */
		.pkp-gifs-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		/* Team grid: 2 columns */
		.pkp-team-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		/* Credits: side-by-side */
		.pkp-credit {
			flex-direction: row;
			gap: var(--pkp-spacing-md);
		}

		.pkp-credit__name {
			text-align: end;
		}

		/* B-Roll: no wrap */
		.pkp-broll-item {
			flex-wrap: nowrap;
		}

		/* Footer button: auto width */
		.pkp-footer__download-btn {
			width: auto;
		}
	}

	/* ──────────────────────────────────────────────────────
	   768px — Tablet (two-column layout begins)
	   ────────────────────────────────────────────────────── */
	@media (min-width: 768px) {
		/* Navigation: horizontal bar, hide hamburger, center links */
		.pkp-nav {
			flex-wrap: nowrap;
			justify-content: center;
		}

		.pkp-nav__toggle {
			display: none;
		}

		.pkp-nav__links {
			display: flex;
			flex-direction: row;
			justify-content: center;
			overflow-x: auto;
		}

		.pkp-nav__link {
			width: auto;
			padding: 12px 16px;
			border-inline-start: none;
			border-bottom: 2px solid transparent;
		}

		.pkp-nav__link:hover,
		.pkp-nav__link:focus-visible,
		.pkp-nav__link--active {
			border-inline-start: none;
			border-bottom-color: var(--pkp-color-primary);
		}

		/* Main layout: two columns (content + sidebar) */
		.pkp-main {
			grid-template-columns: var(--pkp-grid-columns, 1fr var(--pkp-sidebar-width));
			padding: var(--pkp-spacing-xl) var(--pkp-spacing-lg);
			gap: var(--pkp-spacing-lg);
		}

		/* Hero: larger (respects header height variable) */
		.pkp-hero {
			min-height: var(--pkp-header-height, 260px);
			padding: var(--pkp-spacing-2xl) var(--pkp-spacing-lg);
		}

		.pkp-hero__title {
			font-size: 2rem;
		}

		/* Screenshot grid: 2 columns */
		.pkp-screenshots-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		/* GIFs grid: 2 columns */
		.pkp-gifs-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		/* Logos grid: auto-fill */
		.pkp-logos-grid {
			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		}

		/* Team grid: auto-fill */
		.pkp-team-grid {
			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		}

		.pkp-team-member__photo {
			width: 160px;
			height: 160px;
		}

		/* Downloads: hover-only on non-touch devices */
		.pkp-screenshot__download,
		.pkp-gif__download {
			opacity: 0;
		}

		.pkp-screenshot:hover .pkp-screenshot__download,
		.pkp-screenshot__download:focus-visible,
		.pkp-gif:hover .pkp-gif__download,
		.pkp-gif__download:focus-visible {
			opacity: 1;
		}

		/* Section title: restore size */
		.pkp-section__title {
			font-size: 1.3rem;
		}

		/* Archive grid: 2 columns on tablet */
		.pkp-archive__grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.pkp-archive {
			padding: var(--pkp-spacing-xl) var(--pkp-spacing-lg);
		}
	}

	/* ──────────────────────────────────────────────────────
	   1024px — Desktop (full layout with sticky sidebar)
	   ────────────────────────────────────────────────────── */
	@media (min-width: 1024px) {
		/* Main: full gap */
		.pkp-main {
			gap: var(--pkp-spacing-xl);
		}

		/* Sidebar: sticky on desktop */
		.pkp-sidebar {
			position: sticky;
			top: calc(var(--pkp-nav-height, 48px) + var(--pkp-spacing-md, 16px));
			align-self: start;
			max-height: calc(100vh - var(--pkp-nav-height, 48px) - var(--pkp-spacing-lg, 24px));
			overflow-y: auto;
			scrollbar-width: thin;
			scrollbar-color: var(--pkp-color-border) transparent;
		}

		/* Hero: full size (uses CSS var for customizable height) */
		.pkp-hero {
			min-height: var(--pkp-header-height, 280px);
		}

		.pkp-hero__title {
			font-size: 2.5rem;
		}

		.pkp-hero__tagline {
			font-size: 1.2rem;
		}

		/* Screenshot grid: 3 columns */
		.pkp-screenshots-grid {
			grid-template-columns: repeat(3, 1fr);
		}

		/* GIFs grid: auto-fill with larger min */
		.pkp-gifs-grid {
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		}

		/* Logos grid: auto-fill with larger min */
		.pkp-logos-grid {
			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		}

		/* Team grid: larger items */
		.pkp-team-grid {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		}

		.pkp-team-member__photo {
			width: 200px;
			height: 200px;
		}

		/* Archive grid: 3 columns on desktop */
		.pkp-archive__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* ──────────────────────────────────────────────────────
	   1440px — Wide Desktop
	   ────────────────────────────────────────────────────── */
	@media (min-width: 1440px) {
		/* Screenshot grid: 4 columns */
		.pkp-screenshots-grid {
			grid-template-columns: repeat(4, 1fr);
		}

		/* GIFs grid: up to 3 columns */
		.pkp-gifs-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}