/* Eagle Series TruBlu Dry Steam Cleaners page styles.
   Loaded by page-trublu-portable-systems.php after electrosteam-style.
   Cloned from css/dry-steam-cleaners.css: everything is scoped to .tbl-page
   (the page's <main> class) so it cannot reach another page, and every color,
   font and spacing value comes from the style.css tokens. It carries the
   anchor bar, the framed photo with its red corner rule, the TruBlu Advantage
   block, the Available Models section (feature grids + model table in the copy
   column) and the Applications / Downloads prose bands. The wide line cards of
   the dry-steam page are dropped: this page has a single product line.
   Rename .tbl-page and the tbl- prefix together or the page unstyles. */

/* 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 - six links, scrolls sideways, never wraps
   .site-header is the only other sticky element (72px tall)
========================================= */
.tbl-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);
}

.tbl-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;
}

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

.tbl-page .anchor-link {
  position        : relative;
  /* six links: they must scroll sideways, never shrink or wrap */
  flex            : 0 0 auto;
  display         : block;
  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;
}

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

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

.tbl-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;
}

.tbl-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. */
.tbl-page section[id] {
  scroll-margin-top : 140px;
}

/* Shared section heading */
.tbl-page .tbl-section-h2 {
  font-family   : var(--font-body);
  font-size     : clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight   : 700;
  line-height   : 1.2;
  color         : var(--navy-dark);
  margin        : 0 0 14px;
}

/* .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. */
.tbl-page .inner-prose ul.check-list {
  list-style   : none;
  margin-left  : 0;
  padding-left : 0;
}

/* =========================================
   OVERVIEW: copy + choice panels left, framed photo right (V9, unchanged)
========================================= */
.tbl-page .tbl-overview-section {
  background : var(--white);
  padding    : 56px 24px 60px;
}

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

.tbl-page .tbl-overview-main {
  min-width : 0;
}

.tbl-page .tbl-overview-lead {
  font-size     : 1.06rem;
  line-height   : 1.75;
  color         : var(--gray-text);
  margin-bottom : 22px;
}

.tbl-page .tbl-overview-label {
  font-family    : var(--font-body);
  font-size      : 0.78rem;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.1em;
  color          : var(--navy-dark);
  margin-bottom  : 8px;
}

.tbl-page .tbl-overview-checks {
  margin-bottom : 20px;
}

.tbl-page .tbl-overview-btn-row {
  margin-bottom : 26px;
}

.tbl-page .tbl-overview-intro {
  font-size     : 1.02rem;
  line-height   : 1.75;
  color         : var(--gray-text);
  margin-bottom : 24px;
}

.tbl-page .tbl-overview-intro a {
  color : #1a6ed3;
}

/* Framed photo with a red corner rule ---------------------------------- */
.tbl-page .tbl-hero-figure {
  position   : relative;
  margin     : 0;
  align-self : start;
  width      : 100%;
}

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

.tbl-page .tbl-hero-figure-frame img {
  display       : block;
  width         : 100%;
  height        : auto;
  border-radius : 2px;
}

/* Anchored to the frame, not the figure: the caption can run to two lines
   without the bottom stroke crossing it. */
.tbl-page .tbl-hero-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);
}

.tbl-page .tbl-hero-figure figcaption {
  position    : relative;
  z-index     : 1;
  margin-top  : 28px;
  font-size   : 0.88rem;
  line-height : 1.5;
  color       : var(--gray-text);
}

/* =========================================
   THE TRUBLU ADVANTAGE - the dry-steam benefits split with its right-hand
   card column removed (single product line): one measured column of lede,
   rule list and closing paragraphs.
========================================= */
.tbl-page .tbl-benefits-section {
  background : var(--off-white);
  border-top : 1px solid var(--gray-light);
  padding    : 60px 24px 64px;
}

.tbl-page .tbl-benefits-inner {
  max-width : var(--max-width);
  margin    : 0 auto;
}

