/* Clean Steam Generators page styles.
   Loaded by page-clean-steam-generators.php after electrosteam-style.
   Everything is scoped to .clean-steam-page so this file stands alone: the
   sticky anchor bar, the framed photo with its red corner rule, the
   stage/copy split and the wide .csg-line-card links. Colors, fonts and
   spacing come from the style.css tokens only. */

/* The page heading is the house .page-heading-bar with no local override:
   ground, padding, eyebrow, H1 and the .page-heading-sub lede line are all
   managed from style.css so every page on the site matches. */

/* =========================================
   STICKY ANCHOR BAR - seven links, scrolls sideways, never wraps
   .site-header is the only other sticky element (72px tall)
========================================= */
.clean-steam-page .anchor-bar {
  position      : sticky;
  top           : 72px;
  z-index       : 900;
  /* The page gutter lives on the bar, not on .anchor-bar-inner: the inner
     wrapper carries no padding, so the first link starts exactly on the
     max-width edge that the section content below starts on, and narrow
     screens still keep their gutter. */
  padding       : 0 24px;
  background    : var(--white);
  border-bottom : 1px solid var(--gray-light);
  box-shadow    : 0 1px 8px rgba(0, 0, 0, 0.05);
}

.clean-steam-page .anchor-bar-inner {
  max-width          : var(--max-width);
  margin             : 0 auto;
  display            : flex;
  flex-wrap          : nowrap;
  gap                : 4px;
  overflow-x         : auto;
  scrollbar-width    : none;
  -ms-overflow-style : none;
  -webkit-overflow-scrolling : touch;
}

.clean-steam-page .anchor-bar-inner::-webkit-scrollbar {
  display : none;
}

.clean-steam-page .anchor-link {
  position        : relative;
  display         : block;
  flex            : 0 0 auto;
  padding         : 17px 14px 16px;
  font-family     : var(--font-body);
  font-size       : 0.88rem;
  font-weight     : 700;
  text-transform  : uppercase;
  letter-spacing  : 0.08em;
  color           : var(--gray-text);
  white-space     : nowrap;
  text-decoration : none;
  transition      : color 0.15s;
}

.clean-steam-page .anchor-link:hover {
  color           : var(--navy-dark);
  text-decoration : none;
}

.clean-steam-page .anchor-link.active {
  color : var(--red);
}

.clean-steam-page .anchor-link::after {
  content          : '';
  position         : absolute;
  left             : 14px;
  right            : 14px;
  bottom           : 0;
  height           : 3px;
  background       : var(--red);
  transform        : scaleX(0);
  transform-origin : left center;
  transition       : transform 0.2s ease;
}

.clean-steam-page .anchor-link.active::after {
  transform : scaleX(1);
}

/* Every anchor target clears the sticky header + the anchor bar.
   Must match OFFSET in the anchor-bar script. */
.clean-steam-page section[id] {
  scroll-margin-top : 140px;
}

/* .inner-prose ul out-specifies .check-list, which would add disc markers and a
   24px indent on top of the check icons. Restore the check-list look. */
.clean-steam-page .inner-prose ul.check-list,
.clean-steam-page .product-feature-card ul.check-list {
  list-style : none;
  margin     : 0 0 24px;
  padding    : 0;
}

.clean-steam-page .inner-prose ul.check-list li,
.clean-steam-page .product-feature-card ul.check-list li {
  padding       : 5px 0 5px 28px;
  margin-bottom : 0;
}

/* =========================================
   OVERVIEW: copy left, the framed local photo right
========================================= */
.clean-steam-page .csg-overview-section {
  background : var(--white);
  padding    : 56px 24px 60px;
}

.clean-steam-page .csg-overview-inner {
  max-width             : var(--max-width);
  margin                : 0 auto;
  display               : grid;
  grid-template-columns : minmax(0, 7fr) minmax(0, 5fr);
  gap                   : 56px;
  align-items           : start;
}

.clean-steam-page .csg-overview-main {
  min-width : 0;
}

.clean-steam-page .csg-overview-lead {
  font-size : 1.08rem;
  color     : var(--navy-dark);
}

.clean-steam-page .csg-overview-h3 {
  margin : 28px 0 12px;
}

/* First thing in the overview column now that the lede lives under the H1 */
.clean-steam-page .csg-overview-h3--first {
  margin-top : 0;
}

.clean-steam-page .csg-purity-list {
  margin-bottom : 18px !important;
}

