/* =========================================================
   mobile.css — RESPONSIVE GLOBAL (uniquement)
   Objectif :
   - Zéro scroll horizontal
   - Grilles en 1 colonne
   - SermonPress archive : les colonnes Bootstrap passent en pile
     (évite la colonne droite ultra étroite => texte “vertical”)
   ========================================================= */

/* ---------------------------
   1) Sécurité anti-débordement
   --------------------------- */
@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Médias : ne dépassent jamais */
  img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
  }

  /* Grilles custom -> 1 colonne */
  .librairies__grid,
  .books-grid,
  .sermon-taxonomy-list {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------
   2) SERMONPRESS — ARCHIVE (/sermons/) : FIX colonnes mobile
   - SermonPress utilise du Bootstrap col-sm-*
   - En dessous de 576px, col-sm-* ne s’applique pas => si la
     row est en flex/nowrap ou si des widths restent, ça casse.
   => On force : row = flex + wrap ; colonnes = 100%
   --------------------------------------------------------- */
@media (max-width: 575.98px) {

  /* La rangée doit être un flex WRAP (au cas où le thème/plugin ne le fait pas) */
  .archive.sermons-library .content-container.container > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    gap: 16px; /* espace entre sidebar et listing */
  }

  /* Sidebar + Listing -> pleine largeur */
  .archive.sermons-library .content-container.container > .row > .col-sm-4,
  .archive.sermons-library .content-container.container > .row > .col-sm-8,
  .archive.sermons-library .content-container.container > .row > .col-lg-3,
  .archive.sermons-library .content-container.container > .row > .col-lg-9,
  .archive.sermons-library .content-container.container > .row > .main-left-sermon-list {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* évite les débordements dans les enfants */
  }

  /* Sidebar : pas sticky sur mobile */
  .archive.sermons-library .sidebar-filter {
    position: relative !important;
    top: auto !important;
    margin-bottom: 0 !important;
  }

  /* Formulaire de recherche : empilement propre */
  .archive.sermons-library .sermon-search-holder {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Champs : 100% + évite le zoom iOS */
  .archive.sermons-library .sermon-search-holder input,
  .archive.sermons-library .sermon-search-holder select,
  .archive.sermons-library .sermon-search-holder button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  /* Liste : évite l’effet “colonne microscopique” */
  .archive.sermons-library .sermon-item-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Le wrapper texte doit pouvoir rétrécir (sinon overflow/écrasement) */
  .archive.sermons-library .sermon-flex-wrapper,
  .archive.sermons-library .sermon-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Miniatures : taille mobile */
  .archive.sermons-library .sermon-list-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
  }

  /* Typo : uniquement SermonPress, pas global site */
  .archive.sermons-library h1 { font-size: 1.6rem; }
  .archive.sermons-library h2 { font-size: 1.25rem; }
  .archive.sermons-library p,
  .archive.sermons-library li { font-size: 16px; }
}

/* ---------------------------------------------------------
   3) SERMONPRESS — SINGLE (page d’une prédication)
   - On évite les gros paddings / “cards” trop larges sur mobile
   --------------------------------------------------------- */
@media (max-width: 768px) {
  body.single-sermon .sermon-main-grid {
    display: block !important; /* 1 colonne */
  }

  body.single-sermon .sermon-container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.single-sermon .sermon-modern-header {
    padding: 18px 0 !important;
    margin-bottom: 16px !important;
    text-align: left; /* évite un rendu “bizarre” centré sur mobile */
  }

  body.single-sermon .sermon-modern-header h1 {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
  }

  body.single-sermon .sermon-quick-meta {
    display: block !important; /* empile les meta */
    font-size: 0.95rem !important;
  }

  body.single-sermon audio {
    width: 100% !important;
    display: block !important;
  }
}
/* =========================================================
   SERMONPRESS — MOBILE : Sidebar au-dessus, Listing en-dessous
   (UNIQUEMENT mobile — desktop inchangé)
   Cible : /sermons/ (archive sermons-library)
   ========================================================= */

@media (max-width: 768px){

  /* 1) La row devient un flex WRAP pour empiler proprement */
  .archive.sermons-library .content-container.container > .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  /* 2) Les 2 colonnes passent en 100% */
  .archive.sermons-library .content-container.container > .row > .col-sm-4.col-lg-3{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    order: 1 !important; /* sidebar en premier */
  }

  .archive.sermons-library .content-container.container > .row > .col-sm-8.col-lg-9.main-left-sermon-list{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    order: 2 !important; /* listing en dessous */
  }

  /* 3) Sidebar : pas sticky sur mobile + un peu d’air */
  .archive.sermons-library .sidebar-filter{
    position: relative !important;
    top: auto !important;
    margin-bottom: 16px !important;
  }

  /* 4) Recherche : empilement (input + bouton) */
  .archive.sermons-library .sermon-search-holder{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .archive.sermons-library .sermon-search-holder input,
  .archive.sermons-library .sermon-search-holder select,
  .archive.sermons-library .sermon-search-holder button{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* évite zoom iOS */
  }
}


/* -------------------------
   MASQUER TÉLÉCHARGEMENT MP3 SUR MOBILE
   ------------------------- */
@media (max-width: 768px) {
  body.single-sermon .sermon-download-button,
  body.single-sermon a[href*=".mp3"],
  body.single-sermon .download-link,
  body.single-sermon .sermon-download,
  body.single-sermon a[href*="download"],
  body.single-sermon .sermon-info-card a[href$=".mp3"],
  body.single-sermon .sermon-secondary a[href$=".mp3"],
  body.single-sermon button[onclick*=".mp3"],
  body.single-sermon a.btn[href*=".mp3"] {
    display: none !important;
  }

  .archive.sermons-library .sermon-download-button,
  .archive.sermons-library a[href*=".mp3"],
  .archive.sermons-library .download-link,
  .archive.sermons-library .sermon-download,
  .archive.sermons-library button[onclick*=".mp3"],
  .archive.sermons-library a.btn[href*=".mp3"] {
    display: none !important;
  }
}