/* Living Value Chain Tile Styles */
.living-value-chain-tile {
  width: 100%;
}
/* Apply Jakarta font to all value chain elements - V2 only */
#value-chain-editor.value-chain-v2,
#value-chain-editor.value-chain-v2 * {
  font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
.living-value-chain-tile .value-chain-slide {
  padding: 0;
}
/* Scale down the value chain viewer to fit better in the tile - V2 only */
.living-value-chain-tile .value-chain-viewer-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* CSS custom properties for scaling calculation */
  --value-chain-natural-width: 1500;
  --container-width: 1200; /* Default, will be set by JS */
  --scale-reduction-factor: 1.2; /* Additional reduction factor */
  --translate-x-offset: -10px; /* Horizontal offset for positioning */
}
.living-value-chain-tile .value-chain-viewer-container #value-chain-editor.value-chain-v2 {
  /* Use the natural width of the GridLayout */
  /* Calculate scale factor with reduction: (container-width / natural-width) * 0.8 */
  /* Move left proportionally with scale */
  transform: scale(calc(calc(var(--container-width) / var(--value-chain-natural-width)) * var(--scale-reduction-factor))) 
             translateX(var(--translate-x-offset)) !important;
  transform-origin: top left !important;
}
/* React Slick Carousel Customization for Value Chain */
.living-value-chain-tile .slick-slider {
  margin-bottom: 24px;
}
.living-value-chain-tile .slick-prev,
.living-value-chain-tile .slick-next {
  width: 40px;
  height: 40px;
  z-index: 10;
}
.living-value-chain-tile .slick-prev {
  left: -50px;
}
.living-value-chain-tile .slick-next {
  right: -50px;
}
.living-value-chain-tile .slick-prev:before,
.living-value-chain-tile .slick-next:before {
  font-size: 40px;
  color: #0c705b;
}
.living-value-chain-tile .slick-dots {
  bottom: -35px;
}
.living-value-chain-tile .slick-dots li button:before {
  font-size: 12px;
  color: #0c705b;
}
.living-value-chain-tile .slick-dots li.slick-active button:before {
  color: #0c705b;
}
/* Company logo styles for value chain */
#value-chain-editor .company-images-container {
  margin: 0px auto;
  width: 90%;
}
#value-chain-editor .company-images {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
#value-chain-editor .company-image-container {
  height: 30px;
  padding: 0px 5px;
}
#value-chain-editor .company-image {
  max-height: 65%;
  max-width: 100%;
}
/* Taxonomy Company Group Styling - V2 only */
/* Override the inline border style for taxonomy company groups */
#value-chain-editor.value-chain-v2 .taxonomy-company-group-view {
  border: 1px solid #C2CBC7 !important; /* Tailwind brands.tertiary.100 */
}
#value-chain-editor.value-chain-v2 .container {
  margin: 0 auto;
  padding: 5px 0 !important;
}
#value-chain-editor.value-chain-v2 .container p {
  color: #FC6428; /* Tailwind brands.primary.500 orange */
  text-align: center;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
/* Industry Box Styling - V2 only */
#value-chain-editor.value-chain-v2 .industry-view-container,
#value-chain-editor.value-chain-v2 .industry-container {
  height: 100%;
  width: 100%;
  min-height: 60px;
  position: relative;
}
#value-chain-editor.value-chain-v2 .industry-view-inner,
#value-chain-editor.value-chain-v2 .industry-inner {
  height: 100%;
  width: 100%;
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#value-chain-editor.value-chain-v2 .industry-inner {
  cursor: move;
}
#value-chain-editor.value-chain-v2 .industry-view-text-container,
#value-chain-editor.value-chain-v2 .industry-text-container {
  z-index: 3;
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
/* Add gradient glow effect at the bottom of industry boxes - V2 only */
#value-chain-editor.value-chain-v2 .industry-view-text-container::after,
#value-chain-editor.value-chain-v2 .industry-text-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 40px;
  background: radial-gradient(ellipse 90% 40px at center bottom, rgba(64, 203, 150, 0.8) 0%, rgba(64, 203, 150, 0.4) 30%, rgba(64, 203, 150, 0) 60%);
  pointer-events: none;
  z-index: -1;
}
#value-chain-editor.value-chain-v2 .industry-view-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 70%;
  overflow: hidden;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
#value-chain-editor.value-chain-v2 .industry-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 70%;
  overflow: hidden;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: text;
  font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
#value-chain-editor.value-chain-v2 .industry-view-left-arrow,
#value-chain-editor.value-chain-v2 .industry-left-arrow {
  width: 40px;
  height: 100%;
  min-height: 60px;
  background-color: #0C705B; /* Tailwind charts.green.700 */
  margin-right: -1px;
  clip-path: polygon(40px 0px, 40px 50%, 40px 100%, 0px 100%, 20px 50%, 0px 0px);
  position: relative;
  z-index: 1;
}
#value-chain-editor.value-chain-v2 .industry-view-center,
#value-chain-editor.value-chain-v2 .industry-center {
  width: calc(100% - 78px);
  height: 100%;
  min-height: 60px;
  background-color: #0C705B; /* Tailwind charts.green.700 */
  position: relative;
  z-index: 1;
}
#value-chain-editor.value-chain-v2 .industry-view-right-arrow,
#value-chain-editor.value-chain-v2 .industry-right-arrow {
  width: 40px;
  height: 100%;
  min-height: 60px;
  background-color: #0C705B; /* Tailwind charts.green.700 */
  margin-left: -1px;
  clip-path: polygon(20px 0px, 40px 50%, 20px 100%, 0px 100%, 0px 0px);
  position: relative;
  z-index: 1;
}
#value-chain-editor.value-chain-v2 .industry-minus-button,
#value-chain-editor.value-chain-v2 .industry-plus-button {
  z-index: 1;
  font-size: 29px;
  font-weight: bold;
  color: whitesmoke;
  position: absolute;
  top: -2px;
  cursor: pointer;
}
#value-chain-editor.value-chain-v2 .industry-minus-button {
  right: 48px;
}
#value-chain-editor.value-chain-v2 .industry-plus-button {
  right: 25px;
}
/* Responsive adjustments - scale is calculated dynamically via calc() */
@media (max-width: 768px) {
  .living-value-chain-tile .slick-prev {
    left: 0;
  }
  
  .living-value-chain-tile .slick-next {
    right: 0;
  }
}