/*
 * EVOLUX — responsive.css
 * Toate media queries ale temei traiesc aici (brief 7: "responsive.css —
 * toate media queries"). Baza (main.css, hero.css, configurator.css)
 * este mobile-first, gandita pentru 375px. Breakpoints: tableta 768px,
 * desktop 1024px, desktop mare 1280px.
 */

/* =========================================================
 * TABLETA — min-width: 768px
 * ========================================================= */
@media (min-width: 768px) {

	:root {
		--fs-body: 16px;
	}

	h1 { font-size: 2.5rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.375rem; }

	.container {
		padding-inline: var(--space-md);
	}

	.site-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.pricing-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.cta-banner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.cta-banner__actions {
		flex-direction: row;
		width: auto;
	}

	.portfolio-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.form-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* =========================================================
 * DESKTOP — min-width: 1024px
 * ========================================================= */
@media (min-width: 1024px) {

	h1 { font-size: 3rem; }
	h2 { font-size: 2.25rem; }

	.site-header__inner {
		flex-wrap: nowrap;
	}

	.site-footer__inner {
		grid-template-columns: 2fr 1fr 1fr;
	}

	.site-footer__bottom-row {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.site-footer__legal-text {
		text-align: left;
	}

	/* ---- Homepage: coloane pe rand + bara verticala (redesign v4, "video + magnetic") ---- */
	.homepage-logo img {
		height: clamp(80px, 13vh, 150px);
	}

	.homepage-logo__wordmark {
		font-size: 2.5rem;
	}

	.homepage-columns {
		flex-direction: row;
	}

	.homepage-column {
		padding: var(--space-lg);
	}

	.homepage-column__text {
		font-size: 1.0625rem;
	}

	/* Bara verticala — singurul delimitator intre cele doua coloane */
	.homepage-divider {
		display: block;
		width: 1px;
		flex-shrink: 0;
		align-self: stretch;
		margin-block: var(--space-lg);
		background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35) 20%, rgba(255, 255, 255, 0.35) 80%, transparent);
	}

	.homepage-bottom-bar {
		padding-block: var(--space-sm);
	}

	.homepage-bottom-bar__link {
		font-size: 0.875rem;
	}

	/* ---- Configurator: lista stanga + panou sticky dreapta (brief 5.2) ---- */
	.configurator {
		flex-direction: row;
		align-items: flex-start;
		padding-bottom: 0;
	}

	.configurator__groups,
	.configurator__main {
		flex: 1 1 62%;
		min-width: 0;
	}

	.configurator__panel {
		position: sticky;
		top: var(--space-md);
		left: auto;
		right: auto;
		bottom: auto;
		flex: 0 0 320px;
		border: 1px solid var(--color-border);
		border-top: 1px solid var(--color-border);
		border-radius: var(--radius);
		box-shadow: 0 4px 16px rgba(15, 42, 74, 0.08);
		align-self: flex-start;
	}

	.configurator__panel-details {
		display: block;
	}

	/* ---- Pachete rapide: rand orizontal in loc de coloana ---- */
	.configurator__packages-row {
		flex-direction: row;
	}

	.configurator__package-pill {
		flex: 1 1 0;
	}

	.configurator__base-package-columns {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ---- Modale: centrate, nu bottom-sheet ---- */
	.configurator-modal,
	.configurator-package-modal {
		align-items: center;
	}

	.configurator-modal__dialog,
	.configurator-package-modal__dialog {
		max-width: 560px;
		border-radius: var(--radius);
		max-height: 88vh;
	}

	/* ---- Pagini de continut: hero cu imagine + sectiuni text+imagine ---- */
	.page-hero__grid {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--space-lg);
	}

	/* ---- Pagini legale: latime ~A4 pe desktop, mai lizibil decat coloana ingusta de mobil ---- */
	.container--legal {
		max-width: 50rem;
	}

	.page-hero__media {
		order: 0;
	}

	.content-split {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-lg);
	}

	.content-split--reverse .content-split__media {
		order: 2;
	}
}

/* =========================================================
 * DESKTOP MARE — min-width: 1280px
 * ========================================================= */
@media (min-width: 1280px) {
	.container {
		padding-inline: var(--space-lg);
	}
}

/* =========================================================
 * REDUCERE MISCARE — accesibilitate (respecta preferinta utilizatorului)
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}