/* CAD-inspired editorial rhythm for Arbortext's definition and reasons.
 * Scope is composition only: shared heading, body, label and action roles stay
 * unchanged. Real content stays in normal flow, without passive animation,
 * fixed reading heights, additional controls or a JavaScript dependency. */

.at-overview .at-overview-layout {
  display: block;
}
.at-overview .at-overview-copy {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  margin-bottom: 36px;
}
.at-overview-heading,
.at-overview-definition {
  min-width: 0;
}
.at-overview .at-overview-copy h2 {
  margin-bottom: 0;
}
.at-overview-definition > p {
  margin: 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--body-text);
}
.at-overview .at-overview-definition > .ip-inline-link {
  max-width: 100%;
}
.at-overview .at-overview-figure {
  display: grid;
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr);
  gap: 0;
  width: 100%;
  max-width: none;
  align-items: stretch;
}
.at-overview .at-overview-figure > img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  object-fit: contain;
  align-self: start;
}
.at-overview .at-overview-figure figcaption {
  min-width: 0;
  margin: 0;
  padding: 0 0 0 clamp(22px, 3vw, 44px);
  border: 0;
}
.at-overview .at-overview-figure ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  height: 100%;
  align-content: start;
}
.at-overview .at-overview-figure li {
  position: relative;
  min-width: 0;
  padding: 22px 0;
  border-top: 1px solid #bdd9df;
}
.at-overview .at-overview-figure li::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background: #169da5;
  margin-bottom: 14px;
  transition: width 350ms, background-color 350ms;
}
.at-overview:has(.ip-inline-link:is(:hover, :focus-visible)) .at-overview-figure li::before {
  width: 44px;
  background: var(--cyan);
}

/* The opening lane and five different reasons form one reading spread.
 * The UL remains a single list, in authored order, rather than card columns. */
.at-why .at-why-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.85fr);
  grid-template-rows: min-content 1fr;
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 30px;
  align-items: start;
}
.at-why .at-why-intro {
  display: block;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.at-why .at-why-intro > p {
  max-width: 35ch;
  margin: 24px 0 0;
}
.at-why .at-why-points {
  display: block;
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0;
}
.at-why .at-why-points > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 26px;
  padding: 22px 0;
  border-top: 1px solid #477989;
}
.at-why .at-why-points > li:first-child {
  padding-top: 0;
  border-top: 0;
}
.at-why .at-why-points > li:last-child {
  padding-bottom: 0;
  grid-column: auto;
}
.at-why .at-why-points > li:is(:hover, :focus-within) {
  border-color: #79d9d3;
}
.at-why .at-why-points h3,
.at-why .at-why-points p {
  min-width: 0;
  margin: 0;
}
.at-why .at-why-points p {
  max-width: 44ch;
}
.at-why .at-why-action {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  min-width: 0;
}
.at-why .at-why-action .motion-cta {
  max-width: 100%;
}

@media (max-width: 1100px) {
  .at-overview .at-overview-copy {
    gap: 32px;
  }
  .at-overview .at-overview-figure {
    grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr);
  }
  .at-overview .at-overview-figure li {
    padding-block: 18px;
  }
  .at-why .at-why-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 32px;
  }
  .at-why .at-why-intro {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 32px;
    grid-column: auto;
    grid-row: auto;
  }
  .at-why .at-why-intro > p {
    margin: 0;
    max-width: 45ch;
  }
  .at-why .at-why-points,
  .at-why .at-why-action {
    grid-column: auto;
    grid-row: auto;
  }
  .at-why .at-why-points > li {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 32px;
  }
  .at-why .at-why-points > li:first-child {
    padding-top: 22px;
    border-top: 1px solid #477989;
  }
  .at-why .at-why-points p {
    max-width: 55ch;
  }
}

@media (max-width: 850px) {
  .at-overview .at-overview-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 30px;
  }
  .at-overview .at-overview-figure {
    display: block;
    justify-self: auto;
  }
  .at-overview .at-overview-figure figcaption {
    padding: 0;
    margin-top: 22px;
  }
  .at-overview .at-overview-figure ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    height: auto;
  }
  .at-overview .at-overview-figure li {
    padding-bottom: 0;
  }
}

@media (max-width: 600px) {
  .at-overview .at-overview-copy {
    margin-bottom: 26px;
  }
  .at-overview .at-overview-figure ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .at-overview .at-overview-figure li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding-block: 15px;
  }
  .at-overview .at-overview-figure li::before {
    width: 24px;
    margin: .7em 0 0;
  }
  .at-overview:has(.ip-inline-link:is(:hover, :focus-visible)) .at-overview-figure li::before {
    width: 24px;
  }
  .at-why .at-why-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .at-why .at-why-intro > p {
    max-width: 55ch;
  }
  .at-why .at-why-points > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-block: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .at-overview .at-overview-figure li::before,
  .at-why .at-why-points > li {
    transition: none;
  }
}

/* The definition leads the welcome. The photograph is quiet supporting context;
 * topic labels belong to the copy, not to the workplace image's caption. */
.at-overview.at-overview-welcome{background:#fff}
.at-overview-welcome.at-overview .at-overview-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.at-overview-welcome.at-overview .at-overview-copy{display:block;margin:0;min-width:0}
.at-overview-welcome.at-overview .at-overview-copy h2{margin:0 0 22px}
.at-overview-welcome .at-overview-definition>p{max-width:56ch}
.at-overview-welcome .at-overview-subjects{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;padding:0;margin:24px 0 0;color:var(--body-text);font-size:1rem;line-height:1.6}
.at-overview-welcome .at-overview-subjects>li{display:flex;align-items:baseline;gap:10px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.at-overview-welcome .at-overview-subjects>li:before{content:"";width:6px;height:6px;flex:none;background:#169da5}
.at-overview-welcome.at-overview .at-overview-definition>.ip-inline-link{width:100%;max-width:56ch;margin-top:26px}
.at-overview-welcome.at-overview .at-overview-figure{display:block;position:relative;width:100%;max-width:420px;margin:0;justify-self:end;padding:18px;background:#edf7f8;border-top:2px solid #63d7d4}
.at-overview-welcome.at-overview .at-overview-figure>img{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
.at-overview-welcome :is(h2,p,a,li){overflow-wrap:anywhere}
@media(max-width:850px){
 .at-overview-welcome.at-overview .at-overview-layout{grid-template-columns:minmax(0,1fr);gap:30px}
 .at-overview-welcome.at-overview .at-overview-figure{width:min(100%,360px);max-width:360px;justify-self:start;padding:14px}
 .at-overview-welcome .at-overview-definition>p{max-width:62ch}
}
@media(max-width:600px){
 .at-overview-welcome .at-overview-subjects{gap:12px 20px;margin-top:20px}
 .at-overview-welcome.at-overview .at-overview-definition>.ip-inline-link{margin-top:22px}
 .at-overview-welcome.at-overview .at-overview-figure{width:min(100%,320px);max-width:320px;padding:12px}
}