/*
  LEER Camper Shells — dedicated stylesheet (v2.8.3).
  Lives at its own path so host/CDN caches of style.css can never
  suppress it. Design: Option C hybrid — the prototype's soft, modern
  feel (8px radii, card shadows, white surfaces on soft gray) while
  inheriting the theme's fonts (Oswald/Source Sans 3 via CSS vars) and
  teal accent, so LEER pages stay continuous with the rest of the site.
  Used by: page-leer-hub.php, page-leer-vehicle.php, page-leer-model.php
*/

:root {
  --leer-radius: 8px;
  --leer-line: rgba(16, 20, 22, 0.09);
  --leer-line-soft: rgba(16, 20, 22, 0.05);
  --leer-shadow: 0 1px 3px rgba(16,20,22,0.06), 0 4px 14px rgba(16,20,22,0.05);
  --leer-shadow-up: 0 2px 6px rgba(16,20,22,0.07), 0 10px 28px rgba(16,20,22,0.08);
}

/* ── Hero ── */
.leer-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: 60px; align-items: center; }
.leer-hero-img { aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: var(--leer-radius); box-shadow: var(--leer-shadow-up); }
.leer-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.leer-badge { font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid var(--leer-line); background: var(--black); border-radius: 999px; padding: 7px 14px; color: var(--silver); box-shadow: var(--leer-shadow); }
.leer-badge strong { color: var(--accent-dark); font-weight: 600; }

/* ── Tiles & cards (vehicles, models, links) ── */
.leer-veh-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.leer-veh-tile, .leer-model-card, .leer-mlink { background: var(--black); border: 1px solid var(--leer-line); border-radius: var(--leer-radius); box-shadow: var(--leer-shadow); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; position: relative; text-decoration: none; }
.leer-veh-tile:hover, .leer-model-card:hover, .leer-mlink:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--leer-shadow-up); }
.leer-tile-img { display: block; aspect-ratio: 16/9; background-size: cover; background-position: center; border-radius: 5px; }
.leer-tile-ph { background: repeating-linear-gradient(45deg, rgba(16,20,22,0.03) 0 12px, transparent 12px 24px), var(--charcoal); border: 1px dashed rgba(16,20,22,0.15); }
.leer-veh-make { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ash); }
.leer-veh-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; text-transform: uppercase; color: var(--white); letter-spacing: 0.03em; }
.leer-tile-go { margin-top: auto; font-size: 0.78rem; color: var(--accent-dark); font-weight: 600; }

.leer-model-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.leer-model-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; text-transform: uppercase; color: var(--white); }
.leer-model-line { font-size: 0.85rem; color: var(--ash); font-weight: 300; line-height: 1.5; }
.leer-flag-pop { position: absolute; top: -10px; left: 14px; background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 4px; box-shadow: var(--leer-shadow); }
.leer-flag-ltd { display: inline-block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); border: 1px solid var(--leer-line); background: var(--dark); border-radius: 4px; padding: 2px 8px; width: fit-content; }

/* ── Tables (comparison + fitment) ── */
.leer-table-scroll { overflow-x: auto; border: 1px solid var(--leer-line); border-radius: var(--leer-radius); background: var(--black); box-shadow: var(--leer-shadow); }
.leer-cmp, .leer-fit { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 0.9rem; }
.leer-cmp th, .leer-cmp td, .leer-fit th, .leer-fit td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--leer-line-soft); }
.leer-cmp thead th, .leer-fit thead th { background: var(--charcoal); font-family: var(--font-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--silver); }
.leer-cmp tbody tr:last-child td, .leer-fit tbody tr:last-child td { border-bottom: none; }
.leer-cmp tbody tr:nth-child(even), .leer-fit tbody tr:nth-child(even) { background: var(--dark); }
.leer-cmp td:first-child a { font-family: var(--font-display); font-size: 1rem; font-weight: 600; text-transform: uppercase; color: var(--white); white-space: nowrap; text-decoration: none; }
.leer-cmp td:first-child a:hover, .leer-fit td a:hover { color: var(--accent); }
.leer-cmp td, .leer-fit td { color: var(--ash); font-weight: 300; }
.leer-cmp td:last-child { color: var(--offwhite); font-size: 0.85rem; }
.leer-cmp-tag { display: block; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-dark); margin-top: 3px; }
.leer-fit td:first-child { color: var(--white); font-weight: 600; white-space: nowrap; }
.leer-fit td a { color: var(--accent-dark); font-weight: 500; text-decoration: none; }
.leer-gen-row td { background: var(--charcoal) !important; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; color: var(--silver); font-weight: 600; }
.leer-yearnote { color: var(--ash); font-weight: 300; font-size: 0.82rem; }
.leer-fit-note { color: var(--ash); font-style: italic; }

