/* ===========================================================
   Events Manager – Card Layout  (charcoal version 2)
   Base: v1.3 (punchier hierarchy) with:
     • Charcoal card background (#1b1d21)
     • Blue vertical divider removed
     • Calendar & date badge text forced to white   ★ NEW
   Simply enqueue or paste entire file.
   =========================================================== */

/* ---------- Colour variables ---------- */
:root{
  --clr-bg-card:   #1b1d21;     /* charcoal gray */
  --clr-accent-blue:#1a7dff;    /* electric blue */
  --clr-accent-lime:#d4ff4a;    /* neon-lime border */
  --clr-text-light:#ffffff;
  --clr-text-muted:#c1c1c1;
}

/* ---------- Card shell ---------- */
.event-card{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  background:var(--clr-bg-card);
  border:2px solid var(--clr-accent-lime);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.event-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 32px rgba(0,0,0,.55);
  animation:borderGlow 2s ease infinite;
}

/* Animated lime glow (hover) */
@keyframes borderGlow{
  0%,100%{ box-shadow:0 0 0 rgba(212,255,74,0); }
  50%    { box-shadow:0 0 10px rgba(212,255,74,.4); }
}

/* ----- Remove blue divider ----- */
.event-card::before{ display:none !important; }

/* ---------- Left image / placeholder column ---------- */
.em-item-image{ flex:0 0 260px; position:relative; }
.em-item-image img{
  width:100%; height:100%; object-fit:cover;
  border-right:none !important;
}

/* Placeholder behind calendar */
.em-item-image-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05);
}

/* ★ FORCE calendar icon strokes to white – keep interior clear */
.em-item-image-placeholder .em-icon,
.em-item-image-placeholder svg,
.em-item-image-placeholder svg *{
  stroke:#ffffff !important;
  color:#ffffff !important;
  fill:none          !important;   /* transparent centre */
  opacity:1          !important;
}

/* ---------- Date badge ---------- */
.date-badge{
  position:absolute; bottom:1.25rem; left:1.25rem;
  width:70px; height:70px;
  background:var(--clr-accent-blue);
  color:var(--clr-text-light);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
/* ★ Text inside badge in white */
.date-badge .day,
.date-badge .month{
  color:#ffffff !important;
}
.date-badge .day{   font-size:1.8rem; font-weight:700; line-height:1; }
.date-badge .month{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; margin-top:.15rem; }

/* ---------- Info column ---------- */
.em-item-info{
  flex:1 1 340px;
  padding:2rem 2.5rem 2rem 2rem;
  display:flex; flex-direction:column; gap:1.2rem;
  color:var(--clr-text-light);
}

/* Event title */
.em-item-title{
  margin:0;
  font-size:1.9rem;
  line-height:1.2;
  font-family:"Montserrat",sans-serif;
  color:var(--clr-accent-blue);
  letter-spacing:.01em;
}

/* Meta grid */
.em-item-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.65rem 1.4rem;
  font-size:1rem;
}
.em-item-meta-line{ display:flex; align-items:center; gap:.45rem; }
.em-item-meta-line i,
.em-item-meta-line .em-icon{
  color:var(--clr-accent-blue);
  font-size:1rem;
}

/* Description */
.em-item-desc{
  font-size:1rem;
  line-height:1.55;
  color:var(--clr-text-muted);
  max-width:650px;
}

