/* ===============================================================
   Shared equipment layout — CMS flow port of the static .equip__*
   template (home-html/equipamento-01.html is the canonical source).
   The static pages position every block by absolute canvas-px; with
   variable CMS content that can't hold, so this is a FLOW/stacked
   rebuild that keeps the same visual: title band on top, then one
   .equip__block per equipamento — pill on top, photo + bullets in the
   LEFT column, specs/description in the RIGHT column.

   Decorative art (U8): the page background is a FLAT teal COLOR so it
   fills ANY content height (no black gap / no clipping). The PSD
   decorative pieces — geometric squares (left edge) + fluorescence
   micrographs — are layered on .page as positioned background images.
   Micrographs are SCREEN-blended in the PSD, so their black background
   must drop out: we give them background-blend-mode:screen against the
   teal base. Positions (rem) come from the U7 extraction manifest,
   anchored flow-relative (not dead canvas-y) so they track the
   variable content instead of overshooting it.
   Loaded on all categoria_equipamento pages (see inc/enqueue.php).
   =============================================================== */

/* Flat page green sampled from every equipment PSD (~rgb(21,129,111)).
   Fills the whole .page regardless of content height — kills the black gap. */
:root { --equip-green: #1B8E7B; }   /* design page teal measured from the JPG at 8 clean spots = ~rgb(27,142,123); the flat PSD "Rectangle 15" base (#158070) renders brighter in the artwork, so match the JPG, not the raw shape */

.equip { background: transparent; position: relative; }

/* Large faded concentric "C" arcs sweeping from the top-left of every equipment
   page — a brand header graphic present in each PSD (Imagens e Grafismos/Vector
   Smart Object, MULTIPLY 0.5; the huge shape's curved edges cross the upper-left
   canvas). The site had only the small geo squares, never these arcs — the
   client's "grafismo enorme que falta". Baked (arc ⊗ teal @50%, opaque, seamless
   with --equip-green) into equip-decor-arc.png, cropped to the visible band below
   the 465px header (design y465→977 = 1800x512px = full-width x 32rem) and pinned
   to the .equip top. Sits BEHIND the title/blocks (z-index:1). */
.equip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32rem;
  background: url('../../img/equip-decor-arc.png') left top / 100% auto no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Base: flat teal color on .page for every equipment term (no image → no gap). */
.term-apotome    .page,
.term-tirf       .page,
.term-confocal   .page,
.term-cytation   .page,
.term-scanner    .page,
.term-invivo     .page,
.term-lightsheet .page {
  background: var(--equip-green);
}

/* --- Decorative art layers (per term) ---------------------------------
   Layer order = paint order: FIRST listed paints on top.
   Micrographs get background-blend-mode:screen (black drops out); the geo
   squares are flat teal on transparent → multiply keeps them faithful.

   DESIGN RULE (from the equipment PSDs, confirmed against the client's QA
   model): each micrograph is a BOTTOM-of-page EDGE-BLEED accent — anchored
   to the page bottom, pushed mostly off the LEFT or RIGHT canvas edge so
   only a corner sliver shows, and kept BELOW the spec/description text. It
   must NEVER climb into the right-hand text column or sit behind a pill.
   Earlier revs anchored these mid-page (top N / bottom 30rem+) at full width,
   so they overlapped the paragraphs — the whole HK 154/156/163/164/181-184/
   191/193/203/208/211/212 batch. We pin them low + off-edge instead.
   Sizes are in rem (1rem ≈ 12.8px on this theme). geo squares stay on the
   left gutter (multiply); the reviewer never flagged them. */

.term-apotome .page {
  /* Geo squares only on the page bg; the microscopy tissue image is now a
     per-block element resting on the next pill bar (see .equip__block::before). */
  background-image: url('../../img/equip-01-decor-geo.png');
  background-repeat: repeat-y;
  background-position: left 0 top 20rem;
  background-size: 30.375rem auto;
  background-blend-mode: multiply;
}

/* Tissue micrograph rests on the pill bar of the block below it (design/client
   #154/#155): a decorative element at the top-right of each block after the
   first, sitting just above its own pill, over the right column. screen blend
   drops the asset's black background against the teal page. */
.term-apotome .equip__block:not(:first-of-type)::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-90%);   /* base overlaps onto the pill top, like the design */
  width: 44rem;
  height: 22rem;                  /* clips to just the dome (top of the tall asset) */
  /* Blend the asset's black bg against the page teal WITHIN the element (the box
     becomes seamless teal, the green dome shows) — same trick as the .page decor. */
  background:
    url('../../img/equip-01-decor-microscopy.png') no-repeat right top / 44rem auto,
    var(--equip-green);
  background-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.term-tirf .page {
  background-image:
    url('../../img/equip-02-decor-microscopy.png'),
    url('../../img/equip-02-decor-geo.png');
  background-repeat: no-repeat, no-repeat;
  /* Narrow right-edge sliver, pinned to the page bottom, inside the right
     gutter so it never touches the text column (which ends ~x1338 of 1440). */
  background-position:
    right 0 bottom 0,
    left 0 bottom 20rem;
  background-size:
    7.5rem auto,
    19.625rem auto;
  background-blend-mode: screen, multiply;
}

