/* ===== Miagic Hero – compact, wide, modern ===== */
.miagic-hero{               /* tune just these three to taste */
  --hero-min-h: 240px;
  --hero-h:    34vw;        /* responsive height */
  --hero-max-h: 420px;

  --hero-radius: 16px;
  --hero-shadow: 0 10px 30px rgba(228,58,18,.16);         /* colored shadow */
  --hero-shadow-hover: 0 16px 42px rgba(228,58,18,.22);
  --hero-outline: rgba(228,58,18,.22);
  --hero-outline-hover: rgba(228,58,18,.42);
  --hero-bg: radial-gradient(1200px 360px at 10% 50%, #fff, #f7fafc);
}

/* make it feel wider without breaking the container grid */
.miagic-hero--bleed{
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left:  max(12px, .75rem);
  padding-right: max(12px, .75rem);
}

/* Title line (compact) */
.miagic-hero__title{
  font-weight: 800;
  font-size: clamp(1.05rem, .7rem + 1vw, 1.25rem);
  color: #0f172a;
  position: relative;
  margin-bottom: .6rem;
}
.miagic-hero__title::before{
  content:"";
  width:6px; height:18px; border-radius:3px;
  background:#e43a12; display:inline-block; margin-right:.5rem; vertical-align:middle;
}

/* Frame controls the SIZE (height/width) */
.miagic-hero__frame{
  height: clamp(var(--hero-min-h), var(--hero-h), var(--hero-max-h));
  border-radius: var(--hero-radius);
  overflow: hidden;
  background: var(--hero-bg);
  box-shadow: var(--hero-shadow);
  position: relative;
}

/* Carousel slides */
.miagic-hero .carousel-box{ height:100%; }
.miagic-hero .hero-slide{ display:block; height:100%; }
.miagic-hero .hero-img{
  width:100%; height:100%;
  object-fit: cover;
  transform: translateZ(0);
  transition: transform .5s ease;
}
.miagic-hero .carousel-box:hover .hero-img{ transform: scale(1.03); }

/* Soft outline on frame (rounded, follows radius) */
.miagic-hero__frame::after{
  content:""; position:absolute; inset:0;
  border-radius: inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--hero-outline);
}
.miagic-hero__frame:hover{ box-shadow: var(--hero-shadow-hover); }
.miagic-hero__frame:hover::after{ box-shadow: inset 0 0 0 1.5px var(--hero-outline-hover); }

/* AIZ/Slick arrows (compact, round) */
.miagic-hero .slick-prev, .miagic-hero .slick-next{
  width:36px;height:36px;border-radius:999px !important;
  background:#fff !important; color:#0f172a !important;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  z-index:5;
}
.miagic-hero .slick-prev:before, .miagic-hero .slick-next:before{ color:#0f172a; }
.miagic-hero .slick-prev{ left:12px; }
.miagic-hero .slick-next{ right:12px; }

/* Dots: centered, small */
.miagic-hero .slick-dots{ bottom:10px; }
.miagic-hero .slick-dots li button:before{
  font-size:10px; color:#fff; opacity:.6;
}
.miagic-hero .slick-dots li.slick-active button:before{
  color:#e43a12; opacity:1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .miagic-hero .hero-img{ transition:none !important; }
}