/* =====================================================================
   Drow Events Manager — Frontend styles (v3.6)
   Changes in this revision (frontend-only, backend/admin untouched):
   1) FIX: a long event title was stretching that one card wider than
      its siblings (the card only had min-width, no max-width/fixed
      basis, and the title's flex-item ancestor had no min-width:0, so
      it refused to wrap and pushed the box out instead). Cards are
      now fixed-width (flex:0 0 <calc> + matching max-width) at every
      breakpoint, and the title can wrap/clamp inside that fixed width.
   2) FIX: the title area now reserves height for exactly 2 lines
      (min-height) regardless of whether it needs 1 or 2, so a short
      title and a long title produce identically laid-out, identically
      tall cards in the same row.
   3) Nav arrows reset from scratch (all:unset) so the theme's global
      <button> styles can no longer inflate them into ovals; absolutely
      positioned over the track edges instead of sitting in the flex row.
   4) Every accent colour is #D97706 (icon badges, accent line, active
      dot, nav hover/active state, day-of-week badges).
   5) :hover effects (arrows, card lift) are gated behind
      @media(hover:hover) so tapping on a touchscreen doesn't leave
      them permanently "stuck" in the hover state.
   6) Mobile uses the SAME design as desktop — same 2-column date/time
      grid, same fonts, same icon and image sizes. Only the layout
      mechanics change per breakpoint (cards per view, arrow gutter).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Inter:wght@400;600&display=swap');

.dem-carousel-wrap{
position:relative;
max-width:1280px;
margin:0 auto;
padding:8px 46px 40px;
box-sizing:border-box;
}

/* ---------- Nav arrows ----------
   Reset first (kills any inherited theme button styling), then build
   a small fixed-size circle, positioned over the track edges. */