.term-confocal .page {
  /* Design (EQUIPAMENTOS_03) has THREE micrographs at distinct block-tied heights,
     not one bottom band. Extracted from the PSD (all SCREEN blend, canvas 6489px):
       - cluster (WA0012, green/orange): l0 t878 r502 b1565 = 502x687px, top-left,
         bleeds off the left edge → top-anchored (design y878/16 = 54.875rem).
       - fibers (Imagem Letícia Spinning Disk, green): l958 t1876 r1800 b3268 =
         842px wide, mid-page right edge → top-anchored (y1876/16 = 117.25rem).
       - mosquito (blue): l0 t5699 r888 b6348 = 888x649px, near the footer, bleeds
         left → bottom-anchored ((6489-6348)/16 = 8.8rem above the page bottom). */
  background-image:
    url('../../img/equip-03-decor-cluster.png'),
    url('../../img/equip-03-decor-microscopy-1.png'),
    url('../../img/equip-03-decor-mosquito.png'),
    url('../../img/equip-03-decor-geo.png');
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-y;
  background-position:
    left 0 top 54.875rem,
    right 0 top 117.25rem,
    left 0 bottom 8.8rem,
    left 0 top 30rem;
  background-size:
    31.375rem auto,
    52.625rem auto,
    55.5rem auto,
    30.375rem auto;
  background-blend-mode: screen, screen, screen, multiply;
  background-color: var(--equip-green);
}

.term-cytation .page {
  background-image:
    url('../../img/equip-04-decor-microscopy.png'),
    url('../../img/equip-04-decor-geo.png');
  background-repeat: no-repeat, no-repeat;
  /* Design (EQUIPAMENTOS_04, layer IMG-...WA0014): the orange neuron micrograph is
     a large bottom-right band anchored to the page's bottom-right corner (PSD
     l344 t1748 r1800 b2637 = 1456x889px = 91x55.5rem). Its bottom ~21rem sits
     BEHIND the opaque footer; the top ~34rem shows above it, exactly like the JPG. */
  background-position:
    right 0 bottom 0,
    left 0 bottom 20rem;
  background-size:
    91rem auto,
    24.125rem auto;
  background-blend-mode: screen, multiply;
}

.term-scanner .page {
  background-image:
    url('../../img/equip-06-decor-microscopy.png'),
    url('../../img/equip-06-decor-geo.png');
  background-repeat: no-repeat, no-repeat;
  /* Design (EQUIPAMENTOS_06, layer "02 copy 3"): large purple tissue band anchored
     to the bottom-right corner (PSD l377 t1242 r1800 b2572 = 1423x1330px = 88.9x83.1rem),
     bleeding right. Bottom ~21rem behind the footer; the rest shows above it. */
  background-position:
    right 0 bottom 0,
    left 0 bottom 20rem;
  background-size:
    88.9rem auto,
    19.625rem auto;
  background-blend-mode: screen, multiply;
}