.tbl-page .tbl-benefits-prose {
  /* One measure for the whole column: the lede, the rule list and the closing
     paragraphs share a right edge instead of each ragging to its own cap. With
     no card column beside it the measure is capped so the advantage lines do
     not run the full section width. */
  min-width : 0;
  max-width : 980px;
}

.tbl-page .tbl-benefits-h2 {
  font-family : var(--font-body);
  font-size   : clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight : 700;
  line-height : 1.2;
  color       : var(--navy-dark);
  margin      : 0 0 14px;
}

/* The pull-statement that opens the column: the benefits paragraph, set one
   step up from body copy so it reads as a lede rather than as a caption on
   the list under it. */
.tbl-page .tbl-benefits-lede {
  font-size     : 1.15rem;
  line-height   : 1.65;
  color         : var(--navy-dark);
  margin-bottom : 22px;
}

/* Flat list with light rules between items - the theme's .tech-def-list
   idiom - instead of the check-icon list V9 used here. No numbers and no
   bullet: the rule is the separator. */
.tbl-page .tbl-benefit-list {
  margin        : 0 0 26px;
  border-top    : 1px solid var(--gray-light);
  border-bottom : 1px solid var(--gray-light);
}

.tbl-page .tbl-benefit-item {
  margin      : 0;
  padding     : 14px 2px;
  font-family : var(--font-body);
  font-size   : 1rem;
  font-weight : 400;
  line-height : var(--lh-body);
  color       : var(--gray-text);
}

/* Each advantage opens with its own bold label, so the row weight moves onto
   the label and the sentence after it stays running text. */
.tbl-page .tbl-benefit-item strong {
  color       : var(--navy-dark);
  font-weight : 700;
}

/* The closing paragraphs under the rule list. */
.tbl-page .tbl-benefits-outro {
  font-size     : 1rem;
  line-height   : 1.7;
  color         : var(--gray-text);
  margin-bottom : 0;
}

.tbl-page .tbl-benefit-hr {
  border     : none;
  border-top : 1px solid var(--gray-light);
  margin     : 0;
}

.tbl-page .tbl-benefits-contact {
  font-size     : 1rem;
  line-height   : 1.7;
  color         : var(--gray-text);
  margin-bottom : var(--sp-2);
}

/* =========================================
   THE THREE SERIES SECTIONS - figure column fixed on the LEFT in all three
   (clean steam V1's rhythm). The spec table sits in the RIGHT copy
   column, under the summary paragraphs and above the red button, and reduces
   it to a single summary row.
========================================= */
.tbl-page .tbl-line-section {
  padding    : 56px 24px 60px;
  background : var(--white);
  border-top : 1px solid var(--gray-light);
}

.tbl-page .tbl-line-section--alt {
  background : var(--off-white);
}

.tbl-page .tbl-line-inner {
  max-width : var(--max-width);
  margin    : 0 auto;
}

.tbl-page .tbl-series-split {
  display               : grid;
  /* The copy column carries the summary paragraphs, the four-column spec row
     and the button, so it takes the wider half again; the figure column holds
     nothing but the framed photo. Top-aligned, so the H2 starts on the same
     line as the top of that photo. */
  grid-template-columns : minmax(0, 5fr) minmax(0, 7fr);
  gap                   : 56px;
  align-items           : start;
}

.tbl-page .tbl-series-figure-col,
.tbl-page .tbl-series-copy-col {
  min-width : 0;
}

.tbl-page .tbl-line-figure {
  position : relative;
  margin   : 0;
}

.tbl-page .tbl-line-figure-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);
  border-radius   : 4px;
  padding         : 14px;
}

.tbl-page .tbl-line-figure-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 */
.tbl-page .tbl-line-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);
}