.dem-nav{
all:unset;
box-sizing:border-box;
position:absolute;
top:50%;
transform:translateY(-50%);
width:32px;
height:32px;
border-radius:50%;
background:rgba(15,23,42,.7);
border:1px solid rgba(217,119,6,.45);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:5;
line-height:0;
transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.dem-nav svg{display:block;width:14px;height:14px;color:#ffffff;pointer-events:none;}
.dem-nav.dem-prev{left:0;}
.dem-nav.dem-next{right:0;}
/* hover:hover guard = only apply hover styling on devices that truly
   support hover (mouse/trackpad). Without this, tapping an arrow on a
   touchscreen leaves it "stuck" orange since touch has no hover-out event. */
@media(hover:hover){
.dem-nav:hover{background:#D97706;border-color:#D97706;transform:translateY(-50%) scale(1.08);}
}
.dem-nav:active{background:#D97706;border-color:#D97706;}
.dem-nav:focus-visible{outline:2px solid #D97706;outline-offset:2px;}

/* ---------- Track ---------- */
.dem-fixture-grid{
display:flex!important;
gap:20px;
overflow-x:auto;
scroll-behavior:smooth;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch; /* native touch swipe */
-ms-overflow-style:none;
scrollbar-width:none;
margin:0 auto;
padding:4px;
box-sizing:border-box;
}
.dem-fixture-grid::-webkit-scrollbar{display:none}
.dem-fixture-grid.few-cards{justify-content:center;overflow:visible}

/* ---------- Card ---------- */
.dem-fixture-card{
scroll-snap-align:start;
/* FIX: previously only min-width was set, so a long title (which
   couldn't wrap because its flex-item ancestor had no min-width:0)
   would stretch the card past this value, making cards uneven width.
   flex:0 0 <calc> fixes the box at exactly this size — it can no
   longer grow from content, only the text wraps/clamps inside it. */
flex:0 0 calc((100% - (var(--dem-desktop-cols,3) - 1) * 20px) / var(--dem-desktop-cols,3));
max-width:calc((100% - (var(--dem-desktop-cols,3) - 1) * 20px) / var(--dem-desktop-cols,3));
overflow:hidden;
padding:22px;
border-radius:18px;
border:1px solid transparent;
background-color:#17233A;
background-image:linear-gradient(180deg,var(--dem-card-bg,#17233A),#101827);
box-shadow:0 8px 24px rgba(0,0,0,.35);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
display:flex;
flex-direction:column;
box-sizing:border-box;
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
@media(hover:hover){
.dem-fixture-card:hover{
transform:translateY(-6px) scale(1.015);
box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(217,119,6,.5);
border-color:rgba(217,119,6,.5);
}
.dem-fixture-card:hover .dem-fixture-image img{transform:scale(1.06);}
}

/* ---------- Day-of-week badges (shown before/above the event name) ---------- */
.dem-day-badges{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:10px;
}
.dem-day-badge{
background:#D97706;
color:#ffffff;
font-family:'Inter',sans-serif;
font-size:11px;
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
padding:4px 10px;
border-radius:20px;
line-height:1.4;
}

/* ---------- Top row: title (left) + image (right) ---------- */
.dem-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.dem-event-title{
font-family:'Poppins',sans-serif;
font-weight:700;
font-size:24px;
line-height:1.25;
color:var(--dem-title-color,#ffffff);
margin:0;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
/* FIX: flex items default to min-width:auto, which stops long text
   from wrapping and instead forces this box (and its ancestors) to
   grow — that's what was stretching the whole card. min-width:0 lets
   it wrap/clamp inside the fixed card width instead. */
min-width:0;
flex:1 1 auto;
/* Reserve space for exactly 2 lines regardless of whether the title
   needs 1 or 2 — keeps every card's accent line / info grid starting
   at the same vertical position, so all cards end up the same height. */
min-height:calc(1.25em * 2);
}
.dem-fixture-image{
width:var(--dem-img-w,90px);
height:var(--dem-img-h,90px);
flex-shrink:0;
border-radius:14px;
overflow:hidden;
}
.dem-fixture-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:14px;
display:block;
transition:transform .35s ease;
}

/* ---------- Accent line ---------- */
.dem-accent-line{
height:3px;
width:56px;
border-radius:2px;
background:#D97706;
margin:14px 0 16px;
flex-shrink:0;
}

/* ---------- Info grid (2 columns x 2 rows on tablet/desktop) ---------- */
.dem-fixture-content{display:flex;flex-direction:column;gap:14px;margin-top:auto;}
.dem-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dem-info{display:flex;align-items:center;gap:10px;min-width:0;}
.dem-info-icon{
width:32px;
height:32px;
border-radius:50%;
background:#D97706;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.dem-info-icon svg{display:block;}
.dem-info-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.dem-info-label{
font-family:'Inter',sans-serif;
font-size:11px;
font-weight:600;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--dem-text-color,#94A3B8);
white-space:nowrap;
}
.dem-info-value{
font-family:'Inter',sans-serif;
font-weight:600;
font-size:16px;
color:#ffffff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* ---------- Pagination dots ---------- */
.dem-dots{
position:absolute;
bottom:0;
left:0;
right:0;
display:flex;
justify-content:center;
gap:8px;
}
.dem-dots .dem-dot{
all:unset;
box-sizing:border-box;
width:8px;
height:8px;
border-radius:50%;
background:rgba(148,163,184,.4);
cursor:pointer;
transition:background .25s ease,transform .25s ease;
}
.dem-dots .dem-dot.is-active{background:#D97706;transform:scale(1.25);}

/* ---------- Responsive: Desktop/Laptop 3, Tablet 2, Mobile 1 ----------
   IMPORTANT: from here down we only change LAYOUT (how many cards fit,
   how much side gutter the arrows need). We deliberately do NOT change
   fonts, icon sizes, image size, or the 2-column info grid — the mobile
   card should look like the exact same design as desktop, just at a
   width that fits one card per screen instead of three. */
@media(max-width:1199px){
.dem-fixture-card{flex-basis:calc((100% - (var(--dem-desktop-cols,3) - 1) * 20px) / var(--dem-desktop-cols,3));max-width:calc((100% - (var(--dem-desktop-cols,3) - 1) * 20px) / var(--dem-desktop-cols,3));}
}
@media(max-width:991px){
.dem-carousel-wrap{padding:8px 40px 38px;}
.dem-fixture-card{flex-basis:calc((100% - 20px) / 2);max-width:calc((100% - 20px) / 2);}
}
@media(max-width:767px){
.dem-carousel-wrap{padding:6px 16px 34px;}
.dem-fixture-grid{gap:14px;}
.dem-fixture-card{min-width:100%;max-width:100%;}
.dem-nav{width:26px;height:26px;}
.dem-nav svg{width:11px;height:11px;}
}
@media(max-width:400px){
.dem-carousel-wrap{padding:4px 12px 32px;}
.dem-nav{width:24px;height:24px;}
.dem-nav svg{width:10px;height:10px;}
}

/* Few-card centering, kept from the original plugin behaviour.
   max-width added alongside min-width so a long title can't stretch
   this narrower "few cards" layout wider either. */
.dem-fixture-grid.few-cards .dem-fixture-card{min-width:320px;max-width:320px;flex-grow:0;}
@media(max-width:480px){
.dem-fixture-grid.few-cards .dem-fixture-card{min-width:100%;max-width:100%;}
}