/* DramFlx — Responsive behaviour (mobile-first refinements) */

/* Small phones */
@media (max-width: 480px) {
	#dramflx-app .df-logo-wordmark {
		font-size: 1.15rem;
	}

	#dramflx-app .df-header-inner {
		gap: var(--df-space-2);
	}

	#dramflx-app .df-hero-content {
		padding-block: var(--df-space-6) var(--df-space-7);
	}

	#dramflx-app .df-hero-poster {
		width: 120px;
	}

	#dramflx-app .df-detail-poster {
		width: 140px;
	}

	#dramflx-app .df-hero-actions .df-button,
	#dramflx-app .df-detail-actions .df-button {
		flex: 1 1 auto;
		min-width: 130px;
	}

	#dramflx-app .df-rail-track > * {
		flex-basis: 140px;
	}

	#dramflx-app .df-rating-modal {
		padding: var(--df-space-2);
	}

	#dramflx-app .df-rating-modal-panel {
		width: 100%;
		max-height: calc(100vh - 16px);
		padding-inline: var(--df-space-4);
	}

	#dramflx-app .df-rating-modal-stars {
		gap: 4px;
	}

	#dramflx-app .df-rating-modal-stars .df-star-btn svg {
		width: 24px;
		height: 24px;
	}

	#dramflx-app .df-rating-modal-actions .df-button {
		flex: 1 1 auto;
	}
}

/* Tablets and up */
@media (min-width: 768px) {
	#dramflx-app .df-footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* Desktop */
@media (min-width: 1024px) {
	#dramflx-app .df-section {
		padding-block: var(--df-space-7);
	}

	#dramflx-app .df-footer-inner {
		grid-template-columns: 1.2fr 1fr;
	}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	#dramflx-app,
	#dramflx-app *,
	#dramflx-app *::before,
	#dramflx-app *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}