/* EventPie event card artwork layout
   Landscape event artwork sits in the upper-left rather than being forced into a poster strip. */

@media (min-width: 641px) {
  .event-card {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
  }

  .event-image {
    width: 250px;
    height: 150px;
    min-height: 0;
    margin: 16px 0 0 16px;
    border-radius: 14px;
    overflow: hidden;
    background: #10111f;
    border: 1px solid rgba(255,255,255,.07);
    align-self: start;
  }

  .event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .event-image::after { display: none; }

  .event-body {
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .event-card h3 { font-size: 21px; }

  .why-row,
  .rank-note,
  .card-cta { grid-column: 1 / -1; }

  .card-cta { margin-top: .75rem; }
}

@media (min-width: 900px) {
  .app-shell { max-width: 920px; }
  .event-card { grid-template-columns: 280px minmax(0, 1fr); }
  .event-image { width: 280px; height: 168px; }
}

/* Detail banner: keep the artwork visible but deliberately subdued wherever
   text overlaps it. This avoids relying on the source image for contrast. */
.detail-image {
  height: 270px;
  background: #111322;
}

.detail-image img {
  object-fit: cover;
  object-position: center;
  filter: brightness(.52) saturate(.82);
}

.detail-overlay {
  background:
    linear-gradient(to bottom, rgba(10,11,24,.12) 0%, rgba(10,11,24,.30) 40%, rgba(15,16,32,.96) 100%),
    linear-gradient(to right, rgba(15,16,32,.40), rgba(15,16,32,.08) 72%);
}

.detail-info {
  margin-top: -112px;
  padding: 0 20px 24px;
  text-shadow: 0 2px 12px rgba(0,0,0,.72);
}

.detail-info h1 {
  max-width: 760px;
  line-height: 1.04;
}

.detail-info p,
.detail-info .eyebrow,
.detail-info .detail-badges {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .event-card { display: block; }

  .event-image {
    width: calc(100% - 28px);
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
    margin: 14px 14px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #10111f;
  }

  .event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .event-image::after { display: none; }

  /* On small screens separate the information from the artwork entirely.
     This is more robust than placing several lines over a busy image. */
  .detail-image { height: 210px; }
  .detail-image img { filter: brightness(.72) saturate(.9); }
  .detail-overlay { background: linear-gradient(to bottom, transparent 55%, rgba(15,16,32,.55)); }
  .detail-info {
    margin-top: 0;
    padding: 18px 18px 22px;
    background: #1c1d31;
    text-shadow: none;
  }
  .detail-info h1 { font-size: 34px; }
}