/* ---------- Buttons ---------- */
.em-item-actions{
  margin-top:auto;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.btn{
  --btn-clr:var(--clr-accent-blue);
  background:var(--btn-clr);
  color:var(--clr-text-light) !important;
  padding:.7rem 1.6rem;
  font-weight:600;
  font-size:1rem;
  border-radius:8px;
  text-decoration:none;
  transition:filter .2s ease, transform .2s ease;
}
.btn:hover{ filter:brightness(1.15); transform:translateY(-2px); }
.btn.book{ --btn-clr:#e33636; }
.btn.more{
  background:#26292e;
  border:1px solid rgba(255,255,255,.18);
}
.btn.more:hover{ background:#2e3137; }

/* ---------- Cancelled notice ---------- */
.em-event-cancelled{
  border-left:4px solid #e33636;
  padding-left:.6rem;
  color:var(--clr-text-light);
  font-size:.9rem;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:700px){
  .event-card{ flex-direction:column; }
  .em-item-image{ flex:auto; max-height:220px; }
  .em-item-info{ padding:1.5rem; }
  .date-badge{ bottom:1rem; left:1rem; width:60px; height:60px; }
}
/* restore full opacity + force icon white */
.event-card .em-item-image-placeholder{
    opacity:1 !important;
}
.event-card .em-item-image-placeholder::before{
    color:#fff !important;   /* font-icon calendar */
    stroke:#fff !important;  /* inline-SVG calendar */
}
.event-card .date-badge .day,
.event-card .date-badge .month{
    color:#fff !important;
}
/* ── centre the blue date square inside the calendar icon ───────── */

/* 1. Make the placeholder act as a centring flex-box */
.event-card .em-item-image.has-placeholder{
    display:flex;                 /* let us use flex centring        */
    align-items:center;           /* vertical centre                 */
    justify-content:center;       /* horizontal centre               */
}

/* 2. Put the badge dead-centre, above the icon lines */
.event-card .em-item-image.has-placeholder .date-badge{
    position:relative;            /* relative to flex box now        */
    top:auto;  left:auto;         /* reset the old bottom/left       */
    bottom:auto;                  /*                                  */
    transform:none;               /* no extra offset needed          */
    z-index:2;                    /* sits above white icon strokes   */
}

/* 3. Mobile size rule you already had still applies */
@media (max-width:700px){
  .event-card .em-item-image.has-placeholder .date-badge{
       width:60px; height:60px;   /* keep your smaller badge size    */
  }
}
/* ===== PDF “card” look ============================== */
.pdf-grid {
  display: grid;
  gap: 2rem;
  /* 1–3 columns depending on screen width */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* each File block ➜ card */
.pdf-grid .wp-block-file {
  position: relative;
  background: #1b1d21;                   /* dark card */
  border: 2px solid #1a7dff;             /* electric-blue edge */
  border-radius: 14px;
  padding: 1.25rem 1rem 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pdf-grid .wp-block-file:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* tidy up file name link so it acts like a heading */
.pdf-grid .wp-block-file > a:not(.wp-block-file__button){
  display:block;
  font-weight:600;
  font-size:1.05rem;
  color:#ffffff;
  margin-bottom:.75rem;
  text-decoration:none;
  text-align:center;
  word-break:break-word;
}

/* make the Download button look like a real button */
.pdf-grid .wp-block-file__button{
  display:inline-block;
  margin-top:1rem;
  background: linear-gradient(135deg,#1a7dff 0%,#0d47a1 100%);
  color:#fff;
  padding:.55em 1.4em;
  font-weight:600;
  border-radius: 6px;
  text-decoration:none;
  transition: background .25s ease;
}
.pdf-grid .wp-block-file__button:hover{
  background: linear-gradient(135deg,#0d47a1 0%,#1a7dff 100%);
}

/* ===== Embed tweaks ================================ */
/* keep the PDF visible but shorter; expand on hover   */
.pdf-grid .wp-block-file object{
  width:100%!important;
  height:350px;                          /* default height */
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset;
  transition: height .35s ease;
}
@media (min-width:768px){
  /* give desktop users a taller preview */
  .pdf-grid .wp-block-file:hover object{height:550px;}
}

/* ===== Dark-on-light pages? Flip colours quickly === */
body.light-scheme .pdf-grid .wp-block-file{
  background:#ffffff;
  border-color:#1b1d21;
  color:#1b1d21;
}
body.light-scheme .pdf-grid .wp-block-file > a:not(.wp-block-file__button){
  color:#1b1d21;
}