/* Mobile: iPhone + tablets */
@media (max-width: 768px) {
	/* Full-bleed header (ook als header in wrapper zit) */
	.header {
		width: 100%;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);

		padding: 14px 0;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	/* Page padding */
	.wrapper {
		padding-inline: 16px;
	}

	h1 {
		font-size: 3rem;
		margin: 28px 0 42px;
	}

	/* Navigation container */
	.navigation {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		/* ruimte zodat de burger niet over content hangt */
	}
	.navigation ul {
		gap: 40px;
	}

	/* Desktop UL wordt mobile dropdown panel */
	.nav-list {
		display: none;
		width: min(100% - 32px, 520px);

		align-items: top;

		/* boven de rest van de header content */
		position: relative;
		z-index: 40;
	}

	.navigation.is-open .nav-list {
		display: flex;
	}

	.nav-item a {
		font-size: 0.9rem;
	}

	.nav-item.active a {
		color: #b8a9ff; /* jouw paars */

		background: rgba(184, 169, 255, 0.12);
		border: 1px solid rgba(184, 169, 255, 0.28);
		border-radius: 999px;
		padding: 8px 0;
	}

	/* Underline uit in dropdown */
	.nav-item a::after {
		display: none;
	}

	/* Logo (als je hem buiten dropdown laat staan) iets kleiner */
	.logo img {
		block-size: 4.5em;
	}

	/* Cards: verticaal */
	.daily-story {
		width: min(100%, 520px);
		margin: 1.1rem auto;
		padding: 1.15rem 1.05rem;

		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 0.9rem;
	}

	.play-btn {
		inline-size: 92px;
		block-size: 92px;
	}

	.player-meta,
	.player-controls {
		width: 100%;
		justify-items: center;
	}

	/* Constante progress lengte (geen 100%) */
	.progress {
		width: clamp(240px, 80vw, 520px);
	}

	.time {
		justify-content: center;
	}
	.story-label {
		font-size: 1.25rem;
	}
}

/* Extra small phones */
@media (max-width: 390px) {
	h1 {
		font-size: 2.6rem;
	}

	.play-btn {
		inline-size: 86px;
		block-size: 86px;
	}

	.progress {
		width: clamp(220px, 86vw, 340px);
	}
}