/**
 * Tammia Theme — Testimonial Slick Carousel CSS (Revised)
 * File: themes/tammia_theme/css/tammia-testimonial.css
 *
 * Perubahan utama dari versi sebelumnya:
 * - Teks testimoni di-clamp 5 baris agar tinggi card seragam
 * - Slide 3 per row (atur di optionset Slick)
 * - Border-top berwarna sebagai aksen visual
 * - Avatar lebih besar, nama tidak terpotong
 * - Spacing lebih lega antar card
 */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.tammia-testimonial-section {
  padding: 56px 0 72px;
  background: #f9fafb;    /* background section sedikit abu agar card putih menonjol */
}

.tammia-testimonial-section .container {
  position: relative;     /* untuk positioning arrow */
}

.tammia-testimonial-section .section-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111827;
  text-align: center;
  margin-bottom: 6px;
}

.tammia-testimonial-section .section-sub {
  font-size: 0.9rem;
  color: #6b7280;
  text-align: center;
  margin-bottom: 40px;
}

/* ── Slick overflow fix ──────────────────────────────────────────────────── */
.tammia-testimonial-section .slick-slider {
  overflow: hidden;
}

.tammia-testimonial-section .slick-list {
  overflow: visible;
  /* padding-top cukup besar agar border-top card tidak terpotong saat hover */
  padding: 6px 4px 20px !important;
}

/* ── Kartu Testimoni ─────────────────────────────────────────────────────── */
.testi-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  border-top: 3px solid #1a9e7a;   /* aksen warna hijau teal di atas card */
  padding: 22px 20px 18px;
  margin: 0 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.25s ease, border-top-color 0.25s ease;
  display: flex !important;
  flex-direction: column;
  /* Tinggi fixed agar semua card seragam */
  min-height: 260px;
}

.testi-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
  border-top-color: #22c997;

}

/* ── Bintang ─────────────────────────────────────────────────────────────── */
.testi-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.testi-stars .star {
  font-size: 15px;
  line-height: 1;
}

.testi-stars .star--full  { color: #f59e0b; }
.testi-stars .star--empty { color: #e5e7eb; }

/* ── Isi Testimoni — CLAMP 5 baris ──────────────────────────────────────── */
.testi-body {
  font-size: 0.83rem;
  color: #4b5563;
  line-height: 1.5;
  flex: 1;
  margin-bottom: 16px;
  font-style: italic;
  position: relative;
  padding-left: 2px;

  /* Truncate teks maksimal 5 baris */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tanda kutip dekoratif */
.testi-body::before {
  content: '\201C';
  font-size: 3.5rem;
  color: #1a9e7a;
  opacity: 0.12;
  position: absolute;
  top: -14px;
  left: -6px;
  line-height: 1;
  font-style: normal;
  pointer-events: none;
}

/* Hapus margin dari <p> yang di-generate Drupal text formatter */
.testi-body p { margin: 0; }

/* ── Footer kartu ────────────────────────────────────────────────────────── */
.testi-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
  margin-top: auto;       /* dorong ke bawah agar posisi konsisten */
}

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a9e7a 0%, #0f6e56 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.testi-avatar-initials {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Nama & Lokasi ───────────────────────────────────────────────────────── */
.testi-meta {
  flex: 1;
  min-width: 0;
}

.testi-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #111827;
  /* Izinkan nama tampil penuh, tidak dipotong */
  white-space: normal;
  line-height: 1.2;
  margin-bottom: 2px;
}

.testi-location {
  font-size: 0.72rem;
  color: #9ca3af;
}

/* ── Badge Terverifikasi ─────────────────────────────────────────────────── */
.testi-verified {
  background: #ecfdf5;
  color: #065f46;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid #a7f3d0;
  letter-spacing: 0.02em;
}

/* ── Slick Dots ──────────────────────────────────────────────────────────── */
.tammia-testimonial-section .slick-dots {
  bottom: -36px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.tammia-testimonial-section .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.tammia-testimonial-section .slick-dots li button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  padding: 0;
  transition: background 0.2s, transform 0.2s, width 0.2s;
  display: block;
}

.tammia-testimonial-section .slick-dots li button::before {
  display: none;
}

.tammia-testimonial-section .slick-dots li.slick-active button {
  background: #1a9e7a;
  transform: scale(1.25);
  width: 20px;            /* dot aktif melebar jadi pill */
  border-radius: 4px;
}

/* ── Slick Arrows ────────────────────────────────────────────────────────── */
.tammia-testimonial-section .slick-prev,
.tammia-testimonial-section .slick-next {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  top: 50%;
  transform: translateY(-60%);  /* sedikit di atas tengah, sesuaikan jika perlu */
}

.tammia-testimonial-section .slick-prev { left: -20px; }
.tammia-testimonial-section .slick-next { right: -20px; }

.tammia-testimonial-section .slick-prev:hover,
.tammia-testimonial-section .slick-next:hover {
  background: #1a9e7a;
  border-color: #1a9e7a;
  box-shadow: 0 4px 14px rgba(26, 158, 122, 0.35);
}

.tammia-testimonial-section .slick-prev::before,
.tammia-testimonial-section .slick-next::before {
  color: #9ca3af;
  font-size: 18px;
  opacity: 1;
  line-height: 1;
}

.tammia-testimonial-section .slick-prev:hover::before,
.tammia-testimonial-section .slick-next:hover::before {
  color: #ffffff;
}

/* ── Responsif ───────────────────────────────────────────────────────────── */
/*
  Jumlah slide per row diatur di Slick optionset (bukan di CSS).
  Setting yang direkomendasikan di optionset UI:
  
  Default (desktop ≥ 992px) : slidesToShow 3
  Breakpoint 991px           : slidesToShow 2
  Breakpoint 575px           : slidesToShow 1
  
  CSS di bawah hanya untuk penyesuaian visual tambahan.
*/

@media (max-width: 991px) {
  .testi-card {
    min-height: 240px;
  }
}

@media (max-width: 767px) {
  .tammia-testimonial-section {
    padding: 40px 0 56px;
  }
  .tammia-testimonial-section .slick-prev { left: -8px; }
  .tammia-testimonial-section .slick-next { right: -8px; }
}

@media (max-width: 575px) {
  .testi-card {
    margin: 0 6px;
    min-height: auto;
    border-radius: 12px;
  }
  .testi-body {
    -webkit-line-clamp: 6;  /* lebih banyak baris di mobile karena 1 card saja */
  }
}