/**
 * Override CSS khusus per-template (jika ada kebutuhan spesifik front-page,
 * single-paket, dll yang tidak cukup ditangani components.css generik).
 */

/* ==========================================================================
   front-page.php — hero, why-us, kategori paket, testimonial, blog preview.
   Section besar pakai {spacing.section} (64px) padding vertikal; grid kartu
   baru (why-us, blog preview) pakai {spacing.base} (16px) gap, sesuai
   Whitespace Philosophy DESIGN-airbnb.md: "open hero, dense marketplace below".
   ========================================================================== */

/* Hero — 1 kolom center-aligned ala hero Airbnb asli (headline besar duduk
   di atas search-bar, semua center), BUKAN 2-kolom teks-vs-gambar lagi
   (sudah final tanpa foto hero sama sekali). Background section tetap
   {colors.surface-soft}. Trust-line (rating/insurance/hotel-transfer) sudah
   dihapus total — lihat front-page.php, tidak ada lagi .hero__badges dst. */
.hero {
  position: relative;
  padding-block: var(--spacing-section);
  background: var(--color-surface-soft);
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-base);
  text-align: center;
}

/* Booking-bar SENGAJA dipisah dari .hero__content (lihat markup) — pakai
   container--medium (880px) sendiri, TIDAK ikut max-width sempit
   container--narrow (640px) punya headline/subheadline. search-bar-pill
   Airbnb asli lebih lebar dari teks, tidak terikat constraint lebar
   paragraf. margin-inline:auto & padding-inline sudah datang dari .container
   (class dipakai bareng di markup) — cukup tambah margin-top di sini.
   spacing-xl (32px) = jarak proporsional dari subheadline, bukan gap ganda
   bekas trust-line yang sudah dihapus. */
.hero__booking {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-xl);
}

/* Wave divider — transisi lembut dari {colors.surface-soft} (background hero)
   ke {colors.canvas} (background halaman di bawahnya). Posisi absolute di
   bawah hero, tidak menambah tinggi section (§ tidak mengubah tinggi section
   drastis) — cuma dekorasi tipis 48px yang overlap tepi bawah hero. */
.hero__divider {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
}

.hero__divider path {
  fill: var(--color-canvas);
}

.hero__title {
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-ls);
  color: var(--color-ink);
}

.hero__subtitle {
  margin: 0;
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
}

.why-us {
  padding-block: var(--spacing-section);
}

.why-us__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-base);
}

.why-us__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

/* Circle badge tint primary (poin B) — sebelumnya icon polos tanpa
   background; ukuran 56px cukup lega untuk SVG 28px di dalamnya
   (quadatv_why_us_icon()) supaya tetap ada "napas" di sekeliling ikon. */
.why-us__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-canvas));
  color: var(--color-primary);
}

/* Playful micro-interaction: wiggle ringan on hover, murni transform (tidak
   trigger reflow). Sama persis dipakai di .trust-bar__icon di bawah. */
.why-us__card:hover .why-us__icon {
  animation: quadatv-icon-wiggle 400ms ease;
}

.why-us__title {
  margin: 0;
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-lh);
  color: var(--color-ink);
}

.why-us__description {
  margin: 0;
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-muted);
}

.home-section {
  padding-block: var(--spacing-section);
}

/* Rhythm konsisten {spacing.section} di SEMUA transisi antar-section (poin D)
   — sebelumnya cuma .home-section+.home-section yang di-zero, jadi transisi
   .why-us -> section pertama dan section terakhir -> .cta-banner numpuk 2x
   {spacing.section} (128px) sementara transisi antar .home-section cuma 64px.
   Ditambah selector .why-us dan .cta-banner supaya jaraknya seragam. */
.why-us + .home-section,
.home-section + .home-section,
.home-section + .cta-banner {
  padding-top: 0;
}

/* .section-heading (template-parts/section-heading.php) dipindah ke
   components.css — sudah jadi komponen reusable, bukan lagi override
   khusus front-page. Lihat blok "section-heading" di components.css. */

.blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-base);
}

.blog-preview-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-soft);
}

.blog-preview-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-preview-card__title {
  margin: var(--spacing-base) 0 var(--spacing-xs);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-lh);
}

.blog-preview-card__title a {
  color: var(--color-ink);
}

.blog-preview-card__excerpt {
  margin: 0;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-muted);
}

@media (max-width: 1127px) {
  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 743px) {
  .hero {
    padding-block: var(--spacing-xxl);
  }

  .why-us__grid {
    grid-template-columns: 1fr;
  }

  .blog-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   archive-paket.php — judul halaman, category-strip filter, grid paket,
   pagination.
   ========================================================================== */

.page-title {
  padding-top: var(--spacing-xl);
  margin: 0 0 var(--spacing-lg);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-ls);
  color: var(--color-ink);
}

