/* Big 10 Cargo Trailers — responsive site styles (chrome/silver brand) */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: #f4f4f4 url(../images/pattern.webp) no-repeat center / cover fixed;
  font: normal 0.85em arial, sans-serif;
  color: #403838;
}
#main { max-width: 950px; margin: 12px auto; padding: 0 10px; }

/* header */
.head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; }
.head .logo img { width: 100%; max-width: 420px; height:auto; display:block; }
.head .logo { flex: 1 1 300px; }
.social { display:flex; flex-direction:row; gap:8px; }
.social img { width: 36px; height:36px; display:block; border-radius:3px; }

/* nav buttons — chrome */
nav.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin: 14px 0 6px 0; }
.btn {
  display:flex; align-items:center; justify-content:center;
  height: 45px; text-decoration:none; overflow:hidden;
  color:#111; font-family:'Playfair Display', Georgia, serif; font-size:20px;
  background:
    radial-gradient(ellipse 60% 90% at 12% 0%, rgba(255,255,255,0.9), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #ffffff 0%, #d2d2d2 45%, #969696 100%);
  border-radius:3px; border:1px solid #6e6e6e; box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.btn span { display:block; white-space:nowrap; transform: scaleX(0.78); }
.btn:hover { filter: brightness(1.12); }
@media (max-width: 430px) { .btn { font-size:17px; height:42px; } }

/* section heading bar — chrome */
.bar, .content .bar {
  margin: 18px 0 14px 0; padding: 8px 6px; text-align:center;
  color:#111; font-family:'Playfair Display', Georgia, serif; font-weight:500;
  font-size: clamp(22px, 6vw, 34px);
  background:
    radial-gradient(ellipse 50% 100% at 10% 0%, rgba(255,255,255,0.9), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #ffffff 0%, #d2d2d2 45%, #969696 100%);
  border-radius:3px; border:1px solid #6e6e6e;
}
.subnote { text-align:center; color:#a00; font-weight:bold; margin: 4px 0 14px 0; }

/* white content area */
.content { background:#fff; padding: 16px 14px; border-radius: 8px; overflow-wrap:break-word; }
.content img { max-width:100%; height:auto; }
.content h1, .content h2, .content h3 { color:#222; text-align:center; font: bold 120% arial, sans-serif; padding:14px 0 4px 0; }
.content h4 { color:#222; text-align:center; font: bold 110% arial, sans-serif; padding:10px 0 4px 0; }
.content p { padding: 6px 0 14px 0; line-height: 1.7; }
.content iframe { max-width:100%; border:0; }
.content table { max-width:100%; }

/* centered picture blocks */
span.center { display:block; text-align:center; }
span.center img { display:block; margin:0 auto; max-width:100%; height:auto; }

/* image grids */
p.imgrid, div.imgrid {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:14px; padding: 6px 0 14px 0;
}
.imgrid a, .imgrid > img { flex: 0 1 calc((100% - 28px)/3); max-width:300px; }
.imgrid a img { width:100%; height:auto; display:block; border-radius:4px; }
.imgrid figure { flex: 0 1 calc((100% - 56px)/5); max-width:178px; text-align:center; }
.imgrid figure img { width:100%; height:auto; display:block; border-radius:4px; }
.imgrid figcaption { font-weight:bold; font-size:14px; padding-top:6px; color:#222; }
@media (max-width: 430px) { .imgrid a, .imgrid > img { flex: 0 1 46%; } .imgrid figure { flex: 0 1 46%; max-width:46%; } }

/* description text */
.desc { max-width: 850px; margin: 10px auto 4px auto; font-size:15px; line-height:1.7; text-align:justify; }
.desc .fine { display:block; text-align:center; font-weight:bold; margin-top:12px; }

/* brochure preview + buttons */
.bro { text-align:center; margin-top: 26px; }
.bro h4 { font-size:20px; margin-bottom:10px; }
.bro img.preview { width:100%; height:auto; border:1px solid #ccc; }
.bro .more { display:block; margin: 22px auto 0 auto; max-width:500px; }
.bro .more img { width:100%; height:auto; }

/* home hero slideshow (pure CSS crossfade) */
.hero { position:relative; width:100%; aspect-ratio: 706/270; overflow:hidden; border-radius:6px; margin: 6px 0 10px 0; }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation: herofade 16s infinite; }
.hero img:nth-child(1) { animation-delay: 0s; }
.hero img:nth-child(2) { animation-delay: 4s; }
.hero img:nth-child(3) { animation-delay: 8s; }
.hero img:nth-child(4) { animation-delay: 12s; }
@keyframes herofade { 0% {opacity:0;} 6% {opacity:1;} 25% {opacity:1;} 33% {opacity:0;} 100% {opacity:0;} }

/* contact block — chrome bar, black text */
.contact {
  text-align:center; padding: 18px 10px 22px 10px; margin-top: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #d2d2d2 45%, #969696 100%);
  border: 1px solid #6e6e6e; border-radius:3px;
}
.contact .ask { font-size:18px; margin-bottom:14px; color:#000; font-weight:bold; }
.contact a { display:block; text-decoration:none; color:#000; font-weight:bold; font-size: clamp(18px, 5.5vw, 28px); margin-top:8px; word-break: break-word; }

/* footer */
footer { text-align:center; color:#222; padding: 20px 8px 26px 8px; line-height: 1.9; font-size: 13px; }
footer a { color:#222; }