/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Karsa Insights Article Styles */
.karsa-callout {
  margin: 2rem 0;
  overflow: hidden;
}
.karsa-callout__header {
  padding: 0.6rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}
.karsa-callout--teal .karsa-callout__header { background: #2c8a87; }
.karsa-callout--navy .karsa-callout__header { background: #1e3a5f; }
.karsa-callout__body {
  padding: 0.9rem 1rem;
  font-style: italic;
  color: #1e3a5f;
  background: #dce8f5;
  font-size: 0.9rem;
  line-height: 1.7;
}
.karsa-callout__body p { margin: 0 0 0.5rem; }
.karsa-callout__body p:last-child { margin-bottom: 0; }
.karsa-callout__body ul { margin: 0.25rem 0 0.5rem 1.2rem; padding: 0; }
.karsa-callout__body li { margin-bottom: 0.35rem; }

.karsa-stat-table {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.karsa-stat-table table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.88rem;
}
.karsa-stat-table table thead th {
  background: #1e3a5f !important;
  color: #fff !important;
  padding: 0.65rem 1rem !important;
  text-align: left !important;
  font-weight: 700 !important;
  border: none !important;
}
.karsa-stat-table table tbody td {
  padding: 0.6rem 1rem !important;
  border: 1px solid #c8d8ea !important;
  vertical-align: top !important;
  line-height: 1.5 !important;
  color: #1a1a2e !important;
}
.karsa-stat-table table tbody tr:nth-child(odd) td { background: #fff !important; }
.karsa-stat-table table tbody tr:nth-child(even) td { background: #f4f8fc !important; }

.karsa-references {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid #dce8f5;
  font-size: 0.82rem;
  color: #1e3a5f;
  line-height: 1.9;
}
.karsa-references p { margin: 0 0 0.25rem; }
.karsa-references__heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e3a5f;
  margin: 0 0 0.75rem;
}
.karsa-closing {
  font-style: italic;
  color: #1e3a5f;
  font-size: 1rem;
  line-height: 1.9;
  margin: 2rem 0;
}
.karsa-closing p { margin: 0 0 0.75rem; }

/* Get to Know Us — "Elevate Cities Globally" display text */
#brxe-ksoddf {
  font-size: var(--text-5xl) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  width: 100% !important;
  display: block !important;
}
@media (max-width: 767px) {
  #brxe-ksoddf {
    font-size: var(--text-xl) !important;
  }
}

/* Hover effect for links in article content */
.brxe-post-content a:hover,
figure figcaption a:hover,
.karsa-references a:hover,
.karsa-closing a:hover {
  color: #1e3a5f;
  transition: color 0.2s ease;
}

/* Our Team (EN) + Tim Penggerak (ID) — 4 col avatar layout */
#brxe-txhoek, #brxe-wqlhed, #brxe-zamdfe, #brxe-pubjcl,
#brxe-izpxxu, #brxe-xtksbm, #brxe-qowekz, #brxe-wsruia {
  grid-template-columns: repeat(4, 1fr) !important;
  grid-gap: var(--space-m) !important;
}

/* Photo: square crop, Instagram grid style */
#brxe-txhoek .brxe-imagereveal,
#brxe-wqlhed .brxe-imagereveal,
#brxe-zamdfe .brxe-imagereveal,
#brxe-pubjcl .brxe-imagereveal,
#brxe-izpxxu .brxe-imagereveal,
#brxe-xtksbm .brxe-imagereveal,
#brxe-qowekz .brxe-imagereveal,
#brxe-wsruia .brxe-imagereveal {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: var(--radius-m) !important;
}

/* Anchor foto ke atas supaya kepala tidak terpotong */
#brxe-txhoek .brxe-imagereveal img,
#brxe-wqlhed .brxe-imagereveal img,
#brxe-zamdfe .brxe-imagereveal img,
#brxe-pubjcl .brxe-imagereveal img,
#brxe-izpxxu .brxe-imagereveal img,
#brxe-xtksbm .brxe-imagereveal img,
#brxe-qowekz .brxe-imagereveal img,
#brxe-wsruia .brxe-imagereveal img {
  object-position: center 15% !important;
}