/* {component.category-strip} + {component.category-tab-active}: strip teks
   flat (bukan pill), tab aktif dibedakan lewat underline ink 2px — pola sama
   dengan {component.product-tab-active} di Top Navigation. */
.category-strip {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  padding-bottom: 0;
  border-bottom: 1px solid var(--color-hairline-soft);
  overflow-x: auto;
}

.category-strip__tab {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-base);
  background: var(--color-canvas);
  color: var(--color-muted);
  font-size: var(--type-button-sm-size);
  font-weight: var(--type-button-sm-weight);
  line-height: var(--type-button-sm-lh);
  letter-spacing: var(--type-button-sm-ls);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.category-strip__tab:hover {
  color: var(--color-ink);
}

.category-strip__tab.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

.archive-paket__empty {
  padding-block: var(--spacing-xl);
  font-size: var(--type-body-md-size);
  color: var(--color-muted);
}

.pagination {
  margin: var(--spacing-xl) 0 var(--spacing-section);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--type-body-sm-size);
  color: var(--color-ink);
}

.pagination .page-numbers.current {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.pagination .page-numbers.dots {
  color: var(--color-muted);
}

.pagination .page-numbers:not(.current):not(.dots):hover {
  background: var(--color-surface-soft);
}

/* ==========================================================================
   single-paket.php — listing detail 2-column (~64%/~32% via grid 2fr/1fr),
   galeri, {component.amenity-row}, {component.reservation-card} sebagai
   .booking-summary-card. Sticky right-rail turun ke sticky bottom bar mobile
   sesuai Collapsing Strategy DESIGN-airbnb.md.
   ========================================================================== */

.paket-detail__title {
  padding-top: var(--spacing-xl);
  margin: 0 0 var(--spacing-lg);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-ls);
  color: var(--color-ink);
}

.paket-detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
  padding-bottom: var(--spacing-section);
}

.paket-detail__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  min-width: 0;
}

.paket-gallery__main {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-soft);
}

.paket-gallery__main-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paket-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.paket-gallery__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-soft);
}

.paket-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paket-detail__heading {
  margin: 0 0 var(--spacing-base);
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-ls);
  color: var(--color-ink);
}

.paket-detail__content {
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
}

.amenity-row {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.amenity-row__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
}

.amenity-row__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
}

.amenity-row__label {
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-ink);
}

.booking-summary-card {
  position: sticky;
  top: calc(80px + var(--spacing-lg));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  padding: var(--spacing-lg);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
}

.booking-summary-card__price {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.booking-summary-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-size: var(--type-body-sm-size);
  color: var(--color-body);
}

.booking-summary-card__price-row strong {
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-lh);
  color: var(--color-ink);
}

.booking-summary-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-base);
  border-top: 1px solid var(--color-hairline-soft);
}

.booking-summary-card__detail-row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-size: var(--type-body-sm-size);
  color: var(--color-body);
}

.booking-summary-card__detail-label {
  color: var(--color-muted);
}

.booking-summary-card__cta .btn-primary {
  width: 100%;
}

@media (max-width: 743px) {
  .paket-detail {
    grid-template-columns: 1fr;
    /* Ruang bawah supaya konten terakhir tidak ketutup sticky bottom bar. */
    padding-bottom: calc(var(--spacing-section) + 96px);
  }

  .paket-gallery__thumbs {
    grid-template-columns: repeat(3, 1fr);
  }

  .booking-summary-card {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-base);
    padding: var(--spacing-sm) var(--spacing-base);
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--color-hairline);
  }

  .booking-summary-card__price {
    flex-direction: row;
    gap: var(--spacing-base);
  }

  .booking-summary-card__price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .booking-summary-card__details {
    display: none;
  }

  .booking-summary-card__cta {
    flex-shrink: 0;
  }
}

/* ==========================================================================
   page.php / single.php — konten generik. H1 {typography.display-lg} (.page-title,
   sudah dipakai juga di archive-paket.php), judul artikel blog
   {typography.title-md}, body {typography.body-md}.
   ========================================================================== */

.page-content {
  padding-bottom: var(--spacing-section);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
}

.page-content > * + * {
  margin-top: var(--spacing-base);
}

.blog-post__thumbnail {
  margin-bottom: var(--spacing-lg);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-soft);
}

.blog-post__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post__title {
  padding-top: var(--spacing-xl);
  margin: 0 0 var(--spacing-sm);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-lh);
  letter-spacing: var(--type-title-md-ls);
  color: var(--color-ink);
}

