/* ============================================================
   inventory — the pre-owned listings at /inventory and
   /sale-leaseback-inventory.

   Page-scoped on the css/home-programs.css precedent: two pages want this
   module and 100+ do not, so it is loaded by those two rather than folded
   into css/luxury.css. The leaseback page uses the image rules only — it
   lists three aircraft, so it has no filter rail and every card links a
   spec sheet.

   It exists for one reason. The listing reuses .lux-aircraft-card from
   luxury.css, and that component is built for photographs: its image box is
   aspect-ratio:4/3 with object-fit:cover. The CMS artwork here is a
   transparent side-profile cutout — 500x151, 800x264, about 3.3:1 — so cover
   would crop every aircraft to a slice of fuselage with the nose and tail cut
   off. Everything below either undoes that or dresses the filter rail.

   Loaded AFTER luxury.css, and every override is one class deeper than the
   rule it beats (.lux-inv-grid .lux-aircraft-card img vs
   .lux-aircraft-card img), so nothing here relies on source order alone.
   ============================================================ */

/* ---- the image box ------------------------------------------------------ */

/* contain, not cover: nothing may be cropped.

   The height is FIXED rather than auto, and that is the load-bearing bit. The
   artwork runs from 3.0:1 to 4.2:1, so a width-constrained auto height gives
   every card a different image box — and because the cards are grid items
   whose bodies begin where the image ends, a row of three then steps its
   headings 19px apart. A fixed box letterboxes each cutout instead, which
   both levels the rows and normalises the aircraft to a common height rather
   than a common width. It also means the space is reserved before the image
   loads, with or without the width/height attributes. */
.lux-inv-grid .lux-aircraft-card img{
  aspect-ratio:auto;
  object-fit:contain;
  width:100%;
  height:180px;
  background:var(--fe-paper);
  border:1px solid var(--fe-line);
  padding:18px 20px;
}

/* The cutouts sit on a panel rather than the page, so the alpha reads as
   deliberate framing instead of a missing background. The hover scale from
   the component would push the artwork past that panel's edge, so it is
   dropped here and the border takes the hover instead. */
.lux-inv-grid .lux-aircraft-card:hover img,
.lux-inv-grid .lux-aircraft-card:focus-visible img{
  transform:none;
  border-color:var(--fe-blue);
}

/* ---- the card ----------------------------------------------------------- */

.lux-inv-grid .lux-aircraft-card{scroll-margin-top:96px}

/* Five airframes have no spec sheet in the CMS. Their card is a <div>, not an
   <a>, so it must not read as clickable: no CTA, and the note sits where the
   button would, holding the same space so the grid rows stay level. */
.lux-inv-nospec{
  display:inline-block;
  align-self:flex-start;
  margin-top:auto;
  padding:12px 0;
  font-family:var(--lux-font);
  font-size:12px;
  font-weight:600;
  letter-spacing:var(--lux-track-eyebrow);
  text-transform:uppercase;
  color:var(--fe-slate);
}

/* ---- the filter rail ---------------------------------------------------- */

/* .lux-tablist gives the underlined rail its geometry; it is capped at 520px
   for a two- or three-tab panel and five filters need the room. */
.lux-inv-filters{
  max-width:none;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  margin:clamp(26px,3vw,38px) 0 0;
}

/* The rail is a group of toggles, not a tablist — there are no panels, one
   grid is filtered in place — so the buttons carry aria-pressed rather than
   aria-selected. .lux-tab styles the latter, hence the parallel rule. */
.lux-inv-tab[aria-pressed="true"]{
  color:var(--fe-navy);
  border-bottom-color:var(--fe-blue);
}

.lux-inv-n{
  margin-left:6px;
  font-size:10px;
  font-weight:600;
  color:var(--fe-slate);
  letter-spacing:.08em;
}
.lux-inv-tab[aria-pressed="true"] .lux-inv-n{color:var(--fe-blue-600)}

/* Reads "Showing 17 of 40 aircraft" under the rail. role="status" on the
   element, so a filter change is announced without moving focus. */
.lux-inv-count{
  margin:14px 0 0;
  text-align:center;
  font-family:var(--lux-font);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--fe-slate);
}

/* [hidden] on a card loses to .lux-aircraft-card{display:flex} — the exact
   collision that shipped a draft ribbon on every live newsroom article. The
   filter sets .is-filtered instead of the attribute, and this rule is a class
   deeper than the component's. */
.lux-inv-grid .lux-aircraft-card.is-filtered{display:none}

@media (max-width:700px){
  .lux-inv-grid .lux-aircraft-card img{height:150px;padding:14px 16px}
  .lux-inv-filters{gap:0 4px}
  .lux-inv-tab{margin-right:12px}
}