/* ── Notes, warnings, callouts ── */
.leer-note { display: flex; gap: 10px; background: rgba(43,168,158,0.06); border: 1px solid rgba(43,168,158,0.28); border-radius: var(--leer-radius); padding: 14px 18px; font-size: 0.88rem; color: var(--offwhite); margin-top: 20px; font-weight: 300; }
.leer-note strong { color: var(--accent-dark); font-weight: 600; }
.leer-note a { color: var(--accent-dark); font-weight: 500; }
.leer-warning { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.45); border-left: 4px solid var(--gold); border-radius: var(--leer-radius); padding: 18px 22px; font-size: 0.92rem; color: var(--offwhite); box-shadow: var(--leer-shadow); }
.leer-warning strong { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--white); margin-bottom: 6px; }
.leer-warning p { margin: 0; font-weight: 300; line-height: 1.6; }
.leer-callout { background: var(--black); border: 1px solid var(--leer-line); border-left: 4px solid var(--accent); border-radius: var(--leer-radius); padding: 18px 22px; margin-top: 20px; box-shadow: var(--leer-shadow); }
.leer-callout strong { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); margin-bottom: 6px; }
.leer-callout p { margin: 0; color: var(--ash); font-weight: 300; font-size: 0.92rem; line-height: 1.6; }

/* ── Chips (compatible models) ── */
.leer-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.leer-chip { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.04em; background: var(--black); border: 1px solid var(--leer-line); border-radius: 999px; padding: 9px 18px; color: var(--white); transition: border-color .18s, color .18s, box-shadow .18s; box-shadow: var(--leer-shadow); text-decoration: none; }
.leer-chip:hover { border-color: var(--accent); color: var(--accent-dark); box-shadow: var(--leer-shadow-up); }
.leer-chip small { display: block; font-family: var(--font-body); font-weight: 300; font-size: 0.64rem; text-transform: none; letter-spacing: 0; color: inherit; opacity: 0.8; }
.leer-chip-rec { background: var(--accent); border-color: var(--accent); color: #fff; }
.leer-chip-rec:hover { color: #fff; background: var(--accent-bright); }

/* ── Recommendation / spec cards ── */
.leer-rec-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--black); border: 1px solid var(--leer-line); border-left: 4px solid var(--accent); border-radius: var(--leer-radius); padding: 26px 28px; margin-top: 32px; box-shadow: var(--leer-shadow); }
.leer-rec-t { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; text-transform: uppercase; color: var(--white); }
.leer-rec-card p { color: var(--ash); font-size: 0.92rem; max-width: 62ch; margin-top: 6px; font-weight: 300; line-height: 1.6; }

.leer-mlink-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.leer-mlink-n { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.05rem; color: var(--white); }
.leer-mlink-d { font-size: 0.8rem; color: var(--ash); font-weight: 300; line-height: 1.5; }

