/* v0.65 — Banner recomendado ancho parejo en sidebar y prioridad real al evento marcado como recomendado. */

@media (min-width: 980px) {
  .page-event-detail .detail-layout,
  .page-profile-detail .detail-layout,
  .page-tenencia-detail .detail-layout-wide {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
  }

  .page-events .agenda-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }
}

/* El banner usa todo el ancho disponible del mismo columnado / card lateral. */
.page-events .agenda-side-panel-event,
.page-event-detail .event-detail-recommended-card,
.page-profile-detail .compact-recommended-card,
.page-tenencia-detail .tenencia-recommended-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  justify-self: stretch;
  align-self: stretch;
  aspect-ratio: 11 / 14;
  min-height: 540px !important;
}

.page-events .agenda-side-panel-event .agenda-side-panel-copy,
.page-detail .event-detail-recommended-card .agenda-side-panel-copy {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .82rem;
  padding: .72rem .72rem .98rem;
}

.page-events .agenda-side-panel-event .agenda-side-panel-top,
.page-detail .event-detail-recommended-card .agenda-side-panel-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.page-events .agenda-side-panel-event .eyebrow,
.page-detail .event-detail-recommended-card .eyebrow {
  margin: 0;
  padding: .25rem .56rem;
  font-size: .60rem;
  letter-spacing: .085em;
  border-radius: 999px;
}

.page-events .agenda-side-panel-event .agenda-side-panel-body,
.page-detail .event-detail-recommended-card .agenda-side-panel-body,
.page-profile-detail .compact-recommended-card .agenda-side-panel-body,
.page-tenencia-detail .tenencia-recommended-card .agenda-side-panel-body {
  margin-top: auto;
  padding: 1rem;
  gap: .6rem;
  border-radius: 20px;
}

.page-events .agenda-side-panel-event h2,
.page-detail .event-detail-recommended-card h2,
.page-profile-detail .compact-recommended-card h2,
.page-tenencia-detail .tenencia-recommended-card h2 {
  font-size: clamp(1.3rem, 2vw, 1.62rem);
  line-height: 1.03;
}

.page-events .agenda-side-panel-event .event-date,
.page-events .agenda-side-panel-event .event-location,
.page-detail .event-detail-recommended-card .event-date,
.page-detail .event-detail-recommended-card .event-location,
.page-profile-detail .compact-recommended-card .event-date,
.page-profile-detail .compact-recommended-card .event-location,
.page-tenencia-detail .tenencia-recommended-card .event-date,
.page-tenencia-detail .tenencia-recommended-card .event-location {
  font-size: .74rem;
}

.page-events .agenda-side-panel-event p:not(.eyebrow):not(.event-date):not(.event-location),
.page-detail .event-detail-recommended-card p:not(.eyebrow):not(.event-date):not(.event-location),
.page-profile-detail .compact-recommended-card p:not(.eyebrow):not(.event-date):not(.event-location),
.page-tenencia-detail .tenencia-recommended-card p:not(.eyebrow):not(.event-date):not(.event-location) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-events .agenda-side-panel-event .button,
.page-detail .event-detail-recommended-card .button,
.page-profile-detail .compact-recommended-card .button,
.page-tenencia-detail .tenencia-recommended-card .button {
  width: 100%;
  margin-top: .18rem;
}

/* Móvil / tablet: sigue ancho completo y mantiene el bloque de texto abajo. */
@media (max-width: 979px) {
  .page-events .agenda-side-panel-event,
  .page-event-detail .event-detail-recommended-card,
  .page-profile-detail .compact-recommended-card,
  .page-tenencia-detail .tenencia-recommended-card {
    aspect-ratio: auto;
    min-height: 430px !important;
  }
}