/* =========================
   PNW Carriage Masters — site.css (rewritten)
   Key changes for HOME truck tiles:
   - Truck images show FULLY (no cropping): object-fit: contain + padding + dark backdrop
   - Two tiles are equal width, with a clear gap, and centered under the hero video
   - Removed the conflicting “HOME HERO FIX” overrides at the bottom (they were fighting each other)
========================= */

/* ---------- Design tokens ---------- */
:root{
  --bg:#0b0f14;
  --panel:#101824;
  --panel2:#0f151f;
  --text:#e7e7e7;
  --muted:#b8b8b8;
  --accent:#d7b46a;
  --line:#2a3442;
  --border: var(--line);
  --table-line: rgba(42, 52, 66, 0.9);

  --danger:#e06c75;
  --ok:#98c379;

  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --radius: 16px;

  /* Home hero sizing */
  --home-maxw: 1200px;         /* overall landing page width */
  --hero-maxw: 1200px;         /* hero block width */
  --hero-media-w: 620px;       /* left media column width (desktop) */

  /* Make video + tiles align */
  --hero-media-inner-max: 560px;  /* the visible width of the video and the tile pair */
  --hero-truck-tile-h: 180px;     /* consistent tile height while still showing full image */
}

/* ---------- Base / reset ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,video{max-width:100%;height:auto;display:block}

body{
  background: radial-gradient(1200px 600px at 50% 0%, #121a25 0%, var(--bg) 55%, #06080b 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Layout ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:24px}

/* ---------- Header / navigation ---------- */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(6,8,11,0.86);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:14px 24px;max-width:1100px;margin:0 auto;
}

.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{object-fit:contain}
.brand .brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand .brand-text .name{
  font-family: Georgia,"Times New Roman",serif;
  font-size:20px;
  letter-spacing:0.6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand .brand-text .tag{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

nav a{margin-left:16px;color:var(--text);opacity:0.92}
nav a:hover{opacity:1}
nav .pill{
  display:inline-block;
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
}

@media (max-width:820px){
  .header-inner{flex-direction:column;align-items:flex-start}
  nav a{margin-left:0;margin-right:10px}
}

/* ---------- Common components ---------- */
.card{
  background:rgba(16,24,36,0.78);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow: var(--shadow);
}

.muted{color:var(--muted)}
.small{font-size:13px}

.btn{
  display:inline-block;
  background:transparent;
  border:1px solid var(--accent);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
}
.btn:hover{background:rgba(215,180,106,0.08)}
.btn.danger{border-color:var(--danger)}
.btn.danger:hover{background:rgba(224,108,117,0.10)}

.notice{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(0,0,0,0.18);
}
.notice.ok{border-color:rgba(152,195,121,0.45)}
.notice.bad{border-color:rgba(224,108,117,0.55)}
.error{
  border:1px solid rgba(224,108,117,0.55);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(224,108,117,0.08);
}

input,textarea,select{
  width:100%;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 12px;
  color:var(--text);
  outline:none;
}
input:focus,textarea:focus,select:focus{border-color:rgba(215,180,106,0.7)}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}

hr{border:none;border-top:1px solid var(--line);margin:16px 0}

table,.table{width:100%;border-collapse:collapse}
table th,table td,.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:10px 8px;
  text-align:left;
  font-size:14px;
}
table th,.table th{color:var(--muted);font-weight:600}

.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:12.5px;
}

/* ---------- Home (landing page) ---------- */
.wrap.home{padding-top:18px}

/* Mobile/tablet: single column (media above text) */
.hero{
  display:grid;
  grid-template-columns: 1fr;
  row-gap:18px;
  column-gap:18px;
  align-items:start;
}

/* Desktop: two columns, media fixed width, text flexible, centered overall */
@media (min-width: 980px){
  .wrap.home{
    max-width: var(--home-maxw);
    margin: 0 auto;
  }
  .wrap.home .hero{
    max-width: var(--hero-maxw);
    margin: 0 auto;
    grid-template-columns: var(--hero-media-w) 1fr;
    column-gap: 16px;
  }
}

.hero-media{
  border-radius:18px;
  overflow:hidden;
  background:#0b0b0b;
  border:1px solid var(--border);
}

