/* Cars & Coffee USA — Bootstrap-based theme layer
   Palette from brand manual, typography Halis GR.
*/

:root{
  --prestige-gold:#999442;
  --speed-red:#B7001E;
  --volcano-black:#101318;
  --dark-grey:#57595D;
  --grey:#87898B;
  --mid-grey:#CFD0D1;
  --light-grey:#F8F8F8;
}

@font-face{
  font-family:"Halis GR";
  src:url("../fonts/halis-gr/HalisGR-Book.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Halis GR";
  src:url("../fonts/halis-gr/HalisGR-Medium.otf") format("opentype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}


@font-face{
  font-family:"Halis GR";
  src:url("../fonts/halis-gr/HalisGR-Bold.otf") format("opentype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Halis GR";
  src:url("../fonts/halis-gr/HalisGR-BoldItalic.otf") format("opentype");
  font-weight:800;
  font-style:italic;
  font-display:swap;
}

body{
  font-family:"Halis GR",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--light-grey);
  color:var(--volcano-black);
}

.navbar{
  backdrop-filter: blur(10px);
  background: rgba(248,248,248,.88) !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.navbar-brand img{ height: 64px; width:auto; }

/* Hero */
.hero{
  background: url("../img/ui/asphalt.jpg") center/cover no-repeat;
  color:#fff;
}
.hero-overlay{
  background: linear-gradient(180deg, rgba(16,19,24,.55), rgba(16,19,24,.88));
}
.hero h1{
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.05;
  font-size: clamp(34px, 5vw, 72px);
}
.hero .sub{
  font-weight:600;
  color: rgba(255,255,255,.78);
  font-size: clamp(18px, 2.4vw, 30px);
}
.hero .accent-line{
  height:4px;
  width:min(520px, 70vw);
  background: var(--speed-red);
  margin: 18px auto 0;
}

/* Cards */
.event-card{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  border-radius: 0px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.event-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  text-decoration:none;
}
.event-thumb{
  aspect-ratio: 16/9;
  background:#0b0d10;
}
.event-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.badge-usa{
  background: rgba(16,19,24,.78);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size: 12px;
}
.badge-usa .dot{
  width:10px;height:10px;border-radius:0px;background:var(--prestige-gold);display:inline-block;
}
.event-title{
  font-weight:800;
  font-size: 18px;
  letter-spacing:.01em;
}
.event-meta{
  color: var(--dark-grey);
  font-weight:600;
  font-size: 14px;
}
.event-meta .icon{
  width:16px;height:16px;opacity:.7;vertical-align:-2px;margin-right:6px;
}

/* Event hero cover */
.event-cover{
  min-height: 420px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.event-cover::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(16,19,24,.25), rgba(16,19,24,.88));
}
.event-cover-inner{
  position: relative;
  z-index: 2;
}

/* Gallery masonry using CSS columns (responsive with Bootstrap container) */
.gallery{
  columns: 3 260px;
  column-gap: 14px;
}
@media (max-width: 992px){
  .gallery{ columns: 2 220px; }
}
@media (max-width: 576px){
  .gallery{ columns: 1; }
}
.gitem{
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  background:#0b0d10;
}
.gitem img{
  width:100%;
  height:auto;
  display:block;
  cursor: zoom-in;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background: rgba(16,19,24,.92);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 20px;
  z-index: 1055; /* above bootstrap nav */
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: 0px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox .hint{
  position:absolute;
  bottom: 18px;
  left:50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(0,0,0,.08);
  color: var(--dark-grey);
  font-size: 13px;
}
/* Header background behind navbar */
.navbar{
  position: sticky;
}
.navbar::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/ui/asphalt.jpg") center/cover no-repeat;
  opacity: .25;
  z-index:-1;
}
/* Gallery alignment fixes (CSS columns) */
.gallery{
  column-fill: balance;
}
.gitem{
  display: inline-block;
  width: 100%;
}
.gitem img{
  transition: transform .18s ease, filter .18s ease;
}
.gitem:hover img{
  transform: scale(1.02);
  filter: brightness(1.06);
}
/* Lightbox navigation controls */
.lightbox .navbtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(16,19,24,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}
.lightbox .navbtn:hover{ background: rgba(16,19,24,.75); }
.lightbox .prev{ left: 18px; }
.lightbox .next{ right: 18px; }
.lightbox .closebtn{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(16,19,24,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lightbox .closebtn:hover{ background: rgba(16,19,24,.75); }
/* Gallery items: ensure hover respects radius */
.gitem{
  border-radius: 0px;
  overflow: hidden;
}
.gitem img{
  border-radius: 0 !important;
}


/* === GALLERY: square thumbnails, stable & responsive === */
[data-gallery] .gitem {
  aspect-ratio: 1 / 1;
  border-radius: 0px;
  overflow: hidden;
  background: #0b0d10;
}

[data-gallery] .gitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}