/**
 * Frontend responsif — dimuat setelah Mentor main.css.
 * Memperbaiki konflik tinggi hero, tipografi halus di mobile, dan overflow konten CMS.
 */

/* --- Layout: cegah scroll horizontal --- */
body.index-page {
  overflow-x: clip;
}

body.index-page .main {
  overflow-x: clip;
  max-width: 100%;
}

/* --- Hero panorama: tampilkan gambar utuh (tanpa terpotong) --- */
/* Mentor: section { padding: 60px 0 } → hero ikut dapat ruang kosong atas/bawah */
#hero.hero-panorama {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  overflow: visible;
  background-color: transparent !important;
}

/* Matikan overlay gelap dari tema Mentor pada hero */
#hero.hero-panorama::before {
  display: none !important;
  content: none !important;
}

#hero.hero-panorama .hero-panorama-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent !important;
}

/* Override aturan Mentor (yang memaksa 60vh/100vh) */
#hero.hero-panorama .carousel,
#hero.hero-panorama .carousel-inner,
#hero.hero-panorama .carousel-item {
  height: auto !important;
  max-height: none !important;
}

#hero.hero-panorama .hero-panorama-carousel .carousel-inner {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  background-color: transparent;
}

#hero.hero-panorama .hero-panorama-carousel .carousel-item {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  float: left !important;
  margin-right: -100% !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  overflow: hidden;
  background: transparent;
}

#hero.hero-panorama .hero-panorama-carousel .carousel-control-prev,
#hero.hero-panorama .hero-panorama-carousel .carousel-control-next {
  z-index: 4;
}

#hero.hero-panorama .hero-panorama-carousel .carousel-inner::after {
  display: none;
}

/* Gambar ditampilkan utuh, tidak dicrop */
#hero.hero-panorama .hero-panorama-img {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
}

/* Kartu pamflet di beranda (gambar utuh, tidak terpotong keras) */
.pamphlet-mini .pamphlet-mini-img {
  display: block;
  height: 180px;
  object-fit: contain;
  object-position: center center;
  background: #f8f9fa;
}
@media (max-width: 575.98px) {
  .pamphlet-mini .pamphlet-mini-img {
    height: 160px;
  }
}

/* Carousel non-panorama (jika ada) */
#hero:not(.hero-panorama) {
  height: clamp(200px, 38vh, 480px);
}

#hero:not(.hero-panorama) .carousel,
#hero:not(.hero-panorama) .carousel-inner,
#hero:not(.hero-panorama) .carousel-item {
  height: 100% !important;
}

#hero:not(.hero-panorama) .carousel-item {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

@media (min-width: 992px) {
  #hero:not(.hero-panorama) .carousel-item {
    background-size: contain !important;
  }
}

/* Mentor memakai 900px — mengganggu anchor #kategori / fixed header */
section,
.section {
  scroll-margin-top: clamp(72px, 14vw, 96px);
}

/* --- Judul section (home): tidak memenuhi seluruh lebar di HP --- */
@media (max-width: 575.98px) {
  .section-title {
    padding-bottom: 32px;
  }

  .section-title h2::after {
    display: none;
  }

  .section-title h2 {
    line-height: 1.35;
    margin-bottom: 0.35rem !important;
  }

  .section-title p {
    font-size: clamp(1.2rem, 5.5vw, 2rem);
    line-height: 1.25;
    word-break: break-word;
  }
}

/* --- Page title (Berita, halaman CMS, dll.) --- */
@media (max-width: 575.98px) {
  .page-title .heading {
    padding: 52px 12px;
  }

  .page-title .heading h1 {
    font-size: clamp(1.35rem, 6vw, 2rem);
    line-height: 1.25;
    word-break: break-word;
  }

  .page-title .heading p {
    font-size: 0.95rem;
    padding: 0 4px;
  }
}

/* --- Header / logo tidak mendorong burger keluar viewport --- */
.header .container-fluid.container-xl {
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.header .logo {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0.35rem;
}

.header .logo img {
  max-height: clamp(28px, 7vw, 36px);
  max-width: min(160px, 42vw);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Dropdown desktop: tetap dalam layar */
@media (min-width: 1200px) {
  .navmenu .dropdown ul {
    max-width: min(100vw - 32px, 320px);
  }
}

@media (max-width: 1199.98px) {
  .navmenu ul {
    inset: 58px 12px 16px 12px;
    max-height: calc(100vh - 90px);
  }
}

/* --- Kartu berita / kategori --- */
.courses.section .course-content {
  padding-left: clamp(12px, 3vw, 22px);
  padding-right: clamp(12px, 3vw, 22px);
}

.course-item img.img-fluid {
  width: 100%;
}

@media (max-width: 575.98px) {
  .course-content h3 {
    min-height: 0;
    font-size: 0.95rem;
    -webkit-line-clamp: 4;
  }

  .course-content .description {
    height: auto;
    min-height: 3.5em;
    max-height: 6.5em;
    font-size: 0.8125rem;
  }

  .courses.section .course-item img.img-fluid {
    object-fit: cover !important;
    min-height: 160px;
  }

  .filter-kecamatan {
    width: 100%;
    flex: 1 1 100%;
  }
}

.features.section .features-item h3 {
  word-break: break-word;
}

.features.section .features-item h3 a {
  hyphens: auto;
}

/* --- Konten halaman CMS: tabel & gambar besar --- */
.page-content .lh-lg img,
.page-content .card-body img,
.page-content .lh-lg table {
  max-width: 100%;
  height: auto;
}

.page-content .card-body .lh-lg {
  overflow-x: auto;
}

.page-content .card-body table {
  width: 100% !important;
}

/* --- Footer kolom lebih longgar di mobile --- */
@media (max-width: 767.98px) {
  .footer .footer-about .sitename {
    font-size: clamp(1rem, 4vw, 1.25rem);
  }
}