/* ============================================================
   ZEM Programmes Carousel Widget
   ============================================================ */

/* ===== SCOPED RESET ===== */
.zp *,.zp *::before,.zp *::after{box-sizing:border-box;margin:0;padding:0}

.zp{
  position:relative;
  width:100%;
  overflow:hidden;
  font-family:"Lato",sans-serif;
  color:var(--e-global-color-primary);
}

/* ============================================================
   TABS
   ============================================================ */
.zp-tabs{
  display:flex;
  align-items:stretch;
  padding:0 128px;
  border-bottom:1px solid rgba(35,36,37,0.08);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.zp-tabs::-webkit-scrollbar{display:none}

.zp-tab{
  flex:1;
  min-width:100px;
  padding:22px 16px;
  text-align:center;
  cursor:pointer;
  position:relative;
  transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}

.zp-tab::after{
  content:'';
  position:absolute;
  bottom:-1px;
  left:50%;
  width:0;
  height:1px;
  background:var(--e-global-color-primary);
  transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
  transform:translateX(-50%);
}

.zp-tab.on::after{width:100%}

.zp-tab span{
  font-family:"Lato",sans-serif;
  font-size:12px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--e-global-color-primary);
  opacity:0.55;
  transition:opacity 0.4s ease;
  white-space:nowrap;
  display:block;
}

.zp-tab.on{background:var(--color-zem-light-beige)}
.zp-tab.on span{opacity:1}
.zp-tab:hover span{opacity:0.8}

.zp-tab:focus-visible{
  outline:2px solid var(--e-global-color-primary);
  outline-offset:3px;
}

/* ============================================================
   STAGE (image + content)
   ============================================================ */
.zp-stage{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:min(75vh,780px);
  overflow:hidden;
}

/* --- Image column --- */
.zp-img-col{
  flex:0 0 55%;
  position:relative;
  overflow:hidden;
  background:var(--color-zem-light-beige);
}

.zp-img-holder{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94),
             transform 1.4s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change:opacity,transform;
}

.zp-img-holder.on{
  opacity:1;
  transform:scale(1);
  z-index:2;
}

.zp-img-holder.out{
  opacity:0;
  transform:scale(1.02);
  z-index:1;
}

.zp-img-holder img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}


/* --- Content column --- */
.zp-cnt-col{
  flex:0 0 45%;
  position:relative;
  display:flex;
  align-items:center;
  background:#FFFFFF;
}

.zp-cnt-inner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px 100px;
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
             transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change:opacity,transform;
}

.zp-cnt-inner.on{
  opacity:1;
  transform:translateY(0);
  z-index:2;
}

.zp-cnt-inner.out{
  opacity:0;
  transform:translateY(-20px);
  z-index:1;
}

/* Title */
.zp-title{
  font-family:"Lato",sans-serif;
  font-size:40px;
  font-weight:300;
  line-height:1.2;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--e-global-color-primary);
  margin:0 0 40px;
}

/* Description */
.zp-desc{
  font-family:"Lato",sans-serif;
  font-size:20px;
  font-weight:300;
  line-height:26px;
  letter-spacing:0;
  color:var(--e-global-color-primary);
  opacity:0.75;
  margin:0 0 56px;
  max-width:480px;
}

/* CTA */
.zp-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Lato",sans-serif;
  font-size:14px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:2.5px;
  color:#FFFFFF !important;
  background:var(--e-global-color-primary);
  text-decoration:none;
  padding:16px 40px;
  transition:background 300ms ease, opacity 300ms ease;
  align-self:flex-start;
  -webkit-tap-highlight-color:transparent;
}

.zp-cta::after,.zp-cta::before{display:none !important}

.zp-cta:hover{
  color:#FFFFFF !important;
}

/* ============================================================
   TABLET  —  769 – 1024 px
   ============================================================ */
@media(max-width:1024px){
  .zp-tabs{padding:0}
  .zp-tab{min-width:85px;padding:18px 12px}
  .zp-tab span{font-size:11px;letter-spacing:1.5px}

  .zp-stage{min-height:580px}
  .zp-img-col{flex:0 0 50%}
  .zp-cnt-col{flex:0 0 50%}


  .zp-cnt-inner{padding:48px 44px;overflow-x:auto}
  .zp-title{font-size:32px;margin:0 0 24px}
  .zp-desc{font-size:20px;margin:0 0 36px;line-height:26px}
}

/* ============================================================
   MOBILE  —  max 768 px
   ============================================================ */
@media(max-width:768px){

  .zp-tabs{
    padding:0;
    gap:0;
  }

  .zp-tab{
    flex:0 0 auto;
    min-width:auto;
    padding:16px 18px;
  }

  .zp-tab:first-child{padding-left:20px}
  .zp-tab:last-child{padding-right:20px}

  .zp-tab span{font-size:11px;letter-spacing:1.2px}

  .zp-stage{
    flex-direction:column;
    min-height:auto;
  }

  .zp-img-col{
    flex:none;
    width:100%;
    height:0;
    padding-bottom:75%;
    position:relative;
  }

  .zp-img-holder{
    position:absolute;
    inset:0;
    transition:opacity 0.5s ease, transform 0.8s ease;
  }


  .zp-cnt-col{
    flex:none;
    width:100%;
    display:block;
    position:relative;
  }

  .zp-cnt-inner{
    position:relative;
    inset:auto;
    padding:28px 20px 36px;
    transition:opacity 0.4s ease, transform 0.4s ease;
  }

  .zp-cnt-inner[hidden]{display:none!important}
  .zp-cnt-inner.out{display:none!important}

  .zp-title{font-size:24px;margin:0 0 16px}

  .zp-desc{
    font-size:18px;
    line-height:24px;
    margin:0 0 24px;
    max-width:100%;
  }

  .zp-cta{
    font-size:12px;
    letter-spacing:2px;
    padding:14px 36px;
    min-height:44px;
  }
}

/* ============================================================
   SMALL MOBILE  —  max 480 px
   ============================================================ */
@media(max-width:480px){
  .zp-tab{padding:14px 14px}
  .zp-tab:first-child{padding-left:16px}
  .zp-tab:last-child{padding-right:16px}
  .zp-tab span{font-size:10px;letter-spacing:1px}

  .zp-img-col{padding-bottom:90%}

  .zp-cnt-inner{padding:24px 16px 32px}
  .zp-title{font-size:24px;margin:0 0 12px}
  .zp-desc{font-size:18px;line-height:24px;margin:0 0 20px}
}

/* ============================================================
   LANDSCAPE MOBILE
   ============================================================ */
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  .zp-tabs{padding:0 24px}
  .zp-tab{padding:12px 10px}
  .zp-tab span{font-size:10px}

  .zp-stage{
    flex-direction:row;
    min-height:auto;
    height:calc(100vh - 100px);
    max-height:420px;
  }

  .zp-img-col{flex:0 0 45%;width:auto;height:100%;padding-bottom:0}
  .zp-cnt-col{flex:0 0 55%;display:flex}
  .zp-cnt-inner{position:absolute;inset:0;padding:20px 24px}
  .zp-cnt-inner.out{display:flex!important}
  .zp-cnt-inner[hidden]{display:none!important}

  .zp-title{font-size:20px;margin:0 0 10px}
  .zp-desc{font-size:12px;line-height:1.5;margin:0 0 14px}
  .zp-cta{font-size:10px;padding:12px 28px}
}

/* PRINT */
@media print{
  .zp-tabs{display:none}
  .zp-img-holder,.zp-cnt-inner{opacity:1!important;transform:none!important;position:relative!important;display:block!important}
}