/* Ensures hero video + truck tiles stack vertically */
.hero-media-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding: 0;
}

/* Make the video and the truck tile pair share the same visible width and be centered */
.hero-video{
  width:100%;
  height:auto;
  display:block;

  max-width: var(--hero-media-inner-max);
  margin-inline: auto;
}

.hero-fallback{
  padding:42px 18px;
  text-align:center;
  color:var(--muted);
}

.hero-copy{min-width:0}
.hero-copy h1{margin:0 0 8px}
.hero-copy .lead{color:var(--muted);margin:0 0 10px}
.hero-copy .cta{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.hero-copy .rich{margin-top:10px}

/* --- Truck tiles under hero video (FULL IMAGE shown + centered pair) --- */
.hero-truck-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;

  width: 100%;
  max-width: var(--hero-media-inner-max);
  margin-inline: auto; /* centers underneath video */
}

.hero-truck-card{
  border:1px solid var(--table-line);
  border-radius:16px;
  overflow:hidden;
  background:var(--panel);
  box-shadow:var(--shadow);
  text-align:center;
}

.hero-truck-link{display:block;text-decoration:none;color:inherit}

/* IMPORTANT: show the FULL truck image (no cropping) */
.hero-truck-card img{
  width:100%;
  height:var(--hero-truck-tile-h);

  object-fit: contain;          /* <-- full image visible */
  object-position:center;

  background:#07090d;           /* letterbox backdrop */
  padding: 10px;                /* breathing space so it doesn’t touch edges */
  display:block;
}

.hero-truck-fallback{
  height:var(--hero-truck-tile-h);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--panel2);
}

.hero-truck-name{font-weight:800;color:var(--accent)}

.hero-truck-card figcaption{
  padding:8px 10px;
  font-weight:800;
  color:var(--accent);
  font-size:14px;
}

/* Mobile: stack the two tiles, still centered under the video */
@media (max-width: 720px){
  .hero-truck-grid{
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 12px;
  }
}

/* Home thumbs */
.thumbs h2{margin:18px 0 10px}
.thumb-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
@media (max-width: 900px){
  .thumb-grid{grid-template-columns: repeat(2, 1fr)}
}

.thumb img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--border);
}

/* Rolling montage */
.montage{margin-top:16px}
.marquee{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:10px 0;
}
.marquee-track{
  display:flex;
  gap:12px;
  width:max-content;
  animation: marquee 35s linear infinite;
}
.marquee-track img{
  height:110px;
  width:auto;
  border-radius:14px;
  border:1px solid var(--border);
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- Footer socials ---------- */
.footer{
  margin-top:22px;
  padding:18px 0;
  border-top:1px solid var(--border);
  color:var(--muted);
}

.socials{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.socials a{text-decoration:none;opacity:.9}
.socials a:hover{opacity:1}

.social-icon{
  width:42px;height:42px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(0,0,0,0.18);
  text-decoration:none;
}

.social-icon:hover{
  background:rgba(215,180,106,0.08);
  border-color:rgba(215,180,106,0.55);
}

.social-icon svg{
  width:20px;height:20px;
  fill: currentColor;
  color: var(--text);
  opacity:.92;
}

/* ---------- Gallery (main image + thumbnail scroller) ---------- */
.wrap.gallery{padding-top:18px}

.gallery-main{display:flex;justify-content:center}
.gallery-main .gallery-media{
  max-width:min(1100px, 95vw);
  max-height:70vh;
  width:auto;
  height:auto;
  border-radius:18px;
  border:1px solid var(--border);
  display:block;
}

.gallery-strip{
  margin-top:14px;
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:10px 4px;
  scroll-behavior:smooth;
}

.gthumb{
  border:1px solid var(--border);
  border-radius:14px;
  padding:0;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
  position:relative;
}

.gthumb img,
.gthumb video{
  height:84px;
  width:120px;
  object-fit:cover;
  border-radius:14px;
  display:block;
}

.gthumb.active{outline:2px solid var(--accent)}

.gthumb-badge{
  position:absolute;
  right:6px;
  bottom:6px;
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.55);
  color:var(--text);
}