/* ============================================================
   Flipboard View — mobile magazine pages for newspaper mode
   ============================================================ */

@media (max-width: 1024px) {
	html.flipboard-active,
	body.flipboard-active {
		overscroll-behavior-x: none;
	}

	body.flipboard-active main.container {
		max-width: none;
		padding: 0;
	}

	body.flipboard-active .pagination {
		display: none;
	}

	.news-grid.flipboard-view {
		max-width: none;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.flipboard-root {
		display: flex;
		flex-direction: column;
		min-height: 420px;
		position: relative;
		overflow: visible;
		font-size: clamp(1rem, 0.78rem + 1.05vw, 1.35rem);
	}

	.flipboard-page-select--date-overlay {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		cursor: pointer;
		z-index: 2;
		appearance: none;
		-webkit-appearance: none;
		background: transparent;
		font-size: 16px;
	}

	.flipboard-date-card {
		flex-shrink: 0;
		padding: 0.4rem 1rem 0.6rem;
		border-top: 4px solid var(--primary-red);
	}

	.flipboard-date-picker-hit {
		position: relative;
		display: block;
		cursor: pointer;
	}

	.flipboard-date-viewport {
		position: relative;
		overflow: hidden;
		padding-top: 0.35rem;
		border-top: none;
		background: transparent;
		pointer-events: none;
		z-index: 1;
	}

	.flipboard-date-viewport:has(.flipboard-date-layer) {
		min-height: calc(0.82em * 1.25 + 0.35rem);
	}

	.flipboard-date-text,
	.flipboard-date-layer {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		font-family: 'DM Sans', sans-serif;
		font-size: 0.82em;
		font-weight: 800;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--primary-blue);
		line-height: 1.3;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.flipboard-date-text::before,
	.flipboard-date-text::after,
	.flipboard-date-layer::before,
	.flipboard-date-layer::after {
		content: '';
		flex-shrink: 0;
		width: 1rem;
		height: 1px;
		background: var(--primary-blue);
		opacity: 0.45;
	}

	.flipboard-date-layer {
		position: absolute;
		inset: 0;
		padding-top: 0.35rem;
		transition: transform 0.34s ease, opacity 0.34s ease;
	}

	.flipboard-date-layer.slide-out-left {
		transform: translateX(-100%);
		opacity: 0;
	}

	.flipboard-date-layer.slide-out-right {
		transform: translateX(100%);
		opacity: 0;
	}

	.flipboard-date-layer.slide-in-active {
		transform: translateX(0);
	}

	.flipboard-pager {
		flex: 1;
		position: relative;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x pan-y;
		overscroll-behavior-x: none;
		scrollbar-width: none;
		padding-top: 0.65rem;
	}

	.flipboard-pager::-webkit-scrollbar {
		display: none;
	}

	.flipboard-track {
		display: flex;
		height: 100%;
		gap: 12px;
	}

	.flipboard-page {
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		display: grid;
		gap: 8px;
		padding: 6px 1rem;
		box-sizing: border-box;
		position: relative;
	}

	/* Template A — 1 large + 2 small */
	.flipboard-template-a {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 3fr 2fr;
	}

	.flipboard-template-a .flipboard-slot-0 {
		grid-column: 1 / 3;
		grid-row: 1;
	}

	.flipboard-template-a .flipboard-slot-1 {
		grid-column: 1;
		grid-row: 2;
	}

	.flipboard-template-a .flipboard-slot-2 {
		grid-column: 2;
		grid-row: 2;
	}

	/* Template B — 2 small + wide + portrait */
	.flipboard-template-b {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1.2fr 1.4fr 1.6fr;
	}

	.flipboard-template-b .flipboard-slot-0 {
		grid-column: 1;
		grid-row: 1;
	}

	.flipboard-template-b .flipboard-slot-1 {
		grid-column: 2;
		grid-row: 1;
	}

	.flipboard-template-b .flipboard-slot-2 {
		grid-column: 1 / 3;
		grid-row: 2;
	}

	.flipboard-template-b .flipboard-slot-3 {
		grid-column: 1 / 3;
		grid-row: 3;
	}

	/* Template C — 2 medium + full-width hero */
	.flipboard-template-c {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1.4fr 2fr;
	}

	.flipboard-template-c .flipboard-slot-0 {
		grid-column: 1;
		grid-row: 1;
	}

	.flipboard-template-c .flipboard-slot-1 {
		grid-column: 2;
		grid-row: 1;
	}

	.flipboard-template-c .flipboard-slot-2 {
		grid-column: 1 / 3;
		grid-row: 2;
	}

	/* Sparse templates — partial last slides (1–3 articles) */
	.flipboard-template-sparse-1 {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	.flipboard-template-sparse-1 .flipboard-slot-0 {
		grid-column: 1;
		grid-row: 1;
	}

	.flipboard-template-sparse-2 {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}

	.flipboard-template-sparse-2 .flipboard-slot-0 {
		grid-column: 1;
		grid-row: 1;
	}

	.flipboard-template-sparse-2 .flipboard-slot-1 {
		grid-column: 1;
		grid-row: 2;
	}

	.flipboard-template-sparse-3 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 3fr 2fr;
	}

	.flipboard-template-sparse-3 .flipboard-slot-0 {
		grid-column: 1 / 3;
		grid-row: 1;
	}

	.flipboard-template-sparse-3 .flipboard-slot-1 {
		grid-column: 1;
		grid-row: 2;
	}

	.flipboard-template-sparse-3 .flipboard-slot-2 {
		grid-column: 2;
		grid-row: 2;
	}

	.flipboard-tile {
		position: relative;
		overflow: hidden;
		border-radius: 6px;
		background: #1a1a2e;
		cursor: pointer;
		min-height: 0;
	}

	.flipboard-tile .fb-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.flipboard-tile .fb-placeholder {
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	}

	.flipboard-tile .fb-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.92) 0%,
			rgba(0, 0, 0, 0.45) 45%,
			rgba(0, 0, 0, 0) 100%
		);
	}

	.flipboard-tile .fb-body {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0.65rem 0.75rem;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
	}

	.flipboard-tile:has(.fb-title--lead) .fb-body {
		padding: 0.75rem 0.85rem 0.85rem;
	}

	.flipboard-tile .fb-body::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: -1.75rem;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 100%);
		z-index: -1;
		pointer-events: none;
	}

	.flipboard-tile .fb-title {
		font-family: 'DM Sans', sans-serif;
		font-weight: 800;
		color: #fff;
		margin: 0;
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
		overflow: hidden;
	}

	.flipboard-tile .fb-title:not(.fb-title-short) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	/* Drop cap — float a 2-line spacer; ghost sets width, letter + decor are absolute overlays */
	.flipboard-tile .fb-drop-cap {
		float: left;
		position: relative;
		height: 2lh;
		margin: 0 0.28em 0 0;
	}

	.flipboard-tile .fb-drop-cap::after {
		content: '';
		position: absolute;
		left: -0.12em;
		bottom: 0;
		width: 1px;
		height: 50%;
		background: rgba(255, 255, 255, 0.36);
		pointer-events: none;
	}

	.flipboard-tile .fb-drop-cap-rule {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0.5em;
		height: 2px;
		background: var(--primary-red);
		pointer-events: none;
	}

	.flipboard-tile .fb-initial-ghost,
	.flipboard-tile .fb-initial {
		font-family: 'DM Sans', sans-serif;
		font-weight: 800;
		font-size: 2lh;
		line-height: 1;
	}

	.flipboard-tile .fb-initial-ghost {
		display: block;
		height: 0;
		overflow: hidden;
		color: transparent;
		pointer-events: none;
		user-select: none;
	}

	.flipboard-tile .fb-initial {
		position: absolute;
		top: 0;
		left: 0;
		color: #fff;
	}

	/* Lead: 2-line cap max */
	.flipboard-tile .fb-title--lead {
		font-size: 1.22em;
		line-height: 1.22;
		letter-spacing: -0.006em;
	}

	.flipboard-tile .fb-title--lead:not(.fb-title-short) {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}

	.flipboard-tile .fb-title--lead .fb-initial-ghost,
	.flipboard-tile .fb-title--lead .fb-initial {
		font-size: 2.2lh;
	}

	/* Feature: 2-line cap */
	.flipboard-tile .fb-title--feature {
		font-size: 1.2em;
		line-height: 1.2;
		letter-spacing: -0.004em;
	}

	.flipboard-tile .fb-title--feature:not(.fb-title-short) {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	/* Secondary: inline initial — tiles are too small for a floated multi-line cap */
	.flipboard-tile .fb-title--secondary {
		font-size: 0.92em;
		line-height: 1.18;
	}

	.flipboard-tile .fb-title--secondary:not(.fb-title-short) {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.flipboard-tile .fb-title--secondary.fb-title-short {
		display: block;
		-webkit-line-clamp: unset;
		line-clamp: unset;
	}

	.flipboard-template-sparse-1 .fb-title--lead:not(.fb-title-short) {
		-webkit-line-clamp: 5;
		line-clamp: 5;
	}

	.flipboard-template-sparse-2 .fb-title--lead:not(.fb-title-short),
	.flipboard-template-sparse-2 .fb-title--feature:not(.fb-title-short) {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}

	.flipboard-tile .fb-title.fb-title-short {
		display: block;
		overflow: visible;
		-webkit-line-clamp: unset;
		line-clamp: unset;
	}

	.flipboard-tile .fb-sources {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.25rem;
	}

	.flipboard-tile .fb-sources .sources-label {
		font-size: 0.58em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: rgba(255, 255, 255, 0.55);
	}

	.flipboard-tile .fb-sources .source-link {
		font-size: 0.62em;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.85);
		text-decoration: none;
		background: rgba(255, 255, 255, 0.15);
		padding: 0.1rem 0.35rem;
		border-radius: 2px;
	}

	.flipboard-tile .fb-share-btn {
		position: absolute;
		top: 0.45rem;
		right: 0.45rem;
		z-index: 3;
		background: rgba(0, 0, 0, 0.35);
		border: 1px solid rgba(255, 255, 255, 0.2);
		color: rgba(255, 255, 255, 0.85);
		width: 1.65rem;
		height: 1.65rem;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 0.68em;
	}

	.flipboard-tile .url-changed-badge {
		color: rgba(255, 200, 0, 0.9);
		cursor: pointer;
		font-size: 0.7em;
	}

	.flipboard-tile.article-highlighted {
		outline: 3px solid #FFD700;
		outline-offset: -3px;
	}

	.flipboard-tile.article-highlighted-animating {
		animation: highlightPulse 2s ease-in-out infinite;
	}

	.flipboard-tile.article-highlighted-fadeout {
		animation: highlightFadeOut 1s ease-out forwards;
	}

	.flipboard-load-prev-page {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
	}

	.flipboard-load-prev-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		width: 100%;
		height: 100%;
		background: var(--card-bg);
		border: 3px solid var(--primary-blue);
		border-radius: 8px;
		color: var(--primary-blue);
		cursor: pointer;
		padding: 2rem 1.5rem;
		transition: background 0.2s, color 0.2s, transform 0.2s;
	}

	.flipboard-load-prev-card:active {
		transform: scale(0.98);
		background: var(--primary-blue);
		color: #fff;
	}

	.flipboard-load-prev-icon {
		font-size: 1.75em;
		opacity: 0.85;
	}

	.flipboard-load-prev-label {
		font-family: 'DM Sans', sans-serif;
		font-size: 1em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		text-align: center;
		line-height: 1.35;
	}

	.flipboard-scroll-hint {
		position: absolute;
		inset: 0;
		z-index: 4;
		pointer-events: none;
		--flipboard-hint-swipe-ms: 1.1s;
		--flipboard-hint-arrow-ms: 1.1s;
		--flipboard-hint-arrow-delay: calc(var(--flipboard-hint-swipe-ms) / 2);
	}

	.flipboard-scroll-hint-swipe {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2.5rem;
		height: 2.5rem;
		transform: translate(-50%, -50%);
		opacity: 0;
		animation: flipboardSwipeHint var(--flipboard-hint-swipe-ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.flipboard-scroll-hint-dot {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1.25rem;
		height: 1.25rem;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.95);
		box-shadow:
			0 0 0 0.35rem rgba(255, 255, 255, 0.22),
			0 2px 12px rgba(0, 0, 0, 0.45);
		transform: translate(-50%, -50%);
	}

	.flipboard-scroll-hint-trail {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1.25rem;
		height: 1.25rem;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.55);
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}

	.flipboard-scroll-hint-trail:nth-child(1) {
		animation: flipboardSwipeTrail var(--flipboard-hint-swipe-ms) ease-out forwards;
	}

	.flipboard-scroll-hint-trail:nth-child(2) {
		animation: flipboardSwipeTrail var(--flipboard-hint-swipe-ms) ease-out 0.12s forwards;
	}

	.flipboard-scroll-hint-arrow {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		font-size: 3rem;
		line-height: 1;
		color: rgba(255, 255, 255, 0.95);
		text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
		transform: translate(-50%, -50%);
		opacity: 0;
		animation: flipboardScrollHintArrow var(--flipboard-hint-arrow-ms) ease-in-out var(--flipboard-hint-arrow-delay) forwards;
	}

	@keyframes flipboardSwipeHint {
		0% {
			opacity: 0;
			transform: translate(-50%, -50%) translateX(16vw);
		}

		12% {
			opacity: 1;
			transform: translate(-50%, -50%) translateX(13vw);
		}

		72% {
			opacity: 1;
			transform: translate(-50%, -50%) translateX(-12vw);
		}

		100% {
			opacity: 0;
			transform: translate(-50%, -50%) translateX(-24vw);
		}
	}

	@keyframes flipboardSwipeTrail {
		0% {
			opacity: 0;
			transform: translate(-50%, -50%) scale(1);
		}

		18% {
			opacity: 0.65;
			transform: translate(-50%, -50%) scale(1);
		}

		48% {
			opacity: 0.35;
			transform: translate(-15%, -50%) scale(0.85);
		}

		100% {
			opacity: 0;
			transform: translate(35%, -50%) scale(0.55);
		}
	}

	@keyframes flipboardScrollHintArrow {
		0% {
			opacity: 0;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.9);
		}

		14% {
			opacity: 1;
			left: 50%;
			transform: translate(-50%, -50%) scale(1);
		}

		62% {
			opacity: 1;
			left: 84%;
			transform: translate(-50%, -50%) scale(1);
		}

		100% {
			opacity: 0;
			left: calc(100% - 1.5rem);
			transform: translate(-50%, -50%) scale(1.05);
		}
	}
}

@media (max-width: 1024px) and (display-mode: standalone) {
	.flipboard-date-card {
		padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 16px));
	}
}