.term-invivo .page {
  background-image:
    url('../../img/equip-07-decor-microscopy.png'),
    url('../../img/equip-07-decor-geo.png');
  background-repeat: no-repeat, no-repeat;
  /* Design (EQUIPAMENTOS_07, layer "imagem"): large holographic spectrum graphic
     spanning almost the full width, anchored bottom-right corner (PSD l44 t1150
     r1800 b2571 = 1756x1421px = 109.75x88.8rem), bleeding far off the right edge.
     Bottom ~21rem behind the footer; the rest shows above it. */
  background-position:
    right 0 bottom 0,
    left 0 bottom 20rem;
  background-size:
    109.75rem auto,
    19.625rem auto;
  background-blend-mode: screen, multiply;
}

.term-lightsheet .page {
  background-image:
    url('../../img/equip-08-decor-microscopy.png'),
    url('../../img/equip-08-decor-geo.png');
  background-repeat: no-repeat, no-repeat;
  /* Design (EQUIPAMENTOS_08, layer WA0020): the light-sheet "fish" micrograph, a
     tall narrow image anchored to the right edge, its bottom ~10rem above the page
     bottom (PSD l1401 t1493 r1800 b2418 in a 2576px canvas = 399x925px = 24.94x57.8rem),
     bleeding slightly off the right. Its lower part tucks behind the footer top. */
  background-position:
    right 0 bottom 9.875rem,
    left 0 bottom 20rem;
  background-size:
    24.9375rem auto,
    18.375rem auto;
  background-blend-mode: screen, multiply;
}

/* criostatos (05): the baked equipamento-05-fundo.webp bakes the green-cell
   micrograph near its own bottom (canvas y~2593), but the CMS page is ~700px
   shorter than the 3542px design canvas, so top-anchoring the webp clips that
   micrograph away (it renders below the footer / off the .page box) — that's why
   the client saw it "missing". Fix: keep the webp top-anchored for the top geo
   squares, and paint the micrograph (extracted from EQUIPAMENTOS_05 PSD, layer
   WA0022: l547 t2593 r1800 b3542 = 1253x949px = 78.3x59.3rem) as a SEPARATE layer
   anchored to the bottom-right corner, so it lands above the footer like the JPG. */
.term-criostatos .page {
  background-image:
    url('../../img/equip-05-decor-microscopy.png'),
    url('../../img/equipamento-05-fundo.webp');
  background-repeat: no-repeat, no-repeat;
  background-position:
    right 0 bottom 0,
    top center;
  background-size:
    78.3rem auto,
    100% auto;
  background-blend-mode: screen, normal;
  background-color: var(--equip-green);
}

/* ===== Head band: page title ===== */
.equip__head {
  position: relative;
  /* Reserve the head band so the first block starts at the design y (~y1121):
     656px from the head top (page-y465) = 41rem. The title is absolutely centered
     inside it (below), so its line-count no longer shifts the blocks. */
  min-height: 41rem;
  padding: 0 var(--container-px, 14.4%);
}

/* Faded CAPI "C" fragment — bleeds in from the top-left, sits BEHIND the title
   (design: large soft arc in the empty left half of the head band). */
/* The design's top-left "C"/arcs are near-invisible background texture, NOT a
   distinct element — the previous bold "C" read as a stray graphic. Hidden. */
.equip__head-c {
  display: none;
}