/* Tablet / landscape mobile (481px–767px): 3 columns */
@media (max-width: 767px) {
  #brxe-txhoek, #brxe-wqlhed, #brxe-zamdfe, #brxe-pubjcl,
  #brxe-izpxxu, #brxe-xtksbm, #brxe-qowekz, #brxe-wsruia {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-gap: var(--space-s) !important;
  }
}

/* Portrait mobile (≤480px): 2 columns */
@media (max-width: 480px) {
  #brxe-txhoek, #brxe-wqlhed, #brxe-zamdfe, #brxe-pubjcl,
  #brxe-izpxxu, #brxe-xtksbm, #brxe-qowekz, #brxe-wsruia {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: var(--space-xs) !important;
  }
}

/* Vision section — 2-column: teks kiri, swiper kanan */
#brxe-pklily {
  height: auto !important;
}
#brxe-sbnmbh {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: var(--space-xl) !important;
  position: relative !important;
}
#brxe-irbdap {
  width: 100% !important;
  transform: none !important;
  position: static !important;
}
#brxe-bjbkdv, #brxe-xhffwi, #brxe-qxtlvz, #brxe-hdskyz, #brxe-wcfoqw {
  display: none !important;
}
.vision-swiper-wrap {
  width: 100%;
  grid-column: 2;
}
.vision-slider {
  position: relative;
  width: 100%;
  border-radius: var(--radius-m);
  overflow: hidden;
}
.vision-slide {
  display: none;
  animation: visionFadeIn 0.8s ease;
}
.vision-slide.active { display: block; }
.vision-slide img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes visionFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.vision-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.vision-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s;
}
.vision-dot.active { background: #fff; }
@media (max-width: 767px) {
  #brxe-sbnmbh { grid-template-columns: 1fr !important; }
  .vision-swiper-wrap { grid-column: 1; }
  .vision-slide img { height: auto; }
}

/* Our Team — nama overlay di dalam foto, sudut bawah */
#brxe-txhoek .brxe-eyjpjr {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  gap: 0 !important;
}
#brxe-txhoek .brxe-iqwunb {
  margin-top: -4.5rem !important;
  position: relative !important;
  z-index: 2 !important;
}
#brxe-txhoek .brxe-khsezb {
  background: linear-gradient(0deg, rgba(30,58,95,0.88) 0%, transparent 100%) !important;
  padding: 2.5rem 0.75rem 0.6rem !important;
  border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
}
#brxe-txhoek .brxe-xtaytw,
#brxe-txhoek .brxe-bsqgxo { color: #fff !important; font-size: 0.78rem !important; line-height: 1.3 !important; }
#brxe-txhoek .brxe-kbojfm svg,
#brxe-txhoek .brxe-kbojfm i { color: #fff !important; fill: #fff !important; }
/* Content in-flow — expand card ke bawah, tidak overlap */
#brxe-txhoek .brxe-aakdlk {
  background: #1A1F74 !important;
  padding: var(--space-s) !important;
  border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
  color: #fff !important;
}

/* Board of Trustees & Supervisors */
#brxe-wqlhed .brxe-pybbxn {
  display: flex !important; flex-direction: column !important;
  overflow: visible !important; gap: 0 !important;
}
#brxe-wqlhed .brxe-hfncsc {
  margin-top: -5rem !important; position: relative !important; z-index: 2 !important;
}
#brxe-wqlhed .brxe-nqfmvp {
  background: linear-gradient(0deg, rgba(30,58,95,0.88) 0%, transparent 100%) !important;
  padding: 2.5rem 0.75rem 0.6rem !important;
  border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
}
#brxe-wqlhed .brxe-jrpzvv * { color: #fff !important; font-size: 0.78rem !important; line-height: 1.3 !important; }
#brxe-wqlhed .brxe-nqfmvp svg, #brxe-wqlhed .brxe-nqfmvp i { color: #fff !important; fill: #fff !important; }
#brxe-wqlhed .brxe-hqccrb {
  background: #1A1F74 !important; padding: var(--space-s) !important;
  border-radius: 0 0 var(--radius-m) var(--radius-m) !important; color: #fff !important;
}