.blog-post__meta {
  margin: 0 0 var(--spacing-lg);
  font-size: var(--type-caption-sm-size);
  font-weight: var(--type-caption-sm-weight);
  line-height: var(--type-caption-sm-lh);
  color: var(--color-muted);
}

/* ==========================================================================
   archive.php — reuse .blog-preview-grid/.blog-preview-card dari front-page.php.
   ========================================================================== */

.archive-empty {
  padding-block: var(--spacing-xl);
  font-size: var(--type-body-md-size);
  color: var(--color-muted);
}

/* ==========================================================================
   404.php
   ========================================================================== */

.not-found {
  text-align: center;
  padding-block: var(--spacing-section);
}

.not-found h1 {
  margin: 0 0 var(--spacing-base);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-ls);
  color: var(--color-ink);
}

.not-found p {
  margin: 0 0 var(--spacing-lg);
  font-size: var(--type-body-md-size);
  color: var(--color-body);
}

/* ==========================================================================
   front-page.php — section statis tambahan: trust-bar, category-intro,
   how-it-works, home-gallery, faq-accordion (reuse template-parts), cta-banner.
   ========================================================================== */

/* Trust bar — strip tipis di bawah hero, bukan {spacing.section} penuh karena
   memang dimaksud "tipis" (thin), dipisah hairline atas+bawah. */
.trust-bar {
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-hairline-soft);
  border-bottom: 1px solid var(--color-hairline-soft);
}

.trust-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  padding-block: var(--spacing-lg);
}

/* Pill/badge dengan tint primary — color-mix murni dari {colors.primary}
   (tidak ada hex baru), supaya trust-bar tidak lagi cuma teks+checkmark
   polos di atas surface-soft (poin B: distribusi warna homepage). */
.trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-canvas));
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-lh);
  color: var(--color-ink);
  white-space: nowrap;
}

.trust-bar__icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.trust-bar__item:hover .trust-bar__icon {
  animation: quadatv-icon-wiggle 400ms ease;
}

/* Keyframe wiggle bersama untuk .why-us__icon & .trust-bar__icon — rotate +
   scale ringan, murni transform supaya tidak trigger reflow/repaint layout. */
@keyframes quadatv-icon-wiggle {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  30% {
    transform: rotate(-10deg) scale(1.12);
  }
  60% {
    transform: rotate(8deg) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-us__card:hover .why-us__icon,
  .trust-bar__item:hover .trust-bar__icon {
    animation: none;
  }
}

/* Package categories intro — 2 kartu statis, replika ringan {component.property-card}. */
.category-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-base);
}

.category-intro-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  background: var(--color-canvas);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.category-intro-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover), var(--shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  .category-intro-card {
    transition: none;
  }

  .category-intro-card:hover {
    transform: none;
    box-shadow: var(--shadow-card-hover);
  }
}

.category-intro-card__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.category-intro-card__title {
  margin: var(--spacing-base) 0 var(--spacing-xs);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-lh);
  color: var(--color-ink);
}

.category-intro-card__description {
  margin: 0;
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-muted);
}

/* How Booking Works — pola identik why-us__card (icon/number + title + description),
   nomor step pakai {component.icon-button-circle} (32px, surface-strong, rounded-full). */
.how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-base);
}

.how-it-works__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.how-it-works__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-surface-strong);
  color: var(--color-ink);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
}

.how-it-works__title {
  margin: 0;
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-lh);
  color: var(--color-ink);
}

.how-it-works__description {
  margin: 0;
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-muted);
}

/* Gallery — placeholder foto {rounded.md}, caption di dalam kotak karena belum
   ada foto asli untuk overlay di atasnya. Turun dari 4-up ke 3-up desktop
   supaya tiap foto lebih besar (permintaan sesi ini — "terlalu kecil"),
   konsisten dengan grid 3-up package-card di section lain halaman ini. */
.home-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-base);
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* Reset chrome <button> bawaan browser (border/background/padding/font)
   supaya visual identik dengan <div> placeholder sebelumnya — bukan
   komponen baru, cuma wrapper semantik untuk keyboard + klik. */
.home-gallery__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
}

/* aspect-ratio 4:5 (bukan 1:1 lagi) — konsisten di semua item grid ini
   (sebelumnya beda-beda), sekaligus foto jadi kerasa lebih besar/tegak
   ala highlight gallery, bukan thumbnail kotak kecil. */
.home-gallery__placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: var(--spacing-base);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  box-shadow: var(--shadow-card-hover);
  transition: transform 300ms ease;
}