/* --- Sidebar category list (kept for any markup that still renders it) --- */
.equip__sidebar {
  flex: 0 0 clamp(11rem, 20%, 19.0625rem);
  background: #278465;
  border-radius: 0 0 0.75rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: flex-start;
  overflow: hidden;
}
.equip__sidebar-link {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.55rem 1.125rem;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  letter-spacing: var(--track);
}
.equip__sidebar li + li .equip__sidebar-link { border-top: 1px solid rgba(255, 255, 255, 0.45); }
.equip__sidebar-link--active { color: var(--gold); font-style: italic; }
.equip__sidebar-link em { font-style: italic; }

/* --- Page title (current category) — design metrics: DIN Bold 46px --- */
.equip__title {
  /* Absolutely centered on the design title point (x902, y852). The design
     centers every category title on the same vertical midline (~y852), so 1-line
     titles sit lower and 3-line titles higher — matching by centering, not by a
     fixed top. top = 852-465 = 387px = 24.1875rem; left = 902/1800 = 50.1%. */
  position: absolute;
  z-index: 1;   /* above the header arc */
  top: 24.1875rem;
  left: 50.1%;
  transform: translateY(-50%);
  /* Natural width — line breaks come from the CMS content (nl2br), reproducing the
     design's manual breaks exactly (apotome 3 lines, confocal 2 lines, the rest 1).
     max-content sizes the box to the longest line so no line auto-wraps. */
  width: max-content;
  max-width: 40rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: 2.88rem;
  line-height: 1.078;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: var(--track);
}

/* ===== Content blocks ===== */
/* Near-full-width composition like the static (photo x≈12.75rem, text to the
   right edge). Small right margin; larger left inset so the photo column sits
   at the design x-position. Narrow left inset keeps photo+text on ONE row. */
