/* ═══════════════════════════════════════════
   MOBILE FIRST — romanielvetia.ch
   Base = telefon, se adaugă desktop în sus
   ═══════════════════════════════════════════ */

/* ────────────────────────────────────────
   BASE (0 – 479px) — telefoane mici
──────────────────────────────────────── */

/* Container */
.container    { padding: 0 16px; }
.container-sm { padding: 0 16px; }

/* Tipografie */
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }

/* Sections */
.section    { padding: 56px 0; }
.section-sm { padding: 32px 0; }
.section-lg { padding: 64px 0; }
.section-title { margin-bottom: 32px; }

/* Hero */
.hero-section {
  padding: 100px 0 64px;
  min-height: auto;
}
.hero-title { font-size: 2rem; letter-spacing: -.01em; }
.hero-sub   { font-size: .95rem; margin-bottom: 28px; }
.hero-cta   { flex-direction: column; gap: 10px; margin-bottom: 40px; }
.hero-cta .btn { width: 100%; justify-content: center; font-size: .95rem; padding: 14px 20px; }
.hero-stats { gap: 20px; padding-top: 32px; }
.hero-stat-number { font-size: 1.7rem; }

/* Lead magnet */
.leadmagnet-bar { padding: 20px 0; }
.leadmagnet-inner { flex-direction: column; gap: 14px; }
.leadmagnet-text strong { font-size: .95rem; }
.leadmagnet-form { width: 100%; flex-direction: column; }
.leadmagnet-form input { min-width: 0; width: 100%; }
.leadmagnet-form .btn  { width: 100%; justify-content: center; }

/* Quiz */
.quiz-section { padding: 56px 0; }
.quiz-card { padding: 24px 18px; border-radius: 16px; }
.quiz-question { font-size: 1rem; }
.quiz-option { padding: 12px 14px; font-size: .88rem; }
.quiz-score { font-size: 3.5rem; }

/* Probleme */
.probleme-section { padding: 56px 0; }
.probleme-grid { grid-template-columns: 1fr; }
.problema-header { padding: 20px 20px 16px; }
.problema-items { padding: 16px 20px; }
.problema-item { font-size: .85rem; }

/* Ghiduri */
.ghiduri-section { padding: 56px 0; }
.ghiduri-grid { grid-template-columns: 1fr; }
.tabs-nav { gap: 0; padding: 3px; }
.tab-btn  { font-size: .78rem; padding: 9px 10px; }
.pachet-card { padding: 28px 20px; }

/* Tools / Calculator */
.tools-section { padding: 56px 0; }
.calc-card { padding: 20px 16px; border-radius: 16px; }
.calc-net-big .amount { font-size: 2.4rem; }
.calc-breakdown { grid-template-columns: 1fr; gap: 10px; }
.comparator-table-wrap { font-size: .78rem; }
.comparator-table th,
.comparator-table td { padding: 10px 12px; }

/* Joburi */
.joburi-section { padding: 56px 0; }
.job-card { padding: 14px 16px; gap: 12px; }
.job-icon { width: 40px; height: 40px; font-size: 1.2rem; flex-shrink: 0; }
.job-title { font-size: .88rem; }
.job-salary { font-size: .82rem; }
.job-meta   { gap: 8px; }
.job-meta span { font-size: .75rem; }

/* Servicii */
.servicii-section { padding: 56px 0; }
.servicii-grid { grid-template-columns: 1fr; }
.serviciu-card { padding: 28px 22px; }
.serviciu-price { font-size: 2rem; }

/* Testimoniale */
.testimoniale-section { padding: 56px 0; }
.testimoniale-grid { grid-template-columns: 1fr; }
.testimonial-card { padding: 24px 20px; }

/* FAQ */
.faq-section { padding: 56px 0; }
.accordion-header { padding: 16px 18px; font-size: .9rem; }
.accordion-body { padding: 0 18px 16px; }

/* CTA Final */
.cta-final { padding: 64px 0; }
.cta-final h2 { font-size: 1.7rem; }
.cta-final p  { font-size: .95rem; }
.cta-final .container-sm > div { flex-direction: column; gap: 10px; }
.cta-final .btn { width: 100%; max-width: 320px; justify-content: center; }

