/* ==========================================================================
   BLACKMURAL MEDIA — EVENTS HUB
   components.css — telemetry strip, status badges, buttons, posters, event cards

   The signature element is the "telemetry strip" — a monospaced,
   tick-marked data readout that carries date/venue the way a pit-wall
   readout carries lap data. It appears on every card and on the detail
   page, tying listings back to Blackmural's
   motorsport-derived visual DNA without introducing a new identity.
   ========================================================================== */

/* -------------------------------------------------------------- telemetry strip (signature element) */
.telemetry{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;
  color:var(--muted);letter-spacing:.02em;
  padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:14px 0;
}
.telemetry b{color:var(--paper);font-weight:500;}
.telemetry .tick{color:var(--gold);}

/* -------------------------------------------------------------- status badge */
.status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;
  padding:4px 9px;border:1px solid var(--line-strong);color:var(--muted);
}
.status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--muted);}
.status.s-open::before,.status.s-upcoming::before{background:var(--ok);}
.status.s-open,.status.s-upcoming{color:var(--paper);border-color:rgba(127,174,114,.4);}
.status.s-soldout::before,.status.s-closed::before{background:var(--danger);}
.status.s-soldout,.status.s-closed{color:var(--paper);border-color:rgba(198,91,91,.4);}
.status.s-completed{color:var(--muted);}

/* -------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:.82rem;
  padding:13px 22px;border:1px solid var(--paper);color:var(--paper);
  background:none;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--paper);color:var(--void);}
.btn-gold{border-color:var(--gold);color:var(--gold);}
.btn-gold:hover{background:var(--gold);color:var(--void);}
.btn[disabled]{opacity:.35;pointer-events:none;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}
@media(max-width:520px){.btn-row .btn{flex:1;}}

/* -------------------------------------------------------------- social links
   Shared by the event detail page (the organiser's own profiles) and by the
   site footer (the placeholder set). This lives in components.css, not
   detail.css, because rsvp.php does not load detail.css — the footer is a
   shared partial, so the rules behind it have to be loaded everywhere the
   partial is, or the icons render unstyled on whichever page is the odd one
   out. 44px square is the tap target; the mark inside is 18px. */
.social-row{display:flex;gap:10px;align-items:center;margin-top:24px;flex-wrap:wrap;}
.social-row-label{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;
  color:var(--muted-2);margin-right:4px;
}
.social-btn{
  width:44px;height:44px;border:1px solid var(--line-strong);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.social-btn:hover{color:var(--gold);border-color:var(--gold);background:var(--panel);}

/* -------------------------------------------------------------- poster */
.poster{
  position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--panel);
}
.poster img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s var(--ease);}
.poster .status{position:absolute;top:14px;left:14px;background:rgba(10,10,11,.72);backdrop-filter:blur(4px);}
.poster-hover-label{
  position:absolute;inset:auto 14px 14px 14px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:.82rem;color:var(--paper);
  opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
@media(hover:hover){
  .event-card:hover .poster img{transform:scale(1.035);}
  .event-card:hover .poster-hover-label{opacity:1;transform:translateY(0);}
}

/* -------------------------------------------------------------- editorial listing (desktop) */
.listing{padding:20px 0 40px;}
.event-row{
  padding:44px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.event-row.in-view{opacity:1;transform:translateY(0);}
.event-row .grid{display:grid;gap:20px;}
@media(min-width:820px){
  .event-row .grid{grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
  .event-row:nth-of-type(even) .grid{direction:rtl;}
  .event-row:nth-of-type(even) .grid > *{direction:ltr;}
  .event-row .poster{max-width:560px;}
}
.event-info h3{
  font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:-.01em;margin:10px 0 0;line-height:1.05;
}
.event-info .desc{color:var(--muted);margin-top:16px;max-width:48ch;font-size:.98rem;}
.event-info .top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}

/* -------------------------------------------------------------- mobile feed */
@media(max-width:819.98px){
  .listing{padding:0;}
  .event-row{padding:0;margin:0 0 22px;border-bottom:0;}
  .event-row .grid{gap:0;}
  .event-row .poster{margin:0 -24px;aspect-ratio:1/1;max-width:none;}
  .event-row .event-info{padding:14px 2px 0;}
  /* Keep the description on mobile — clamped, not hidden. Without it a card
     gave a date and a venue but never said what the event actually is. */
  .event-info .desc{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-top:10px;
    font-size:.92rem;
  }
  .event-info h3{font-size:1.3rem;}
  .telemetry{font-size:.72rem;margin:8px 0;padding:8px 0;}
  .poster-hover-label{display:none;}
  .btn-row{margin-top:14px;}
}

.empty-state{padding:60px 0;text-align:center;color:var(--muted);display:none;}
.empty-state.show{display:block;}