/**
 * PressNova - Startseiten-Bausteine.
 *
 * Wird nur auf der Startseite geladen. Setzt die Tokens aus main.css voraus.
 */

@layer components {

	/* Bloecke sitzen dicht - Ziel sind drei bis vier je Bildschirm. */
	.pn-module { padding-block: var(--pn-s5); }
	.pn-module + .pn-module { padding-top: 0; }
	.pn-module:first-child { padding-top: var(--pn-s4); }

	/* ------------------------------------------------ Bausteinkopf ---- */

	.pn-modhead {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--pn-s4);
		margin-bottom: var(--pn-s4);
		border-bottom: 2px solid var(--pn-border);
	}

	/* Der Rubrikname sitzt auf seiner eigenen Farbkante - dadurch traegt
	   die Farbe die Gliederung, nicht ein Zierbalken. */
	.pn-modhead__title {
		margin: 0 0 -2px;
		padding: 0 var(--pn-s4) var(--pn-s2) 0;
		font-size: var(--pn-fs-section);
		font-weight: 700;
		letter-spacing: var(--pn-ls-nav);
		text-transform: uppercase;
		border-bottom: 2px solid var(--pn-item-color, var(--pn-accent));
	}

	.pn-modhead__more {
		display: inline-flex;
		align-items: center;
		gap: var(--pn-s2);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		font-weight: 700;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-muted);
		text-decoration: none;
		white-space: nowrap;
	}

	.pn-modhead__more:hover { color: var(--pn-link-hover); }

	/* ---------------------------------------------------- Laufband ---- */

	.pn-ticker {
		background: var(--pn-surface);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-ticker__inner {
		display: flex;
		align-items: center;
		gap: var(--pn-s3);
		min-height: 40px;
	}

	.pn-ticker__label {
		flex: 0 0 auto;
		padding: 3px var(--pn-s3);
		font-family: var(--pn-font-heading);
		font-size: var(--pn-fs-meta);
		font-weight: 700;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-on-accent);
		background: var(--pn-accent);
		border-radius: 3px;
	}

	.pn-ticker__viewport {
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}

	.pn-ticker__list { margin: 0; padding: 0; list-style: none; }

	.pn-ticker__item a {
		display: block;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		font-weight: 600;
		color: var(--pn-heading);
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pn-ticker__item a:hover { color: var(--pn-link-hover); }

	.pn-ticker__controls {
		flex: 0 0 auto;
		display: flex;
		gap: var(--pn-s1);
	}

	.pn-ticker__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		padding: 0;
		background: none;
		border: 1px solid var(--pn-border);
		border-radius: var(--pn-radius-button);
		color: var(--pn-muted);
		cursor: pointer;
	}

	.pn-ticker__btn:hover { border-color: var(--pn-border-strong); color: var(--pn-heading); }

	.pn-flip { transform: rotate(180deg); }

	.pn-ticker__pause {
		display: block;
		width: 8px;
		height: 10px;
		border-left: 3px solid currentColor;
		border-right: 3px solid currentColor;
	}

	.pn-ticker.is-paused .pn-ticker__pause {
		width: 0;
		height: 0;
		border: 5px solid transparent;
		border-left: 8px solid currentColor;
		border-right: 0;
	}

	/* ---------------------------------------------------- Aufmacher --- */

	.pn-hero {
		display: grid;
		gap: var(--pn-s2);
		grid-template-columns: 1fr;
	}

	.pn-hero__cell--lead .pn-card--overlay { min-height: 320px; }

	@media (min-width: 700px) {
		.pn-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.pn-hero__cell--lead { grid-column: span 2; }
		.pn-hero__cell--lead .pn-card--overlay { min-height: 420px; }
	}

	@media (min-width: 1000px) {
		.pn-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); }

		.pn-hero__cell--lead {
			grid-column: span 2;
			grid-row: span 2;
		}

		.pn-hero__cell--lead .pn-card--overlay { min-height: 100%; }
		.pn-hero__cell .pn-card--overlay { min-height: 220px; }
	}

	/* --------------------------------------------------- Leitartikel -- */

	.pn-featured {
		display: grid;
		gap: var(--pn-s6);
	}

	.pn-featured__side {
		display: grid;
		gap: var(--pn-s5);
		align-content: start;
	}

	@media (min-width: 900px) {
		.pn-featured { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
	}

	/* ----------------------------------------------------- Rubrik ----- */

	.pn-catblock {
		display: grid;
		gap: var(--pn-s6);
	}

	.pn-catblock__rest {
		display: grid;
		gap: 0;
		align-content: start;
	}

	@media (min-width: 900px) {
		.pn-catblock { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	}

	/* ------------------------------------------------------ Reiter ---- */

	.pn-tabs__nav {
		display: flex;
		gap: var(--pn-s1);
		overflow-x: auto;
		margin-bottom: var(--pn-s5);
		border-bottom: 2px solid var(--pn-border);
		scrollbar-width: thin;
	}

	.pn-tabs__tab {
		flex: 0 0 auto;
		padding: var(--pn-s3) var(--pn-s4);
		margin-bottom: -2px;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		font-weight: 700;
		color: var(--pn-muted);
		background: none;
		border: 0;
		border-bottom: 2px solid transparent;
		cursor: pointer;
		white-space: nowrap;
	}

	.pn-tabs__tab:hover { color: var(--pn-heading); }

	.pn-tabs__tab.is-active {
		color: var(--pn-heading);
		border-bottom-color: var(--pn-accent);
	}

	.pn-tabs__panel:focus-visible { outline-offset: 4px; }

	/* ------------------------------------------------------- Video ---- */

	.pn-video {
		padding: var(--pn-s5);
		border-radius: var(--pn-radius-card);
		background: var(--pn-chrome);
		color: var(--pn-on-chrome);
	}

	.pn-video .pn-modhead { border-bottom-color: rgba(255, 255, 255, 0.16); }

	.pn-video .pn-modhead__title { color: #fff; }
	.pn-video .pn-modhead__more { color: rgba(255, 255, 255, 0.65); }
	.pn-video .pn-modhead__more:hover { color: #fff; }

	.pn-video__grid {
		display: grid;
		gap: var(--pn-s5);
	}

	@media (min-width: 900px) {
		.pn-video__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
	}

	.pn-video__rest { display: grid; align-content: start; }

	.pn-video .pn-card--compact { border-bottom-color: rgba(255, 255, 255, 0.14); }
	.pn-video .pn-card__title a,
	.pn-video .pn-card__title { color: #fff; }
	.pn-video .pn-card__link:hover { color: var(--pn-accent); }
	.pn-video .pn-meta,
	.pn-video .pn-meta a { color: rgba(255, 255, 255, 0.62); }
	.pn-video .pn-meta > * + *::before { background: rgba(255, 255, 255, 0.35); }

	/* Abspielsymbol auf dem Aufmacher. */
	.pn-video__lead .pn-card--overlay .pn-card__thumb::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 62px;
		height: 62px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5Z' fill='%23101219'/%3E%3C/svg%3E") no-repeat center / 26px;
	}

	.pn-video__lead .pn-card--overlay .pn-card__thumb { position: absolute; }

	/* --------------------------------------------------- Rangliste ---- */

	.pn-ranking {
		display: grid;
		max-width: var(--pn-content);
	}

	/* -------------------------------------------------- Newsletter ---- */

	.pn-newsletter {
		display: grid;
		gap: var(--pn-s5);
		padding: var(--pn-s7) var(--pn-s6);
		border-radius: var(--pn-radius-card);
		background: var(--pn-surface-2);
		border: 1px solid var(--pn-border);
	}

	.pn-newsletter__title {
		margin: 0 0 var(--pn-s2);
		font-size: var(--pn-fs-h2);
		font-weight: 800;
	}

	.pn-newsletter__lead {
		margin: 0;
		color: var(--pn-muted);
		max-width: 46ch;
	}

	.pn-newsletter__form {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pn-s2);
	}

	.pn-newsletter__input {
		flex: 1 1 220px;
		min-width: 0;
		padding: var(--pn-s3) var(--pn-s4);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		background: var(--pn-surface);
		color: var(--pn-text);
		border: 1px solid var(--pn-border-strong);
		border-radius: var(--pn-radius-input);
	}

	.pn-newsletter__note {
		margin: 0;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
	}

	@media (min-width: 860px) {
		.pn-newsletter {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			align-items: center;
		}

		.pn-newsletter__note { grid-column: 2; margin-top: calc(var(--pn-s3) * -1); }
	}

	/* ------------------------------------------------- Nachladen ------ */

	.pn-loadmore {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--pn-s3);
		margin-top: var(--pn-s6);
	}

	.pn-loadmore__status {
		margin: 0;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
	}

	.pn-empty__inline {
		margin: 0;
		padding: var(--pn-s5) 0;
		color: var(--pn-muted);
	}

	.pn-pagehead {
		padding-block: var(--pn-s6);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-pagehead__title { margin: 0; }

	.pn-empty__search { max-width: 380px; margin: var(--pn-s5) auto 0; }
}