/**
 * Page /animais — Liste filtrée des animaux à adopter.
 * Hérite de animal-card.css pour les cards individuelles.
 */

.view-animals-listing {
  max-width: 1280px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.animals-listing__title {
  font-family: 'Caveat', cursive;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--cantinho-text, #1e293b);
  margin: 0 0 1.5rem;
  line-height: 1.1;
}

.animals-listing__filters {
  background: #fef3e9;
  border: 1.5px solid #1a1a1a;
  border-radius: var(--cantinho-radius, 10px);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.animals-listing__filters form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.animals-listing__filters .form-item {
  margin: 0;
}

.animals-listing__filters .form-item label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cantinho-muted, #64748b);
  margin-bottom: 0.35rem;
}

/* Search field "Buscar por nome..." */
.animals-listing__filters .form-item-name input[type="text"] {
  width: 100%;
  max-width: 420px;
  padding: 0.5rem 0.85rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  font-size: 0.95rem;
  background: #fff;
}

/* BEF checkboxes — pills horizontales */
.animals-listing__filters .bef-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.animals-listing__filters .bef-checkboxes .form-item {
  margin: 0;
}

.animals-listing__filters .bef-checkboxes input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.animals-listing__filters .bef-checkboxes label {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  background: #fff;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--cantinho-text, #1e293b);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  margin: 0;
}

.animals-listing__filters .bef-checkboxes label:hover {
  background: var(--cantinho-primary-light, #e0f2fe);
}

.animals-listing__filters .bef-checkboxes input[type="checkbox"]:checked + label {
  background: var(--cantinho-text, #1a1a1a);
  color: #fff;
}

.animals-listing__filters .bef-checkboxes input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--cantinho-primary, #0891b2);
  outline-offset: 2px;
}

/* Sort exposed (recentes / nome / idade) */
.animals-listing__filters .form-item-sort-by select,
.animals-listing__filters .form-item-sort-order select {
  padding: 0.4rem 0.85rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  background: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Submit + reset buttons */
.animals-listing__filters .form-actions {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding-top: 0.5rem;
}

.animals-listing__filters .form-actions button,
.animals-listing__filters .form-actions input[type="submit"] {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid #1a1a1a;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}

.animals-listing__filters .form-actions input[type="submit"][value="Aplicar"],
.animals-listing__filters .form-actions button.form-submit {
  background: var(--cantinho-primary, #0891b2);
  color: #fff;
  border-color: var(--cantinho-primary, #0891b2);
}

.animals-listing__filters .form-actions input.form-submit:hover {
  background: var(--cantinho-primary-dark, #0e7490);
}

/* Grid des cards — 4 colonnes desktop, responsive en dessous.
   !important pour battre toute règle Bootstrap/Barrio qui pourrait
   forcer display: block ou flex (clearfix, etc.). */
.view-animals-listing .views-infinite-scroll-content-wrapper,
.view-animals-listing .view-content,
.animals-listing__content > .view-content,
.animals-listing__content .views-infinite-scroll-content-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem;
  margin: 1rem 0;
}

.view-animals-listing .views-row,
.animals-listing__content .views-row {
  list-style: none;
  margin: 0;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}

@media (max-width: 1200px) {
  .view-animals-listing .views-infinite-scroll-content-wrapper,
  .view-animals-listing .view-content,
  .animals-listing__content > .view-content,
  .animals-listing__content .views-infinite-scroll-content-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .view-animals-listing .views-infinite-scroll-content-wrapper,
  .view-animals-listing .view-content,
  .animals-listing__content > .view-content,
  .animals-listing__content .views-infinite-scroll-content-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .view-animals-listing .views-infinite-scroll-content-wrapper,
  .view-animals-listing .view-content,
  .animals-listing__content > .view-content,
  .animals-listing__content .views-infinite-scroll-content-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* Pager "Ver mais ↓" (Views Infinite Scroll) */
.animals-listing__pager {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 1rem;
}

.animals-listing__pager .pager,
.animals-listing__pager .views-infinite-scroll-content-wrapper + .pager,
.view-animals-listing .pager {
  display: flex;
  justify-content: center;
}

.animals-listing__pager .pager__item--next a,
.view-animals-listing a.button.pager__item-next,
.view-animals-listing .pager__item a {
  display: inline-block;
  padding: 0.65rem 1.75rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  color: var(--cantinho-text, #1e293b);
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.15s ease, transform 0.15s ease;
}

.animals-listing__pager .pager__item--next a:hover,
.view-animals-listing .pager__item a:hover {
  background: var(--cantinho-primary-light, #e0f2fe);
  transform: translateY(-2px);
}

/* Empty state */
.animals-listing__empty {
  text-align: center;
  font-style: italic;
  color: var(--cantinho-muted, #64748b);
  margin: 3rem auto;
}

/* "Ver mais raças" soft-limit toggle (BEF) */
.animals-listing__filters .bef-soft-limit-link {
  margin-top: 0.5rem;
  display: inline-block;
  font-size: 0.85rem;
  color: var(--cantinho-primary, #0891b2);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 768px) {
  .animals-listing__title {
    font-size: 2rem;
  }
  .animals-listing__filters {
    padding: 1rem;
  }
}