/* ============================================================
   2009 Chevy Silverado — sale page

   Theme: garage signage. Ink black, paper white, for-sale sign red.
   The red is the only loud colour on the page. The known-issues card
   inverts to an ink panel so a disclosed defect is never missed.
   Edit the :root variables below to re-theme everything.
   ============================================================ */

:root {
  color-scheme: light;

  /* Paper + ink */
  --paper: #eceade;
  --paper-2: #e3e0d0;
  --card: #ffffff;
  --ink: #131408;
  --ink-2: #26281c;
  --body: #3a3c30;
  --muted: #6b6e5f;
  --line: #d3d0be;

  /* For-sale sign red. Bright enough that near-black text on top of it
     still clears 4.5:1, which is what the buttons and the tape rely on. */
  --accent: #f02f2f;
  --accent-deep: #c81f1f;
  /* Text on the red. It has to be this close to black: a sign red is
     too light for a dimmed label to stay legible, so the secondary
     lines on red get their hierarchy from size and letter-spacing
     instead of from opacity. */
  --accent-ink: #1b0303;

  /* The known-issues card is a black panel with red on it, so it can't
     borrow the accent red without disappearing into the page. */
  --warn: #ff6f61;      /* red text on the black panel */
  --warn-block: #c81f1f;  /* red blocks carrying white text */

  --hard: 4px 4px 0 var(--ink);
  --hard-lg: 7px 7px 0 var(--ink);
  --radius: 3px;
  --radius-sm: 2px;
  --shadow: 0 14px 30px rgba(19, 20, 8, 0.14);
  --wrap: 1140px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background-color: var(--paper);
  /* Faint graph-paper grid, so the page reads as a spec sheet. */
  background-image:
    linear-gradient(rgba(19, 20, 8, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 20, 8, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  z-index: 100;
  font-weight: 800;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* ---------------- Header ---------------- */

/* Caution tape across the very top. One glance says "vehicle". */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(
    115deg,
    var(--accent) 0 14px,
    var(--ink) 14px 28px
  );
}

.site-header {
  background: var(--ink);
  color: #fff;
  border-bottom: 3px solid var(--ink);
}

.header-inner { padding-top: 20px; padding-bottom: 20px; }

/* The "For sale" chip. It sits on the same line as the year, so the
   header keeps the height it had without it — a second stacked row here
   was worth about 30px that the photo is better off with. The white
   keyline stands in for a shadow, since the header behind it is already
   ink. Letter-spacing and weight are set explicitly because the chip
   inherits the wide-tracked styling of the year it sits beside. */
.sale-stamp {
  display: inline-block;
  margin: 0;
  padding: 3px 9px 4px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid #fff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

/* Title on the left, price and call button on the right: the header
   becomes a single band instead of four stacked rows. */
.header-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
}

.site-title {
  flex: 1 1 340px;
  margin: 0;
  color: #fff;
  line-height: 1.05;
  text-transform: uppercase;
}

/* The chip and the year share one line: the chip is a block of red and
   the year is red type on ink, so they read as a single sign rather than
   as two competing labels. The bare "2009" text node becomes an
   anonymous flex item, which is what keeps it off the chip. */
.title-year {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  color: var(--accent);
}

.title-name {
  display: block;
  font-size: clamp(1.5rem, 3.8vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Trim badge, cut out of the name the way a badge sits on a fender. */
.title-name .trim {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.02em 0.32em 0.06em;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid #fff;
  vertical-align: 0.14em;
  font-size: 0.55em;
  letter-spacing: 0.04em;
}

/* ---------------- Price + call button ---------------- */

.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.price { margin: 0; }

.price-amount {
  display: block;
  font-size: clamp(2rem, 5.2vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.price-note {
  display: block;
  margin-top: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Tap-to-call. The single highest-value element on a vehicle listing,
   so it sits beside the price and again in the mobile action bar. */
.cta {
  display: inline-block;
  padding: 12px 22px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--accent);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.cta:hover {
  background: #fff;
  border-color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
.cta:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}
/* Solid, not a dimmed version of the label above: text on the red is
   small, and a low-opacity near-black would fail contrast. */
.cta-num { display: block; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--accent-ink); }

/* Spec tape: the three facts that win or lose the click, on one
   compact strip. Everything else is in the Key specs card. */
.fact-bar {
  background: var(--accent);
  color: var(--accent-ink);
  border-top: 2px solid var(--ink);
}

.site-subtitle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* The element carries both .site-subtitle and .wrap, and the rules above
   come later in the file, so the alignment has to be restated here or the
   tape sits flush against the screen edge instead of with everything else. */
.site-subtitle.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.tag {
  padding: 6px 12px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-left: 1px solid rgba(27, 3, 3, 0.3);
}
.tag:first-child { border-left: 0; padding-left: 0; }
.tag:last-child { padding-right: 0; }

/* ---------------- Gallery ---------------- */

.gallery { margin: 34px 0 40px; }

.hero-image {
  position: relative;
  margin: 0;
  background: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--hard-lg);
}

.photo-count {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  margin: 0;
  padding: 6px 12px;
  background: rgba(19, 20, 8, 0.82);
  color: var(--accent);
  border: 2px solid var(--accent);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  cursor: zoom-in;
}

.hero-image figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  padding: 12px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--body);
  background: var(--card);
  border-top: 3px solid var(--ink);
}

.hint { color: var(--muted); font-size: 0.82rem; }

.thumbs {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--card);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  opacity: 0.72;
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* height: auto is required. Without it the intrinsic 400x533 of the
   portrait shots wins and every thumb renders as a tall box. */
.thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.thumb:hover { opacity: 1; transform: translateY(-3px); box-shadow: var(--hard); }

.thumb.is-active {
  opacity: 1;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px var(--ink);
}

.thumbs li[hidden] { display: none; }

.show-more {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 15px 18px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--hard);
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.show-more:hover {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.show-more[hidden] { display: none; }

/* ---------------- Layout / cards ---------------- */

/* Two independent stacks rather than a grid with spanning rows, so cards
   can be added or removed without disturbing anything below them. */
.columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 22px;
}

.col-main,
.col-side {
  display: grid;
  gap: 22px;
  align-content: start;
}

.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 24px 26px 26px;
  box-shadow: var(--hard);
}

/* Every card title is numbered, the way a work order or build sheet is.
   The numbers are decoration; the heading text still carries the meaning. */
.card h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--ink);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
}