/* ── Popular options ── */
.leer-opt-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.leer-opt-group { background: var(--black); border: 1px solid var(--leer-line); border-radius: var(--leer-radius); box-shadow: var(--leer-shadow); padding: 24px; }
.leer-opt-group h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-dark); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--leer-line-soft); }
.leer-opt-item { padding: 10px 0; }
.leer-opt-item + .leer-opt-item { border-top: 1px solid var(--leer-line-soft); }
.leer-opt-nm { font-weight: 600; color: var(--white); }
.leer-opt-avail { display: block; font-size: 0.74rem; color: var(--accent-dark); margin-top: 2px; font-weight: 500; }
.leer-opt-item p { font-size: 0.88rem; color: var(--ash); margin-top: 4px; font-weight: 300; line-height: 1.55; }
.leer-opt-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.leer-opt-img { aspect-ratio: 21/9; background-size: cover; background-position: center; border-radius: var(--leer-radius); box-shadow: var(--leer-shadow); }

/* ── Why band / who tags ── */
.leer-why-band { background: var(--black); border: 1px solid var(--leer-line); border-radius: var(--leer-radius); padding: 40px; box-shadow: var(--leer-shadow); }
.leer-why-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 26px; margin-top: 28px; }
.leer-why-k { font-family: var(--font-display); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--white); margin-bottom: 6px; padding-top: 12px; border-top: 2px solid var(--accent); }
.leer-why-item p { font-size: 0.85rem; color: var(--ash); font-weight: 300; line-height: 1.55; }
.leer-who-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.leer-who-tag { font-size: 0.85rem; background: var(--dark); border: 1px solid var(--leer-line); border-radius: 999px; padding: 7px 15px; color: var(--offwhite); }

/* ── Also-available cards ── */
.leer-also-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.leer-also-card { background: var(--black); border: 1px solid var(--leer-line); border-radius: var(--leer-radius); box-shadow: var(--leer-shadow); padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: border-color .18s, transform .18s, box-shadow .18s; text-decoration: none; }
.leer-also-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--leer-shadow-up); }
.leer-also-t { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; text-transform: uppercase; color: var(--white); }
.leer-also-d { display: block; font-size: 0.85rem; color: var(--ash); margin-top: 3px; font-weight: 300; }
.leer-also-arr { color: var(--accent); font-size: 1.3rem; flex-shrink: 0; }

/* ── Model-page sections ── */
.leer-diff-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.leer-diff { background: var(--black); border: 1px solid var(--leer-line); border-top: 3px solid var(--accent); border-radius: var(--leer-radius); box-shadow: var(--leer-shadow); padding: 24px; }
.leer-diff-t { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; text-transform: uppercase; color: var(--white); margin-bottom: 8px; }
.leer-diff p { font-size: 0.9rem; color: var(--ash); font-weight: 300; line-height: 1.6; }

.leer-feat-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: start; }
.leer-feat { list-style: none; margin: 0; padding: 0; }
.leer-feat li { padding: 11px 0 11px 28px; position: relative; border-bottom: 1px solid var(--leer-line-soft); font-size: 0.95rem; color: var(--offwhite); }
.leer-feat li:last-child { border-bottom: none; }
.leer-feat li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 11px; height: 11px; border-radius: 3px; background: rgba(43,168,158,0.12); border: 2px solid var(--accent); }

.leer-cust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.leer-cust { background: var(--black); border: 1px solid var(--leer-line); border-radius: var(--leer-radius); box-shadow: var(--leer-shadow); padding: 22px 24px; }
.leer-cust h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-dark); padding-bottom: 8px; border-bottom: 1px solid var(--leer-line-soft); margin-bottom: 10px; }
.leer-cust p { font-size: 0.9rem; color: var(--ash); font-weight: 300; line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .leer-veh-grid { grid-template-columns: repeat(3,1fr); }
  .leer-model-grid, .leer-mlink-grid { grid-template-columns: repeat(2,1fr); }
  .leer-why-grid { grid-template-columns: repeat(2,1fr); }
  .leer-opt-cols, .leer-diff-grid, .leer-cust-grid { grid-template-columns: 1fr; }
  .leer-hero-grid, .leer-feat-grid { grid-template-columns: 1fr; gap: 36px; }
  .leer-rec-card { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .leer-veh-grid { grid-template-columns: repeat(2,1fr); }
  .leer-model-grid, .leer-mlink-grid, .leer-also-grid, .leer-opt-imgs, .leer-why-grid { grid-template-columns: 1fr; }
}

/* ── LEER promo band (homepage + product-page callout, v2.8.4) ── */
.leer-promo-band { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); align-items: stretch; background: var(--black); border: 1px solid var(--leer-line); border-radius: var(--leer-radius); box-shadow: var(--leer-shadow); overflow: hidden; text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.leer-promo-band:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--leer-shadow-up); }
.leer-promo-img { background-size: cover; background-position: center; min-height: 260px; }
.leer-promo-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.leer-promo-eyebrow { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-dark); }
.leer-promo-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--white); line-height: 1.15; }
.leer-promo-text { font-size: 0.95rem; color: var(--ash); font-weight: 300; line-height: 1.6; max-width: 54ch; margin-top: 4px; }
.leer-promo-band .btn { margin-top: 18px; }
@media (max-width: 900px) {
  .leer-promo-band { grid-template-columns: 1fr; }
  .leer-promo-img { min-height: 200px; }
  .leer-promo-body { padding: 28px 26px; }
}

