/* =========================================================
   PET ALERT — INTERNAL PAGES (FINAL)
   Layout stable : 2/3-1/3 + bloc plein + 2 colonnes
   ========================================================= */

/* -------------------------
   Ligne 1 (intro + CTA) : 2/3 - 1/3
   ------------------------- */
.home-row1{
  display: grid;
  grid-template-columns: 1fr;   /* mobile: stack */
  gap: 1.25rem;
}

@media (min-width: 1024px){
  .home-row1{
    grid-template-columns: 2fr 1fr; /* desktop: 2/3 - 1/3 */
    gap: 1.875rem;                  /* ≈ lg:gap-7.5 */
    align-items: stretch;
  }
}

/* Section 3 cards : desktop 3 colonnes, mobile 1 seule card */
.cards-3cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Masquer 2 cards en dessous de 1024px */
.card-desktop-only{
  display: none;
}

@media (min-width: 1024px){
  .cards-3cols{
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    align-items: stretch;
  }

  .card-desktop-only{
    display: block;
  }
}

/* Footer : éviter le lien collé en bas */
.card-footer-home{
  padding: 1rem 1.5rem 1.5rem;
}



/* -------------------------
   Footer des cards internes
   (liens trop collés en bas)
   ------------------------- */
.card-footer-home{
  padding: 1rem 1.5rem 1.5rem; /* top | sides | bottom */
}

/* (optionnel) si ton framework met un padding bizarre sur btn-link */
.card-footer-home .btn.btn-link{
  display: inline-flex;
  align-items: center;
}

/* Séparation nette entre la section 3 cards et le bloc suivant (FAQ/CTA) */
.cards-section{
  margin-bottom: 1.75rem; /* équivalent lg:gap-7.5 */
}

@media (min-width: 1024px){
  .cards-section{
    margin-bottom: 2.25rem; /* un peu plus d’air en desktop */
  }
}

/* LISTE DES ZONES – RESPONSIVE (multi-column) */
.pets-lost-list{
  column-gap: 2rem;
}

/* Smartphone */
@media (max-width: 639px){
  .pets-lost-list{ column-count: 1; }
}

/* Intermédiaire (tablette / laptop) */
@media (min-width: 640px) and (max-width: 1023px){
  .pets-lost-list{ column-count: 2; }
}

/* Desktop */
@media (min-width: 1024px){
  .pets-lost-list{ column-count: 3; }
}

/* Liens */
.pets-lost-list a{
  display: block;
  padding: .35rem 0;
  margin-bottom: .5rem;                 /* espace entre items */
  break-inside: avoid;
  color: inherit;
  text-decoration: none;

  /* séparateur sous chaque zone */
  border-bottom: 1px dotted rgba(0,0,0,.25);
}

.pets-lost-list a:hover{
  text-decoration: underline;
  border-bottom-color: rgba(101,44,144,.55);
}

/* Note: avec column-count, on ne peut pas supprimer la bordure du "dernier de chaque colonne"
   sans JS. On supprime uniquement la dernière globale si tu veux : */
.pets-lost-list a:last-child{
  border-bottom: none;
}



@media (max-width: 1023px){
  .country-blocks-desktop{
    display: none;
  }
  .country-block-mobile{
    display: block;
  }
}

@media (min-width: 1024px){
  .country-blocks-desktop{
    display: block;
  }
  .country-block-mobile{
    display: none;
  }
}

/* GeoForm address validation states */
.geo-error input,
.geo-error select,
.geo-error textarea {
    outline: 2px solid #ef4444;
    outline-offset: 0;
}
.geo-success input,
.geo-success select,
.geo-success textarea {
    outline: 2px solid #22c55e;
    outline-offset: 0;
}

/* Veterinaries list */
.vet-line {
    display: flex;
    align-items: center;
    width: 100%;
}

.vet-name {
    flex: 0 0 50%;
}

.vet-city {
    flex: 0 0 auto;
    margin-left: 24px;
}

.vet-button {
    margin-left: auto;
}

.card.vet-selected {
    background-color: #efe7fe;
}

@media (max-width: 767px) {
    .vet-line {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .vet-name {
        flex: 0 0 100%;
    }

    .vet-city {
        margin-left: 0;
    }

    .vet-button {
        margin-left: auto;
    }
}