/**
 * Flip Boxes Element Styles (UPDATED for tablet up to 1024px)
 */

/* ===================================
   Base
=================================== */
.fce-flip-boxes{
  width:100%;
  overflow:hidden;
}

/* ===================================
   FORCE visibility (slider for mobile & tablet)
   - Mobile + Tablet (0 - 1024): slider
   - Desktop (1025+): grid
=================================== */
@media (min-width:1025px){
  .fce-fb-slider{ display:none !important; }
  .fce-fb-grid{ display:block !important; }
  .fce-flip-boxes{ overflow:hidden; }
}

@media (max-width:1024px){
  .fce-flip-boxes{ overflow:visible; }
  .fce-fb-grid{ display:none !important; }
  .fce-fb-slider{ display:block !important; }
  .fce-fb-slider-overflow-wrapper{ 
    display:block;
    overflow: visible;
    padding-right: 0%;
    padding-left: 0%;
  }
}

@media (max-width:767px){
  .fce-fb-slider-overflow-wrapper{
    padding-right: 20px;
  }
}

@media (min-width:1025px){
  .fce-fb-slider-overflow-wrapper{ display:none; }
}

/* ===================================
   Desktop Grid Layout
=================================== */
.fce-fb-grid{ width:100%; }

.fce-fb-g-wrapper{
  display:grid;
  grid-template-columns:repeat(2, 1fr); /* default */
  row-gap:25px;
  column-gap: 30px;
}

