/* AmCham Hero Carousel – v1.4.0 (title+date lift on hover, bigger custom dots, no arrows) */

/* --- Base container --- */
.amcham-hero{
  --badge-red:#e31019;
  --badge-red-2:#ff2e39;
  --text:#fff;
  --dot-outer:#8e8e8e;      /* grey ring/background */
  --dot-inner:#bfbfbf;      /* inner neutral dot */
  --dot-inner-active:#ffffff; /* inner active dot */
  --dot-glow:rgba(255,255,255,.55);

  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:17/13.04;
  background:#000;
  color:var(--text);
  isolation:isolate;
}
@media (max-width:768px){
  .amcham-hero{aspect-ratio:auto;min-height:500px}
}
.amcham-hero .swiper{width:100%;height:100%}

/* --- Slide + link --- */
.amcham-slide{position:relative;overflow:hidden}
.amcham-link{
  position:relative;display:block;width:100%;height:100%;
  text-decoration:none;color:inherit;
}

/* --- Background image + subtle zoom on hover --- */
.amcham-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1.008);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.amcham-link:hover .amcham-bg{transform:scale(1.06)}

/* --- Bottom gradient overlay: ~40% idle, grows on hover --- */
.amcham-overlay{
  position:absolute;left:0;right:0;bottom:0;height:40%;
  pointer-events:none;z-index:2;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.50) 50%,
    rgba(0,0,0,.80) 100%
  );
  transition:height .35s ease;
}
.amcham-link:hover .amcham-overlay{height:70%}

/* --- Top-left stacked category badges --- */
.amcham-badges{
  position:absolute;z-index:3;top:14px;left:14px;
  display:flex;flex-direction:column;gap:6px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.amcham-badge{
  display:inline-block;font-weight:800;border-radius:3px;
  padding:8px 10px;line-height:1;color:#fff;font-size:12px;
}
.amcham-badge.-primary{background:var(--badge-red)}
.amcham-badge.-secondary{background:var(--badge-red-2)}

/* --- Meta block (title + date + read more) --- */
/* Closer to bottom by default; on hover the whole block moves up so "Read more"
   can appear beneath it neatly and within the expanded overlay. */
.amcham-meta{
  position:absolute;z-index:3;left:20px;right:20px;bottom:14px;
  display:flex;flex-direction:column;gap:4px;
  text-shadow:0 2px 14px rgba(0,0,0,.5),0 1px 1px rgba(0,0,0,.25);
  transform:translateY(0);
  transition:transform .35s ease;
}
.amcham-link:hover .amcham-meta{transform:translateY(-20px)}

.amcham-title{
  margin:0;
  max-width:min(86ch,92%);
  font-size:16px;          /* half-size per request */
  line-height:22px;
  font-weight:800;
  color:#fff;
}
.amcham-date{
  font-size:12px;
  font-weight:400;
  color:#e8e8e8;
  opacity:.9;
}

/* "Read more" appears only on hover and sits under the lifted title+date */
.amcham-readmore{
  font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
  opacity:0;transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease;
}
.amcham-link:hover .amcham-readmore{
  opacity:1;transform:translateY(0);
}
.amcham-readmore span{transition:transform .18s ease}
.amcham-link:hover .amcham-readmore span{transform:translateX(2px)}

/* --- Pagination dots (forced top-right, custom look) --- */
.amcham-dots{
  position:absolute;z-index:3;top:10px;right:14px;
  left:auto;bottom:auto;width:auto !important;text-align:right;
}
/* Hard override Swiper's default placement */
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal{
  left:auto !important;right:14px !important;top:10px !important;
  bottom:auto !important;width:auto !important;
}

/* Bigger outer circle with grey background */
.amcham-dots .swiper-pagination-bullet{
  width:16px;height:16px;border-radius:50%;
  background:var(--dot-outer);
  opacity:1 !important;
  margin:0 6px !important;
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); /* subtle inner edge to keep it crisp */
}

/* Inner centered dot */
.amcham-dots .swiper-pagination-bullet::after{
  content:"";position:absolute;border-radius:50%;
  top:50%;left:50%;width:8px;height:8px;
  transform:translate(-50%,-50%);
  background:var(--dot-inner);
}

/* Active: brighter inner white + soft glow ring */
.amcham-dots .swiper-pagination-bullet-active::after{
  background:var(--dot-inner-active);
  box-shadow:0 0 0 2px var(--dot-glow);
}

/* --- Navigation arrows: removed per request --- */
.amcham-nav,.amcham-prev,.amcham-next{display:none !important}

/* --- Empty state (unchanged) --- */
.amcham-empty{
  background:#f5f6f7;color:#2b2b2b;
  display:flex;align-items:center;justify-content:center;
}
.amcham-empty-inner{
  padding:28px 32px;border:1px dashed #cfd3d7;border-radius:6px;background:#fff;
}

/* --- Mobile tweaks --- */
@media (max-width:600px){
  .amcham-badges{top:12px;left:12px}
  .amcham-meta{left:16px;right:16px;bottom:12px}
  .amcham-title{font-size:15px;line-height:21px}
  .amcham-date{font-size:11px}
  .amcham-dots{top:8px;right:10px}
  .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal{
    top:8px !important; right:10px !important;
  }
}