/* LewesLive calendar urgent UX correction — 2026-09-09
   The certified feed currently has strong event coverage but no usable event imagery.
   This override makes the calendar deliberately date-led and text-first instead of
   rendering large repetitive placeholder panels. It can coexist with future real images. */

.ll-calendar-page .ll-page-hero{padding-top:34px;padding-bottom:44px}
.ll-calendar-page .ll-page-hero h1{font-size:clamp(40px,6.5vw,70px)}
.ll-calendar-app{max-width:1180px}

/* Do not manufacture a giant 'featured' placeholder when the feed has no image. */
.ll-feature-event:has(.ll-feature-event__media.is-fallback){display:none}
.ll-calendar-feature:has(.ll-feature-event__media.is-fallback){margin:0}

/* A practical agenda rather than three columns of identical blank artwork. */
.ll-calendar-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ll-event-card{border-radius:18px;box-shadow:0 5px 18px rgba(23,32,28,.05)}
.ll-event-card:hover{transform:none;box-shadow:0 8px 24px rgba(23,32,28,.08)}

/* Real promotional photography still gets a proper image area. */
.ll-event-card__media:not(.is-fallback){aspect-ratio:16/8.5}

/* No image: turn the old placeholder into a compact date/category masthead. */
.ll-event-card__media.is-fallback{aspect-ratio:auto;min-height:78px;background:linear-gradient(135deg,#e7eee9,#f4ebdc)}
.ll-event-card__media.is-fallback:before{content:none}
.ll-event-card__media.is-fallback .ll-event-card__date{top:10px;left:12px;min-width:52px;padding:6px 7px;border-radius:12px;box-shadow:none;border:1px solid rgba(23,63,51,.12)}
.ll-event-card__media.is-fallback .ll-event-card__category{top:18px;right:12px;background:#173f33}

.ll-event-card__body{gap:6px;padding:14px 15px 15px}
.ll-event-card__time{font-size:11px;letter-spacing:.025em}
.ll-event-card h3{font-size:20px;line-height:1.12}
.ll-event-card__venue{font-size:12.5px}
.ll-event-card__summary{font-size:13.5px;line-height:1.42;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ll-event-source{padding-top:8px}
.ll-event-actions{margin-top:9px}
.ll-event-actions .ll-btn{min-height:35px;padding:6px 11px}

/* Make the important filters prominent but less bulky. */
.ll-calendar-controls{top:66px;border-radius:16px;padding:7px}
.ll-calendar-field input,.ll-calendar-field select{min-height:41px}
.ll-calendar-dashboard{margin-bottom:14px}
.ll-calendar-dashboard h2{font-size:clamp(28px,3.6vw,42px)}
.ll-calendar-notice{margin-bottom:18px}

@media (max-width:820px){
  .ll-calendar-cards{grid-template-columns:1fr}
  .ll-calendar-controls{position:relative;top:auto;grid-template-columns:1fr 1fr}
  .ll-calendar-field:first-child,.ll-calendar-view-toggle{grid-column:1/-1}
  .ll-calendar-stats{justify-content:flex-start}
  .ll-calendar-dashboard{grid-template-columns:1fr}
  .ll-event-card__summary{-webkit-line-clamp:2}
}

@media (max-width:520px){
  .ll-calendar-app{padding-left:10px;padding-right:10px}
  .ll-calendar-controls{grid-template-columns:1fr;gap:6px}
  .ll-calendar-field:first-child,.ll-calendar-view-toggle{grid-column:auto}
  .ll-calendar-view-toggle button{flex:1}
  .ll-calendar-notice{grid-template-columns:auto 1fr}
  .ll-calendar-updated{grid-column:2;white-space:normal}
  .ll-calendar-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .ll-calendar-stat{min-width:0;padding:8px}
  .ll-calendar-section-head{align-items:start}
  .ll-event-actions{display:grid;grid-template-columns:1fr 1fr}
}