/* =========================================================================
   Itara — responsive.css (final)
   Strategie: mobile-first. Aici sunt override-uri + ascunderi pentru fiecare
   breakpoint. Acoperire completă: XS (320px) → 4K.
   Breakpoints:
     XS: ≤ 420px       (telefoane mici — iPhone SE)
     SM: ≤ 640px       (telefoane normale)
     MD: 641–900px     (telefoane mari + tablete portrait)
     LG: 901–1200px    (tablete landscape + laptop-uri mici)
     XL: 1201+         (desktop)
   ========================================================================= */


/* ==============================================================
   1. SM — Telefoane normale (≤ 640px)
   IMPORTANT: SM e înainte de XS în fișier ca XS să câștige cascada.
   ============================================================== */
@media (max-width: 640px) {

	:root {
		--header-h: 64px;
	}

	.section {
		padding-top: var(--sp-12);
		padding-bottom: var(--sp-12);
	}

	/* Butoane stack vertical */
	.btn-group {
		flex-direction: column;
		align-items: stretch;
	}
	.btn-group .btn { justify-content: center; }

	/* Hero: stack vertical, imagine sub text dar mai mică */
	.hero {
		padding-top: calc(var(--header-h) + var(--sp-8));
		padding-bottom: var(--sp-10);
	}
	.hero__illustration {
		max-width: 300px;
		margin-top: var(--sp-6);
	}
	.hero__subtitle { font-size: 1rem; }

	/* About — imagine mai mică */
	.about__inner { gap: var(--sp-8); }
	.about__img { max-width: 400px; margin: 0 auto; }

	/* === Tech stack pe mobil ===
	   Tab-urile fac WRAP pe mai multe rânduri (nu mai scroll orizontal care
	   tăia tab-ul activ la margini). Container devine rounded rectangle. */
	.tech__tabs-wrap {
		max-width: 100%;
	}
	.tech__tabs-wrap::before,
	.tech__tabs-wrap::after {
		display: none;                      /* fără fade pe mobil (tab-urile wrap, nu scrolează) */
	}
	.tech__tabs {
		flex-wrap: wrap;
		justify-content: center;
		border-radius: var(--radius-lg);
		overflow: visible;
		gap: 6px;
		padding: 8px;
	}
	.tech__tab {
		flex-shrink: 1;
		padding: 9px 16px;
		font-size: 0.85rem;
	}
	.tech__grid { grid-template-columns: repeat(2, 1fr); }

	/* Stats: 2 pe rând */
	.stats__grid { grid-template-columns: repeat(2, 1fr); }

	/* Contact CTA — padding mai mic, butoane stack */
	.contact-cta__wrap {
		padding: var(--sp-8) var(--sp-5);
		border-radius: var(--radius-lg);
	}
	.contact-cta__actions { flex-direction: column; }
	.contact-cta__actions .btn {
		width: 100%;
		justify-content: center;
	}

	/* Testimoniale — controale mai mici */
	.testimonials__btn { width: 40px; height: 40px; }

	/* Footer — stack */
	.site-footer { padding-top: var(--sp-12); }
	.site-footer__bottom {
		flex-direction: column;
		text-align: center;
		gap: var(--sp-2);
	}

	/* Header — gap mai mic ca să încapă totul */
	.site-header__inner { gap: var(--sp-3); }
	.site-header__actions { gap: var(--sp-2); }
}


/* ==============================================================
   2. XS — Telefoane foarte mici (≤ 420px)
   Plasat DUPĂ SM ca să suprascrie (cascadă CSS).
   Aici: totul e minimalist. Ascundem ilustrații decorative.
   ============================================================== */
@media (max-width: 420px) {

	:root {
		--header-h: 60px;
		--container-pad: 0.875rem;
	}

	.section {
		padding-top: var(--sp-10);
		padding-bottom: var(--sp-10);
	}

	/* Typography adaptată */
	h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
	h2 { font-size: clamp(1.5rem, 6vw, 1.875rem); }
	h3 { font-size: clamp(1.125rem, 5vw, 1.375rem); }

	/* Eyebrow mai mic — să nu rupă linia */
	.eyebrow, .hero__eyebrow {
		font-size: 0.75rem;
		padding: 4px 10px;
	}

	/* Butoane pe toată lățimea, stack */
	.btn {
		width: 100%;
		padding: 12px 16px;
		font-size: 0.9rem;
	}
	.btn--lg { padding: 14px 18px; font-size: 0.95rem; }
	.btn--sm { padding: 8px 14px; font-size: 0.8rem; }

	/* === Hero === */
	.hero {
		padding-top: calc(var(--header-h) + var(--sp-6));
		padding-bottom: var(--sp-8);
		min-height: auto;
	}
	.hero__title { font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.15; }
	.hero__subtitle { font-size: 0.95rem; margin-bottom: var(--sp-6); }
	/* Ascundem ilustrația pe XS — focus pe text, economie de spațiu */
	.hero__visual { display: none; }

	/* === About === */
	.about__inner { gap: var(--sp-6); }
	.about__img { max-width: 100%; }
	.about__features { grid-template-columns: 1fr; gap: var(--sp-3); }
	.about__feature span:last-child { font-size: 0.9rem; }

	/* === Services === */
	.service { padding: var(--sp-5); }
	.service__title { font-size: 1.125rem; }
	.service__desc { font-size: 0.9rem; }

	/* === Tech stack XS ===
	   Tab-urile wrap + mai compacte */
	.tech__tabs {
		padding: 6px;
		gap: 4px;
	}
	.tech__tab {
		padding: 8px 12px;
		font-size: 0.78rem;
		gap: 6px;
	}
	.tech__tab svg { width: 16px; height: 16px; }
	.tech__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
	.tech-item { padding: var(--sp-4) var(--sp-2); }
	.tech-item__icon { width: 36px; height: 36px; }
	.tech-item__name { font-size: 0.8rem; }

	/* === Stats === */
	.stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
	.stat { padding: var(--sp-4) var(--sp-2); }
	.stat__number { font-size: 2rem; }
	.stat__label { font-size: 0.8rem; }
	.stat::after { display: none !important; }

	/* === Testimoniale === */
	.testimonial { padding: var(--sp-5); }
	.testimonial__text { font-size: 0.9rem; }
	.testimonial__quote-mark { width: 28px; height: 28px; }
	.testimonials__btn { width: 38px; height: 38px; }

	/* === Contact CTA === */
	.contact-cta__wrap {
		padding: var(--sp-8) var(--sp-4);
		border-radius: var(--radius-lg);
	}
	.contact-cta__title { font-size: clamp(1.5rem, 7vw, 2rem); }
	.contact-cta__desc { font-size: 0.9rem; }

	/* === Footer === */
	.site-footer { padding: var(--sp-10) 0 var(--sp-6); }
	.site-footer__grid { gap: var(--sp-8); }
	.site-footer__desc { font-size: 0.875rem; }
	.site-footer__contact a { font-size: 0.9rem; word-break: break-word; }

	/* Logo — ascundem sufixul ca să nu rupă linia */
	.itara-logo__suffix { display: none; }
	.itara-logo { font-size: 1.05rem; }
	.itara-logo__mark svg { width: 28px; height: 28px; }
}


