/* ============================================================
   MOBILE OVERRIDES — Astoria Website
   Linked after styles.css for all pages via includes/head.php
   ============================================================ */

/* ─── WRAP CONTAINERS (index.php + programele-astoria.php) ─── */
@media (max-width: 880px) {
  .wrap, .wrap-n { padding: 0 18px; }
}

/* ─── HERO: programele-astoria + index ─── */
@media (max-width: 880px) {
  .hero { min-height: 52vh; padding: 90px 0 56px; }
}
@media (max-width: 560px) {
  .hero { min-height: 46vh; padding: 84px 0 44px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: center; text-align: center; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat .n { font-size: 1.6rem; }
}

/* ─── HERO: New typed heroes (inscrieri subpages) ─── */
@media (max-width: 880px) {
  .hero-inscriere,
  .hero-transport {
    min-height: 48vh;
    padding: 88px 0 52px;
  }
}
@media (max-width: 560px) {
  .hero-inscriere,
  .hero-transport {
    min-height: 42vh;
    padding: 82px 0 40px;
  }
  .hero-inscriere h1,
  .hero-transport h1 {
    margin-bottom: 14px;
  }
  .hero-lead { font-size: .9rem !important; }
  .hero-chips { margin-top: 18px; gap: 8px; }
  .hero-chip { padding: 6px 11px; }
  .hero-chip span { font-size: .72rem; }
}

/* ─── INDEX: what section grid ─── */
@media (max-width: 880px) {
  .what-inner { grid-template-columns: 1fr; gap: 36px; }
  .progs-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .progs-grid { grid-template-columns: 1fr; }
}

/* ─── CTA BUTTONS (all pages) ─── */
@media (max-width: 560px) {
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn { width: 100%; justify-content: center; text-align: center; }
  .tarife-cta-inline { flex-direction: column; }
  .tarife-cta-inline .btn { width: 100%; justify-content: center; }
}

/* ─── TARIFE PAGE ─── */
@media (max-width: 560px) {
  .pkg-card { padding: 28px 22px 32px; }
  .pkg-price-val { font-size: 1.8rem; }
  .tarife-elite-note { flex-direction: column; gap: 12px; padding: 20px; }
  .tarife-note-box { padding: 24px 20px; }
}

/* ─── TRANSPORT & MASA PAGE ─── */
@media (max-width: 700px) {
  .transport-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .transport-card { flex-direction: column; gap: 14px; }
  .meal-step { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; }
  .meal-step-icon { width: 44px; height: 44px; }
}

/* ─── PROCESUL DE INSCRIERE: journey ─── */
@media (max-width: 560px) {
  .js-card { padding: 22px 20px; }
  .js-dot-circle { width: 46px; height: 46px; font-size: .9rem; }
}

/* ─── CONTACT PAGE ─── */
@media (max-width: 560px) {
  .c2-phone { font-size: 1.65rem !important; }
  .c2-card { padding: 24px 20px !important; }
  .c2-section { padding: 56px 0; }
}

/* ─── PLACEHOLDER HERO (tarife + tur-virtual) ─── */
@media (max-width: 560px) {
  .placeholder-hero { padding-top: calc(60px + 68px); padding-bottom: 40px; }
}

/* ─── ASTRO SCENE (tur-virtual) ─── */
@media (max-width: 480px) {
  .astro-scene { padding: 48px 16px 60px; }
  .wip-title { font-size: 1.4rem !important; }
  .wip-sub { font-size: .88rem; }
}

/* ─── SOCIAL MEDIA CARDS (contact) ─── */
@media (max-width: 560px) {
  .csc-card { padding: 16px 16px; gap: 12px; }
  .csc-icon { width: 44px; height: 44px; border-radius: 11px; }
  .csc-icon svg { width: 22px; height: 22px; }
  .csc-platform { font-size: .92rem; }
  .csc-desc { font-size: .8rem; margin-bottom: 4px; }
}

/* ─── TESTIMONIALE ─── */
@media (max-width: 560px) {
  .test-card { padding: 24px 20px; }
}

/* ─── PKG GRID: extra small ─── */
@media (max-width: 420px) {
  .pkg-grid { max-width: 100% !important; }
  .pkg-card { padding: 24px 18px 28px; }
}

/* ─── SUBPAGE NAV: smaller text on tiny screens ─── */
@media (max-width: 420px) {
  .subpage-nav-inner a { padding: 11px 11px; font-size: .68rem; }
}

/* ─── GENERAL: sections reduce padding slightly on phones ─── */
@media (max-width: 420px) {
  section { padding: clamp(52px, 8vw, 72px) 0; }
  .c2-section { padding: 52px 0; }
}

/* ─── ECOSISTEMUL ELITE / BENEFITS ─── */
@media (max-width: 560px) {
  .benefit-card { padding: 28px 24px; }
  .benefit-num { font-size: 2rem; margin-bottom: 14px; }
}

/* ─── DESPRE NOI OVERVIEW ─── */
@media (max-width: 560px) {
  .overview-card { padding: 28px 24px; }
}

/* ─── FOOTER ─── */
@media (max-width: 480px) {
  .foot-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ─── FOOTER: coloana verticală pe telefoane mici ─── */
@media (max-width: 480px) {
  .foot-top { flex-direction: column; gap: 16px; }
  .foot-eco { flex-direction: column; gap: 8px; }
  .foot-eco a { font-size: .78rem; }
  .foot-desc { text-align: left; }
}

/* ─── TRUST SECTION: coloana pe ecrane foarte mici ─── */
@media (max-width: 440px) {
  .trust-row { flex-direction: column; align-items: center; gap: 16px; }
  .logo-chip  { min-width: 160px; }
}

/* ─── CHATBOT PANEL: breakpoint extins ─── */
@media (max-width: 440px) {
  #astro-panel { width: calc(100vw - 32px); right: 16px; bottom: 100px; }
  #astro-btn   { bottom: 20px; right: 16px; }
}

/* ─── INDEX / PROGRAMELE: timeline item ─── */
@media (max-width: 420px) {
  .titem { grid-template-columns: 48px 1fr !important; gap: 14px !important; }
}

/* ─── TARIFE-MASA-BOX ─── */
@media (max-width: 520px) {
  .tarife-masa-box { flex-direction: column; gap: 6px; padding: 24px 20px; }
  .tarife-masa-box .price-val { font-size: 2rem; }
}

/* ─── HARTA CONTACT ─── */
@media (max-width: 600px) {
  #astoria-map { height: 160px !important; }
}

/* ─── CONTACT HERO ─── */
@media (max-width: 560px) {
  .contact-hero { min-height: 40vh !important; padding: calc(60px + 68px) 0 36px !important; }
}

/* ─── PROCESUL DE INSCRIERE: carduri info cu padding mare ─── */
@media (max-width: 520px) {
  .inscriere-info-card { padding: 20px 18px !important; gap: 16px !important; }
  .inscriere-info-card > div:first-child { width: 38px !important; height: 38px !important; }
}

/* ─── INTREBARI FRECVENTE: accordion ─── */
@media (max-width: 520px) {
  .faq-q { padding: 18px 16px !important; font-size: .88rem !important; }
  .faq-a { padding: 0 16px 16px !important; font-size: .88rem !important; }
}

/* ─── HEADING SIZES: titluri prea mari pe telefoane mici ─── */
@media (max-width: 380px) {
  h1 { font-size: clamp(1.6rem, 8vw, 2rem) !important; }
  h2 { font-size: clamp(1.3rem, 7vw, 1.7rem) !important; }
}

/* ─── CONTAINER: padding minim pe ecrane sub 380px ─── */
@media (max-width: 380px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
}