/* Board of Executives */
#brxe-zamdfe .brxe-ouxgzs {
  display: flex !important; flex-direction: column !important;
  overflow: visible !important; gap: 0 !important;
}
#brxe-zamdfe .brxe-typkzq {
  margin-top: -5rem !important; position: relative !important; z-index: 2 !important;
}
#brxe-zamdfe .brxe-rnotvn {
  background: linear-gradient(0deg, rgba(30,58,95,0.88) 0%, transparent 100%) !important;
  padding: 2.5rem 0.75rem 0.6rem !important;
  border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
}
#brxe-zamdfe .brxe-nvxvvj * { color: #fff !important; font-size: 0.78rem !important; line-height: 1.3 !important; }
#brxe-zamdfe .brxe-rnotvn svg, #brxe-zamdfe .brxe-rnotvn i { color: #fff !important; fill: #fff !important; }
#brxe-zamdfe .brxe-xveiey {
  background: #1A1F74 !important; padding: var(--space-s) !important;
  border-radius: 0 0 var(--radius-m) var(--radius-m) !important; color: #fff !important;
}

/* Board of Experts */
#brxe-pubjcl .brxe-wfsycy {
  display: flex !important; flex-direction: column !important;
  overflow: visible !important; gap: 0 !important;
}
#brxe-pubjcl .brxe-ortbva {
  margin-top: -5rem !important; position: relative !important; z-index: 2 !important;
}
#brxe-pubjcl .brxe-qfhvpe {
  background: linear-gradient(0deg, rgba(30,58,95,0.88) 0%, transparent 100%) !important;
  padding: 2.5rem 0.75rem 0.6rem !important;
  border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
}
#brxe-pubjcl .brxe-ywucba * { color: #fff !important; font-size: 0.78rem !important; line-height: 1.3 !important; }
#brxe-pubjcl .brxe-qfhvpe svg, #brxe-pubjcl .brxe-qfhvpe i { color: #fff !important; fill: #fff !important; }
#brxe-pubjcl .brxe-wsixjw {
  background: #1A1F74 !important; padding: var(--space-s) !important;
  border-radius: 0 0 var(--radius-m) var(--radius-m) !important; color: #fff !important;
}

/* Homepage hero — posisi foto */
#brxe-wkvkxj,
#brxe-tcrqff {
  transform: translateX(3%) translateY(5%) scale(1.2) !important;
}
#brxe-pmmcvi,
#brxe-nrgvge {
  height: 34rem !important;
}
@media (max-width: 767px) {
  #brxe-wkvkxj,
  #brxe-tcrqff {
    transform: none !important;
  }
  #brxe-pmmcvi,
  #brxe-nrgvge {
    height: 20rem !important;
  }
}

/* Our Team — mobile: font nama + role lebih kecil */
@media (max-width: 767px) {
  #brxe-txhoek .brxe-iqwunb { margin-top: -4rem !important; }
  #brxe-wqlhed .brxe-hfncsc { margin-top: -4.5rem !important; }
  #brxe-zamdfe .brxe-typkzq { margin-top: -4.5rem !important; }
  #brxe-pubjcl .brxe-ortbva { margin-top: -4.5rem !important; }
  #brxe-txhoek .brxe-xtaytw,
  #brxe-txhoek .brxe-bsqgxo { font-size: 0.65rem !important; }
  #brxe-wqlhed .brxe-jrpzvv * { font-size: 0.65rem !important; }
  #brxe-zamdfe .brxe-nvxvvj * { font-size: 0.65rem !important; }
  #brxe-pubjcl .brxe-ywucba * { font-size: 0.65rem !important; }
  #brxe-pubjcl > li:nth-child(10) .brxe-ywucba * { font-size: 0.57rem !important; }
}

/* Board of Experts — Shofwan (nama panjang): font lebih kecil + overlay lebih bawah */
@media (min-width: 768px) {
  #brxe-pubjcl > li:nth-child(10) .brxe-ywucba * {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }
  #brxe-pubjcl > li:nth-child(10) .brxe-ortbva {
    margin-top: -4.6rem !important;
  }
}

/* Get to Know Us — canvas breathing room kiri-kanan */
body.page-id-256 .brxe-section:not(#brxe-lfvixe) > .brxe-container {
  padding-left: clamp(1.5rem, 4vw, 3.5rem) !important;
  padding-right: clamp(1.5rem, 4vw, 3.5rem) !important;
}