/* ==============================================================
   3. MD — Telefoane mari + tablete portrait (641–900px)
   Aici hamburger-ul încă e vizibil (meniul desktop apare la 900+).
   ============================================================== */
@media (min-width: 641px) and (max-width: 900px) {

	.section {
		padding-top: var(--sp-12);
		padding-bottom: var(--sp-12);
	}

	/* Hero — stack dar cu ilustrație mai mare ca pe mobil */
	.hero { padding-top: calc(var(--header-h) + var(--sp-10)); }
	.hero__illustration { max-width: 420px; }

	/* About — stack cu ambele coloane vizibile */
	.about__inner { gap: var(--sp-10); }

	/* Services — 2 coloane (deja din sections.css) */
	/* Tech grid — 3 coloane */
	.tech__grid { grid-template-columns: repeat(3, 1fr); }

	/* Stats — rămâne auto-fit, probabil iese 4 pe rând */

	/* Footer — 2 coloane */
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ==============================================================
   4. LG — Tablete landscape + laptop-uri mici (901–1200px)
   Aici apare meniul desktop. Ajustăm spații.
   ============================================================== */
@media (min-width: 901px) and (max-width: 1200px) {

	/* Meniul în navigație — gap mai mic să încapă */
	.itara-menu { gap: var(--sp-5); }

	/* Hero — puțin mai compact */
	.hero__inner { gap: var(--sp-8); }
	.hero__illustration { max-width: 480px; }

	/* About — gap mai mic */
	.about__inner { gap: var(--sp-10); }

	/* Footer — 4 coloane */
	.site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ==============================================================
   5. Landscape mobil (altitudine mică, lățime medie)
   Exemplu: iPhone landscape (812×375)
   Hero n-are nevoie de 100vh
   ============================================================== */
@media (max-height: 500px) and (orientation: landscape) {
	.hero {
		min-height: auto;
		padding-top: calc(var(--header-h) + var(--sp-4));
		padding-bottom: var(--sp-6);
	}
	.hero__illustration { max-width: 260px; }
}


/* ==============================================================
   6. Dispozitive touch (fără hover)
   Eliminăm efectele de transform pe hover — sunt zgomot pe touch
   ============================================================== */
@media (hover: none) and (pointer: coarse) {

	.card:hover,
	.service:hover,
	.tech-item:hover,
	.post-card:hover,
	.testimonial:hover {
		transform: none;
	}

	/* Păstrăm culorile de hover (feedback util la tap) */
	.service:hover .service__icon,
	.service:hover::before {
		/* nu transformăm */
	}
}


/* ==============================================================
   7. Ecrane foarte largi (peste 1600px) — maxim container
   Evităm stretching urât
   ============================================================== */
@media (min-width: 1600px) {
	.hero__inner { gap: var(--sp-20); }
	.section { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
}


/* ==============================================================
   8. Print — dacă cineva printează
   ============================================================== */
@media print {
	.site-header,
	.site-footer,
	.testimonials__controls,
	.contact-cta,
	.hero__visual {
		display: none !important;
	}
	body {
		color: #000;
		background: #fff;
	}
	a {
		color: #000;
		text-decoration: underline;
	}
	.section {
		page-break-inside: avoid;
		padding: 1rem 0;
	}
}


/* ==============================================================
   9. Siguranță — orice overflow neașteptat să nu rupă pagina
   ============================================================== */
html, body {
	overflow-x: hidden;                 /* Niciodată scroll orizontal pe pagină */
}

img, svg, video {
	max-width: 100%;
	height: auto;
}

/* Long words / URL-uri să nu rupă layout-ul */
.testimonial__text,
.about__feature span,
.service__desc,
.site-footer__contact a,
.site-footer__desc {
	overflow-wrap: break-word;
	word-wrap: break-word;
}