/* Framed photo with a red corner rule (no UL mark: that belongs on the item
   pages, not on a family overview) ---------------------------------------- */
.clean-steam-page .csg-overview-figure {
  position     : sticky;
  top          : 148px;
  margin       : 0;
  justify-self : end;
  width        : 100%;
  max-width    : 480px;
}

.clean-steam-page .csg-overview-figure-frame {
  position      : relative;
  z-index       : 1;
  display       : block;
  background    : var(--white);
  border        : 1px solid var(--gray-light);
  padding       : 12px;
  border-radius : 4px;
}

/* The source file is a 1618x1675 original: the intrinsic width/height on the
   tag keeps its aspect ratio reserved, and these rules cap the rendered size
   at the column. */
.clean-steam-page .csg-overview-figure-frame img {
  display       : block;
  width         : 100%;
  max-width     : 100%;
  height        : auto;
  border-radius : 2px;
}

/* The rule hangs off the frame, not the whole figure, so it never crosses
   the caption line below it. */
.clean-steam-page .csg-overview-figure-frame::after {
  content       : '';
  position      : absolute;
  right         : -14px;
  bottom        : -14px;
  width         : 104px;
  height        : 104px;
  border-right  : 3px solid var(--red);
  border-bottom : 3px solid var(--red);
}

.clean-steam-page .csg-overview-figcaption {
  position    : relative;
  z-index     : 1;
  padding     : 28px 2px 0;
  font-family : var(--font-body);
  font-size   : 0.9rem;
  font-weight : 700;
  line-height : 1.4;
  color       : var(--navy-dark);
}

/* =========================================
   STANDARD FEATURES: V3 copy left, the four family cards right
========================================= */
.clean-steam-page .csg-features-section {
  background : var(--off-white);
  border-top : 1px solid var(--gray-light);
  padding    : 60px 24px 64px;
}

.clean-steam-page .csg-features-inner {
  max-width             : var(--max-width);
  margin                : 0 auto;
  display               : grid;
  grid-template-columns : minmax(0, 7fr) minmax(0, 5fr);
  gap                   : 56px;
  align-items           : start;
}

.clean-steam-page .csg-features-prose {
  min-width : 0;
  max-width : 78ch;
}

.clean-steam-page .csg-features-prose h2 {
  margin-top : 0;
}

.clean-steam-page .csg-family-choices {
  min-width : 0;
}

.clean-steam-page .csg-family-choices-label {
  margin         : 0 0 12px;
  font-family    : var(--font-body);
  font-size      : 0.72rem;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.1em;
  color          : var(--red);
}

/* Four WIDE horizontal family cards, stacked: thumb on the left at the
   enlarged dry-steam-V13 scale (130px column / 93px tall), name and its
   one-liner on the right, red accent on the left edge. The markup shape and
   these rules are the V13 line-card look re-scoped here, so this file stands
   alone. Four cards fit the column comfortably: at a 517px column the thumb
   still sets the card height (~125px), and the stack lands well short of the
   Standard Features copy beside it, so the V13 sizes are kept as they are. -- */
.clean-steam-page .csg-line-cards {
  display        : flex;
  flex-direction : column;
  gap            : 14px;
}

