/* ============================================================
   RESPONSIVE — Vélothèque Uccle
   Complète les composants home / openings / account / hero.
   Desktop-first — breakpoints : 1100px / 768px / 560px / 480px
   Variables depuis variables.css uniquement.
   ============================================================ */

/* ══════════════════════════════════════════
   RESET MARGIN PARASITE
   Le margin-left: -4px visible sur .home-hero-buttons
   vient du reset Drupal sur les listes <ul>/<nav>.
   Neutralisé ici pour ne pas modifier les fichiers tiers.
══════════════════════════════════════════ */

.home-hero-buttons {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Évite que les boutons ne débordent du conteneur */
  max-width: 100%;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════
  site-inner

   Ajout : margin mobile 768px
══════════════════════════════════════════ */
/*@media (max-width: 768px) {*/
/*  .site-inner {*/
/*    margin: 0 20px !important;*/
/*    width: auto !important;*/
/*  }*/
/*}*/

/* ══════════════════════════════════════════
  site-inner

   Ajout : margin mobile 768px
══════════════════════════════════════════ */
@media (max-width: 425px) {
  .rdv-steps {
    flex-direction: column!important;
    align-items: flex-start!important;
    margin: 24px 0!important;
  }
  .rdv-step-line {
    margin: 5px 8px!important;
  }
  .rdv-col-main{
    width: 300px!important;
  }
  #rdv-member-input{
    width: 300px!important;
  }
  .rdv-active-card{
    flex-direction: row!important;
    align-items: flex-end!important;
  }
}

/* ══════════════════════════════════════════
   OPENINGS SECTION
   Existant : 3col → 1col à 1100px (conservé)
   Ajout : corrections mobile 560px
══════════════════════════════════════════ */

/* Padding réduit sur mobile */
@media (max-width: 768px) {
  .site-inner{
    margin: 0 20px!important;
    width: auto!important;
  }

  .openings-section {
    padding: 40px 0;
  }

  .openings-section__inner {
    padding: 0 20px;
  }

  .openings-section__title {
    font-size: 22px;
  }
}

@media (max-width: 560px) {
  .openings-section {
    padding: 32px 0;
  }

  /* Carte mobile : date + info sur ligne 1, bouton pleine largeur ligne 2 */
  .opening-card {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 0;
    padding: 14px 16px;
  }

  .opening-card a{
    grid-column: 3;
    justify-self: end;
    font-size: 0.8em!important;
  }

  .opening-card__date {
    grid-column: 1;
    grid-row: 1;
    padding-right: 12px;
  }

  .opening-card__info {
    grid-column: 2;
    grid-row: 1;
  }

  .opening-card__button {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-left: 0;
    justify-content: center;
    /* Empêche le texte de se couper en syllabe */
    white-space: nowrap;
    /* Hauteur confortable sur mobile */
    min-height: 40px;
    padding: 0 16px;
  }

}

/* ══════════════════════════════════════════
   HOME HERO
   Existant : aucun breakpoint
   Ajout : 2col → 1col + réduction typographie
══════════════════════════════════════════ */

@media (max-width: 1100px) {
  .home-hero > .site-inner > .wrap-content {
    grid-template-columns: 1fr 320px;
    gap: 4vw;
    padding: 56px 32px 48px;
  }

  .home-hero-left {
    width: 100%;
  }

  .home-hero-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  /* Passe en colonne unique — carte stats sous le texte */
  .home-hero > .site-inner > .wrap-content {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 20px 36px;
  }

  .home-hero-left {
    width: 100%;
  }

  .home-hero-title {
    font-size: 34px;
    letter-spacing: -0.5px;
  }

  .home-hero-sub {
    font-size: 15px;
    margin-bottom: 28px;
  }

  .home-hero-card {
    padding: 20px;
  }
}

@media (max-width: 560px) {
  .home-hero > .site-inner > .wrap-content {
    padding: 32px 16px 28px;
  }

  .home-hero-title {
    font-size: 28px;
  }

  .home-hero-sub {
    font-size: 14px;
  }

  .home-hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero-buttons > * {
    /* Largeur naturelle du bouton — pas de forçage pleine largeur */
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ══════════════════════════════════════════
   HOME VALUES
   Existant : 4col fixe, aucun breakpoint
   Ajout : 4col → 2×2 à 768px → 1col à 480px
══════════════════════════════════════════ */

@media (max-width: 1100px) {
  .home-values .site-inner {
    width: 100%;
    max-width: 100%;
    /*padding-left: 20px;*/
    /*padding-right: 20px;*/
  }
}

@media (max-width: 768px) {
  /* Neutralise le hack 100vw — cause un scroll horizontal sur mobile */
  .home-values {
    width: 100%;
    position: static;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .home-values .site-inner {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    /*padding: 36px 16px;*/
  }
}

@media (max-width: 480px) {
  .home-values .site-inner {
    grid-template-columns: 1fr;
    gap: 10px;
    /*padding: 28px 16px;*/
  }

  .home-val {
    padding: 20px;
  }
}

/* ══════════════════════════════════════════
   HOME INFOS
   Existant : 2col → 1col à 768px (conservé)
   Ajout : padding mobile 560px
══════════════════════════════════════════ */

@media (max-width: 560px) {
  .home-info {
    padding: 36px 16px;
  }

  .home-info-title {
    font-size: 26px;
  }

  .home-info-button {
    width: 100%;
  }
}

/* ══════════════════════════════════════════
   PAGE HERO (pages génériques / catalogue)
   Existant : aucun breakpoint
   Ajout : layout flex → colonne à 768px
══════════════════════════════════════════ */

@media (max-width: 1100px) {
  .page-hero .site-inner {
    padding: 40px 32px 36px;
  }
}

@media (max-width: 768px) {
  .page-hero .site-inner {
    padding: 32px 20px 28px;
  }

  /* Empile texte + CTA verticalement */
  .page-hero-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .page-hero-title {
    font-size: 28px;
  }

  .page-hero-sub {
    font-size: 14px;
  }

  .page-hero-cta {
    width: 100%;
  }

  .page-hero-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .page-hero .site-inner {
    padding: 24px 16px 20px;
  }

  .page-hero-title {
    font-size: 24px;
  }
}

/* ══════════════════════════════════════════
   ADMIN PAGE HERO
   Existant : aucun breakpoint
   Ajout : réduction padding + typographie
══════════════════════════════════════════ */

@media (max-width: 768px) {
  .admin-page-hero .site-inner {
    padding: 24px 20px 20px;
    gap: 14px;
  }

  .admin-hero-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
    border-radius: 10px;
  }

  .admin-hero-title {
    font-size: 20px;
  }
}

@media (max-width: 560px) {
  .admin-page-hero .site-inner {
    padding: 18px 16px 16px;
    gap: 12px;
  }

  .admin-hero-title {
    font-size: 18px;
  }
}

/* ══════════════════════════════════════════
   ACCOUNT HERO
   Existant : aucun breakpoint
   Ajout : avatar + nom en colonne sur mobile
══════════════════════════════════════════ */

@media (max-width: 768px) {
  .account-hero {
    padding: 28px 0;
  }

  .account-hero .account-inner {
    gap: 16px;
  }

  .account-avatar {
    width: 68px;
    height: 68px;
    font-size: 24px;
  }

  .account-hero h1 {
    font-size: 30px;
  }

  .account-hero p {
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .account-hero {
    padding: 20px 0;
  }

  .account-hero .account-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 16px;
  }

  .account-avatar {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

  .account-hero h1 {
    font-size: 26px;
  }
}