/* ============================================================================
   Nippon Bike World — hero.css  (Heritage Editorial carousel)
   ============================================================================ */
.hero{ position:relative; min-height:100svh; overflow:hidden; background:#111; }
.hero--carousel{ padding:0; display:block; }
.hero-swiper{ width:100%; height:100svh; min-height:560px; background:#111; }
.hero-swiper .swiper-slide{ position:relative; overflow:hidden; background:#111; }
.hero-slide__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-slide__shade{ position:absolute; inset:0; background:
  linear-gradient(105deg, rgba(10,20,40,.9) 0%, rgba(10,20,40,.48) 50%, rgba(10,20,40,.28) 100%),
  linear-gradient(180deg, rgba(10,20,40,.3) 0%, transparent 30%, transparent 60%, rgba(10,20,40,.5) 100%); }
.hero-slide__content{
  position:relative; z-index:2; height:100%;
  width:min(100% - 2.4rem, var(--container)); margin-inline:auto;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:7.5rem 0 5.5rem; max-width:640px; text-align:left;
}
.hero-slide__content::before{
  content:""; position:absolute; left:-1.2rem; top:7.5rem; bottom:5.5rem; width:1px;
  background:linear-gradient(180deg, transparent, var(--gold), transparent); opacity:.7;
}
.hero-slide__content::after{
  content:""; position:absolute; left:-1.2rem; top:7.5rem; width:18px; height:1px; background:var(--gold);
}
.hero__index{ color:var(--gold); font-family:var(--font-ui); font-size:.78rem; letter-spacing:.22em; margin-bottom:1.4rem; text-transform:uppercase; }
.hero__title{ font-family:var(--font-jp); font-weight:800; font-size:clamp(2.5rem, 7vw, 5rem); line-height:1.05; color:var(--cream, #f5f0e6); letter-spacing:.04em; }
.hero__title .en{ display:block; margin-top:.5rem; font-family:var(--font-en); font-style:italic; font-size:.36em; letter-spacing:.16em; color:var(--gold); font-weight:400; }
.hero__lede{ margin:1.4rem 0 2rem; color:rgba(245,240,230,.82); max-width:40ch; font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.75; }
.hero__actions{ display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; }
.hero__spec{ margin-top:2.6rem; display:flex; gap:2.2rem; flex-wrap:wrap; border-top:1px solid rgba(201,162,75,.4); padding-top:1.5rem; }
.hero__spec .n{ display:block; font-family:var(--font-en); font-size:1.55rem; color:var(--cream, #f5f0e6); font-weight:600; }
.hero__spec .n small{ font-size:.5em; margin-left:.15em; color:var(--gold); }
.hero__spec .l{ display:block; color:rgba(245,240,230,.55); font-family:var(--font-ui); font-size:.72rem; letter-spacing:.14em; margin-top:.25rem; }

.hero-swiper__pag{ bottom:1.6rem !important; left:50% !important; transform:translateX(-50%); width:auto !important; z-index:3; }
.hero-swiper__pag .swiper-pagination-bullet{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); opacity:1; border:1px solid rgba(201,162,75,.45); margin:0 5px !important;
}
.hero-swiper__pag .swiper-pagination-bullet-active{ background:var(--gold); border-color:var(--gold); }
.hero-swiper__nav{
  color:var(--gold); width:48px; height:48px; margin-top:0; top:auto; bottom:1.3rem;
  background:transparent; border:1px solid rgba(201,162,75,.55); border-radius:0; z-index:3;
}
.hero-swiper__nav::after{ font-size:12px; font-weight:400; }
.swiper-button-prev.hero-swiper__nav{ left:auto; right:5.4rem; }
.swiper-button-next.hero-swiper__nav{ right:1.4rem; }

@media (max-width:900px){
  .hero-swiper{ min-height:100svh; width:100% !important; }
  .hero-slide__content{
    padding:5.5rem 0 4.5rem;
    max-width:100%;
    width:min(100% - 1.6rem, var(--container));
  }
  .hero-slide__content::before, .hero-slide__content::after{ display:none; }
  .swiper-button-prev.hero-swiper__nav, .swiper-button-next.hero-swiper__nav{ display:none; }
  .hero__title{ font-size:clamp(2.1rem,8vw,3.4rem); }
}

/* Single full-bleed slide (no side-by-side peek) */
.hero-swiper,
.hero--carousel .hero-swiper,
.hero--market .hero-swiper {
  width: 100% !important;
  overflow: hidden;
}
.hero-swiper .swiper-wrapper { width: 100%; }
.hero-swiper .swiper-slide {
  width: 100% !important;
  flex-shrink: 0;
  box-sizing: border-box;
}
.hero-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}