.clean-steam-page .csg-line-card {
  display               : grid;
  grid-template-columns : 130px minmax(0, 1fr);
  column-gap            : 22px;
  align-items           : center;
  background            : var(--white);
  border                : 1px solid var(--gray-light);
  border-left           : 3px solid var(--red);
  border-radius         : 0 6px 6px 0;
  padding               : 16px 22px;
  box-shadow            : 0 2px 10px rgba(9, 28, 46, 0.07);
  color                 : inherit;
  text-decoration       : none !important;
  transition            : border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* These are links, so they keep the V13 hover: the accent brightens, the card
   lifts and slides a couple of pixels toward the copy it jumps to. */
.clean-steam-page .csg-line-card:hover,
.clean-steam-page .csg-line-card:focus-visible {
  border-left-color : var(--red-bright);
  box-shadow        : 0 8px 24px rgba(9, 28, 46, 0.16);
  transform         : translateX(2px);
}

.clean-steam-page .csg-line-card-figure {
  width         : 100%;
  height        : 93px;
  object-fit    : contain;
  background    : var(--white);
  border-radius : 4px;
}

.clean-steam-page .csg-line-card-body {
  display        : flex;
  flex-direction : column;
  min-width      : 0;
}

.clean-steam-page .csg-line-card-title {
  display       : block;
  font-family   : var(--font-body);
  font-size     : 1.06rem;
  font-weight   : 700;
  line-height   : 1.2;
  color         : var(--navy-dark);
  margin-bottom : 5px;
}

.clean-steam-page .csg-line-card-text {
  display     : block;
  font-size   : 0.84rem;
  line-height : 1.5;
  color       : var(--gray-text);
}

.clean-steam-page .csg-line-card:hover .csg-line-card-title {
  color : var(--red);
}

/* =========================================
   THE FOUR FAMILY SECTIONS - static, figure on the left in every one
   (the conveyor page's rhythm; only the band color alternates)
========================================= */
.clean-steam-page .csg-family-section {
  background : var(--white);
  border-top : 1px solid var(--gray-light);
  padding    : 56px 24px 60px;
}

.clean-steam-page .csg-family-section--alt {
  background : var(--off-white);
}

.clean-steam-page .csg-family-inner {
  max-width : var(--max-width);
  margin    : 0 auto;
}

.clean-steam-page .series-split {
  display               : grid;
  grid-template-columns : minmax(0, 5fr) minmax(0, 7fr);
  gap                   : 56px;
  align-items           : center;
}

.clean-steam-page .series-stage-col,
.clean-steam-page .series-copy-col {
  min-width : 0;
}

/* Stage: the framed photo, same corner rule as the overview figure */
.clean-steam-page .series-stage {
  position  : relative;
  margin    : 0;
  width     : 100%;
  max-width : 500px;
}

.clean-steam-page .series-stage-frame {
  position        : relative;
  z-index         : 1;
  display         : flex;
  align-items     : center;
  justify-content : center;
  aspect-ratio    : 4 / 3;
  background      : var(--white);
  border          : 1px solid var(--gray-light);
  padding         : 14px;
  border-radius   : 4px;
}

.clean-steam-page .series-stage-frame img {
  display       : block;
  width         : 100%;
  height        : 100%;
  object-fit    : contain;
  border-radius : 2px;
}

/* Absolutely positioned, so it stays out of the frame's flex layout */
.clean-steam-page .series-stage-frame::after {
  content       : '';
  position      : absolute;
  right         : -14px;
  bottom        : -14px;
  width         : 104px;
  height        : 104px;
  border-right  : 3px solid var(--red);
  border-bottom : 3px solid var(--red);
}

.clean-steam-page .series-stage-caption {
  position    : relative;
  z-index     : 1;
  padding     : 28px 2px 0;
  font-family : var(--font-body);
  font-size   : 0.95rem;
  font-weight : 700;
  line-height : 1.4;
  color       : var(--navy-dark);
}

/* Copy column - no eyebrow; the H2 opens the column --------------------- */
.clean-steam-page .series-h2 {
  font-family : var(--font-body);
  font-size   : clamp(1.5rem, 2.4vw, 2rem);
  font-weight : 700;
  line-height : 1.15;
  color       : var(--navy-dark);
  margin      : 0 0 16px;
}

/* No measure cap: the copy column IS the measure here, and the section reads
   as one block only when the paragraph, the table and the button share an
   edge. */
.clean-steam-page .series-copy {
  font-size : 1.04rem;
  color     : var(--navy-dark);
}

.clean-steam-page .series-copy-col .product-table-wrap {
  margin : 22px 0 0;
}

/* .inner-prose table adds 24px/32px of margin, which would show as a band of
   section background inside the wrap's shadowed, rounded box. */
.clean-steam-page .series-copy-col .product-table-wrap table {
  margin     : 0;
  background : var(--white);
}

/* Series rows are not clickable - only the model-name link and the button in
   the last cell are - so the house .product-table row hover reads as a false
   affordance. Suppressed the way the theme suppresses it for .spec-table. */
.clean-steam-page .series-copy-col .product-table tbody tr:hover {
  background : transparent;
}

.clean-steam-page .series-copy-col .product-table td a {
  font-weight : 700;
  color       : var(--navy-dark);
}

.clean-steam-page .series-copy-col .product-table td a:hover {
  color : var(--red);
}

.clean-steam-page .series-btn-row {
  display   : flex;
  flex-wrap : wrap;
  gap       : 12px;
  margin    : 26px 0 0;
}

/* A compact .btn-red in the last cell of every table row ------------------
   The house .btn padding (12px/26px, 0.98rem) is a page CTA and would make the
   row twice as tall as its type, so the size is cut here rather than a new
   button variant being invented. .product-table--fixed splits four columns
   evenly by default, which starves the action cell and leaves the three data
   cells over-wide, so the widths are set explicitly. */
.clean-steam-page .series-copy-col .product-table--fixed th:nth-child(1),
.clean-steam-page .series-copy-col .product-table--fixed td:nth-child(1) { width : 27%; }

.clean-steam-page .series-copy-col .product-table--fixed th:nth-child(2),
.clean-steam-page .series-copy-col .product-table--fixed td:nth-child(2) { width : 21%; }

.clean-steam-page .series-copy-col .product-table--fixed th:nth-child(3),
.clean-steam-page .series-copy-col .product-table--fixed td:nth-child(3) { width : 13%; }

.clean-steam-page .series-copy-col .product-table--fixed th:nth-child(4),
.clean-steam-page .series-copy-col .product-table--fixed td:nth-child(4) { width : 39%; }

.clean-steam-page .series-copy-col .product-table-action {
  padding-top    : 9px;
  padding-bottom : 9px;
  text-align     : right;
}

.clean-steam-page .series-copy-col .csg-table-btn {
  padding        : 7px 14px;
  font-size      : 0.78rem;
  font-weight    : 700;
  line-height    : 1.2;
  letter-spacing : 0.01em;
  border-width   : 1px;
}

/* The house .product-table td a rule paints series links navy; the button
   keeps its own white on red, hover included. */
.clean-steam-page .series-copy-col .product-table td a.csg-table-btn,
.clean-steam-page .series-copy-col .product-table td a.csg-table-btn:hover {
  color : var(--white);
}

/* An empty 4th header cell would read as a blank column to a screen reader. */
.clean-steam-page .csg-sr-only {
  position : absolute;
  width    : 1px;
  height   : 1px;
  margin   : -1px;
  padding  : 0;
  overflow : hidden;
  clip     : rect(0, 0, 0, 0);
  border   : 0;
}

/* =========================================
   APPLICATIONS
========================================= */
.clean-steam-page .csg-applications-section {
  background : var(--white);
  border-top : 1px solid var(--gray-light);
  padding    : 60px 24px 64px;
}

.clean-steam-page .csg-applications-inner {
  max-width : var(--max-width);
  margin    : 0 auto;
}

/* Full width of the card grid below it, no measure cap. */
.clean-steam-page .csg-applications-head {
  margin-bottom : 28px;
}

.clean-steam-page .csg-applications-head h2 {
  margin-top : 0;
}

/* stretch, now that the pharma card stops after its first list: the two cards
   are within a couple of lines of each other, so equal heights with both
   buttons on the same baseline reads as a pair rather than two strays. */
.clean-steam-page .csg-application-cards {
  display               : grid;
  grid-template-columns : minmax(0, 1fr) minmax(0, 1fr);
  gap                   : 28px;
  align-items           : stretch;
}

.clean-steam-page .csg-application-card {
  display        : flex;
  flex-direction : column;
  border-top     : 3px solid var(--red);
}

.clean-steam-page .csg-application-card .product-feature-h3 {
  margin-top : 0;
}

.clean-steam-page .csg-application-card p {
  font-size     : 1rem;
  line-height   : 1.65;
  color         : var(--gray-text);
  margin-bottom : 16px;
}

.clean-steam-page .csg-application-card p:last-of-type {
  margin-bottom : 0;
}

.clean-steam-page .csg-application-sub {
  font-family    : var(--font-body);
  font-size      : 0.78rem !important;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.08em;
  color          : var(--navy-dark) !important;
  margin-bottom  : 12px !important;
}

.clean-steam-page .csg-application-card ul.check-list {
  margin-bottom : 18px;
  font-size     : 0.95rem;
  line-height   : 1.55;
}

/* auto: the equal-height cards put both buttons on one baseline. */
.clean-steam-page .csg-application-btn-row {
  margin-top  : auto;
  padding-top : 22px;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1200px) {
  .clean-steam-page .csg-overview-inner,
  .clean-steam-page .csg-features-inner,
  .clean-steam-page .series-split {
    gap : 40px;
  }

  .clean-steam-page .anchor-link {
    padding        : 17px 11px 16px;
    font-size      : 0.82rem;
    letter-spacing : 0.05em;
  }

  .clean-steam-page .anchor-link::after {
    left  : 11px;
    right : 11px;
  }

  /* The thumb column steps down with the narrowing card, not the copy. */
  .clean-steam-page .csg-line-card {
    grid-template-columns : 116px minmax(0, 1fr);
    column-gap            : 18px;
  }

  .clean-steam-page .csg-line-card-figure {
    height : 84px;
  }
}

@media (max-width: 1024px) {
  .clean-steam-page .csg-overview-inner,
  .clean-steam-page .csg-features-inner {
    grid-template-columns : minmax(0, 1fr);
    gap                   : 40px;
  }

  .clean-steam-page .csg-overview-figure {
    position     : static;
    justify-self : start;
  }

  .clean-steam-page .csg-features-prose {
    max-width : none;
  }

  /* The features band is one column here, so cap the card stack: full width
     would stretch each wide card far past its thumb. */
  .clean-steam-page .csg-family-choices {
    max-width : 780px;
  }

  .clean-steam-page .csg-application-cards {
    gap : 20px;
  }
}

@media (max-width: 900px) {
  .clean-steam-page .csg-overview-section,
  .clean-steam-page .csg-features-section,
  .clean-steam-page .csg-family-section,
  .clean-steam-page .csg-applications-section {
    padding : 44px 20px;
  }

  /* Single column: the stage sits above the copy in every family section. */
  .clean-steam-page .series-split {
    grid-template-columns : minmax(0, 1fr);
    gap                   : 30px;
    align-items           : start;
  }

  .clean-steam-page .series-stage {
    max-width : 100%;
  }

  .clean-steam-page .csg-application-cards {
    grid-template-columns : minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .clean-steam-page .anchor-bar {
    padding : 0 12px;
  }

  .clean-steam-page .anchor-link {
    padding   : 14px 10px 13px;
    font-size : 0.8rem;
  }

  .clean-steam-page .anchor-link::after {
    left  : 10px;
    right : 10px;
  }

  .clean-steam-page .series-copy-col .product-table-wrap {
    max-width : 100%;
  }
}

@media (max-width: 600px) {
  /* The wide card keeps its shape on a phone, one size down. */
  .clean-steam-page .csg-line-card {
    grid-template-columns : 105px minmax(0, 1fr);
    column-gap            : 16px;
    padding               : 14px 16px;
  }

  .clean-steam-page .csg-line-card-figure {
    height : 78px;
  }

  .clean-steam-page .csg-line-card-title {
    font-size : 1rem;
  }

  .clean-steam-page .csg-overview-figure-frame::after,
  .clean-steam-page .series-stage-frame::after {
    right  : -8px;
    bottom : -8px;
    width  : 72px;
    height : 72px;
  }

  .clean-steam-page .series-btn-row .btn,
  .clean-steam-page .csg-application-btn-row .btn {
    width      : 100%;
    text-align : center;
  }
}

/* The house rules stack .product-table rows as cards below 480px. With
   table-layout:fixed still in force the block-level <tr> shrinks to about half
   the column; switching the table and its tbody to blocks lets the card fill
   the width. */
@media (max-width: 480px) {
  .clean-steam-page .series-copy-col .product-table-wrap {
    max-width : 100%;
  }

  .clean-steam-page .series-copy-col .product-table,
  .clean-steam-page .series-copy-col .product-table tbody {
    display : block;
    width   : 100%;
  }

  .clean-steam-page .series-copy-col .product-table tbody tr {
    margin-bottom : 12px;
  }

  /* The house rules turn each td into a block here, and a percentage width on
     a block is no longer a column share - it clamps the card row to a sliver
     and the button spills out of it. Widths and the right alignment are both
     column-layout ideas; neither survives the stack. */
  .clean-steam-page .series-copy-col .product-table--fixed td:nth-child(1),
  .clean-steam-page .series-copy-col .product-table--fixed td:nth-child(2),
  .clean-steam-page .series-copy-col .product-table--fixed td:nth-child(3),
  .clean-steam-page .series-copy-col .product-table--fixed td:nth-child(4) {
    width : auto;
  }

  .clean-steam-page .series-copy-col .product-table-action {
    text-align  : left;
    padding-top : 12px;
  }

  /* Stacked rows are white cards here, so the hover suppression has to match
     the card background rather than fall through to the section. */
  .clean-steam-page .series-copy-col .product-table tbody tr:hover {
    background : var(--white);
  }
}