/* ===========================================================================
   SolutionsLaptop — layout for the scroll-driven 3D laptop in the
   "Solutions / Customized For You" section.

   Loaded after style.css so it wins on equal specificity; every rule is also
   scoped under section.custom-tabs so it cannot leak to the other tab blocks.
   =========================================================================== */

/* Width: the Solutions block now uses the same --site-width as the navbar and every other
   section (defined in style.css), so the tab list and the laptop line up with everything else. */

/* The whole block becomes a tall scroll track; the two columns pin in place
   while the laptop turns through every solution. */
section.custom-tabs {
  height: 520vh;
  padding: 0;
  position: relative;
}

section.custom-tabs .tabs-container {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-top: 2vh;
  overflow: hidden;
}

/* section header, pinned with the rest (compact version of .costomized-head) */
section.custom-tabs .costomized-head {
  flex: none;
  min-width: 0;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1rem 1.2vh;
}

section.custom-tabs .costomized-head span {
  /* font-size: 1.5rem; */
  padding-left: 0;        /* removes the space reserved for the little icon, so the word is truly centred */
}

/* remove the small icon/colon shown before "Solutions" */
section.custom-tabs .costomized-head span::before {
  content: none;
  display: none;
}

section.custom-tabs .costomized-head h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  margin: 0.2rem 0 0.5rem;
}

section.custom-tabs .costomized-head p {
  font-size: 0.98rem;
  line-height: 1.45;
  color: #444;
}

/* list + laptop fill whatever height the header leaves */
section.custom-tabs .tabs-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ---------- left: the sliding tab list ------------------------------------ */

section.custom-tabs .tab-list-window {
  width: 32%;
  min-width: 260px;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

section.custom-tabs .tab-list-window::-webkit-scrollbar {
  display: none;
}

section.custom-tabs .tab-list {
  width: 100%;
  display: block;
  overflow: visible;
  white-space: normal;
  padding: 0 3rem 0 2rem;
  margin: 0;
}

section.custom-tabs .tab-list .sol-tab {
  padding: 18px 0;
  font-size: 2rem;
  border-bottom: 1px solid #e1e1e1;
  cursor: pointer;
  color: #bcbcbc;
  transition: color 0.3s ease, opacity 0.3s ease;
  display: block;
  position: relative;
  opacity: 0.55;
}

section.custom-tabs .tab-list .sol-tab.active {
  opacity: 1;
  font-weight: 600;
  background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* only the ACTIVE solution is shown; the others are hidden and the next one
   takes its place (with a short fade/slide-in) when the scroll moves on */
section.custom-tabs .tab-list .sol-tab:not(.active) {
  display: none;
}

section.custom-tabs .tab-list .sol-tab.active {
  animation: solSwap 0.45s ease both;
}

section.custom-tabs .sol-detail {
  animation: solSwap 0.45s ease 0.05s both;
}

@keyframes solSwap {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* arrow that slides in on the active row (kept from the original list) */
section.custom-tabs .tab-list .sol-tab::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-40px);
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

section.custom-tabs .tab-list .sol-tab.active::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ---------- right: the 3D laptop (fills the whole column, nothing below it) --- */

section.custom-tabs .laptop-stage {
  flex: 1;
  min-width: 0;
  position: relative;
  height: 100%;
}

section.custom-tabs .canvas-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#solutions-laptop-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

/* detail block under the ACTIVE tab in the left list: icon, then description, then button.
   JS moves it under whichever tab is active. */
section.custom-tabs .sol-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0 24px;
  border-bottom: 1px solid #e1e1e1;
  color: #0a0a0a;
}

section.custom-tabs .sol-detail .sol-cap-icon {
  height: 64px;           /* icon size: change this one value */
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
  margin: 0;
}

section.custom-tabs .sol-detail .sol-cap-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #55585d;
}

section.custom-tabs .sol-detail .sol-cap-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7b2ff7, #3f01fa);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  /* box-shadow: 0 6px 18px rgba(90, 40, 255, 0.35); */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

section.custom-tabs .sol-detail .sol-cap-btn:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 10px 24px rgba(90, 40, 255, 0.45); */
}

/* the config block is data, never rendered */
#solutions-laptop-config {
  display: none;
}

