/* ===================================================================
   Text/Image Box (DCE)
   =================================================================== */

/* Only stretch to the full row height when this is the single card in its
   column — stacked cards (e.g. multiple job openings in one column) must
   size to their own content, or they overflow into whatever follows */
.grid__col > .grid__main:only-child:has(> .textimage-box),
.grid__col > .grid__main:only-child > .textimage-box {
  height: 100%;
}

.textimage-box {
  display: flex;
  flex-direction: column;
  font-size: 82%;
}

.textimage-box-textwrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.textimage-box-imagewrap {
  position: relative;
  overflow: hidden;
  background: rgb(var(--c-neutral-lighter));
}

.textimage-box-imagewrap img {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.5;
}

@media (hover: hover) {
  .textimage-box:hover .textimage-box-imagewrap img {
    transform: scale(1.25);
    opacity: 1;
  }
}

.transparea {
  position: absolute;
  width: 100%;
  top: 50%;
  bottom: 0;
  opacity: 0.3;
  background: linear-gradient(to bottom, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 1) 100%);
}

.transpbar {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 3px;
  z-index: 200;
  opacity: 0.2;
  background: rgb(var(--c-neutral-lighter));
}

.textimage-box-textwrap {
  background: rgb(var(--c-neutral-lighter));
  text-align: left;
}

/* Live: `.container-grey .textimage-box-textwrap { background: white }` —
   inside a grey section wrapper (our .frame-bg-grey, e.g. "OUR PRODUCTS")
   the card text area flips to white so it reads as a card against the grey
   section background, instead of blending into it. */
.frame-bg-grey .textimage-box-textwrap {
  background: rgb(var(--c-neutral-lightest));
}

.textimage-box-textwrap-inner {
  padding: 2em 20px;
}

.textimage-box-headline {
  overflow: hidden;
  text-transform: uppercase;
  color: rgb(var(--c-neutral));
  line-height: 1.2;
  font-weight: var(--f-weight-b);
  margin-bottom: 1em;
}

.textimage-box-headline .regbig,
.textimage-box-headline .boldbig,
.textimage-box-headline .boldbigblue {
  font-size: 143%;
}

.textimage-box-headline .narrowmiddle {
  font-size: 133%;
}

.textimage-box-tronserlogo::before {
  content: '';
  display: block;
  width: 49px;
  height: 55px;
  float: left;
  margin-right: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 79'%3E%3Cg fill='%231D1D1B'%3E%3Cpath d='M5.3,11.5H2.4V2.8H0V0.4h7.7v2.4H5.3V11.5z'/%3E%3Cpath d='M17.4,11.5h-3.6l-2.7-4.3h0v4.3H8.2V0.4h4.3c2.2,0,3.9,1,3.9,3.4c0,1.5-0.9,2.9-2.4,3.1L17.4,11.5z M11.1,5.3h0.3c0.9,0,2-0.2,2-1.4c0-1.2-1.1-1.4-2-1.4h-0.3V5.3z'/%3E%3Cpath d='M29.3,5.7c0,3.6-2.6,6.1-6.1,6.1c-3.6,0-6.1-2.5-6.1-6.1C17,2.4,19.9,0,23.1,0S29.3,2.4,29.3,5.7z M20,5.7C20,7.6,21.4,9,23.1,9c1.7,0,3.1-1.4,3.1-3.3c0-1.5-1.4-2.9-3.1-2.9C21.4,2.8,20,4.2,20,5.7z'/%3E%3Cpath d='M30.2,0.4h2.9l5.3,6.8h0V0.4h2.9v11.1h-2.9l-5.3-6.8h0v6.8h-2.9V0.4z'/%3E%3Cpath d='M49,3.2c-0.5-0.4-1.2-0.7-1.9-0.7c-0.5,0-1.2,0.3-1.2,0.9c0,0.6,0.8,0.9,1.3,1.1l0.7,0.2c1.5,0.5,2.7,1.2,2.7,3c0,1.1-0.3,2.2-1.1,3c-0.9,0.7-2,1-3.1,1c-1.4,0-2.8-0.5-3.9-1.3l1.2-2.3c0.7,0.6,1.6,1.1,2.6,1.1c0.7,0,1.4-0.3,1.4-1.1c0-0.8-1.1-1.1-1.8-1.3c-1.8-0.5-3-1-3-3.1c0-2.3,1.6-3.7,3.8-3.7c1.1,0,2.5,0.4,3.5,0.9L49,3.2z'/%3E%3Cpath d='M54.4,2.8v1.9h3.3v2.4h-3.3V9h3.4v2.4h-6.3V0.4h6.3v2.4H54.4z'/%3E%3Cpath d='M68.5,11.5h-3.6l-2.7-4.3h0v4.3h-2.9V0.4h4.3c2.2,0,3.9,1,3.9,3.4c0,1.5-0.9,2.9-2.4,3.1L68.5,11.5z M62.1,5.3h0.3c0.9,0,2-0.2,2-1.4c0-1.2-1.1-1.4-2-1.4h-0.3V5.3z'/%3E%3C/g%3E%3Cpolygon fill='%2346A4DC' points='68.7,18.9 34.6,78 0.5,18.9'/%3E%3C/svg%3E") no-repeat 0 0;
  background-size: 49px 55px;
}

