/* Converted from src/components/site/sectors/SectorPage.module.css (CSS Module): local classes are prefixed "sectors-sector-page__". */
/*
 * Client sector page (ex-Elementor template). Elementor flex containers: 10px padding on the
 * section and on each column, 20px gap between widgets; spacers become ::before / ::after.
 * Content spans the theme container (86vw at 1440px) without its 16px gutter.
 */

/* ---------- Intro: heading, text, button | image ---------- */
.sectors-sector-page__intro {
  display: flex;
  max-width: var(--container-width);
  margin-inline: auto;
  padding: 10px;
}

.sectors-sector-page__col {
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 10px;
}

.sectors-sector-page__colText::before {
  content: "";
  flex: none;
  height: 7vh;
}

.sectors-sector-page__colMedia::before {
  content: "";
  flex: none;
  height: 9vh;
}

.sectors-sector-page__introTitle {
  padding-top: 0.15em;
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: 400;
  line-height: var(--h2-leading);
  letter-spacing: -0.04em;
  color: var(--color-heading);
}

.sectors-sector-page__introText {
  font-size: 19px;
  line-height: 1.6;
}

.sectors-sector-page__introText p {
  margin: 1em 0;
}

.sectors-sector-page__introImage {
  display: block;
  align-self: center;
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

@media (max-width: 767px) {
  .sectors-sector-page__intro {
    flex-wrap: wrap;
  }

  .sectors-sector-page__col {
    flex-basis: 100%;
  }

  .sectors-sector-page__colText::before {
    display: none;
  }
}

/* ---------- Tagline: typed on desktop, centred heading below 1025px ---------- */
.sectors-sector-page__tagline {
  display: flex;
  max-width: var(--container-width);
  min-height: var(--tagline-min, auto);
  margin-inline: auto;
  padding: 10px;
}

.sectors-sector-page__taglineCol {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  min-height: var(--tagline-col-min, auto);
  padding: 10px;
}

.sectors-sector-page__taglineCol::before,
.sectors-sector-page__trailing::after {
  content: "";
  flex: none;
  height: 5vh;
}

.sectors-sector-page__taglineTitle {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: 400;
  line-height: var(--h1-leading);
  letter-spacing: -0.045em;
  text-align: center;
  color: var(--color-heading);
}

.sectors-sector-page__typed {
  display: none;
}

/* typed.js cursor (Ohio: Blink 0.75s infinite): solid while typing / erasing, blinking while
   paused. Like typed.js, the iteration count drops to 0 instead of removing the animation. */
.sectors-sector-page__typed::after {
  content: "|";
  animation: sectors-sector-page__cursor-blink 0.75s infinite;
}

.sectors-sector-page__typed[data-blink="off"]::after {
  animation-iteration-count: 0;
}

@keyframes sectors-sector-page__cursor-blink {
  50% {
    opacity: 0;
  }
}

@media (min-width: 1025px) {
  .sectors-sector-page__taglineTitle {
    font-size: 93.6px;
    line-height: var(--typed-leading, 92px);
    letter-spacing: -3.3px;
    text-align: left;
    color: var(--color-text);
  }

  /* The full text keeps the room (no layout shift) and stays readable by assistive tech;
     the typed copy is drawn over it. */
  html[data-js] .sectors-sector-page__taglineText {
    color: transparent;
  }

  html[data-js] .sectors-sector-page__typed {
    position: absolute;
    inset: 0;
    display: block;
    user-select: none;
  }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  html[data-js] .sectors-sector-page__taglineText {
    color: inherit;
  }

  html[data-js] .sectors-sector-page__typed {
    display: none;
  }
}

/* ---------- Cases of Studies ---------- */
.sectors-sector-page__cases {
  max-width: var(--container-width);
  margin-inline: auto;
  padding: calc(4vh + 20px) 16px calc(8vh + 20px);
}

.sectors-sector-page__eyebrow {
  margin: 0;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1.6;
  text-transform: uppercase;
}

.sectors-sector-page__casesTitle {
  padding-top: 0.15em;
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 500;
  line-height: var(--h3-leading);
  letter-spacing: -0.035em;
  color: var(--color-heading);
}

.sectors-sector-page__allCases {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100.157%; /* Elementor widget width */
  min-height: 33px;
  margin-top: calc(2vh + 40px);
}

.sectors-sector-page__allCases .sectors-sector-page__allCasesLink {
  font-size: 19px;
}

/* E-commerce: the link sits between the heading and the list. */
.sectors-sector-page__buttonFirst {
  padding-bottom: calc(8vh + 40px);
}

.sectors-sector-page__buttonFirst .sectors-sector-page__allCases {
  margin-bottom: -20px;
}

@media (max-width: 768px) {
  .sectors-sector-page__allCases {
    justify-content: flex-start;
  }
}