/*
 * Industry Row: one row of the "Why we understand your product" list.
 * Figma "Eleken Site 2026": desktop 375:1647, tablet 380:11771, mobile 403:7235.
 *
 * This CSS lives inside the component's Shadow DOM: site classes never reach it,
 * but site variables (var(--…)) and the site's @font-face fonts do. Browser
 * default styles still apply, hence the explicit margin/list resets below.
 * Breakpoints follow Webflow: desktop ≥992 (base), tablet ≤991, mobile ≤767.
 */

:host {
  display: block;
}

.ir,
.ir *,
.ir *::before,
.ir *::after {
  box-sizing: border-box;
}

/* Desktop: title | description + tags | button */
.ir {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* 39px + the 1px dashed line = Figma's 40px (Figma strokes take no space) */
  padding: 39px 0 40px;
  border-bottom: 1px dashed rgba(29, 30, 34, 0.4);
  color: var(--colors--main, #1d1e22);
  font-family: "Inter Variable Local", Inter, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
  overflow-wrap: break-word;
}

.ir--top-border {
  border-top: 1px dashed rgba(29, 30, 34, 0.4);
}

.ir-main {
  display: flex;
  flex: 1 1 auto;
  gap: 20px;
  min-width: 0;
}

.ir-title {
  flex: none;
  width: 237px;
  margin: 0;
  color: var(--colors--main, #1d1e22);
  font-family: Regolapro, "Regola Pro", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -0.02em;
}

/* 623px in Figma; shrinks (title and button don't) when the row is narrower than 1008px */
.ir-body {
  display: flex;
  flex: 0 1 623px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.ir-desc {
  max-width: 606px;
  margin: 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 15px;
  line-height: 25px;
}

.ir-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ir-tag {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  /* Figma draws this stroke outside the 66px frame: an outset shadow does the same without
     changing the layout box (so tags wrap exactly as in Figma) */
  box-shadow: 0 0 0 1px var(--colors--gray-3, #e4e4e4);
  color: var(--colors--main, #1d1e22);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

/* Figma "Primary Button": 108px column, 8px padding around a 24px arrow */
.ir-cta {
  display: flex;
  flex: none;
  justify-content: flex-end;
  width: 108px;
  padding-left: 20px;
}

.ir-icon {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 8px;
}

.ir-icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: opacity 0.2s;
}

/* Hover arrow sits on top of the idle one; the row's hover/focus swaps them */
.ir-icon .ir-icon-hover {
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: 0;
}

.ir:hover .ir-icon-idle,
.ir:focus-visible .ir-icon-idle {
  opacity: 0;
}

.ir:hover .ir-icon-hover,
.ir:focus-visible .ir-icon-hover {
  opacity: 1;
}

.ir:focus-visible {
  outline: 2px solid var(--colors--main, #1d1e22);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ir-icon img {
    transition: none;
  }
}

@media screen and (max-width: 991px) {
  .ir-main {
    flex-direction: column;
    gap: 16px;
  }

  .ir-title {
    width: auto;
    font-size: 32px;
    line-height: 40px;
  }

  .ir-body {
    flex: none;
  }

  .ir-desc {
    max-width: none;
  }
}

/* Mobile: everything stacks, button goes below on the left */
@media screen and (max-width: 767px) {
  .ir {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 19px 0 20px;
  }

  .ir-title {
    font-size: 22px;
    line-height: 30px;
  }

  .ir-desc {
    font-size: 13px;
    line-height: 20px;
  }

  .ir-cta {
    justify-content: flex-start;
    width: auto;
    padding-left: 0;
  }

  /* Line the arrow up with the text above, not with its 8px padding */
  .ir-icon {
    margin-left: -8px;
  }
}