/* =========================================================================
   FUN — Entertainment Cards widget
   /wp-content/themes/<child>/assets/css/fun-ent-cards.css

   Self-contained. Every colour/size here is a sensible default; the widget's
   Elementor Style controls override via inline selectors. Class prefix "fec".
   Falls back to a small token set so it works even if the theme's :root
   variables are not present on the page.
   ====================================================================== */

.fec{
  --fec-radius: 14px;
  --fec-ink: #16212C;
  --fec-white: #fff;
  position:relative;
}

/* ---------------------------------------------------------------- GRID */
.fec-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);   /* overridden by the Columns control */
  gap:20px;
}

/* ------------------------------------------------------------- CARD */
.fec-card{
  position:relative;
  height:420px;                            /* overridden by Card height */
  border-radius:var(--fec-radius);
  overflow:hidden;
  background:#0D3767;
  isolation:isolate;
}

.fec-card__media{ position:absolute; inset:0; z-index:1; }
.fec-card__media::after{
  content:""; position:absolute; inset:0;
  background:rgba(6,26,50,.15);            /* Image overlay control */
}
.fec-card__img{
  width:100%; height:100% !important; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.fec-card:hover .fec-card__img{ transform:scale(1.05); }
.fec-card__ph{
  position:absolute; inset:0;
  background:linear-gradient(150deg,#14508F,#2E6BAE);
}

/* caption bar — always visible, bottom */
.fec-card__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 22px;
  background:#8CB18E;                       /* Bar colour control */
  transition:opacity .3s ease, transform .3s ease;
}
.fec-card__title{ margin:0; font-size:22px; line-height:1.2; }
.fec-card__title a{ color:inherit; text-decoration:none; }

/* hover/tap panel — expands UP from the bottom, FULL HEIGHT, over the image */
.fec-card__panel{
  position:absolute; inset:0; z-index:3;         /* full box */
  background:#8CB18E;                             /* Panel colour control */
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.fec-card__panel-inner{
  display:flex; flex-direction:column;
  height:100%;
  padding:26px;                                   /* Panel padding control */
}
.fec-card__panel-top{ flex:0 0 auto; border-bottom: 1px solid #cdcaca; }
.fec-card__panel-foot{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}         /* pins tags + buttons to the bottom */

/* reveal on hover (desktop) or when JS adds .is-open (touch tap) */
@media (hover:hover){
  .fec-card:hover .fec-card__panel{ transform:translateY(0); }
  .fec-card:hover .fec-card__bar{ opacity:0; transform:translateY(100%); }
}
.fec-card.is-open .fec-card__panel{ transform:translateY(0); }
.fec-card.is-open .fec-card__bar{ opacity:0; transform:translateY(100%); }

.fec-card__panel-title{
  margin:0 0 12px; font-size:26px; line-height:1.15; color:#000;
}
.fec-card__desc{
  margin:0 0 18px; font-size:14.5px; line-height:1.55; color:var(--fec-ink);
}
.fec-card__more{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:700; color:var(--fec-ink); text-decoration:none;
  padding-bottom:22px;     /* the divider under the top block */
}
.fec-card__more svg{ width:20px; height:12px; transition:transform .2s ease; }
.fec-card__more:hover svg{ transform:translateX(4px); }

/* tags */
.fec-card__tags{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding-top:18px; }
.fec-card__tag{
  padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.35); color:var(--fec-ink);
  font-size:11.5px; font-weight:600;
}

/* buttons */
.fec-card__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.fec-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:0 16px;
  border:2px solid transparent; border-radius:8px;
  font-size:14px; font-weight:700; line-height:1; cursor:pointer;
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.fec-btn--primary{ background:#F47B20; color:#fff; }
.fec-btn--primary.is-added{ background:#0D3767; color:#fff; }
.fec-btn--ghost{ background:transparent; color:#16212C; border-color:#16212C; }
.fec-btn--ghost:hover{ background:rgba(0,0,0,.06); }

/* ---------------------------------------------------------- CAROUSEL */
.fec--carousel .swiper{
  --fec-gap:20px;
  overflow:visible;            /* let slides bleed past the right edge */
}
.fec--carousel .fec-card{ height:420px; }

/* Full-width break-out: the track starts at the container's left edge
   (slidesOffsetBefore is set in JS) and overflows to the right. The widget
   wrapper is allowed to spill right without causing a page scrollbar. */
.fec--carousel.fec--fullwidth{
  /* clip only horizontal overflow at the section level via the parent;
     the wrapper itself stays visible so the peek shows */
}
.fec--carousel.fec--fullwidth .swiper{ overflow:visible; }

/* Full-width mode spills to the right; stop that from creating a horizontal
   page scrollbar. The wrapper clips its own right overflow while the visible
   swiper still shows the peek up to that clip. */
.fec--carousel.fec--fullwidth{ overflow:hidden; }
/* If you WANT the peek to bleed all the way to the screen edge with no clip,
   remove the rule above and instead add `overflow-x:hidden` to the section
   or <body> in your theme — clipping at the widget is the safe default. */

.fec-dots{ margin-top:16px; text-align:center; position:static; }
.fec-dots .swiper-pagination-bullet-active{ background:#F47B20; }

/* ------------------------------------------------------------ ARROWS */
.fec-arrows{ display:inline-flex; gap:12px; }

.fec-arrow{
  width:48px; height:48px; flex:0 0 auto;
  display:grid; place-items:center;
  border:1.5px solid #16212C; border-radius:50%;
  background:transparent; color:#16212C; cursor:pointer;
  transition:background-color .18s ease, opacity .18s ease;
}
.fec-arrow svg{ width:30px; height:30px; }
.fec-arrow:hover{ background:#EAEAEA; }
.fec-arrow.swiper-button-disabled{ opacity:.4; cursor:default; }

/* positions */
.fec-arrows--top-right,
.fec-arrows--top-left{ margin-bottom:20px; }
.fec-arrows--top-right{ justify-content:flex-end; display:flex; }
.fec-arrows--top-left{ justify-content:flex-start; display:flex; }

.fec-arrows--bottom-right{ display:flex; justify-content:flex-end; margin-top:20px; }
.fec-arrows--bottom-center{ display:flex; justify-content:center; margin-top:20px; }

/* sides: absolutely over the cards */
.fec-arrows--sides{ display:contents; }
.fec-arrows--sides .fec-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  background:rgba(255,255,255,.9);
}
.fec-arrows--sides .fec-arrow--prev{ left:10px; }
.fec-arrows--sides .fec-arrow--next{ right:10px; }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:1024px){
  .fec-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .fec-grid{ grid-template-columns:1fr; }
  .fec-card__title{ font-size:19px; }
}

@media (prefers-reduced-motion:reduce){
  .fec-card__img,.fec-card__panel,.fec-card__bar{ transition:none !important; }
}