/* =========================================================
   BLOG / MONEY PAGE UI UTILITIES — GoTravela Indonesia
   File   : blog-ui.css
   Lokasi : /wp-content/themes/sydney-child/css/blog-ui.css
   Tanggal: 01 Oct 2025 (UNIFIED • SINGLE CARD • NO BADGES)
   Fungsi :
     - Grid responsif (2/3/4 kolom) untuk blok Gutenberg/HTML.
     - Satu pola Card (equal height + hover halus) untuk semua konteks.
     - Tombol CTA konsisten (scoped ke konten artikel).
     - Utilitas kecil (section spacing, clear float, note).
     - Trust strip & mini UI baseline.
   Catatan:
     - Breakpoint global: ≤991px (tablet), ≤767px (mobile).
     - Scoped agar tidak bentrok dengan SiteOrigin/Additional CSS.
     - Seluruh styling Badge/Pill ACF/WPCode DIHAPUS dari file ini.
========================================================= */


/* =========================
   1) GRID LAYOUT — unified + overflow guard (NORMAL/STANDARD)
   Breakpoints: ≤991px (tablet), ≤767px (mobile)
   ========================= */

.gt-grid-2,
.gt-grid-3,
.gt-grid-4 {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

/* Anak grid tidak boleh overflow */
.gt-grid-2 > *,
.gt-grid-3 > *,
.gt-grid-4 > * {
  min-width: 0;
}

/* Desktop default */
.gt-grid-2 { grid-template-columns: repeat(2, 1fr); }
.gt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.gt-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Tablet (≤991px) */
@media (max-width: 991px) {
  .gt-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .gt-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  .gt-grid-2,
  .gt-grid-3,
  .gt-grid-4 {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   PATCH KHUSUS CPT (Projects/Services) — TIDAK MENGGANGGU BLOG/PAGE
   Tujuan:
   - Memaksa grid turun baris setelah elemen float di template CPT.
   - Melebur <p> wrapper yang sering disuntik WP agar anak grid tetap sah.
   - Menambah overflow guard untuk konten panjang.
   Scope:
   - Hanya .single-projects dan .single-services.
   ========================================================= */

/* 1) Paksa grid turun setelah elemen float (clear: both) */
.single-projects .gt-grid-2,
.single-services .gt-grid-2,
.single-projects .gt-grid-3,
.single-services .gt-grid-3,
.single-projects .gt-grid-4,
.single-services .gt-grid-4 {
  clear: both;
}

/* 2) Leburkan <p> wrapper otomatis WordPress agar item tetap child grid */
@supports (display: contents) {
  .single-projects .gt-grid-2 > p,
  .single-services .gt-grid-2 > p,
  .single-projects .gt-grid-3 > p,
  .single-services .gt-grid-3 > p,
  .single-projects .gt-grid-4 > p,
  .single-services .gt-grid-4 > p {
    display: contents;
    margin: 0;
  }
}
@supports not (display: contents) {
  .single-projects .gt-grid-2 > p,
  .single-services .gt-grid-2 > p,
  .single-projects .gt-grid-3 > p,
  .single-services .gt-grid-3 > p,
  .single-projects .gt-grid-4 > p,
  .single-services .gt-grid-4 > p {
    margin: 0; /* minimal guard */
  }
}

/* 3) Overflow guard ulang untuk CPT */
.single-projects .gt-grid-2 > *,
.single-services .gt-grid-2 > *,
.single-projects .gt-grid-3 > *,
.single-services .gt-grid-3 > *,
.single-projects .gt-grid-4 > *,
.single-services .gt-grid-4 > * {
  min-width: 0;
}


/* =========================
   2) CARD — SATU POLA UNTUK SEMUA
   ========================= */

/* Satu sumber kebenaran: .gt-card (scoped ke entry-content) */
.entry-content .gt-card,
.entry-content .si-card,      /* alias legacy → gunakan .gt-card ke depan */
.entry-content .gtx-card {    /* alias legacy → gunakan .gt-card ke depan */
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  height:100%;
}

.entry-content .gt-card:hover,
.entry-content .si-card:hover,
.entry-content .gtx-card:hover {
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.entry-content .gt-card h3,
.entry-content .gt-card h4,
.entry-content .si-card h3,
.entry-content .si-card h4,
.entry-content .gtx-card h3,
.entry-content .gtx-card h4 {
  margin:.1em 0 .5em;
  font-weight:600;
  font-size:1.1rem;
}

.entry-content .gt-card p:last-child,
.entry-content .gt-card ul:last-child,
.entry-content .si-card p:last-child,
.entry-content .si-card ul:last-child,
.entry-content .gtx-card p:last-child,
.entry-content .gtx-card ul:last-child { margin-bottom:0 }

.entry-content .gt-card ul,
.entry-content .si-card ul,
.entry-content .gtx-card ul { padding-left:1.1em; margin:.4em 0 .8em }

.entry-content .gt-card li+li,
.entry-content .si-card li+li,
.entry-content .gtx-card li+li { margin-top:.3em }

/* Tombol di dalam card nempel bawah */
.entry-content .gt-card .gt-btn,
.entry-content .si-card .gt-btn,
.entry-content .gtx-card .gt-btn { margin-top:auto }

/* Mobile tweak */
@media (max-width:767px){
  .entry-content .gt-card,
  .entry-content .si-card,
  .entry-content .gtx-card { padding:14px; border-radius:10px }
}


/* =========================
   3) CTA BUTTON (scoped ke artikel)
   ========================= */

.entry-content .gt-btn,
.entry-content a.gt-btn{
  display:inline-block;
  padding:.65rem 1.25rem;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  text-align:center;
  transition:background .2s,color .2s,box-shadow .2s;
  border:1px solid transparent;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.entry-content .gt-btn-primary{
  background:#d32f2f; color:#fff; border-color:#d32f2f;
}
.entry-content .gt-btn-primary:hover,
.entry-content .gt-btn-primary:focus{
  background:#b71c1c; color:#fff;
}

.entry-content .gt-btn-ghost{
  background:#f3f4f6; color:#374151; border-color:#e5e7eb;
}
.entry-content .gt-btn-ghost:hover,
.entry-content .gt-btn-ghost:focus{
  background:#e5e7eb; color:#111827;
}

/* Full-width button on mobile */
@media (max-width:767px){
  .entry-content .gt-btn{ width:100%; text-align:center }
}


/* =========================
   4) UTILITIES (scope aman)
   ========================= */

.entry-content .gt-section{ margin-bottom:32px }
.entry-content .gt-note{ font-size:.875rem; color:#6b7280 }
.gt-clear{ clear:both }

.entry-content .gt-table{ width:100%; border-collapse:separate; border-spacing:0 }
.entry-content .gt-table th{ background:#f6f9fe; color:#0f2445; font-weight:600 }
.entry-content .gt-table th,
.entry-content .gt-table td{ padding:10px 12px; border-bottom:1px solid #eef2f7 }
.entry-content .gt-table tr:last-child td{ border-bottom:0 }


/* =========================
   5) TRUST STRIP & MINI UI BASELINE
   ========================= */

.trust-strip{
  display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  background:#f6f8fb; border:1px solid #e5e8ef; border-radius:1rem; padding:1rem;
}
.trust-strip__title{ margin:0; font-weight:700; color:#222 }
.trust-strip__subtitle{ margin:0; color:#666 }
.trust-strip__badges{ display:flex; flex-wrap:wrap; gap:.5rem }

.u-badge{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.4em .7em; border-radius:999px; font-weight:600;
  font-size:.9rem; line-height:1; border:1px solid #e5e8ef; background:#fff;
}
.u-badge--ok{ color:#0a6; background:#f4fff8; border-color:#cfead6 }
.u-badge--fast{ color:#06c; background:#f5f9ff; border-color:#cfe2ff }
.u-badge--compat{ color:#a05d00; background:#fff8ec; border-color:#ffe3b2 }

.u-center{text-align:center}
.u-flex{display:flex;gap:.75rem}
.u-flex-wrap{flex-wrap:wrap}
.u-mb-0{margin-bottom:0}
.u-mb-2{margin-bottom:.75rem}
.u-mb-3{margin-bottom:1rem}


/* =========================
   6) KOMPONEN LAIN YANG DIPERTAHANKAN
   ========================= */

/* TL;DR / Quick Answer box — tetap ada, bukan bagian badge */
.qa-intro {
  font-size: 1.08rem;
  color: #444;
  line-height: 1.65;
  max-width: 100%;
  margin: 8px 0 20px;
  padding: 12px 16px;
  text-align: left;
  font-style: normal;
  background: #f9fafc;
  border-left: 4px solid #2c5aa0;
  border-radius: 6px;
}
@media (max-width:991px){ .qa-intro { font-size:1.04rem } }
@media (max-width:767px){ .qa-intro { font-size:1rem; padding:10px 12px } }

/* =========================
   7) Google REVIEW 3 CARD 
   ========================= */


/* Review Section Container */
.gotravela-reviews {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.gotravela-reviews h2 {
  text-align: center;
  font-size: 1.875rem;
  margin-bottom: 2.5rem;
  color: #202124;
  font-weight: 600;
}

/* Review Cards Grid - 3 Columns */
.gotravela-reviews > .review-item:not(:last-child) {
  display: inline-block;
}

.gotravela-reviews {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.gotravela-reviews h2 {
  width: 100%;
  flex-basis: 100%;
}

.review-item {
  background: #f9fafb;
  border-left: 4px solid #4285f4;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
}

.review-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

/* Review Header */
.review-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.review-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.review-meta {
  flex: 1;
  min-width: 0;
}

.reviewer-name {
  display: block;
  font-size: 1rem;
  color: #202124;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.review-stars {
  color: #fbbc04;
  font-size: 0.875rem;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
  line-height: 1;
}

.review-date {
  font-size: 0.8125rem;
  color: #5f6368;
}

/* Review Text */
.review-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #3c4043;
  margin: 0;
  flex-grow: 1;
}

/* View All Button */
.view-all-reviews {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.875rem 1.75rem;
  background: #4285f4;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(66,133,244,0.3);
  width: 100%;
  text-align: center;
}

.view-all-reviews:hover {
  background: #1a73e8;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(66,133,244,0.4);
  color: #fff;
}

/* Tablet: 2 Columns */
@media (max-width: 900px) {
  .review-item {
    flex: 1 1 calc(50% - 0.75rem);
    max-width: 100%;
  }
}

/* Mobile: 1 Column */
@media (max-width: 600px) {
  .gotravela-reviews h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .review-item {
    flex: 1 1 100%;
    padding: 1.25rem;
  }
  
  .review-header {
    gap: 0.75rem;
  }
  
  .review-avatar {
    width: 40px;
    height: 40px;
  }
  
  .review-text {
    font-size: 0.875rem;
  }
}