/* === Homeschooling page: komponen tambahan (belum ada di style.css utama) === */

.p-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.p-badge--success { background: rgba(60,133,87,.12); color: var(--chalk-green); }


/* --- Gallery slider --- */
.hs-gallery {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.hs-gallery__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0;
}
.hs-gallery__track::-webkit-scrollbar { display: none; }
.hs-gallery__item {
  flex: 0 0 clamp(220px, 26vw, 300px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--ink-700);
}
.hs-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hs-gallery__item--fallback {
  background: linear-gradient(135deg, var(--ink-700), var(--sky-500));
}
.hs-gallery__item--fallback img { display: none; }
.hs-gallery__item { position: relative; }
.hs-gallery__item .video-frame { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.hs-gallery__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 14px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(0deg, rgba(16,20,26,.75), rgba(16,20,26,0));
  pointer-events: none;
}
.hs-gallery__nav {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(22,35,63,.15);
  background: var(--paper-50);
  color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hs-gallery__nav:hover {
  background: var(--pencil-yellow-dark);
  border-color: var(--pencil-yellow-dark);
  color: #fff;
}
@media (max-width: 620px) {
  .hs-gallery { grid-template-columns: 1fr; }
  .hs-gallery__nav { display: none; }
  .hs-gallery__item { flex-basis: 78%; }
}

[data-theme="dark"] .hs-gallery__nav { background: rgba(247,251,252,.06); border-color: rgba(247,251,252,.16); color: var(--paper-50); }


/* --- Testimoni --- */
.testimoni-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimoni-card {
  position: relative;
  background: rgba(247,251,252,.85);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.testimoni-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,96,12,.4);
}
.testimoni-card__quote-icon {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--pencil-yellow);
  margin-bottom: 4px;
}
.testimoni-card__text {
  color: var(--graphite-600);
  margin-bottom: 20px;
  flex: 1;
}
.testimoni-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimoni-card__who strong { display: block; color: var(--ink-900); font-size: 1rem; }
.testimoni-card__who span { font-size: 16px; color: var(--graphite-400); }
.testimoni-card__avatar-photo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.testimoni-card__video {
  margin-bottom: 20px;
  border-radius: 14px;
}
@media (max-width: 780px) {
  .testimoni-card__avatar-photo { width: 44px; height: 44px; }
}

@media (max-width: 960px) {
  .testimoni-grid { grid-template-columns: 1fr; }
}

[data-theme="dark"] .testimoni-card { background: rgba(24,93,130,.28); border-color: rgba(247,251,252,.14); }
[data-theme="dark"] .testimoni-card:hover { background: rgba(24,93,130,.4); border-color: rgba(255,96,12,.5); }
[data-theme="dark"] .testimoni-card__text { color: rgba(247,251,252,.75); }
[data-theme="dark"] .testimoni-card__who strong { color: var(--paper-50); }
[data-theme="dark"] .testimoni-card__who span { color: rgba(247,251,252,.55); }


/* --- FAQ accordion --- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: rgba(247,251,252,.85);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.faq-item:hover { border-color: rgba(255,96,12,.3); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-900);
  cursor: pointer;
}
.faq-item__chevron {
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  color: var(--graphite-400);
}
.faq-item.is-open .faq-item__chevron { transform: rotate(180deg); color: var(--pencil-yellow-dark); }
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1);
}
.faq-item__a > p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 22px;
  color: var(--graphite-600);
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-item__a > p { padding: 0 22px 20px; }

[data-theme="dark"] .faq-item { background: rgba(24,93,130,.08); border-color: rgba(247,251,252,.14); }
[data-theme="dark"] .faq-item__q { color: var(--paper-50); }
[data-theme="dark"] .faq-item__a > p { color: rgba(247,251,252,.7); }