/* Footer */
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-brand { text-align: left; }
.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
.footer-bottom-links { justify-content: center; }

/* Butoane globale mobile */
.btn-lg { padding: 15px 24px; font-size: 1rem; }

/* Grile globale */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

/* Tables */
table { font-size: .83rem; }

/* Utilitare */
.hidden-mobile  { display: none !important; }
.hidden-desktop { display: block; }


/* ────────────────────────────────────────
   480px — telefoane medii/mari
──────────────────────────────────────── */
@media (min-width: 480px) {
  .container    { padding: 0 20px; }
  .hero-title   { font-size: 2.4rem; }
  .hero-cta     { flex-direction: row; }
  .hero-cta .btn { width: auto; }
  .hero-stats   { gap: 28px; }

  .leadmagnet-inner { flex-direction: row; align-items: center; }
  .leadmagnet-form  { width: auto; flex-direction: row; }
  .leadmagnet-form input { width: 220px; }
  .leadmagnet-form .btn  { width: auto; }

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

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


/* ────────────────────────────────────────
   640px — tablete mici
──────────────────────────────────────── */
@media (min-width: 640px) {
  .container    { padding: 0 28px; }
  .section      { padding: 72px 0; }
  .section-lg   { padding: 96px 0; }

  .hero-section { padding: 120px 0 80px; }
  .hero-title   { font-size: 3rem; }
  .hero-sub     { font-size: 1.05rem; }
  .hero-stats   { gap: 36px; }

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

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

  .cta-final .container-sm > div { flex-direction: row; }
  .cta-final .btn { width: auto; max-width: none; }

  .footer-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: row; }
  .footer-bottom-links { justify-content: flex-end; }
}


/* ────────────────────────────────────────
   768px — tablete mari
──────────────────────────────────────── */
@media (min-width: 768px) {
  .container  { padding: 0 32px; }
  .section    { padding: 80px 0; }
  .section-lg { padding: 112px 0; }
  .section-title { margin-bottom: 48px; }

  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.2rem; }

  .hero-section { padding: 130px 0 96px; min-height: 90vh; }
  .hero-title   { font-size: 3.5rem; }
  .hero-sub     { font-size: 1.1rem; }
  .hero-badge   { font-size: .78rem; }
  .hero-stat-number { font-size: 2rem; }

  .probleme-grid    { grid-template-columns: repeat(3, 1fr); }
  .ghiduri-grid     { grid-template-columns: repeat(2, 1fr); }
  .pachete-grid     { grid-template-columns: repeat(3, 1fr); }
  .servicii-grid    { grid-template-columns: repeat(3, 1fr); }
  .testimoniale-grid { grid-template-columns: repeat(3, 1fr); }

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

  .tabs-nav .tab-btn { font-size: .88rem; padding: 10px 18px; }

  .footer-grid { grid-template-columns: repeat(4, 1fr); }

  .hidden-mobile  { display: block; }
  .hidden-desktop { display: none; }
}


/* ────────────────────────────────────────
   1024px — desktop mic
──────────────────────────────────────── */
@media (min-width: 1024px) {
  .container  { padding: 0 40px; }
  .section    { padding: 96px 0; }
  .section-lg { padding: 128px 0; }

  h1 { font-size: 4rem; }
  h2 { font-size: 2.4rem; }

  .hero-section { padding: 140px 0 100px; min-height: 100vh; }
  .hero-title   { font-size: 4rem; }

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

  .calc-grid    { grid-template-columns: repeat(4, 1fr); }
  .calc-card    { padding: 36px; }

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


/* ────────────────────────────────────────
   1280px — desktop mare
──────────────────────────────────────── */
@media (min-width: 1280px) {
  .container    { padding: 0 48px; max-width: 1300px; }
  .container-sm { max-width: 840px; }
  .hero-title   { font-size: 4.5rem; }
}


/* ────────────────────────────────────────
   Print
──────────────────────────────────────── */
@media print {
  #site-header, #mobile-nav, .cta-final,
  .leadmagnet-bar, .menu-toggle { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  a    { color: #000; }
  .hero-section { min-height: auto; background: #fff; padding: 20px 0; }
  .hero-title, .hero-sub { color: #000; }
}