.tbl-page .tbl-line-figure figcaption {
  position    : relative;
  z-index     : 1;
  margin-top  : 28px;
  font-size   : 0.9rem;
  font-weight : 700;
  line-height : 1.4;
  color       : var(--navy-dark);
}

/* The models table under the feature grids ------------------------------ */
.tbl-page .tbl-series-table-wrap {
  width      : 100%;
  box-shadow : 0 2px 12px rgba(9, 28, 46, 0.08);
}

/* The table now lives inside .inner-prose, whose house rule puts 24px/32px
   margins on every table. Those margins sit INSIDE the shadowed wrapper (it
   scrolls, so they cannot collapse out of it) and left a band of empty white
   above and below the single row. The wrapper's own spacing comes from the
   label above it and the button row below it. */
.tbl-page .tbl-series-copy-col .product-table-wrap table {
  margin : 0;
}

/* =========================================
   FEATURE GRIDS IN THE COPY COLUMN
   electrosteam_feature_grid() prints .product-feature-h3 + .product-table-wrap
   pairs above the models table. Inside .inner-prose the house h3 and even-row
   rules out-specify the product ones, so the product look is restored here.
========================================= */
.tbl-page .tbl-series-copy-col .product-feature-h3 {
  font-size : 1.25rem;
  margin    : var(--sp-2) 0 var(--sp-1);
}

.tbl-page .tbl-series-copy-col .product-feature-h3:first-child {
  margin-top : 0;
}

.tbl-page .tbl-series-copy-col .product-table-wrap {
  margin-bottom : var(--sp-2);
}

/* Bordered white cells on every row - .inner-prose zebra-stripes even rows. */
.tbl-page .tbl-series-copy-col .product-table--feature-grid td {
  background : var(--white);
}

/* One row per model plus a button column, sitting in the wider copy column:
   close to the house .product-table, trimmed a step so the headers fit on one
   line each at 1024 and above. Auto layout (no --fixed) lets each column take only
   the width its value needs; the header labels are the long strings here, so
   they are the ones allowed to wrap. */
.tbl-page .tbl-series-table {
  font-size : 0.92rem;
}

.tbl-page .tbl-series-table th {
  white-space    : normal;
  line-height    : 1.25;
  vertical-align : bottom;
  font-size      : 0.72rem;
  letter-spacing : 0.06em;
  padding        : 12px 16px;
}

.tbl-page .tbl-series-table td {
  white-space : nowrap;
  padding     : 14px 16px;
  font-weight : 600;
  color       : var(--navy-dark);
}

/* The row itself is not clickable (the Model # link and the View Model button
   are), so the house row hover would read as a false affordance. Suppressed
   the way the theme suppresses it for .spec-table. */
.tbl-page .tbl-series-table tbody tr:hover {
  background : transparent;
}

/* Model # links: house link color inside the navy-weight cell. */
.tbl-page .tbl-series-table td a:not(.btn) {
  color           : var(--red);
  text-decoration : none;
}

.tbl-page .tbl-series-table td a:not(.btn):hover {
  text-decoration : underline;
}

/* The View Model button: the house red button trimmed to row height, in a
   right-aligned cell that takes only the width the button needs. */
.tbl-page .tbl-series-table .tbl-model-btn-cell {
  width      : 1%;
  text-align : right;
}

.tbl-page .tbl-model-btn {
  padding   : 7px 14px;
  font-size : 0.78rem;
}

/* =========================================
   APPLICATIONS - single-column check-lists (the dry-steam page's two-column
   industry list has no equivalent here: these items run long).
========================================= */
.tbl-page .tbl-applications-section {
  background : var(--white);
  border-top : 1px solid var(--gray-light);
}

.tbl-page .tbl-applications-section .check-list li {
  margin-bottom : var(--sp-1);
}

/* The bold lead-in of each item carries the industry link. */
.tbl-page .tbl-applications-section .check-list li strong a {
  color : #1a6ed3;
}