/* Tablet Portrait / Landscape (only if grid is ever used there) */
@media (min-width:768px) and (max-width:1024px){
  .fce-fb-g-wrapper{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* Desktop: 3 columns (1025px - 1399px) */
@media (min-width:1025px) and (max-width:1399px){
  .fce-fb-g-wrapper{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* Large Desktop: 4 columns (≥1400px) */
@media (min-width:1401px){
  .fce-fb-g-wrapper{
    grid-template-columns:repeat(4, 1fr);
  }
}

.fce-fb-box-wrapper{
  position:relative;
}

/* The “card” shell */
.fce-fb-box{
  display:flex;
  flex-direction:column;
  width:100%;
}

/* Card shadow on the whole unit */
.fce-fb-box-wrapper .fce-fb-box{
  overflow:hidden;
  padding-top: 15px;
}

/* ================================
   IMAGE-ONLY Flip Block (Grid)
   ================================ */
.fce-fb-flip{
  perspective:1000px;
  width:100%;
}
/* Keep the flip area square like your image spec */
.fce-fb-flip-inner{
  position:relative;
  width:100%;
  aspect-ratio:6 / 5;
  transform-style:preserve-3d;
  transition:transform 0.6s ease-out;
}

/* Use your image wrapper to define height */
.fce-fb-image-wrapper{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius: 8px;
  position:relative;
}

/* Dark overlay for opacity control */
.fce-fb-image-wrapper::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0, var(--image-overlay-opacity, 0));
  pointer-events:none;
  z-index:1;
}

/* FRONT and BACK are overlays inside the flip square */
.fce-fb-flip-front,
.fce-fb-flip-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* BACK is the "image back" area */
.fce-fb-flip-back{
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  padding:15px;
  border-radius: 8px;
  overflow:hidden;
}

/* Back color helpers (from ACF select values) */
/* Background Colors */
.bg-light{ background:#fff; }
.bg-orange{ background:#ff602d; }
.bg-red{ background:#eb4752; }
.bg-purple{ background:#5c57ef; }
.bg-dark_blue{ background:#3431d4; }
.bg-light_grey{ background:#333333; }
.bg-dark_grey{ background:#1F1F23; }
.bg-dark{ background:#000; }

/* Text Colors */
.text-light{ color:#fff; }
.text-orange{ color:#ff602d; }
.text-red{ color:#eb4752; }
.text-purple{ color:#5c57ef; }
.text-dark_blue{ color:#3431d4; }
.text-light_grey{ color:#333333; }
.text-dark_grey{ color:#1F1F23; }
.text-dark{ color:#000; }

/* Back icon styling (grid - desktop/tablet) */
.fce-fb-back-icon{
  display:block;
  width:auto;
  max-width:60px;
  height:auto;
  max-height:35px;
  object-fit:contain;
  position: absolute;
}

/* Back text styling */
.fce-fb-back-content{
  width:100%;
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:5px;
}
.fce-fb-back-text{
  margin:0;
  font-size:var(--fs-md);
  line-height:var(--lh-md);
  text-align:left;
  margin-top: 8%;
}

/* Custom scrollbar for back content */
.fce-fb-back-content::-webkit-scrollbar{ width:4px; }
.fce-fb-back-content::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.1);
  border-radius:2px;
}
.fce-fb-back-content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.3);
  border-radius:2px;
}
.fce-fb-back-content::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.5);
}
.bg-light .fce-fb-back-content::-webkit-scrollbar-track{
  background:rgba(0,0,0,0.05);
}
.bg-light .fce-fb-back-content::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.2);
}
.bg-light .fce-fb-back-content::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,0.4);
}

/* Desktop hover flips ONLY when hovering the IMAGE area */
@media (min-width:1025px){
  .fce-fb-flip{
    cursor:pointer;
  }
  
  /* Base state - smooth transition back to original */
  .fce-fb-flip-inner{
    transform: rotateY(0deg);
    transition: transform 0.6s ease-out;
  }
  
  /* Only flip after hovering for 300ms (prevents accidental flips) */
  .fce-fb-flip:hover .fce-fb-flip-inner{
    transform: rotateY(180deg);
    transition: transform 0.6s ease-out 0.3s;
  }
}


/* Tablet tap flips ONLY the image (JS toggles .active on flip wrapper) */
@media (min-width:768px) and (max-width:1024px){
  .fce-fb-flip{ cursor:pointer; }
  .fce-fb-flip.active .fce-fb-flip-inner{
    transform:rotateY(180deg);
  }
}

/* Image itself */
.fce-fb-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  transition:transform 0.3s ease;
  border-radius: 8px;
}

/* Desktop hover zoom */
/* @media (min-width:1025px){
  .fce-fb-flip:hover .fce-fb-image{
    transform:scale(1.05);
  }
} */

/* ===================================
   Name/Position Area (Grid) - NOT flipping
=================================== */
.fce-fb-content{
  padding:12px 18px 10px 0px;
}

.fce-fb-name{
  font-size:var(--fs-md);
  line-height:var(--lh-md);
  font-weight:800;
  color:#000;
  margin-bottom: 5px;
}

.fce-fb-position{
  margin:0;
  font-size:var(--fs-md);
  line-height:var(--lh-md);
  font-weight:400;
  color:#000;
}

@media (min-width:768px) and (max-width:1024px){
  .fce-fb-name{
    font-size:var(--fs-md);
    line-height:var(--lh-md);
  }
  .fce-fb-position{
    font-size:var(--fs-sm);
    line-height:var(--lh-sm);
  }
  .fce-fb-back-text{
    font-size:var(--fs-sm);
    line-height:var(--lh-sm);
  }
  .fce-fb-back-icon{
    max-width:50px;
    max-height:50px;
  }
}

/* =================================
   Slider Styles (Mobile + Tablet)
=================================== */
.fce-fb-slider{
  width:100%;
  padding:0;
  overflow: visible;
}

.fce-fb-s-wrapper{
  width:100%;
  overflow: visible;
}

.fce-fb-slide{
  width:100%;
  border-radius:8px;
  overflow:hidden;
}

.fce-fb-slide-inner{
  border-radius:0;
  overflow:hidden;
  transform:translateZ(0);
  box-shadow:0 2px 8px rgba(0,0,0,0.10);
  background:#fff;
  position:relative;
  display:flex;
  flex-direction:column;
  height: 100%;
}

/* Top image */
.fce-fb-slide-image-wrapper{
  width:100%;
  height:250px;
  min-height:250px;
  max-height:250px;
  overflow:hidden;
  background:#f5f5f5;
  border-radius:0;
  position:relative;
  flex-shrink:0; 
}

/* Overlay */
.fce-fb-slide-image-wrapper::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0, var(--image-overlay-opacity, 0));
  pointer-events:none;
  z-index:1;
}

.fce-fb-slide-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}


.fce-fb-slide-content{
  display:flex;
  flex-direction:column;
  flex:1; 
  overflow:visible;
   
}
.fce-fb-slide-text{
  position:relative;
  width:100%;
  flex:1;
  margin:0;
  border-radius:0;
  padding:22px 18px 70px 18px;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
}

.fce-fb-slide-icon{
  display:block;
  width:auto;
  max-width:50px;
  height:auto;
  max-height:40px;
  margin:0 0 0px 0;
  object-fit:contain;
  flex-shrink:0;
}

.fce-fb-slide-text-scroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:5px;
}

/* Background + border options */
.fce-fb-slide-text.bg-light{
  background:#fff;
  border-top:1px solid #e0e0e0;
}
.fce-fb-slide-text.bg-orange{ background:#ff602d; }
.fce-fb-slide-text.bg-red{ background:#eb4752; }
.fce-fb-slide-text.bg-purple{ background:#5c57ef; }
.fce-fb-slide-text.bg-dark_blue{ background:#3431d4; }
.fce-fb-slide-text.bg-light_grey{ background:#333333; }
.fce-fb-slide-text.bg-dark_grey{ background:#1F1F23; }
.fce-fb-slide-text.bg-dark{ background:#000; }

/* Text colors */
.fce-fb-slide-text.text-light{ color:#fff; }
.fce-fb-slide-text.text-orange{ color:#ff602d; }
.fce-fb-slide-text.text-red{ color:#eb4752; }
.fce-fb-slide-text.text-purple{ color:#5c57ef; }
.fce-fb-slide-text.text-dark_blue{ color:#3431d4; }
.fce-fb-slide-text.text-light_grey{ color:#333333; }
.fce-fb-slide-text.text-dark_grey{ color:#1F1F23; }
.fce-fb-slide-text.text-dark{ color:#000; }

.fce-fb-slide-text-scroll p{
  margin:0;
  font-size:var(--fs-md);
  line-height:var(--lh-md);
}

/* Scrollbar for slider text */
.fce-fb-slide-text-scroll::-webkit-scrollbar{ width:4px; }
.fce-fb-slide-text-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.1);
  border-radius:2px;
}
.fce-fb-slide-text-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.3);
  border-radius:2px;
}
.fce-fb-slide-text-scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.5);
}
.bg-light .fce-fb-slide-text-scroll::-webkit-scrollbar-track{
  background:rgba(0,0,0,0.05);
}
.bg-light .fce-fb-slide-text-scroll::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.2);
}
.bg-light .fce-fb-slide-text-scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,0.4);
}

/* --- Name/Position inside the colored area (bottom-left) --- */
.fce-fb-slide-header{
  position:absolute;
  left:18px;
  bottom:18px;
  padding:0;
  margin:0;
  z-index:3;
  text-align:left;
  pointer-events:none;
}

.fce-fb-slide-name{
  margin:0 0 2px 0;
  font-size:var(--fs-md);
  line-height:var(--lh-md);
  font-weight:800;
}

.fce-fb-slide-position{
  margin:0;
  font-size:var(--fs-sm);
  line-height:var(--lh-sm);
  font-weight:400;
}

/* Default header color */
.fce-fb-slide-header{ color:#fff; }
.fce-fb-slide-header .fce-fb-slide-name,
.fce-fb-slide-header .fce-fb-slide-position{
  color:inherit;
}

.fce-fb-slider .owl-stage-outer{
    padding-top: 0;
}

.fce-fb-slide-position {
    line-height: 1.4;
}

.fce-fb-slide-name {
    margin-bottom: 5px;
}

@media (max-width:1199px){
  .fce-fb-slide-header {
    position: static;
    pointer-events: all;
  }
  .fce-fb-slide-image-wrapper{
    height:301px;
    min-height:auto;
    max-height:none;
    background-color: transparent;
  }
  .fce-fb-slide-content{
    background-color: #000;
    padding: 25px;
    padding-bottom: 17px;
    padding-top: 12px;
    flex: auto;
  }
  .fce-fb-slide-text{
    padding: 0px;
    overflow-y: visible;
    overflow-x: visible;
  }
  .fce-fb-slide-header{
    margin-top: 20px;
  }
  .fce-fb-slide-inner{
    min-height: 100%;
    height: auto;
    transform: none;
  }
  .fce-fb-slide-text-scroll{
    padding-top: 7px;
  }
  .fce-fb-slide-icon{
    top: -26px;
  }

  .fce-fb-slide-image{
    position: absolute;
  }
    /* allow overflow so the next slide can peek */
  .fce-fb-s-wrapper .owl-stage-outer{
    overflow: visible;
    -webkit-clip-path: inset(0 -10% 0 0); /* allow 80px overflow on RIGHT only */
    clip-path: inset(0 -10% 0 0);
  }

  /* create the actual "peek space" on the right */
  .fce-fb-s-wrapper .owl-stage{
    /* padding-right: 10%;   */
  }
}

/* Mobile typography adjustments */
@media (max-width:767px){
  /* Use flexbox to reorder: image -> text -> header */
  .fce-fb-slide-inner{
    display:flex;
    flex-direction:column-reverse;
  }

  /* Allow content to expand - JS will set equal heights */
  .fce-fb-slide-image-wrapper{
    min-height: 270px;
    height: 270px;
    max-height:none;
    order:1; /* Show first */
  }

  .fce-fb-slide-text{
    height:auto ;
    min-height:auto ;
    max-height:none ;
    order:2; /* Show second */
    overflow:visible; /* Allow content to expand */
  }

  /* Remove scrollbar on mobile - show full content */
  .fce-fb-slide-text-scroll{
    overflow-y:visible;
    overflow-x:hidden;
    flex:1 0 auto;
  }

  .fce-fb-slide-text-scroll p{
    /* font-size:var(--fs-md); */
    /* line-height:var(--lh-md); */
  }

  /* Position header at the bottom - show last */
  .fce-fb-slide-header{
    position:static;
    left:auto;
    bottom:auto;
    right:auto;
    order:3; /* Show third (last) */
    /* padding:18px 18px 20px 18px; */
    /* margin-top:0; */
    text-align:left;
    pointer-events:auto;
    background:#000; /* Black background */
  }

  /* Header text styling */
  .fce-fb-slide-header .fce-fb-slide-name,
  .fce-fb-slide-header .fce-fb-slide-position{
    color:#fff; /* White text on black background */
  }

  .fce-fb-slide-content
  {
    background-color: #000;
    padding: 12px 18px 12px 18px;
  }
  .owl-carousel .owl-stage-outer{
    overflow: visible;
  }
}

/* Small mobile adjustments */
@media (max-width:499px){
 
}

/* Extra small devices */
@media (max-width:375px){
  .fce-fb-slide{
    border-radius:8px;
    overflow:hidden;
    backface-visibility:hidden;
    perspective:1000;
  }
  .fce-fb-slide-inner{ border-radius:0; }
  .fce-fb-slide-image-wrapper{ border-radius:0; }
  .fce-fb-slide-text{ border-radius:0; }
}

/* ===================================
   Tablet Slider Adjustments (768px - 1024px)
=================================== */
@media (min-width:768px) and (max-width:1024px){
  .fce-fb-slider{
    padding:0;
    max-width:100%;
    margin:0 auto;
  }

  .fce-fb-slide{ margin:0; }

  .fce-fb-s-wrapper{
    width:100%;
    max-width:100%;
  }

  /* .fce-fb-slide-image-wrapper{
    height:25vh;
    min-height:280px;
    max-height:380px;
  } */

  .fce-fb-slide-text{
    /* height:28vh;
    min-height:330px;
    max-height:330px; */
    /* padding:20px 20px 20px 20px; */
  }

  .fce-fb-slide-header{
    left:16px;
    bottom:16px;
    right:16px;
  }

  .fce-fb-slide-name{
    font-size:var(--fs-sm);
    line-height:var(--lh-sm);
  }

  .fce-fb-slide-position{
    /* font-size:var(--fs-sm); */
    /* line-height:var(--lh-sm); */
  }
/* 
  .fce-fb-slide-text-scroll p{
    font-size:var(--fs-sm);
    line-height:var(--lh-sm);
  } */
}



/* ===================================
   Owl Carousel Dots (Custom)
=================================== */
.fce-flip-boxes .fce-fb-slider .owl-dots{
  text-align:center;
  margin-top:12px;
  padding:0;
}

.fce-flip-boxes .fce-fb-slider .owl-dots .owl-dot{
  display:inline-block;
  width:8px;
  height:8px;
  margin:0 3px;
  border-radius:50%;
  background:transparent;
  border:2px solid #000;
  cursor:pointer;
  transition:all 0.25s ease;
  padding:0;
  outline:none;
}

.fce-flip-boxes .fce-fb-slider .owl-dots .owl-dot.active{
  background:#000;
  border:2px solid #000;
}

.fce-flip-boxes .fce-fb-slider .owl-dots .owl-dot:hover{
  background:rgba(0,0,0,0.30);
  border:2px solid #000;
}

.fce-flip-boxes .fce-fb-slider .owl-dots .owl-dot span{
  display:none;
}