/* =============================================================================
   Algeria Job Summit — public pages mobile polish
   Accueil (index), Visiteurs, Exposants, Sponsor
   Loaded after enhancement.css so these rules can override.
   ============================================================================= */

/* --- Horizontal overflow (full-bleed sections, scaled cards) --- */
html {
  overflow-x: clip;
}
body {
  overflow-x: hidden;
}

/* Pack cards inside Bootstrap grid (#packsContainer) — base .pack-card-premium
   is tuned for .packs-container horizontal scroll; grid needs full-width flex. */
.packs-section .row > [class*="col-"] > .pack-card-premium {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 991.98px) {
  .packs-section .row > [class*="col-"] > .pack-card-premium {
    min-width: 0 !important;
    flex-basis: auto !important;
  }

  .pack-card-premium--popular {
    transform: none !important;
  }

  .pack-card-premium--popular:hover {
    transform: translateY(-10px) !important;
  }

  .pack-amount {
    font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
    letter-spacing: -0.04em !important;
  }

  .pack-title {
    font-size: clamp(1.05rem, 4.2vw, 1.35rem) !important;
  }

  .pack-card-premium {
    padding: clamp(1.25rem, 4vw, 1.75rem) !important;
  }

  .pack-badge-popular {
    top: 12px !important;
    right: 12px !important;
    font-size: 10px !important;
    padding: 5px 12px !important;
  }
}

/* --- Page heroes (visiteurs / exposants / sponsor inline + exposants.css) --- */
@media (max-width: 991.98px) {
  .page-hero {
    padding-top: clamp(96px, 22vw, 130px) !important;
    padding-bottom: clamp(48px, 10vw, 72px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page-hero h1 {
    font-size: clamp(1.55rem, 6vw, 2.4rem) !important;
  }

  .page-hero .mt-4.d-flex.flex-wrap.justify-content-center {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  .page-hero .btn-cta {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
    min-height: 46px;
  }
}

/* --- Benefits / sections breathing room --- */
@media (max-width: 767.98px) {
  .benefits-section,
  .why-section {
    padding-top: clamp(44px, 10vw, 64px) !important;
    padding-bottom: clamp(44px, 10vw, 64px) !important;
  }

  .benefit-card {
    padding: 1.25rem 1rem !important;
  }

  .benefit-icon {
    width: 58px !important;
    height: 58px !important;
    font-size: 1.35rem !important;
  }

  .packs-section {
    padding-top: clamp(44px, 10vw, 72px) !important;
    padding-bottom: clamp(44px, 10vw, 72px) !important;
  }

  .pack-cta,
  .pack-cta-btn {
    width: 100% !important;
    min-height: 46px;
    justify-content: center !important;
  }

  .pack-features-list {
    margin-bottom: 1.5rem !important;
  }

  .pack-feature-item {
    font-size: 0.88rem !important;
    padding: 8px 0 !important;
  }

  /* iOS: 16px+ on inputs avoids zoom-on-focus */
  .expo-reg-section .form-control.expo-input,
  .expo-reg-section .form-select.expo-input,
  .expo-reg-section textarea.expo-input,
  .form-section .form-control,
  .form-section .form-select {
    font-size: 16px !important;
  }

  /* Undo enhancement.css padding on whole card — keep flush topbar */
  .expo-form-card {
    padding: 0 !important;
  }

  .expo-section-title {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
    line-height: 1.25 !important;
  }

  .expo-form-topbar {
    padding: 16px 16px !important;
  }

  .expo-form-topbar-title {
    font-size: 0.9rem !important;
  }
}

@media (max-width: 575.98px) {
  .expo-reg-section .pack-radio-group {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .expo-submit-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px;
  }

  .btn-submit {
    min-height: 48px;
    font-size: 15px !important;
  }
}

/* --- Home: viva-hero (index_old) --- */
@media (max-width: 767.98px) {
  .viva-hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  .hero-header h1 {
    font-size: clamp(1.55rem, 6.5vw, 2.35rem) !important;
  }

  .hero-header h2 {
    font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important;
  }

  .video-container {
    max-width: 100% !important;
  }
}

/* --- Home: showcase slider CTAs --- */
@media (max-width: 575.98px) {
  .ajs-home-showcase__actions {
    justify-content: stretch !important;
    gap: 0.4rem !important;
  }

  .ajs-home-showcase__btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: calc(50% - 0.25rem);
    font-size: 0.74rem !important;
    padding: 0.5rem 0.55rem !important;
    text-align: center;
  }

  .ajs-home-showcase__title {
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
  }

  .ajs-home-showcase__lead {
    font-size: 0.88rem !important;
  }

  .ajs-home-showcase__dots {
    bottom: clamp(175px, 28vh, 255px) !important;
  }
}

@media (max-width: 380px) {
  .ajs-home-showcase__btn {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* --- Press strip on home --- */
@media (max-width: 575.98px) {
  .ajs-press-reviews .section-title {
    font-size: clamp(1.4rem, 6vw, 1.85rem) !important;
  }
}

/* --- Visiteurs: practical info rows --- */
@media (max-width: 575.98px) {
  .info-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  .info-item:hover {
    transform: none !important;
  }
}

/* --- Success modal --- */
@media (max-width: 479.98px) {
  .ajs-reg-modal__body {
    padding: 26px 18px 22px !important;
  }

  .ajs-reg-modal__dialog {
    width: 100% !important;
    max-width: none !important;
    margin: 0 12px !important;
    border-radius: 18px !important;
  }
}