/* ===============================================================
   Shared equipment layout — clean flow rebuild.
   Loaded AFTER each equipamentos-{slug}.css so these rules win and
   neutralise the per-slug PSD hacks (absolute sidebar, negative-margin
   cards). !important is deliberate: it overrides same-specificity
   per-page rules we don't want to gut in 8 separate files.
   ponytail: shared override file beats editing 8 near-identical files.
   =============================================================== */

/* Kill the per-slug fixed page height so the page grows with content. The
   per-slug files reserve the full PSD canvas via height AND min-height (scanner
   98.2vw, cytation 101.83vw) — both must go or a ~1200px empty band opens above
   the footer once the content flows (HuddleKit 32/42/57 and scanner/cytation). */
body { min-height: 0 !important; }
.equip-layout { height: auto !important; min-height: 0 !important; }

.equip-layout {
  display: flex !important;
  align-items: flex-start;
  gap: clamp(20px,3vw,56px);
  padding: clamp(24px,2.5vw,44px) var(--container-px,14.4%) clamp(60px,8vw,160px) !important;
}

/* Sidebar — category list, flows in the left column. Widened to the PSD box
   (~17vw), with clearer separators and roomier rows so the full category names
   ("Microscopia de fluorescência Widefield" …) read well (HuddleKit 18/27/33/43). */
.equip-sidebar {
  position: static !important;
  left: auto !important; top: auto !important;
  flex: 0 0 clamp(210px,17vw,320px);
  width: auto !important; height: auto !important;
  background: #278465;
  align-self: flex-start;
  border-radius: clamp(4px,.5vw,10px);
  overflow: hidden;
}
.equip-sidebar a {
  display: flex !important; align-items: center; min-height: clamp(42px,2.9vw,54px) !important;
  padding: clamp(10px,.85vw,18px) clamp(14px,1.15vw,24px) !important;
  color: #fff; text-decoration: none;
  font-size: clamp(13px,.94vw,17px); font-weight: 400; line-height: 1.2;
  border-bottom: 1px solid rgba(255,255,255,.4);
  transition: background .15s ease, color .15s ease;
}
.equip-sidebar a:last-child { border-bottom: 0; }
.equip-sidebar a:hover { background: rgba(0,0,0,.12); }
.equip-sidebar a.is-active { font-style: italic; color: #F5D883; }

/* Content column. */
.equip-content {
  flex: 1 1 auto; min-width: 0;
  width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
  position: static !important; transform: none !important;
}
.equip-section-title {
  position: static !important; width: auto !important;
  font-size: clamp(20px,2.4vw,44px); font-weight: 700; font-style: italic;
  text-transform: uppercase; color: #fff; line-height: 1.15;
  margin: 0 0 clamp(24px,3vw,54px);
}

/* Equipment card — teal title bar + [image | info] body. */
.equip-card {
  position: static !important;
  width: auto !important;
  margin: 0 0 clamp(48px,6.5vw,120px) !important;
}
/* Last card's bottom margin + layout padding stacked to ~260px of dead air
   before the footer; drop the margin so only the padding's breathing room stays. */
.equip-card:last-child { margin-bottom: 0 !important; }
.equip-card__header {
  position: static !important;
  width: auto !important; min-height: 0 !important;
  margin: 0 0 clamp(22px,2.4vw,44px) !important;
  background: #375458;
  padding: clamp(12px,1.2vw,22px) clamp(16px,2vw,40px) !important;
  font-size: clamp(15px,1.8vw,32px); font-weight: 700; font-style: italic;
  color: #fff; text-transform: uppercase; letter-spacing: .01em;
  border-radius: clamp(4px,.5vw,10px);
  display: flex; align-items: center;
}
.equip-card__body {
  position: static !important;
  display: flex !important; align-items: flex-start;
  gap: clamp(20px,3vw,54px) !important;
  margin: 0 !important; transform: none !important;
  flex-wrap: wrap;
}
.equip-card__img {
  position: relative !important; margin: 0 !important;
  /* Bigger photo — the PSD gives it roughly half the row; 34% read as a small
     thumbnail (HuddleKit 35/45/50). relative: anchors the EM BREVE badge. */
  flex: 0 0 clamp(240px,44%,620px);
}
.equip-card__img img { width: 100%; height: auto; display: block; border-radius: clamp(4px,.5vw,10px); }
.equip-card__info { position: static !important; margin: 0 !important; flex: 1 1 300px; min-width: 0; }

/* position/width !important: confocal places these absolutely per card
   (.equip-card--mN .equip-specs …) at higher specificity. */
.equip-specs {
  position: static !important; width: auto !important;
  font-size: clamp(13px,1.1vw,20px); line-height: 1.32; color: #fff;
  font-weight: 700; margin: 0 0 clamp(12px,1.4vw,24px);
}
.equip-desc {
  position: static !important; width: auto !important;
  font-size: clamp(13px,1.05vw,19px); line-height: 1.55; color: #fff;
  font-weight: 300; margin: 0 0 clamp(10px,1.1vw,20px);
}
/* list-style none + ::before (not disc): every per-slug file draws its own
   "• " ::before — disc here doubled it ("• •"). ::before also keeps the
   per-page bullet colour from html-v2 (teal on criostatos/invivo/tirf/…). */
.equip-aquisicao {
  position: static !important; width: auto !important;
  list-style: none !important; margin: clamp(12px,1.4vw,24px) 0 0 !important; padding-left: 0 !important;
  font-size: clamp(13px,1.05vw,19px); line-height: 1.5; color: #fff; font-weight: 400;
}
.equip-aquisicao li { margin-bottom: .3em; }
.equip-aquisicao li::before { content: "• "; }
/* EM BREVE — PSD is a dark teal semi-opaque disc with yellow italic text
   overlapping the left of the photo, not loose text below the description
   (HuddleKit 53/54). Rendered inside .equip-card__img. */
.equip-coming-soon {
  position: absolute; z-index: 3;
  left: clamp(-10px,-0.6vw,0px); top: 42%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: clamp(120px,11.1vw,200px); aspect-ratio: 1; border-radius: 50%;
  padding: .5em; box-sizing: border-box;
  background: rgba(15,54,54,.82);
  color: #F5D883; font-weight: 700; font-style: italic; text-transform: uppercase;
  font-size: clamp(15px,1.5vw,27px); line-height: 1.05; letter-spacing: .01em;
}
@media (max-width: 768px) {
  .equip-coming-soon { width: clamp(96px,26vw,150px); font-size: clamp(13px,4vw,20px); }
}

/* Mobile: sidebar stacks on top, single column. */
@media (max-width: 768px) {
  .equip-layout { flex-direction: column; }
  .equip-sidebar { flex-basis: auto; width: 100% !important; }
  .equip-card__img { flex-basis: auto; width: 100%; }
}