/* Gradient overlay bawah (poin E) — disiapkan sekarang meski placeholder
   masih abu-abu polos, supaya begitu foto asli dipasang, caption tetap
   terbaca tanpa perlu sentuh CSS lagi. color-mix dari {colors.scrim} (bukan
   rgba/hex baru), memudar dari transparan di 55% ke gelap di tepi bawah. */
.home-gallery__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-scrim) 65%, transparent),
    transparent 55%
  );
  pointer-events: none;
}

/* Zoom-in ringan on hover — siap juga untuk saat placeholder diganti <img>
   foto asli nanti, teknik yang sama tetap berlaku. */
.home-gallery__item:hover .home-gallery__placeholder {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .home-gallery__placeholder {
    transition: none;
  }

  .home-gallery__item:hover .home-gallery__placeholder {
    transform: none;
  }
}

/* position relative + z-index supaya caption tetap di atas ::before gradient
   overlay; warna on-dark karena caption sekarang duduk di atas scrim gelap
   (bukan lagi langsung di atas surface-soft polos). {typography.caption}
   (14px/500) — dinaikkan dari caption-sm (13px/400) supaya lebih kebaca &
   rapi di kotak yang sekarang lebih besar. */
.home-gallery__caption {
  position: relative;
  z-index: 1;
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-on-dark);
}

/* FAQ accordion — diubah dari list bergaris jadi card-style (poin F): tiap
   item punya surface + radius + shadow saat expanded, dipisah gap bukan
   hairline. Height animation dikendalikan assets/js/main.js
   (initFaqAccordion) via inline style pada .faq-accordion__answer; dua
   selector di bawah ([open] vs :not([open])) adalah FALLBACK murni-CSS kalau
   JS gagal load — <details> native tetap toggle instan seperti biasa. */
.faq-accordion {
  max-width: 720px;
}

.faq-accordion__item {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
  transition: box-shadow 200ms ease;
}

.faq-accordion__item:last-child {
  margin-bottom: 0;
}

.faq-accordion__item[open] {
  box-shadow: var(--shadow-card-hover);
}

.faq-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-base);
  padding: var(--spacing-base) var(--spacing-lg);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-lh);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.faq-accordion__question::-webkit-details-marker {
  display: none;
}

.faq-accordion__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-muted);
  transition: transform 0.2s ease;
}

.faq-accordion__item[open] .faq-accordion__icon {
  transform: rotate(180deg);
}

/* Fallback tanpa JS: [open] -> height auto (tampil penuh instan, perilaku
   native <details>). Dengan JS, initFaqAccordion() override height inline
   selama animasi lalu melepas inline style di akhir transisi, jadi rule
   `height: auto` ini yang berlaku lagi setelah animasi selesai (supaya kartu
   tetap resize dengan benar kalau lebar viewport berubah). */
.faq-accordion__item:not([open]) .faq-accordion__answer {
  height: 0;
  overflow: hidden;
}

.faq-accordion__item[open] .faq-accordion__answer {
  height: auto;
}

/* Padding sengaja ditaruh di <p> (anak), BUKAN di .faq-accordion__answer
   (induk yang di-animate) — kalau padding ada di induk, height:0 tidak akan
   benar-benar collapse ke 0 karena padding tetap dirender terlepas dari
   box-sizing. Overflow:hidden di induk tetap meng-crop <p> beserta padding-
   nya dengan bersih saat height:0. */
.faq-accordion__answer {
  overflow: hidden;
  transition: height 300ms ease;
}

.faq-accordion__answer p {
  margin: 0;
  padding: 0 var(--spacing-lg) var(--spacing-base);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion__answer {
    transition: none;
  }

  .faq-accordion__icon {
    transition: none;
  }
}

/* .cta-banner (template-parts/cta-banner.php) dipindah ke components.css —
   sudah jadi komponen reusable (front-page.php + single-paket.php), bukan
   lagi override khusus front-page. Lihat blok "cta-banner" di components.css. */

@media (max-width: 1127px) {
  .how-it-works__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 743px) {
  .category-intro-grid {
    grid-template-columns: 1fr;
  }

  .how-it-works__grid {
    grid-template-columns: 1fr;
  }

  /* Gap yang sudah ada sebelumnya — grid ini sempat tidak punya override
     1-up di mobile sama sekali (beda dari semua grid lain di halaman ini),
     jadi tetap 2-up sampai layar sekecil apapun. Disamakan sekarang. */
  .home-gallery__grid {
    grid-template-columns: 1fr;
  }

  .trust-bar__inner {
    gap: var(--spacing-lg);
  }
}