/* CHANGAN Puebla — Modelos Mega Menu
   Inspired by the category-based interaction on Changan Mérida,
   redesigned to follow CHANGAN Puebla visual guidelines. */

.nav-models{
  position:relative;
  display:flex;
  align-items:center;
  align-self:stretch;
}

/* Hover bridge: keeps the parent hovered while the cursor moves
   from "Modelos" down into the fixed mega menu. */
.nav-models::after{
  content:"";
  position:absolute;
  left:-28px;
  right:-28px;
  top:100%;
  height:28px;
  background:transparent;
  pointer-events:auto;
}

.nav-models-link{
  display:flex;
  align-items:center;
  gap:6px;
  height:100%;
}

.nav-models-chevron{
  display:inline-block;
  font-size:10px;
  line-height:1;
  color:#738695;
  transition:transform .2s ease;
}

.models-mega{
  position:fixed;
  top:calc(var(--header) - 2px);
  left:50%;
  width:min(1180px,calc(100vw - 44px));
  max-height:min(690px,calc(100vh - var(--header) - 24px));
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  background:rgba(255,255,255,.985);
  border:1px solid rgba(11,69,127,.12);
  box-shadow:0 30px 70px rgba(17,53,82,.18);
  transform:translate(-50%,-10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .22s ease,visibility .18s ease;
  z-index:150;
}

.nav-models:hover .models-mega,
.nav-models:focus-within .models-mega,
.nav-models.mega-open .models-mega{
  transform:translate(-50%,0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.nav-models:hover .nav-models-chevron,
.nav-models:focus-within .nav-models-chevron,
.nav-models.mega-open .nav-models-chevron{
  transform:rotate(180deg);
}

.models-mega:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 90% -25%,rgba(179,207,228,.34),transparent 34rem),
    linear-gradient(135deg,rgba(112,142,201,.045),transparent 38%);
}

.models-mega>*{position:relative;z-index:1}

.models-mega-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  padding:22px 26px 17px;
  border-bottom:1px solid #e5edf3;
}

.models-mega-eyebrow{
  display:block;
  margin-bottom:3px;
  font-size:9px;
  letter-spacing:.16em;
  font-weight:700;
  color:#718597;
}

.models-mega-head strong{
  display:block;
  font-family:"Changan Uni","Arial Narrow","Noto Sans",sans-serif;
  font-size:25px;
  line-height:1;
  font-weight:400;
  color:#0B457F;
  text-transform:uppercase;
}

.main-nav .models-mega-all{
  width:auto;
  padding:0;
  border:0;
  color:#0B457F;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.models-mega-tabs{
  display:flex;
  gap:6px;
  padding:12px 26px;
  border-bottom:1px solid #e7eef3;
  overflow-x:auto;
  scrollbar-width:none;
}
.models-mega-tabs::-webkit-scrollbar{display:none}

.models-mega-tab{
  appearance:none;
  border:1px solid #d6e1e9;
  background:#fff;
  min-height:34px;
  padding:0 17px;
  border-radius:999px;
  color:#52697a;
  font:600 10px/1 "Noto Sans",sans-serif;
  letter-spacing:.035em;
  cursor:pointer;
  transition:.18s ease;
  white-space:nowrap;
}

.models-mega-tab:hover{
  border-color:#9fbad0;
  color:#0B457F;
}

.models-mega-tab.active{
  color:#fff;
  background:#0B457F;
  border-color:#0B457F;
}

.models-mega-grid{
  padding:16px 20px 20px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#b8c9d7 transparent;
}

.main-nav .models-mega-card{
  width:auto;
  min-width:0;
  padding:0;
  border:1px solid transparent;
  background:#fff;
  display:grid;
  grid-template-columns:126px minmax(0,1fr);
  align-items:center;
  min-height:116px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.main-nav .models-mega-card:hover{
  color:inherit;
  transform:translateY(-2px);
  border-color:#d8e4ec;
  box-shadow:0 12px 26px rgba(28,67,98,.09);
}

.main-nav .models-mega-card.current{
  border-color:#8fb4d2;
  background:#f6fbff;
}

.models-mega-image{
  height:114px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 62%,rgba(179,207,228,.32),transparent 58%),
    linear-gradient(180deg,#fbfdff,#f3f8fb);
}

.models-mega-image img{
  display:block;
  width:118%;
  max-width:none;
  max-height:94px;
  object-fit:contain;
  filter:drop-shadow(0 9px 8px rgba(28,57,80,.13));
}

.models-mega-energy{
  position:absolute;
  left:7px;
  top:7px;
  max-width:112px;
  padding:4px 6px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(11,69,127,.10);
  border-radius:2px;
  color:#5d7181;
  font-size:7px;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.models-mega-card-copy{
  min-width:0;
  padding:12px 10px 12px 13px;
}

.models-mega-card-copy strong{
  display:block;
  color:#173d5e;
  font-family:"Changan Uni","Arial Narrow","Noto Sans",sans-serif;
  font-size:16px;
  line-height:1.05;
  font-weight:400;
  text-transform:uppercase;
}

.models-mega-card-copy span{
  display:block;
  margin-top:7px;
  color:#0B457F;
  font-size:9px;
  font-weight:700;
}

.models-mega-card-copy small{
  display:block;
  margin-top:5px;
  color:#82909a;
  font-size:8px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.models-mega-foot{
  min-height:42px;
  padding:9px 26px;
  border-top:1px solid #e2ebf1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#f7fafc;
}

.models-mega-foot span{
  color:#83909a;
  font-size:8px;
}

.main-nav .models-mega-foot a{
  width:auto;
  padding:0;
  border:0;
  color:#0B457F;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

@media(max-width:1180px) and (min-width:1025px){
  .models-mega{
    width:calc(100vw - 28px);
  }
  .models-mega-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .main-nav .models-mega-card{
    grid-template-columns:115px minmax(0,1fr);
  }
}

/* Mobile keeps the existing simple navigation.
   The mega menu is intentionally a desktop hover/focus interaction. */
@media(max-width:1024px){
  .nav-models{
    display:block;
    width:100%;
    align-self:auto;
  }

  .nav-models-link{
    height:auto;
  }

  .nav-models-chevron{
    display:none;
  }

  .models-mega{
    display:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .models-mega,
  .nav-models-chevron,
  .models-mega-card{
    transition:none!important;
  }
}


/* ===== Mega menu V2 stability ===== */
@media(min-width:1025px){
  .nav-models.mega-open::after,
  .nav-models:hover::after,
  .nav-models:focus-within::after{
    display:block;
  }

  .models-mega{
    pointer-events:none;
  }

  .nav-models:hover .models-mega,
  .nav-models:focus-within .models-mega,
  .nav-models.mega-open .models-mega{
    pointer-events:auto;
  }

  .models-mega-image.image-missing{
    background:
      radial-gradient(circle at 50% 55%,rgba(179,207,228,.42),transparent 58%),
      linear-gradient(180deg,#fbfdff,#edf5fa);
  }

  .models-mega-image.image-missing::after{
    content:"CHANGAN";
    position:absolute;
    inset:auto 0 43%;
    text-align:center;
    color:rgba(11,69,127,.18);
    font-family:"Changan Uni","Arial Narrow","Noto Sans",sans-serif;
    font-size:15px;
    letter-spacing:.12em;
  }
}


/* ===== Mega Menu V3: category visibility fix =====
   The card rule uses display:grid, so explicitly honor the HTML hidden
   attribute. Without this, cards from inactive categories were visible
   before JS assigned their image src, which looked like broken images. */
.models-mega-card[hidden]{
  display:none !important;
}