/* ══════════════════════════════════════════════
   MOBILE OPTIMIZATION PASS (v2.8.5) — all 24 pages
   ══════════════════════════════════════════════ */

/* Smooth momentum scrolling where tables still scroll (tablets) */
.leer-table-scroll { -webkit-overflow-scrolling: touch; }

/* ── ≤700px: tables restructure into stacked cards — nothing cut off ── */
@media (max-width: 700px) {
  .leer-table-scroll { overflow: visible; border: none; background: transparent; box-shadow: none; border-radius: 0; }
  .leer-cmp, .leer-fit { min-width: 0; display: block; }
  .leer-cmp thead, .leer-fit thead { display: none; }
  .leer-cmp tbody, .leer-fit tbody { display: block; }
  .leer-cmp tbody tr, .leer-fit tbody tr { display: block; background: var(--black) !important; border: 1px solid var(--leer-line); border-radius: var(--leer-radius); box-shadow: var(--leer-shadow); padding: 16px 18px; margin-bottom: 12px; }
  .leer-cmp td, .leer-fit td { display: block; padding: 8px 0; border-bottom: 1px solid var(--leer-line-soft); white-space: normal !important; }
  .leer-cmp td:last-child, .leer-fit td:last-child { border-bottom: none; }
  .leer-cmp td[data-label]::before, .leer-fit td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-display); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-dark); margin-bottom: 2px; }
  .leer-cmp td:first-child { padding-top: 0; }
  .leer-cmp td:first-child a { font-size: 1.15rem; }
  .leer-fit td:first-child { font-size: 1.02rem; padding-top: 0; }
  /* generation dividers become slim section headers between cards */
  .leer-gen-row { background: transparent !important; border: none !important; box-shadow: none !important; padding: 6px 4px !important; margin-bottom: 10px !important; }
  .leer-gen-row td { background: transparent !important; padding: 0 !important; border: none !important; }
}

/* ── ≤640px: spacing + density pass (overrides template inline padding) ── */
@media (max-width: 640px) {
  .leer-sec { padding-top: 44px !important; padding-bottom: 44px !important; }
  .leer-sec.page-hero { padding-top: 36px !important; padding-bottom: 40px !important; }
  .leer-hero-grid { gap: 24px; }
  .leer-why-band { padding: 26px 22px; }
  .leer-rec-card { padding: 20px 20px; gap: 14px; }
  .leer-rec-card .btn { width: 100%; text-align: center; }
  .leer-promo-body .btn { width: 100%; text-align: center; }
  .leer-opt-group { padding: 20px 18px; }
  .leer-chip { font-size: 0.82rem; padding: 8px 14px; }
  .leer-badges { gap: 8px; }
  .leer-note, .leer-warning, .leer-callout { padding: 14px 16px; font-size: 0.86rem; }
  .leer-veh-grid { gap: 10px; }
  .leer-veh-tile, .leer-model-card, .leer-mlink { padding: 13px; }
}