/* =========================================================
   HOME / SECTIONS LAYOUT
   ========================================================= */

.home-latest,
.home-map,
.home-featured{
  margin: 22px 0;
}

.section-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-header h2{
  margin: 0;
}

.section-header p{
  margin: 6px 0 0;
  color: #666;
}

.link-more{
  font-weight: 700;
  text-decoration: none;
}

.empty-note{
  margin: 10px 0 0;
  color: #666;
}


/* =========================================================
   LATEST GRID (wider cards)
   ========================================================= */

.cards-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}


/* =========================================================
   FEATURED BLOCKS
   ========================================================= */

.featured-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px){
  .featured-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Featured card container: integrated (no white contrast block) */
.featured-card{
  border: 1px solid rgba(8, 74, 109, 0.18);
  border-radius: 14px;
  background: var(--ecx-surface);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
}

.featured-card h3{
  margin: 0 0 12px;
}

/* Horizontal row for featured cards */
.cards-row{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;              /* 🔑 permite salto de línea */
  overflow-x: visible;          /* 🔑 elimina scroll horizontal */
  padding-bottom: 10px;
}

.cards-row > *{
  flex: 1 1 300px;              /* 🔑 ancho base, pero flexible */
  max-width: 300px;             /* 🔑 no cambia el tamaño visual */
}

/* Nicer horizontal scrollbar */
.cards-row::-webkit-scrollbar{
  height: 10px;
}

.cards-row::-webkit-scrollbar-thumb{
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}

.cards-row::-webkit-scrollbar-track{
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
}


/* =========================================================
   ECX ARTICLE CARD
   (aligned rows across cards)
   ========================================================= */

.ecx-card{
  background: var(--ecx-surface);
  border: 1px solid rgba(8, 74, 109, 0.18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  height: 100%; /* IMPORTANT: let the grid stretch the card */
}

.ecx-card:hover{
  transform: translateY(-2px);
  border-color: rgba(8, 74, 109, 0.28);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
}

/* Link must fill the whole card so bottom sections align */
.ecx-card__link{
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Media */
.ecx-card__media{
  position: relative;
  background: #eef2f6;
  flex: 0 0 auto;
}

/* Brand accent line */
.ecx-card__media::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0px;
  background: var(--ecx-brand);
  opacity: .95;
  pointer-events: none;
}

/* Grid vs compact heights */
.ecx-card--grid .ecx-card__media{ height: 170px; }
.ecx-card--compact .ecx-card__media{ height: 130px; }

.ecx-card__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Badges */
.ecx-card__badges{
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ecx-badge{
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.78);
  color: #fff;
  letter-spacing: .2px;
}

/* Visits chip */
.ecx-card__chip{
  position: absolute;
  right: 10px;
  top: 10px;
}

.ecx-chip{
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--ecx-text);
  border: 1px solid rgba(231, 233, 238, 0.9);
}

/* Body (this is what aligns the footer across cards) */
.ecx-card__body{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto; /* IMPORTANT: makes body fill remaining height */
}

/* Title: fixed max lines + reserved height */
.ecx-card__title{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.32;
  letter-spacing: .15px;
  color: var(--ecx-text);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  min-height: calc(1.32em * 2); /* reserve 2 lines always */
}

/* Subtitle: always reserve 1 line */
.ecx-card__subtitle{
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ecx-muted);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;

  min-height: 1.3em; /* reserve 1 line even if empty */
}

/* Meta (location) */
.ecx-card__meta{
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid rgba(8, 74, 109, 0.10);

  min-height: 28px; /* keeps rhythm aligned */
}

.ecx-card__meta-label{
  font-size: 12px;
  color: var(--ecx-muted);
  white-space: nowrap;
}

.ecx-card__meta-value{
  font-size: 12px;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* End date slot: reserve space even if empty (needs Twig tweak below) */
.ecx-card__end{
  font-size: 12px;
  color: #8a5b00;
  min-height: 16px;
}

/* Footer (fixed vertical position) */
.ecx-card__footer{
  margin-top: auto; /* KEY: pushes footer to the bottom */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(8, 74, 109, 0.10);
}

.ecx-card__price{
  font-weight: 700;     /* menos “mazacote” que 900 */
  font-size: 18px;      /* un poco más grande */
  line-height: 1.1;
  letter-spacing: .14px;
  color: var(--ecx-text);
  white-space: nowrap;
}

.ecx-card__date{
  font-size: 12px;
  color: var(--ecx-muted);
  white-space: nowrap;
}

/* CTA (brand) */
.ecx-card__cta{
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.ecx-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;        /* un poco más legible */
  font-weight: 600;       /* menos grueso */
  letter-spacing: .2px;   /* evita sensación comprimida */
  line-height: 1;         /* limpio en botones */

  padding: 10px 14px;     /* más aire horizontal/vertical */
  border-radius: 10px;

  background: var(--ecx-brand);
  color: #fff;
  border: 1px solid transparent;
}


.ecx-card:hover .ecx-cta{
  filter: brightness(1.05);
}

/* =========================================================
   HOME · COLLAPSIBLE MAP
   ========================================================= */

.home-map-collapsible{
  border: 1px solid rgba(8, 74, 109, 0.18);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.home-map-summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.home-map-summary::-webkit-details-marker{
  display: none;
}

.home-map-summary h2{
  margin: 0;
}

.home-map-summary p{
  margin: 6px 0 0;
  color: #666;
}

.home-map-summary__hint{
  flex-shrink: 0;
  font-weight: 700;
  color: var(--ecx-brand);
}

.home-map-panel{
  border-top: 1px solid rgba(8, 74, 109, 0.12);
  padding: 16px;
}

/* =========================================================
   HOME · CATEGORY GRID
   ========================================================= */

.home-categories{
  margin: 22px 0;
}

.category-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .category-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .category-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.category-tile{
  background: #fff;
  border: 1px solid rgba(8, 74, 109, 0.18);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.category-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(8, 74, 109, 0.28);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
}

.category-tile__media{
  position: relative;
  background: #eef2f6;
  aspect-ratio: 16 / 9;
}

.category-tile__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-tile__fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  color: var(--ecx-brand);
  opacity: .9;
}

.category-tile__name{
  padding: 10px 12px 12px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ecx-text);
  line-height: 1.2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}


/* Responsive */
@media (max-width: 420px){
  .cards-grid{
    grid-template-columns: 1fr;
  }
}