/* ============================================================================
   unit-card.css: the inventory card, shared by browse and the homepage
   Featured carousel (see /unit-card.js). Pages set the grid; this sets the
   card. Moved verbatim from browse.html.
   ============================================================================ */
/* TRAILER CARD */
.trailer-card {
  background: var(--navy-deepest);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.trailer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px var(--shadow-color);
}
.card-image {
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-card-bg);
  background-size: cover;
  background-position: center;
  /* The tile is a flex item of the card, so its automatic minimum size is
     its content. A tall cutout used to stretch it: measured across four
     aspect ratios the tiles came out 228 to 334px, which is what made the
     grid look ragged. Pinning the minimum to zero lets the aspect ratio
     decide the height on its own, and the clip is insurance. */
  min-height: 0;
  overflow: hidden;
}
.card-no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.card-image.has-stock {
  background: linear-gradient(180deg, #ffffff 0%, #edecea 100%);
  border-bottom: 1px solid #e2e0dc;
}
.card-image-stock {
  /* Absolutely positioned, so the picture is out of flow and cannot push the
     tile around no matter its shape. The inset box is the same on every
     card, 82% wide and 78% tall, centred; object-fit then fits the picture
     inside that box and centres it. A wide cutout gets more space above and
     below, a tall one more to the sides, and the space is even either way.
     What this cannot fix is whitespace baked into the source image: a
     cutout drawn high on its own canvas will still sit high. */
  position: absolute;
  left: 9%;
  top: 11%;
  width: 82%;
  height: 78%;
  object-fit: contain;
  object-position: center center;
  z-index: 1;
  /* Shadow follows alpha. The extraction pipeline produces transparent
     PNGs, which shadow correctly; this rule exists for manually uploaded
     opaque JPEGs, which would otherwise cast a rectangular frame shadow */
  filter: drop-shadow(0 8px 12px var(--shadow-heavy));
}
.card-image-stock[src*=".jpg"], .card-image-stock[src*=".jpeg"] {
  filter: none;
}
/* Stacking inside .card-image, stated rather than left to DOM order:
   picture 1, sale ribbon 2, badges 3. The picture is absolutely positioned
   so that a tall cutout cannot stretch the tile, and that also made it a
   positioned sibling of the badges; since it renders last in the template
   it painted over anything without a z-index of its own. */
.card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 4px;
}
.card-badge-in-stock { background: var(--accent); }
.card-badge-sale-pending { background: #d97706; }
.card-badge-sold { background: #6b7280; }
.card-badge-on-hold { background: #b45309; }
.card-badge-secondary {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--overlay-color);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  /* Above the sale ribbon, so it stays readable where the two meet. */
  z-index: 3;
}
/* A ribbon owns the corner, so the stock number drops below it. Only on
   cards that have one: the selector needs the ribbon to precede the badge,
   which is why the template renders it first. Stacking alone was not
   enough, because the badge is opaque and simply hid the word. */
.sale-ribbon ~ .card-badge-secondary {
  /* Measured, not guessed. The band descends to y=64 where it passes the
     badge's right edge, so the badge starts below that. The suite asserts
     the two never touch, which will catch it if a font change moves the
     band again. */
  top: 68px;
}
/* Diagonal corner flash for a unit priced under its list price. The card
   itself is overflow:hidden with a 10px radius, so the ribbon ends are
   clipped to the corner and no clipping is needed on .card-image, which
   would cut the drop shadow off the stock photos. */
.sale-ribbon {
  position: absolute;
  /* Both ends have to finish outside the card so the card's own
     overflow:hidden cuts them, which is what reads as a band wrapping the
     corner. At top:18/padding 36 the upper end stopped 4px short of the top
     edge and left a notch of background showing above it.
     Padding came down from 40 to 30 when the label grew from Sale to On
     Sale: the longer word lengthens the band by itself, and at 40 its lower
     end reached into the stock badge. */
  top: 14px;
  right: -34px;
  background: var(--sale-yellow);
  color: var(--sale-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 30px;
  transform: rotate(45deg);
  z-index: 2;
  border-top: 2px solid var(--sale-red);
  border-bottom: 2px solid var(--sale-red);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-meta {
  font-size: 11px;
  color: var(--text-on-dark-subtle);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 5px;
  min-height: 30px;
  line-height: 1.3;
}
.card-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
  min-height: 42px;
}
/* Two by two, so a long value (a transaxle name) has half the card to
   wrap in instead of a quarter. Nothing may leave the box: cells can
   shrink below their content (min-width: 0) and words break as a last
   resort. */
.card-specs-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  overflow: hidden;
}
.card-spec-mini { min-width: 0; text-align: center; }
.card-spec-mini-label {
  font-size: 9px;
  color: var(--text-on-dark-subtle);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}
.card-spec-mini-value {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* Price and buttons sit on the card's floor whatever the specs above them
   take up, so a row of cards lines up. */
.card-price {
  margin-top: auto;
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 3px;
  letter-spacing: -0.5px;
}
/* The "Regular price $X" line (amount struck through). Always present, empty
   when the unit is not on sale, so prices in a row stay level. */
.card-list-price {
  font-size: 12px;
  line-height: 16px;
  min-height: 16px;
  color: var(--text-on-light-muted);
  margin: -2px 0 4px;
}
.card-disclaimer {
  font-size: 11px;
  color: var(--text-on-dark-subtle);
  margin-bottom: 8px;
  font-weight: 500;
}
.card-delivery {
  font-size: 12px;
  color: var(--text-on-dark-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.card-cta {
  display: block;
  text-align: center;
  background: var(--accent);
  color: #fff;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
  margin-top: 12px; /* the price above carries the auto margin */
}
.trailer-card:hover .card-cta { background: var(--accent-hover); }
/* buynow-1: the quiet companion under the Buy Now button. A small centered
   text link for buyers who want to save a quote and compare first. */
.card-cta-save {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-on-dark-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card-cta-save:hover { color: #fff; }

.deal-badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4;
  background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Struck-through sale_price and the SALE tag beside the buyer price. */
.card-price-was { text-decoration: line-through; color: var(--text-on-light-muted); font-size: 0.7em; font-weight: 400; }
.card-price-sale { color: var(--accent); font-weight: 700; font-size: 0.65em; letter-spacing: 0.5px; }
/* Featured carousel: same card without the spec grid. */
.trailer-card-compact .card-title { min-height: 0; }
.card-no-photo svg { width: 56px; height: 36px; }