/* ===========================================================
   Triveni Power - Industries We Keep Running
   Stacked accordion rows. Each row: LHS content + RHS image.
   - Collapsed: short row, image column is 0 wide (hidden)
   - Expanded: row grows tall, image column slides in to 50%
   =========================================================== */

.industries {
  background: #0A0809;
  color: #FFFFFF;
  font-family: "Raleway", var(--font-display);
  padding: clamp(80px, 10vw, 140px) 0;
}
.industries__container {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =========================================================
   HEADER - title + body split (2-col on desktop)
   ========================================================= */
.industries__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(48px, 6vw, 88px);
}
@media (min-width: 1024px) {
  .industries__header {
    grid-template-columns: 6fr 5fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
}

.industries__title {
  font-family: var(--font-display);
  font-size: var(--fs-l);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
}
.industries__title em {
  font-style: normal;
  color: var(--accent);
}
.industries__body {
  font-size: var(--fs-m);
  line-height: 1.6;
  color: #FFFFFF;
  margin: 0;
  max-width: 56ch;
  padding-top: 0;
}

/* =========================================================
   STACK - 4 rows
   ========================================================= */
.industries__stack {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
}

/* =========================================================
   ROW - 2-column grid (left content | right image).
   Image column width animates from 0 to 1fr on expand.
   ========================================================= */
.industries__row {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* always 50/50 - image always visible */
  background: var(--ind-bg);
  color: var(--ind-fg);
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 320ms var(--ease-out);
}
.industries__row:last-child { border-bottom: 0; }

.industries__row-left {
  padding: clamp(18px, 2.2vw, 32px) clamp(22px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* HEAD - always visible title button */
.industries__row-head {
  width: 100%;
  background: transparent;
  border: 0;
  /* Suppress the default semi-transparent overlay mobile browsers
     paint on tap - it flashed over the title + plus icon. */
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  padding: 0;
  font-family: var(--font-display);
  font-size: 24px;          /* card-style row title - between M and L */
  font-weight: 400;
  color: var(--ind-fg);
  letter-spacing: -0.01em;
  line-height: 1.15;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  min-height: clamp(60px, 6vw, 84px);
  transition: padding-left 280ms var(--ease-out);
}
.industries__row:hover .industries__row-head,
.industries__row[data-active="true"] .industries__row-head {
  padding-left: 0;
}

.industries__row-index {
  font-family: "Raleway", var(--font-display);
  font-size: var(--fs-m);
  letter-spacing: 0.12em;
  font-weight: 500;
  opacity: 0.55;
  flex: 0 0 auto;
}
.industries__row-title {
  flex: 1;
  min-width: 0;
}

/* Plus/minus icon - vertical stroke rotates on expand */
.industries__row-plus {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.75;
}
.industries__row-plus-v {
  transform-origin: 12px 12px;
  transition: transform 320ms var(--ease-out);
}
.industries__row[data-active="true"] .industries__row-plus-v {
  transform: rotate(90deg);                /* plus becomes minus */
}

.industries__row-head:focus-visible {
  outline: 2px solid var(--ind-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* BODY - hidden by default (max-height 0), animates open on expand */
.industries__row-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}
.industries__row[data-active="true"] .industries__row-body {
  grid-template-rows: 1fr;
}
.industries__row-body-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 340ms var(--ease-out) 80ms,
    transform 340ms var(--ease-out) 80ms;
}
.industries__row[data-active="true"] .industries__row-body-inner {
  opacity: 1;
  transform: translateY(0);
  padding: clamp(16px, 2vw, 24px) 0 clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}

/* =========================================================
   META - Applications / Sub-segments / Solutions
   ========================================================= */
.industries__meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}
.industries__meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid color-mix(in oklab, var(--ind-fg) 15%, transparent);
}
.industries__meta-row:first-child { padding-top: 0; border-top: 0; }
.industries__meta-row dt {
  font-family: var(--font-display);
  font-size: var(--fs-m);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ind-accent);
  opacity: 0.9;
}
.industries__meta-row dd {
  margin: 0;
  font-size: var(--fs-m);
  line-height: 1.5;
  color: color-mix(in oklab, var(--ind-fg) 88%, transparent);
}

/* SNIPPET - first-sentence lede pulled from each industry page hero.
   Source of truth = the matching industries/*.html .mev2-hero__lede.
   Uses --ind-fg so it reads on both light and dark rows. */
.industries__row-snippet {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-m);
  line-height: 1.5;
  color: color-mix(in oklab, var(--ind-fg) 88%, transparent);
}

/* .industries__cta visual rules moved to css/buttons.css under
   canonical .btn--link kind (with per-section override that pulls
   color from --ind-fg). Layout helper only kept here: */
.industries__cta {
  align-self: flex-start;
}

/* =========================================================
   RIGHT IMAGE - slides in when row is expanded
   ========================================================= */
.industries__row-image {
  position: relative;
  overflow: hidden;
  background: #0A0809;
  min-width: 0;
}
.industries__row-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.55;                            /* dim on closed rows */
  transform: scale(1.03);
  transition:
    opacity 480ms var(--ease-out),
    transform 600ms var(--ease-out);
}
.industries__row[data-active="true"] .industries__row-image img {
  opacity: 1;
  transform: scale(1);
}

/* =========================================================
   HIDDEN GROUP + 'View more' pill
   ---
   The last 4 industries sit inside .industries__more-rows
   which is wrapped in a div, so they keep their row borders
   without breaking the stack's rounded-corner clip.
   ========================================================= */
.industries__more-rows[hidden] {
  display: none;
}
/* Reset the original ':last-child' rule that no longer matches
   once a wrapper sibling exists, and tidy the borders cleanly. */
.industries__stack > .industries__row:nth-of-type(4) {
  /* Steel keeps its border-bottom so the divider is visible above
     the hidden group when it expands. */
}
.industries__more-rows > .industries__row:last-child {
  border-bottom: 0;
}

.industries__more-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(18px, 2.4vw, 28px);
}

/* .industries__more-pill visual rules + light-mode overrides moved
   to css/buttons.css under canonical .btn--ghost kind. Local rules
   below handle the chevron icon + rotation state only. */
.industries__more-pill-chev {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform 280ms var(--ease-out);
}

.industries__more-pill[aria-expanded="true"] .industries__more-pill-chev {
  transform: rotate(180deg);
}

/* =========================================================
   RESPONSIVE - below 1024, image goes BELOW content in row
   ========================================================= */
@media (max-width: 1023px) {
  .industries__row {
    grid-template-columns: 1fr;
    grid-template-rows: auto 0fr;
    transition:
      grid-template-rows 520ms var(--ease-out),
      background 320ms var(--ease-out);
  }
  .industries__row[data-active="true"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .industries__row-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industries__row,
  .industries__row-body,
  .industries__row-body-inner,
  .industries__row-image img,
  .industries__row-plus-v { transition: none !important; }
}