/* ============================================
   Ghost Automotive — Premium Design Overrides
   ============================================ */

/* ====== BENTO GRID SERVICES ====== */
.bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:280px;
  gap:.75rem;
}
/* Hero card: 2 cols, 2 rows */
.bento__item--hero{grid-column:span 2;grid-row:span 2}
/* Tall card: 1 col, 2 rows */
.bento__item--tall{grid-row:span 2}
/* Wide card: 2 cols, 1 row */
.bento__item--wide{grid-column:span 2}

.bento__item{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);cursor:pointer;
}
.bento__item img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,0,.2,1);
}
.bento__item:hover img{transform:scale(1.07)}
.bento__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.15) 40%,transparent 70%);
  transition:all .5s;
}
.bento__item:hover .bento__overlay{
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.1) 100%);
}
.bento__content{
  position:absolute;bottom:0;left:0;right:0;padding:1.75rem;z-index:2;
}
.bento__tag{
  display:inline-block;padding:.3rem .65rem;font-family:var(--font-h);font-size:.55rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  background:var(--accent);color:#000;border-radius:var(--r-sm);margin-bottom:.75rem;
}
.bento__title{
  font-size:1.25rem;font-weight:900;margin-bottom:.5rem;transition:color .3s;
}
.bento__item:hover .bento__title{color:var(--accent)}
.bento__item--hero .bento__title{font-size:2rem}
.bento__desc{
  font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.6;max-width:360px;
  margin-bottom:.75rem;
}
.bento__cta{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-h);
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);opacity:0;transform:translateY(6px);
  transition:all .4s var(--ease);
}
.bento__item:hover .bento__cta{opacity:1;transform:translateY(0)}
.bento__cta svg{transition:transform .2s}
.bento__item:hover .bento__cta svg{transform:translateX(4px)}

/* Gold accent border on hover */
.bento__item::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);
  border:1px solid transparent;transition:border-color .5s;z-index:3;pointer-events:none;
}
.bento__item:hover::after{border-color:rgba(200,168,110,.25)}

/* Tablet */
@media(min-width:768px) and (max-width:1023px){
  .bento{grid-auto-rows:240px}
  .bento__item--hero .bento__title{font-size:1.6rem}
}

/* Mobile — stack to 2 cols, all same height */
@media(max-width:767px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;gap:.5rem}
  .bento__item--hero{grid-column:1/-1;grid-row:span 1}
  .bento__item--tall{grid-row:span 1}
  .bento__item--wide{grid-column:1/-1}
  .bento__item--hero .bento__title{font-size:1.3rem}
  .bento__title{font-size:.95rem}
  .bento__desc{font-size:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bento__content{padding:1rem}
  .bento__cta{opacity:1;transform:none}
  .bento__tag{font-size:.5rem;padding:.2rem .5rem}
}

/* ====== HORIZONTAL SCROLL PRODUCTS ====== */
.hscroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 1.25rem;cursor:grab}
.hscroll:active{cursor:grabbing}
.hscroll::-webkit-scrollbar{display:none}
.hscroll__track{display:flex;gap:1.25rem;padding-bottom:1rem;width:max-content}
.hscroll .pc{width:240px;flex-shrink:0}
.hscroll .pc__media{aspect-ratio:1;border-radius:var(--r-md)}
@media(min-width:768px){
  .hscroll{padding:0 2.5rem}
  .hscroll .pc{width:260px}
  .hscroll__track{gap:1.5rem}
}
@media(min-width:1200px){
  .hscroll{padding:0 calc((100vw - var(--max-w))/2 + 3rem)}
}

/* ====== HERO ENHANCEMENTS ====== */
.hero__h{
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.75) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero .sub::after{
  content:'';display:block;width:0;height:1px;background:var(--accent);margin-top:.75rem;
  transition:width 1s cubic-bezier(.4,0,.2,1) .3s;
}
.hero__slide.on .sub::after{width:3rem}

/* ====== TESTIMONIALS — big quote mark ====== */
.testi__card{position:relative;padding:2.5rem;background:none;border:1px solid var(--border)}
.testi__card::before{content:'\201C';position:absolute;top:.5rem;right:1.5rem;font-family:Georgia,serif;font-size:5rem;line-height:1;color:var(--accent);opacity:.07}
.testi__stars{letter-spacing:.2em;font-size:.85rem}

/* ====== FAQ — thicker top border ====== */
.faq__q{font-size:.95rem;padding:1.75rem 0}
.faq__item:first-child{border-top:1px solid var(--border)}

/* ====== TOUCH — always show bento CTAs ====== */
@media(hover:none){
  .bento__cta{opacity:1;transform:none}
}