/* =========================================
   DOWNLOADS - the item page's compact PDF buttons, spread across the prose
   band as a grid instead of stacking down a narrow image column.
========================================= */
.tbl-page .tbl-downloads-section {
  background : var(--off-white);
  border-top : 1px solid var(--gray-light);
}

.tbl-page .inner-prose ul.product-downloads-compact-list {
  list-style            : none;
  margin                : 0;
  padding               : 0;
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(320px, 1fr));
  gap                   : var(--sp-1);
}

.tbl-page .product-downloads-compact-list li {
  margin-bottom : 0;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1200px) {
  .tbl-page .tbl-overview-inner {
    gap : 36px;
  }

  .tbl-page .tbl-benefits-inner,
  .tbl-page .tbl-series-split {
    gap : 40px;
  }

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

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

  /* The copy column is at its narrowest here, so the single spec row tightens
     once before the layout stacks at 1024. */
  .tbl-page .tbl-series-table {
    font-size : 0.86rem;
  }

  .tbl-page .tbl-series-table th,
  .tbl-page .tbl-series-table td {
    padding : 11px 12px;
  }
}

@media (max-width: 1024px) {
  .tbl-page .tbl-overview-inner {
    grid-template-columns : minmax(0, 1fr);
    gap                   : 36px;
  }

  .tbl-page .tbl-hero-figure {
    max-width : 560px;
  }

  .tbl-page .tbl-benefits-prose {
    max-width : none;
  }

  /* Stacked: photo on top, copy underneath. The photo is capped so it does not
     run to the full section width, while the single spec row - which reads as
     a data strip - is allowed to. */
  .tbl-page .tbl-series-split {
    grid-template-columns : minmax(0, 1fr);
    gap                   : 32px;
    align-items           : start;
  }

  .tbl-page .tbl-series-figure-col {
    max-width : 560px;
  }

  .tbl-page .tbl-series-table {
    font-size : 0.93rem;
  }

  .tbl-page .tbl-series-table th,
  .tbl-page .tbl-series-table td {
    padding : 13px 18px;
  }

  .tbl-page .tbl-series-table th {
    font-size : 0.76rem;
  }
}

@media (max-width: 900px) {
  .tbl-page .tbl-overview-section,
  .tbl-page .tbl-benefits-section,
  .tbl-page .tbl-line-section {
    padding : 44px 20px;
  }
}

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

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

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

  .tbl-page .tbl-benefits-lede {
    font-size : 1.08rem;
  }
}

@media (max-width: 600px) {
  .tbl-page .tbl-hero-figure-frame::after,
  .tbl-page .tbl-line-figure-frame::after {
    right  : -8px;
    bottom : -8px;
    width  : 72px;
    height : 72px;
  }

  .tbl-page .tbl-overview-btn-row .btn {
    width           : 100%;
    justify-content : center;
    text-align      : center;
  }
}

/* The house rules stack .product-table rows as cards below 480px: each td
   becomes a block prefixed with its data-label. The nowrap and the compact
   padding are column-layout ideas that do not survive that stack. */
@media (max-width: 480px) {
  .tbl-page .tbl-series-table td {
    white-space : normal;
    padding     : 8px 16px;
  }

  .tbl-page .tbl-series-table th,
  .tbl-page .tbl-series-table td {
    font-size : 0.9rem;
  }

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

  .tbl-page .tbl-series-table-wrap {
    box-shadow : none;
  }

  /* Stacked-card layout: the button cell carries no label, so drop the
     data-label prefix the house rule prints and let the button fill the card. */
  .tbl-page .tbl-series-table td.tbl-model-btn-cell {
    width      : auto;
    text-align : left;
    padding    : 12px 16px 8px;
  }

  .tbl-page .tbl-series-table td.tbl-model-btn-cell::before {
    display : none;
  }

  .tbl-page .tbl-model-btn {
    width           : 100%;
    justify-content : center;
  }
}