/* Sprint 013: dense title-first calendar, responsive event drawer, and first-open map reliability. */

/*
 * The public calendar is now a sequence of full-width date bands rather than
 * equal-height three-column day cards. Busy dates can grow independently, so
 * one crowded date no longer creates large blank areas beneath neighboring days.
 */
.poster-grid.poster-grid-dense {
  display: block;
  padding: 0 34px 78px;
}

.day-band {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 0;
  padding: 14px 0 16px;
  border-top: 3px solid var(--ink);
  position: relative;
}

.day-band::before {
  top: -6px;
  right: 0;
  width: 74px;
  height: 7px;
}

.day-band-header {
  margin: 0;
  padding: 2px 22px 0 0;
  align-items: flex-start;
}

.day-band .day-number {
  font-size: clamp(4.4rem, 7vw, 7.2rem);
  line-height: .72;
}

.day-band .day-meta {
  padding-top: 3px;
  font-size: .66rem;
}

.day-band-events {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  border-left: 1px solid var(--line);
}

.event-listing-compact {
  min-width: 0;
  margin: 0;
  padding: 11px 14px 13px;
  border: 0;
  border-right: 1px solid rgba(17, 19, 24, .28);
  border-bottom: 1px solid rgba(17, 19, 24, .28);
}

.event-listing-compact:first-child { padding-top: 11px; }

.event-title-row-compact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.event-title-row-compact h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.55vw, 1.48rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.018em;
  text-transform: uppercase;
}

.event-title-row-compact h3 a {
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 140ms ease;
}

.event-title-row-compact h3 a:hover,
.event-title-row-compact h3 a:focus-visible { background-size: 100% 2px; }

.event-compact-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.event-compact-meta .event-time {
  float: none;
  margin: 0 4px 0 0;
  font-size: .61rem;
  line-height: 1;
  white-space: nowrap;
}

.event-listing-compact .event-add-trigger,
.event-listing-compact .event-correction-trigger {
  width: 25px;
  height: 25px;
  min-width: 25px;
  flex-basis: 25px;
  border-width: 1.5px;
}

.event-listing-compact .event-add-trigger {
  font-size: 1.25rem;
}

.event-listing-compact .event-correction-trigger {
  font-size: .78rem;
}

/* The main feed is title-first. Descriptions remain complete in event details. */
.event-listing-compact .event-short,
.event-listing-compact .event-preview,
.event-listing-compact .event-detail-arrow { display: none !important; }

/*
 * Event details remain a right-side sheet on roomy displays. On tablet/mobile,
 * use the same full-screen overlay behavior as Feedback so the calendar does
 * not remain squeezed behind a narrow detail column.
 */
.event-drawer {
  width: min(640px, 92vw);
  max-width: 640px;
}

@media (max-width: 1100px) {
  .day-band-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .event-drawer {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    border-left: 0;
    box-shadow: none;
    transform: translateX(105%);
  }

  .event-drawer.is-open { transform: translateX(0); }
  .event-drawer-content { min-height: 100dvh; padding: 70px 30px 64px; }
  .event-drawer-close { top: 14px; margin: 14px 16px 0 0; }
}

@media (max-width: 720px) {
  .poster-grid.poster-grid-dense { padding: 0 18px 56px; }
  .calendar-hero { padding-left: 18px; padding-right: 18px; }

  .day-band {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 11px 0 13px;
  }

  .day-band-header {
    display: grid;
    gap: 2px;
    padding-right: 10px;
  }

  .day-band .day-number {
    font-size: 4.1rem;
    line-height: .72;
  }

  .day-band .day-meta {
    padding: 0;
    font-size: .58rem;
  }

  .day-band-events {
    grid-template-columns: 1fr;
  }

  .event-listing-compact {
    padding: 10px 8px 11px 12px;
    border-right: 0;
  }

  .event-title-row-compact h3 { font-size: 1.18rem; }
  .event-compact-meta .event-time { font-size: .58rem; }

  .event-drawer-content { padding: 66px 20px 54px; }
  .event-panel-title { font-size: clamp(2.6rem, 14vw, 4.5rem); }
  .event-detail-content.is-panel .detail-columns { margin-top: 34px; }
  .event-location-map { height: min(240px, 34dvh); }
}

@media (max-width: 430px) {
  .day-band {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .day-band .day-number { font-size: 3.35rem; }
  .event-title-row-compact { gap: 6px; }
  .event-title-row-compact h3 { font-size: 1.05rem; }
  .event-listing-compact .event-add-trigger,
  .event-listing-compact .event-correction-trigger {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-basis: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-title-row-compact h3 a { transition: none; }
}