/*
 * Chaussmart — section « Commander par téléphone » de la home (maquette, §8).
 * Aplat teinté de la couleur principale, texte en --cs-main-strong, bouton d'appel .btn-primary
 * (couleurs et états des boutons primaires du thème). Gabarit commun des sections de la home
 * (custom.css, « Home — rythme vertical ») ; typographie du titre et du texte : styles partagés
 * de custom.css (« Titre et texte de bloc »), chargé après ce fichier. Empilé sous 992 px,
 * deux colonnes au-delà. Aucun espacement vertical propre : l'écart entre sections de la home
 * est le seul row-gap de la grille.
 */
.cs-home-phone__panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.375rem;
  color: var(--cs-main-strong);
  background: var(--cs-main-tint-light);
}

.cs-home-phone__title {
  margin: 0 0 0.625rem;
  font-size: var(--cs-panel-title-size, 1.625rem);
  color: inherit;
}

.cs-home-phone .btn.cs-home-phone__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 3.5rem;
  padding: 0 1.875rem;
  border-radius: 4px;
  font-size: 1.3125rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .cs-home-phone__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: 1.5rem;
    align-items: center;
    padding: 2.75rem 4rem;
  }

  .cs-home-phone .btn.cs-home-phone__call {
    justify-self: end;
    height: 3.75rem;
    font-size: 1.375rem;
  }
}