/* MDIX Event Harmoni — per-template fixes from the template audit. */

/* Hero: the grey silhouette placeholder became a real stage photo; show it as a round portrait. */
.banner .banner-in .banner-image {
  bottom: 0;
  background-image: none !important;
  padding: 0 0 3rem;
  text-align: center;
}
.banner .banner-in .banner-image img {
  width: min(100%, 440px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
@media (min-width: 992px) {
  .banner .banner-in .banner-image {
    padding: 8rem 0 7rem;
  }
}

/* Testimonial slider row (negative gutters) stuck out 3–6px on phones. */
.event-testimonial .review-slider {
  margin-left: 0;
  margin-right: 0;
}

/* Grey orbit placeholder next to the testimonials: decorative only, an empty block on phones. */
@media (max-width: 991px) {
  .event-testimonial .testimonial-image {
    display: none;
  }
}

/* Partner/sponsor logos were empty grey placeholder boxes. */
.event-partners {
  display: none;
}

/* Rupiah prices are longer than the original "$39.99". */
.event-pricing .pricing-price h2 {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.6rem);
  align-items: baseline !important;
}
.event-pricing .pricing-price .pricing-currency {
  font-size: 0.55em;
  margin-right: 0.15em;
}

/* Decorative faint section watermark (.h-title) was wrapping mid-word on some headings.
   A nowrap-only fix stopped the wrapping but let long headings ("Tanya Jawab", "Tentang",
   "Schedule"...) overflow their column at 992-1399px and even in some narrow columns at
   1400px+ (the theme never resizes .h-title above 991px). Scale the font down per range so
   nowrap text actually fits, instead of spilling past its box — verified box width (scrollWidth
   vs clientWidth) at 360-1920px on every page that uses .h-title. Deliberately no
   overflow:hidden here: it clipped a couple of px off the glyphs' top/bottom (font line-height
   metrics), which is worse than the harmless sub-pixel slack of a correctly sized watermark. */
.h-title {
  white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .h-title {
    font-size: 75px;
    margin-bottom: -45px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .h-title {
    font-size: 90px;
    margin-bottom: -55px;
  }
}
@media (min-width: 1400px) {
  .h-title {
    font-size: 100px;
    margin-bottom: -60px;
  }
}

/* Jadwal & testimoni avatars (images/reviewer/*.jpg are 90x100) looked stretched/oval. */
.author-info img,
.img-circle {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* "Rp 1.500.000" overflowed the price box around 1024px. */
.event-pricing .pricing-price h2 {
  font-size: clamp(1.6rem, 1rem + 1.4vw, 2.5rem);
  white-space: nowrap;
}

/* Footer contact: e-mail must stay lowercase (theme capitalises footer h6). */
.footer-contact-content h6 {
  text-transform: none;
}

/* Mobile menu (hamburger) hit box was 18x18 — under the 24px minimum and the 44px menu-toggle
   target (D-11). Slicknav renders it as a zero-padding ::before icon glyph. */
.slicknav_btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Footer "Tautan Cepat" links were 23px tall — just under the 24px touch-target minimum. */
footer ul.list li a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}