/*
 * Custom Tabs Element Styles
 * /elements/css/custom-tabs.css
 */

/* 1. Root & Container */
.brxe-custom-tabs {
  width: 100%;
  font-family: 'Figtree', sans-serif;
}

.ct-container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 50px 20px 100px;
}

/* 2. Main Heading (H2) */
.ct-heading {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: 0.5em; 
  line-height: 150%;
  text-align: center;
  text-transform: uppercase;
  color: #36194c;
  margin-bottom: 40px;
}

/* 3. Tab Navigation */
.ct-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-bottom: 50px;
  border: none;
}

.ct-nav-btn {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 150%;
  color: #333;
  background-color: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.ct-nav-btn.active {
  color: #ffffff;
  background-color: #7d54cc;
}

.ct-nav-btn:hover {
  color: #ffffff;
  background-color: rgba(148, 38, 143, 1);
}

/* 4. Directional Timeline System - ANTI-BLUR VERSION */
.ct-content-wrapper { 
  position: relative; 
  overflow: hidden; 
  transition: height 0.4s ease; 
  min-height: 400px;
  contain: paint; /* Optimization: Limits paint area to the wrapper */
}

.ct-content-panel { 
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  opacity: 0; 
  visibility: hidden; 
  will-change: transform, opacity; /* Primes the GPU for motion */
  
  /* ANTI-BLUR PROPERTIES */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  
  /* Transition with weighted physics */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out, visibility 0s 0.5s; 
}

/* Teleportation Utility (Used by JS for direction reset) */
.ct-content-panel.no-transition { transition: none !important; }

.ct-content-panel.active { 
  position: relative; 
  opacity: 1 !important; 
  visibility: visible !important; 
  /* perspective(1px) and translate3d keep the text sharp on pixel grids */
  transform: perspective(1px) translate3d(0, 0, 0) !important; 
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out; 
  z-index: 2; 
}

.ct-content-panel.exiting { 
  position: absolute; 
  top: 0; 
  z-index: 1; 
  opacity: 0 !important; 
  visibility: hidden !important; 
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out, visibility 0s 0.5s; 
}

/* DIRECTIONAL ANCHORING (Prevents Crossover) */
.slide-forward .ct-content-panel:not(.active) { transform: translate3d(100%, 0, 0); }
.slide-forward .ct-content-panel.exiting { transform: translate3d(-100%, 0, 0) !important; }

.slide-backward .ct-content-panel:not(.active) { transform: translate3d(-100%, 0, 0); }
.slide-backward .ct-content-panel.exiting { transform: translate3d(100%, 0, 0) !important; }

/* 5. Content Grid */
.ct-content-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}

.ct-grid-item {
  display: flex;
  flex-direction: column;
  margin-bottom:50px !important;
}

.ct-item-image-wrapper {
  width: 100%;
  max-height: 135px;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 10px !important;
}

.ct-item-image {
  width: 100%;
  height: 135px;
  object-fit: cover;
}

.ct-item-h3 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 1.125em;
  color: #333;
  margin: 0 0 5px 0;
}

.ct-item-h4 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 1.25em;
  color: #36194c;
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.ct-item-desc {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.6;
  color: #000;
  flex-grow: 1;
}

/* 7. Responsive Breakpoints */
@media (max-width: 991px) {
  .ct-content-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-nav { gap: 20px 30px; }
}

@media (max-width: 767px) {
  .ct-heading { font-size: 1.8em; letter-spacing: 0.2em; }
  .ct-nav { margin: 0 10px; margin-bottom:30px;}
  .ct-grid-item { padding-bottom: 20px !important; 
}
.ct-item-h3{
margin-left:20px;
}

.ct-item-h4{
margin-left:20px;
}

.ct-item-desc {
        margin-top: 0px !important;
        padding-top: 0px !important;
}
}

@media (max-width: 576px) {
  .ct-content-grid { grid-template-columns: 1fr; gap: 20px; padding-bottom: 20px !important; }
  .ct-nav-btn { font-size: 0.9em; padding: 6px 12px; }
  .ct-container { padding-bottom: 20px; margin: 0 !important; padding: 0 !important; }
  .ct-grid-item { border-radius: 25px; box-shadow: 0px 10px 25px 0px #0000004D; margin: 0 20px 20px; }
  .ct-item-desc { padding: 10px 20px; }
  .ct-item-image-wrapper { border-radius: 10px !important; max-height: 150px !important; }
  .ct-item-image { height: 150px !important; }
}