.equip__block {
  position: relative;
  z-index: 1;                                 /* content above the decorative bg */
  /* Design composition (equipment PSDs): a wide title PILL bar on TOP (bleeds off
     the right edge), then a ROW of [photo LEFT (big) | specs/description RIGHT]
     below it, with the acquisition bullets under the photo. Measured for scanner:
     pill x746→1887 y1121; photo x129 w828 y1228; text x901 y1347; bullets x261 y2021. */
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

/* Title pill — wide dark bar at the TOP of the block, starting at design x746 and
   bleeding off the right canvas edge (rounded left corners, flat right). */
.equip__pill {
  display: flex;
  align-items: center;
  min-height: 6.8125rem;   /* 109px */
  margin: 0 0 0 46.625rem;   /* left x746; flat right edge flush to the page edge (design bleeds off-canvas; clipping at the edge looks identical, no h-overflow). Row starts at the pill bottom (design photo y1228 ≈ pill bottom y1230) */
  background: #365358;
  border-radius: 0.9375rem 0 0 0.9375rem;
  /* Asymmetric top/bottom padding nudges the all-caps text ~6px DOWN so its cap
     height is optically centered like the design (align-items:center centers the
     line box, but caps sit high in it — the font reserves unused descender space).
     Left/right inset 4.9375rem → design text x825. */
  padding: 1.375rem 4.9375rem 0.625rem;
  font-family: var(--font);
  font-weight: 700;
  font-style: italic;
  font-size: 2.88rem;
  line-height: 1.05;
  color: #fff;
  letter-spacing: var(--track);
}

/* Row below the pill: photo LEFT + text RIGHT. */
.equip__row {
  display: flex;
  align-items: flex-start;
  column-gap: 0.25rem;
  padding-left: 8.0625rem;   /* photo left edge → design x129 */
}

/* LEFT column — photo on top, bullets below. The column is 48.25rem (772px); the
   photo fills it and is CLIPPED to it (no overflow) so it ends exactly where the
   text column starts (design x901) and never covers the text. (An earlier rev let
   the photo overflow 56px to mimic the design's transparent-edge tuck, but on
   equipment with a wide/centered body — e.g. the Apotome upright — that edge is
   NOT transparent and the microscope covered the description text.) */
.equip__media {
  flex: 0 0 48.25rem;
  max-width: 48.25rem;
  position: relative;
}
.equip__photo {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Bullets live in the LEFT column, under the photo (design x≈261). */
.equip__bullets {
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.5625rem;
  line-height: 1.416;
  color: #fff;
  letter-spacing: var(--track);
  list-style: none;
  padding: 0;
  margin: clamp(1.5rem, 2.4vw, 2.5rem) 0 0 8.25rem;   /* ~x261 relative to the photo column left (x129) */
}

/* RIGHT column — specs (bold) + description (light italic). Starts lower than the
   photo top, per the design (scanner description at y1347 vs photo top y1228). */
.equip__text {
  min-width: 0;
  max-width: 38.3rem;   /* design text column ~613px */
  margin-top: 7.4rem;   /* ~119px below the row top → design description y-start */
}
.equip__specs,
.equip__desc {
  font-family: var(--font);
  font-size: 1.5625rem;
  color: #fff;
  letter-spacing: var(--track);
  margin: 0 0 clamp(1rem, 1.4vw, 1.5rem);
}
.equip__specs { font-weight: 700; line-height: 1.416; }
.equip__desc { font-weight: 300; font-style: italic; line-height: 1.413; }
.equip__desc p { margin: 0; }
.equip__desc p + p { margin-top: 1.333em; }

/* "EM BREVE" circle badge over coming-soon photos (Ellipse 282px, gold 46px). */
.equip__badge {
  position: absolute;
  top: 8%;
  left: 8%;
  width: 17.625rem;
  height: 17.625rem;
  border-radius: 50%;
  background: #365358;
  box-shadow: 0 0.0625rem 1.125rem rgba(6, 0, 7, 0.43);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 2.876rem;
  line-height: 1;
  color: var(--gold);
  letter-spacing: var(--track);
}

/* ===== Responsive — fluid reflow below 60rem (mobile) ===== */
@media (max-width: 60rem) {
  .equip::before { display: none; }   /* header arc is a desktop-layout graphic */
  .equip__head { min-height: 0; padding-top: 2rem; }
  /* Collapse the desktop grid to a single-column stack (pill → photo → text)
     and drop the large left inset so blocks aren't crammed into a narrow screen. */
  .equip__block { display: block; padding: 0 var(--container-px, 1.25rem); }
  .equip__row { display: block; padding-left: 0; }
  .equip__sidebar { flex-basis: auto; width: 100%; border-radius: 0.75rem; margin-bottom: 2.5rem; }
  .equip__title { position: static; transform: none; top: auto; left: auto; width: auto; font-size: clamp(1.8rem, 7vw, 2.88rem); }
  .equip__head-c { width: 8rem; opacity: 0.5; }   /* small, out of the way on mobile */
  .equip__pill { width: 100%; min-width: 0; margin: 0 0 1.5rem; min-height: 0; padding: 1rem 2rem; border-radius: 0.9375rem; font-size: clamp(1.6rem, 6vw, 2.88rem); }
  .equip__media { width: 100%; max-width: 26rem; margin: 0 auto; }
  .equip__bullets { margin-left: 0; font-size: clamp(0.95rem, 3.4vw, 1.5625rem); }
  .equip__text { width: 100%; max-width: 100%; margin-top: 2rem; padding-right: 0; }
  /* design's manual line breaks are for the 1800px layout — reflow on mobile */
  .equip__desc br { display: none; }
  .equip__specs, .equip__desc { font-size: clamp(0.95rem, 3.4vw, 1.5625rem); }
  .equip__badge { width: 12rem; height: 12rem; font-size: clamp(1.5rem, 6vw, 2.876rem); }

  /* Drop the canvas-scaled decorative micrographs/squares on narrow viewports —
     they are tuned to the 1800px artboard and only clutter mobile. Flat teal stays. */
  .term-apotome .page, .term-tirf .page, .term-confocal .page,
  .term-cytation .page, .term-scanner .page, .term-invivo .page,
  .term-lightsheet .page { background-image: none; }
  .term-criostatos .page { background: var(--equip-green); }
}