/*
 * Blok Gutenberg untuk artikel: tampilan sama dengan komponen mockup (.table-wrap, .cta-box, .article-cols, .btn).
 * Dimuat di frontend dan di editor (add_editor_style).
 */

/* ---------- Tabel ---------- */
.wp-block-table { margin: 0 0 var(--space-4); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-image); background: var(--color-white); }
.wp-block-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--small-size); }
.wp-block-table th, .wp-block-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--color-border); }
.wp-block-table thead { border: 0; }
.wp-block-table thead th { background: var(--color-primary); color: var(--color-white); font-weight: 600; }
.wp-block-table tbody tr:nth-child(even) { background: var(--color-surface); }
.wp-block-table tr:last-child td, .wp-block-table tr:last-child th { border-bottom: 0; }

/* ---------- Gambar ---------- */
.wp-block-image { margin: 0 0 var(--space-4); }
.wp-block-image img { width: 100%; border-radius: var(--radius-card); }
.wp-block-image.aligncenter { margin-inline: auto; text-align: center; }
.wp-block-image.aligncenter img { margin-inline: auto; }
.wp-block-image.alignright img { margin-left: auto; }
.wp-block-image figcaption { margin-top: var(--space-2); font-size: 13px; text-align: center; color: var(--color-text-muted); }

/* ---------- Kolom gambar + teks ---------- */
.wp-block-columns.is-style-gambar-teks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; margin-block: var(--space-6); }
.wp-block-columns.is-style-gambar-teks > .wp-block-column { flex-basis: auto; min-width: 0; margin: 0; }
.wp-block-columns.is-style-gambar-teks .wp-block-image { margin: 0; }
.wp-block-columns.is-style-gambar-teks h3 { margin-top: 0; }
@media (max-width: 767px) {
  .wp-block-columns.is-style-gambar-teks { grid-template-columns: 1fr; }
  .wp-block-columns.is-style-gambar-teks img { width: auto; max-width: 100%; margin-inline: auto; }
}

/* ---------- Kotak CTA ---------- */
.wp-block-group.is-style-cta-box { margin: var(--space-6) 0; padding: var(--space-6); border-radius: var(--radius-card); background: var(--gradient-dark); color: var(--color-white); text-align: center; }
.is-style-cta-box h3 { color: var(--color-white); }
.is-style-cta-box p { color: var(--color-on-dark-muted); }
.is-style-cta-box .wp-block-buttons { justify-content: center; }

/* ---------- Tombol ---------- */
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 14px var(--space-5); border: 1.5px solid var(--color-primary); border-radius: var(--radius-button);
  background: var(--color-primary); color: var(--color-white);
  font-family: inherit; font-size: var(--button-size); font-weight: var(--button-weight); line-height: 1.2; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.wp-block-button__link:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: var(--color-white); }
.wp-block-button.is-style-wa .wp-block-button__link { background: var(--color-whatsapp); border-color: var(--color-whatsapp); color: var(--color-text); }
.wp-block-button.is-style-wa .wp-block-button__link:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }

/* ---------- Kutipan & daftar ---------- */
.prose .wp-block-quote { margin: 0 0 var(--space-4); }
.prose .wp-block-list { margin-bottom: var(--space-4); }