.card-num {
  flex: 0 0 auto;
  padding: 3px 9px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.card h3 {
  margin: 22px 0 8px;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.card h3::before { content: "▸ "; color: var(--accent-deep); }

.card p { margin: 0 0 14px; }
.card p:last-child { margin-bottom: 0; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.description strong { color: var(--ink); }

/* Known-issues card: an ink panel among white cards. The page accent is
   now a red, so a pale red card would blend into it; inverting to black
   is what keeps a disclosed defect from being skimmed past. */
.notice {
  border-color: var(--ink);
  border-left: 10px solid var(--warn-block);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--hard-lg);
}

.notice .card-num {
  background: var(--warn-block);
  color: #fff;
  border-color: #fff;
}

.notice h2, .notice h3 { color: #fff; }
/* The heading rule is ink on every other card; here it has to be white
   or it vanishes into the panel. */
.notice h2 { border-bottom-color: rgba(255, 255, 255, 0.35); }
.notice h3 { color: var(--warn); }
.notice h3::before { content: "▸ "; color: var(--warn); }
.notice p { color: rgba(255, 255, 255, 0.86); }
.notice p strong { color: #fff; }
.notice .muted { color: rgba(255, 255, 255, 0.7); }

.notice-flag {
  display: inline-block;
  margin: 0 0 4px;
  padding: 6px 12px;
  background: var(--warn-block);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------------- Feature list ---------------- */

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-list li {
  position: relative;
  padding: 8px 0 8px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}

.feature-list li:last-child { border-bottom: 0; }

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 11px;
  height: 11px;
  background: var(--accent);
  border: 2px solid var(--ink);
}

/* ---------------- Specs table ---------------- */

.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.specs th,
.specs td {
  text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.specs tr:last-child th,
.specs tr:last-child td { border-bottom: 0; }

.specs th {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  width: 42%;
  padding-right: 14px;
  padding-top: 11px;
}

.specs td {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-top: 10px;
}

/* Service-history log: a wider label column so the dates read as a
   timeline rather than as more spec rows. */
.specs.log th { width: 34%; white-space: nowrap; }
.specs.log td { font-weight: 600; }

/* ---------------- Contact ---------------- */

.contact {
  margin-bottom: 46px;
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 7px 7px 0 var(--accent);
}

.contact h2 { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.3); }
.contact .card-num { border-color: #fff; }
.contact p { color: rgba(255, 255, 255, 0.7); }
.contact .muted { color: rgba(255, 255, 255, 0.6); }

.contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 0;
}

.contact-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 260px;
  padding: 16px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 3px solid var(--accent);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
}
.contact-link:hover { background: #fff; transform: translate(-2px, -2px); }

.contact-label {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.contact-value {
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Mobile action bar ---------------- */

/* The page is a single scroll; on a phone the call button would
   otherwise be a full swipe away. Hidden on desktop, where the
   header CTA is always on screen. */
.action-bar { display: none; }

.action-bar .action-price {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.action-bar .cta {
  padding: 10px 18px;
  font-size: 0.9rem;
  box-shadow: none;
  border-width: 2px;
}
.action-bar .cta-num { font-size: 0.7rem; }

/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--ink);
  color: #fff;
  padding: 26px 0 34px;
  font-size: 0.86rem;
}

.site-footer p { margin: 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.site-footer .muted { color: rgba(255, 255, 255, 0.55); }
.site-footer strong { color: var(--accent); }

/* ---------------- Lightbox ---------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(8, 9, 5, 0.96);
}

.lightbox[hidden] { display: none; }

.lightbox figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  text-align: center;
}

.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  object-fit: contain;
  border: 2px solid var(--accent);
}

.lightbox figcaption {
  margin-top: 12px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.lightbox-close,
.lightbox-nav {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
  line-height: 1;
  transition: background 0.15s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover { background: var(--accent); color: var(--accent-ink); }

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
}

.lightbox-nav {
  flex: 0 0 auto;
  width: 48px;
  height: 64px;
  font-size: 2.2rem;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Clears the fixed action bar pinned to the bottom of the screen. */
  body { padding-bottom: 104px; }

  .header-inner { padding-top: 16px; padding-bottom: 18px; }

  .header-grid { gap: 12px; }
  .title-name { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
  .price-row { gap: 8px 18px; }
  /* Full-width on a phone: the one button that matters gets the whole row. */
  .header-inner .cta { width: 100%; }

  .tag { padding: 6px 10px; font-size: 0.62rem; letter-spacing: 0.08em; }

  .card { padding: 20px 18px 22px; }
  .card h2 { font-size: 1.05rem; }
  .hero-image figcaption { flex-direction: column; gap: 4px; }
  .photo-count { top: 10px; right: 10px; }

  .contact { box-shadow: 5px 5px 0 var(--accent); }

  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--ink);
    border-top: 3px solid var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}