/* =====================================================================
   Alinea — gaya modul blok builder (views/themes/alinea/desktop/modules)
   Dimuat di semua halaman dan perangkat; semua selektor di bawah body.alinea.
   Kelas utilitas mockup (text-ink, border-line, font-serif, ...) datang dari
   tailwind.config di layout; berkas ini hanya menambal hal yang tidak bisa
   ditulis sebagai kelas di template.
   ===================================================================== */

/* 1. Radius mengikuti setelan admin (Website > radius gambar/tombol, live customizer).
   Bingkai gambar/kartu modul memakai .alinea-r-img = --site-image-radius (none 0, soft 12px,
   medium 24px, round 32px). Tombol memakai .alinea-r-btn = --site-button-radius; pilihan
   "default" (tanpa radius situs) = 4px gaya Alinea. Live customizer mengubah variabel di :root
   dan data-button-radius di body, jadi pratinjau langsung ikut. */
body.alinea .alinea-r-img { border-radius: var(--site-image-radius, 0px); overflow: hidden; }
body.alinea .alinea-r-btn { border-radius: 4px; }
body.alinea:not([data-button-radius="default"]) .alinea-r-btn { border-radius: var(--site-button-radius, 4px); }

/* 2. Lebar kontainer konsisten dengan mockup (max-w-7xl + gutter 16/24/32px).
   webstyle-desktop memotong .builder-html-scope.w-full .max-w-7xl menjadi
   calc(100% - 80px) di 1024-1359px, sehingga isi htmlblock lebar penuh tidak
   sejajar dengan modul lain. */
@media (min-width: 1024px) and (max-width: 1359px) {
  body.alinea .builder-html-scope.w-full .max-w-7xl { max-width: 80rem !important; }
}

/* 3. Teks tanpa kelas di blok heading/paragraph/htmlblock (isi editor admin). */
body.alinea .alinea-heading h1:not([class]),
body.alinea .alinea-paragraph h1:not([class]) {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #161413;
  margin-bottom: 1rem;
}
body.alinea .alinea-heading h2:not([class]),
body.alinea .alinea-paragraph h2:not([class]) {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #161413;
  margin-bottom: 0.5rem;
}
body.alinea .alinea-heading h3:not([class]),
body.alinea .alinea-paragraph h3:not([class]) {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: #161413;
  margin-bottom: 0.5rem;
}
body.alinea .alinea-heading p:not([class]),
body.alinea .alinea-paragraph p:not([class]) {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.625;
  color: #6E6760;
  margin-bottom: 1rem;
}
body.alinea .alinea-paragraph a:not([class]),
body.alinea .alinea-heading a:not([class]) {
  color: #8C3D22;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.alinea .alinea-paragraph a:not([class]):hover,
body.alinea .alinea-heading a:not([class]):hover { color: #161413; }

/* 4. Herofeature karusel & toggle (kelas base dipakai herofeature.css/js). */
body.alinea .alinea-mod .herofeature-content { gap: 0; }
body.alinea .alinea-mod .herofeature-title {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  color: #161413;
  margin-bottom: 1rem;
}
body.alinea .alinea-mod .herofeature-description {
  color: #6E6760;
  font-size: 0.9375rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
}
body.alinea .alinea-mod .herofeature-features {
  margin-top: 0;
  padding-top: 1rem;
  border-top: 1px solid #E7E2D8;
}
body.alinea .alinea-mod .herofeature-feature-title {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9C958D;
}
body.alinea .alinea-mod .herofeature-feature-desc {
  font-size: 0.875rem;
  font-weight: 500;
  color: #161413;
  opacity: 1;
}
body.alinea .alinea-mod .herofeature-faq { border-top: 1px solid #E7E2D8; }
body.alinea .alinea-mod .herofeature-faq > .faq-item { border-color: #E7E2D8; }
body.alinea .alinea-mod .herofeature-faq .faq-question {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: 1.125rem;
  color: #161413;
}
body.alinea .alinea-mod .herofeature-faq .faq-question:hover { color: #8C3D22; }
body.alinea .alinea-mod .herofeature-faq .faq-answer {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.625;
  color: #6E6760;
  opacity: 1;
}

/* 5. Menu (blok menu builder): gaya navigasi mockup. */
body.alinea .alinea-mod.menu-section { padding: 1.5rem 0; }
body.alinea .alinea-mod .menu-item a,
body.alinea .alinea-mod .menu-item span {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6E6760;
  transition: color 0.2s ease;
}
body.alinea .alinea-mod .menu-item a:hover { color: #161413; }

/* 6. Teaser, kategori, halaman: kartu bergaris tipis tanpa bayangan. */
body.alinea .alinea-mod.teaser article,
body.alinea .alinea-mod.page article { background: #FFFFFF; }
body.alinea .alinea-mod.teaser h3,
body.alinea .alinea-mod.page h3 { font-weight: 500; }
body.alinea .alinea-mod.listcategory a > span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 7. Slideshow (hero kartu) dengan lebih dari satu slide: karusel Swiper dari slideshow.js tema.
   Sebelum Swiper siap hanya slide pertama yang tampil (tanpa lonjakan tinggi halaman). */
body.alinea .alinea-slideshow .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; }
body.alinea .alinea-slideshow .swiper-slide { height: auto; }
body.alinea .alinea-slideshow .swiper-button-next,
body.alinea .alinea-slideshow .swiper-button-prev { color: #FFFFFF; }
body.alinea .alinea-slideshow .swiper-button-next::after,
body.alinea .alinea-slideshow .swiper-button-prev::after { font-size: 22px; }
@media (max-width: 639px) {
  body.alinea .alinea-slideshow .swiper-button-next,
  body.alinea .alinea-slideshow .swiper-button-prev { display: none; }
}
body.alinea .alinea-slideshow .swiper-pagination { bottom: 20px; }
body.alinea .alinea-slideshow .swiper-pagination-bullet { background: #FFFFFF; opacity: .45; }
body.alinea .alinea-slideshow .swiper-pagination-bullet-active { opacity: 1; }

/* 7b. Herofeature list langsung diikuti blok button (CTA terpisah): jarak bawah dan garis
   seksi diserahkan ke blok button, supaya tombol duduk 32px di bawah isi seperti mockup. */
body.alinea .block-type-herofeature:has(+ .block-type-button) .alinea-herofeature { padding-bottom: 0; border-bottom: 0; }

/* 8. Kolom gaya footer (about/contact/links/social) bila dipakai di badan halaman. */
body.alinea .block-position-wrapper h4.font-serif { color: #161413; }

/* 9. Tombol kaca hero tetap transparan walau "override_bg_white" aktif
   (webstyle mengganti semua [class*="bg-white"] menjadi warna body). */
html body.alinea .alinea-mod .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
html body.alinea .alinea-mod .hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2) !important; }