/* ============================================
   APARTMENTS GRID - Version MINIMALISTE
   Styles visuels à faire dans Bricks
   ============================================ */

/* ===============================
   GRID LAYOUT
   =============================== */

.apartments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}

@media (max-width: 1024px) {
  .apartments-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .apartments-grid {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
}

/* ===============================
   CARD STRUCTURE
   =============================== */

.apartment-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s ease;
}

.apartment-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* ===============================
   IMAGE
   =============================== */

.apartment-image {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.apartment-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.apartment-card:hover .apartment-image img {
  transform: scale(1.05);
}

/* ===============================
   BADGE
   =============================== */

.apartment-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
}

/* ===============================
   BODY
   =============================== */

.apartment-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  flex: 1;
}

/* ===============================
   TOPLINE
   =============================== */

.apartment-topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
}

/* ===============================
   FEATURES - Grid 2 colonnes
   =============================== */

.apartment-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-s);
}

.apartment-feature {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ===============================
   BUTTON
   =============================== */

.apartment-button {
  margin-top: auto;
}

.apartment-button a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.25s ease;
  text-decoration: none;
}

.apartment-button a:hover {
  transform: translateY(-2px);
}

/* ===============================
   CTA
   =============================== */

.apartments-cta {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===============================
   RESPONSIVE
   =============================== */

@media (max-width: 768px) {
  .apartment-image {
    height: 240px;
  }

  .apartment-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .apartment-topline {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===============================
   UTILITIES
   =============================== */

/* Supprimer padding SAUF sur le badge */
.apartment-image {
  padding: 0 !important;
  margin: 0 !important;
}

.apartment-image > *:not(.apartment-badge) {
  padding: 0 !important;
  margin: 0 !important;
}

/* OU version plus précise : cibler uniquement les wrappers Bricks */
.apartment-image .brxe-image,
.apartment-image figure {
  padding: 0 !important;
  margin: 0 !important;
}

/* ===============================
   GRID LAYOUT - Neutraliser Bricks Container
   =============================== */

.apartments-grid,
.brxe-container.apartments-grid {
  display: grid !important; /* Forcer grid au lieu de flex */
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-l) !important;
  margin-bottom: var(--space-xl);
  
  /* Neutraliser les styles Bricks */
  flex-direction: initial !important;
  align-items: initial !important;
  width: 100% !important; /* Au lieu de 1100px fixe */
  max-width: 1100px; /* Largeur max optionnelle */
}

/* Forcer les cartes enfants */
.apartments-grid > .apartment-card,
.apartments-grid > .brxe-div,
.apartments-grid > div {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important; /* Annuler flex comportement */
}

@media (max-width: 1024px) {
  .apartments-grid,
  .brxe-container.apartments-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .apartments-grid,
  .brxe-container.apartments-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-m) !important;
  }
}