/**
 * Equipment megamenu POC (2026-09-28) — partials/equipment-megapanel.twig
 * (desktop, 3 columns: Category / Family / Series) and partials/equipment-
 * mobile-drilldown.twig (mobile).
 *
 * Plain CSS, not Tailwind utility classes, for the same reason event-card.css
 * is plain CSS: this theme's Tailwind build (duravant-oc/dist/assets/
 * style-*.css) is a pre-built, non-live bundle — only utility classes
 * ALREADY present somewhere in the scanned files at the last build actually
 * get a compiled rule. Found the hard way: `col-span-7` compiled to nothing
 * (silently ignored by the browser) while `col-span-5` worked, only because
 * col-span-5 already happened to be used elsewhere on the site. Colors reuse
 * the parent's own `--color-*` custom properties (its `@theme` block, always
 * loaded) — no new values invented, per this project's CSS rules.
 */

/* three-column desktop layout */
.oc-equipment-columns {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.7fr;
  column-gap: 1.5rem;
}

.oc-equipment-col-categories,
.oc-equipment-col-families {
  padding-right: 1.5rem;
  border-right: 1px solid var(--color-gray-light);
}

/* lets column 2 and column 3, wrapped in one x-show'd div per Category, act
   as direct items of the outer 3-column grid (Tailwind's `contents` utility
   isn't compiled in this theme's bundle — see the file header) */
.oc-equipment-contents {
  display: contents;
}

.oc-equipment-series-list {
  display: flex;
  flex-direction: column;
}

/* column 1: Equipment Categories (always visible, vertical) */
.oc-equipment-category-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.3rem 0;
  text-align: left;
  color: var(--color-gray-dark);
  transition: color 0.15s;
}

.oc-equipment-category-item[data-active="true"] {
  color: var(--color-blue-dark);
  font-weight: 500;
}

.oc-equipment-category-item:hover {
  color: var(--color-blue-dark);
}

/* 2026-09-29: the svg itself now carries the real brand icon, circle
   already drawn in (fill #2da0c3, matching --color-blue-dark) — this is
   only a size container any more, no background/border-radius of its own
   (that would draw a second circle behind the svg's own one). */
.oc-equipment-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.oc-equipment-category-icon svg {
  width: 100%;
  height: 100%;
}

/* column 2: Families of the active Category. 2026-10-01: now a <button>
   (was an <a>, hover-activated) — the reset rules (width/text-align/
   background/border/font/cursor) replace what a plain anchor gave it for
   free. */
.oc-equipment-rail-item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
  margin: 0 -0.75rem;
  line-height: 1.35;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s;
}

.oc-equipment-rail-item[data-active="true"] {
  background-color: var(--color-blue-baby);
}

/* column 3: Series of the active Family, one flat list (no grouped blocks) —
   each row is its own 2-cell grid so the Application label (when the Family
   uses it) lines up in its own narrow column to the left of the Series row,
   blank on every row but a group's first. `--flat` (no Family uses
   Application at all) drops that column instead of reserving empty space no
   row will ever fill. */
.oc-equipment-series-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  column-gap: 0.75rem;
  align-items: start;
}

.oc-equipment-series-row--flat {
  grid-template-columns: 1fr;
}

.oc-equipment-series-group-label {
  color: var(--color-gray-dark);
  padding-top: 0.5rem; /* lines up with .oc-equipment-series-link's own top padding */
}

/* SAME treatment as .oc-equipment-rail-item (column 2, Family): identical
   padding/margin/line-height and a background highlight on hover, not the
   name-only underline this had before — deliberately taller rows (2026-09-29
   user request), even for the Family with the most Series (13, "Sachets
   3SS&SUP"). The tagline stays on the Series name's own line (a plain inline
   span, no flex row needed — `display: block` doesn't force its children
   onto separate lines). */
.oc-equipment-series-link {
  display: block;
  padding: 0.4rem 0.6rem;
  margin: 0 -0.75rem;
  line-height: 1.35;
  transition: background-color 0.15s;
}

.oc-equipment-series-link:hover {
  background-color: var(--color-blue-baby);
}

.oc-equipment-series-tagline {
  color: var(--color-gray-dark);
}

.oc-equipment-series-tagline::before {
  content: "\2013\0020"; /* en dash + space */
}

/* mobile drill-down rows (Category / Family / Series screens) */
.oc-equipment-mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin: 0 -0.75rem;
  text-align: left;
}

/* same reasoning as .oc-equipment-category-icon above */
.oc-equipment-mobile-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.oc-equipment-mobile-row-icon svg {
  width: 100%;
  height: 100%;
}

.oc-equipment-mobile-back {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
  margin: 0 -0.75rem 0.5rem;
}

.oc-equipment-mobile-caret {
  width: 0.5rem;
  flex-shrink: 0;
}

/* Blue rounded "pill" treatment (2026-10-06) — same color language as the
   theme's own .button-small-primary (background/border var(--color-blue),
   text var(--color-gray-dark), rounded-full, hover darkens to
   var(--color-blue-dark)) and .category-pill's padding scale, but with a
   much smaller padding box than button-small-primary's own (that one is
   sized for a standalone CTA, not an inline link under a list of items). */
.oc-equipment-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background-color: var(--color-blue-baby);
  color: var(--color-gray-dark);
  font-weight: 500;
  margin-bottom: 1rem;
  transition: background-color 0.15s;
}

.oc-equipment-view-all:hover {
  background-color: var(--color-blue);
}

.oc-equipment-view-all svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.oc-equipment-view-all:hover svg {
  transform: translateX(2px);
}

/* Desktop-only smaller variant (2026-10-01): column 3's "View all {Family}"
   link, and the Palletizing/Turnkey Solutions static-panel's own "View all
   {Category}" link, both sit above other content rather than being the
   whole of a mobile screen — kept small on purpose to help the panel's
   overall height (ongoing concern, same reason column 2/3's row padding was
   already trimmed down above). */
.oc-equipment-view-all--compact {
  padding: 0.1875rem 0.5rem;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.oc-equipment-view-all--compact svg {
  width: 0.625rem;
  height: 0.625rem;
}

/* Palletizing / Turnkey Solutions (2026-10-01): no Family list, just the
   "View all" link above — still needs to occupy column 2+3's width so the
   3-column grid doesn't collapse to a lone narrow column when one of these
   is active. */
.oc-equipment-static-panel {
  grid-column: span 2;
}