.textimage-box-logo {
  margin-bottom: 5px;
}

@media (min-width: 700px) {
  .textimage-box-textwrap-inner {
    padding: 2em 30px;
  }
}

@media (min-width: 1180px) {
  .textimage-box-textwrap-inner {
    padding: 2em 45px;
  }
}

/* ===================================================================
   Product Slider (DCE)
   =================================================================== */

.thumb-slider {
  position: relative;
  overflow: hidden;
}

.thumb-slider-buttonwrap {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  margin: 0 0 var(--g-gap-s);
}

.thumb-slider-button {
  position: relative;
  width: 45px;
  height: 45px;
  cursor: pointer;
  overflow: hidden;
  background: rgb(var(--c-neutral-lighter));
  transition: background-color 0.3s ease;
}

.thumb-slider-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 101%;
  height: 0;
  opacity: 0;
  background: rgb(var(--c-primary-dark));
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  z-index: -1;
}

@media (hover: hover) {
  .thumb-slider-button:hover::after {
    height: 100%;
    opacity: 1;
  }
}

.thumb-slider-prev-arrow,
.thumb-slider-next-arrow {
  width: 12px;
  height: 25px;
  margin: 10px auto 0;
  background-color: rgb(var(--c-primary));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color 0.3s ease;
}

.thumb-slider-prev-arrow {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 25'%3E%3Cpath d='M11.2,0.6c-3.3,4-6.6,7.9-9.9,11.9c3.3,4,6.6,7.9,9.9,11.9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

.thumb-slider-next-arrow {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 25'%3E%3Cpath d='M0.8,24.4c3.3-4,6.6-7.9,9.9-11.9c-3.3-4-6.6-7.9-9.9-11.9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

@media (hover: hover) {
  .thumb-slider-button:hover .thumb-slider-prev-arrow,
  .thumb-slider-button:hover .thumb-slider-next-arrow {
    background-color: rgb(var(--c-neutral-lightest));
  }
}

.thumb-slider-container {
  position: relative;
}

.thumb-slider-item {
  cursor: pointer;
  padding-right: 10px;
  box-sizing: border-box;
}

.thumb-slider-image {
  overflow: hidden;
  border: 1px solid rgb(var(--c-neutral));
}

.thumb-slider-image img {
  width: 100%;
  display: block;
}

@media (hover: hover) {
  .thumb-slider-item:hover .thumb-slider-image {
    background: rgb(var(--c-primary));
    border-color: rgb(var(--c-primary));
  }

  .thumb-slider-item:hover .thumb-slider-image img {
    opacity: 0.95;
  }
}

.thumb-slider-item.active .thumb-slider-image {
  background: rgb(var(--c-primary));
  border-color: rgb(var(--c-primary));
}

.thumb-slider-item.active .thumb-slider-image img {
  opacity: 0.95;
}

.thumb-slider-subheadline {
  color: rgb(var(--c-neutral-darker));
  margin-top: var(--g-gap-s);
}

.thumb-slider-item.active .thumb-slider-subheadline {
  color: rgb(var(--c-primary));
  font-weight: var(--f-weight-b);
}

@media (hover: hover) {
  .thumb-slider-item:hover .thumb-slider-subheadline {
    color: rgb(var(--c-primary));
    font-weight: var(--f-weight-b);
  }
}

.product-slider-detail {
  margin-top: var(--g-gap);
}