/* ---------- short screens ------------------------------------------------- */

@media (max-height: 780px) {
  section.custom-tabs .costomized-head p {
    font-size: 0.88rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  section.custom-tabs .sol-detail {
    gap: 8px;
    padding: 10px 0 16px;
  }

  section.custom-tabs .sol-detail .sol-cap-icon {
    height: 48px;
  }

  section.custom-tabs .sol-detail .sol-cap-text {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  section.custom-tabs .tab-list .sol-tab {
    padding: 12px 0;
    font-size: 1.6rem;
  }
}

/* ---------- narrow screens ------------------------------------------------ */

@media (max-width: 900px) {
  section.custom-tabs {
    height: 420vh;
  }

  section.custom-tabs .tabs-container {
    padding-top: 2vh;
  }

  section.custom-tabs .costomized-head p {
    display: none;
  }

  section.custom-tabs .costomized-head span {
    font-size: 3rem;
  }

  section.custom-tabs .tabs-body {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  section.custom-tabs .tab-list-window {
    width: 100%;
    min-width: 0;
    max-height: none;
    overflow: visible;
    padding: 0 4vw;
  }

  section.custom-tabs .tab-list {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0;
  }

  section.custom-tabs .tab-list {
    justify-content: center;
  }

  section.custom-tabs .tab-list .sol-tab {
    font-size: 1.6rem;
    padding: 10px 0;
    border-bottom: none;
    opacity: 1;
    white-space: nowrap;
  }

  section.custom-tabs .tab-list .sol-tab::after {
    display: none;
  }

  section.custom-tabs .laptop-stage {
    flex: 1;
    height: auto;
    min-height: 0;
  }

  /* narrow: the block sits under the horizontal tab strip, centred */
  section.custom-tabs .sol-detail {
    align-items: center;
    text-align: center;
    border-bottom: none;
    padding: 6px 4vw 10px;
    gap: 6px;
  }

  section.custom-tabs .sol-detail .sol-cap-icon {
    height: 48px;
  }

  section.custom-tabs .sol-detail .sol-cap-text {
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  section.custom-tabs .sol-detail .sol-cap-btn {
    padding: 8px 20px;
    font-size: 0.95rem;
  }
}

/* ===========================================================================
   LEFT COLUMN (desktop only)
   Title, icon, description and button are stacked at the top with small even gaps, and the
   description has roomier line spacing. Narrow screens keep their own layout.
   Tweak the three variables below.
   =========================================================================== */
@media (min-width: 901px) {
  section.custom-tabs {
    --sol-pad-y: clamp(10px, 3vh, 36px);   /* space above the title / below the button  */
    --sol-gap: clamp(14px, 2.2vh, 24px);     /* gap between icon, description and button  */
    --sol-line-height: 1.95;                 /* space between the description's lines     */
  }

  /* column takes the full height of the pinned area instead of being centred */
  section.custom-tabs .tab-list-window {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  section.custom-tabs .tab-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: var(--sol-pad-y);
    padding-bottom: var(--sol-pad-y);
    padding-left: 0;                      /* list text starts on the same left edge as the other sections */
  }

  /* the title stays at the top */
  section.custom-tabs .tab-list .sol-tab.active {
    flex: none;
  }

  /* icon, description and button are stacked together right under the title with small,
     even gaps (no stretching), so the whole block sits up at the top */
  section.custom-tabs .sol-detail {
    flex: none;
    justify-content: flex-start;
    gap: var(--sol-gap);
    padding: var(--sol-pad-y) 0 0;
    border-bottom: none;
  }

  section.custom-tabs .sol-detail .sol-cap-text {
    font-size: 1.05rem;
    line-height: var(--sol-line-height);
  }

  section.custom-tabs .sol-detail .sol-cap-btn {
    align-self: flex-start;
  }
}

/* short screens: keep the same idea, a bit tighter so nothing overflows */
@media (min-width: 901px) and (max-height: 780px) {
  section.custom-tabs {
    --sol-line-height: 1.7;
  }

  section.custom-tabs .sol-detail {
    padding-top: var(--sol-pad-y);
  }

  section.custom-tabs .sol-detail .sol-cap-text {
    font-size: 0.92rem;
  }
}