/* ==========================================================================
   GIZIDAT — Article Portal (news layout)
   v3.0.0 · 29 Okt 2026 · rebuilt from scratch

   Namespace:
     .pf-*  = page furniture (head, chips, pager, empty)
     .pc    = post card (pc__media, pc__body, pc__title, ...)
     .pc--hero / .pc--duo / .pc--grid = variant

   Prinsip:
     1. Semua thumbnail dikunci aspect-ratio 16/9 — tidak ada gambar gepeng.
     2. Mobile-first; desktop menaikkan jumlah kolom.
     3. Tidak menyentuh class lama (.article-grid/.post-card) milik
        home.php / index.php / archive.php / front-page.php.
   ========================================================================== */

/* ============================== TOKENS ============================== */
.gzd-portal{
  --pc-radius:18px;
  --pc-gap:18px;
  --pc-border:#e1ede6;
  --pc-ink:#17322a;
  --pc-muted:#5c7168;
  --pc-accent:#18734b;
  --pc-shadow:0 10px 30px rgba(11,60,44,.08);
  --pc-shadow-hov:0 18px 44px rgba(11,60,44,.14);
}

/* ============================== PAGE HEAD ============================== */
.pf-head{
  max-width:720px;
  margin-bottom:20px;
}
.pf-head h1{
  margin:0 0 .34em;
  font-size:clamp(1.6rem,4.2vw,2.5rem);
  line-height:1.16;
  letter-spacing:-.03em;
  font-weight:950;
  color:var(--pc-ink);
}
.pf-head__sub{
  margin:0;
  color:var(--pc-muted);
  font-size:.97rem;
  line-height:1.62;
}

/* ============================== CATEGORY CHIPS ============================== */
.pf-chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  margin:0 0 26px;
  padding:2px 0;
  -webkit-overflow-scrolling:touch;
}
.pf-chips::-webkit-scrollbar{display:none}
.pf-chips a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:42px;
  padding:8px 15px;
  border:1px solid var(--pc-border);
  border-radius:999px;
  background:#fff;
  color:var(--pc-ink);
  font-size:.85rem;
  font-weight:850;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.pf-chips a:hover{border-color:var(--pc-accent);color:var(--pc-accent)}
.pf-chips a.is-active{
  background:var(--pc-accent);
  border-color:var(--pc-accent);
  color:#fff;
}
.pf-chip-n{
  font-size:.76em;
  font-weight:750;
  opacity:.62;
}

/* ==========================================================================
   POST CARD
   ========================================================================== */
.pc{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--pc-border);
  border-radius:var(--pc-radius);
  overflow:hidden;
  height:100%;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pc:hover{
  transform:translateY(-3px);
  border-color:#c7e2d3;
  box-shadow:var(--pc-shadow-hov);
}

/* --- media: selalu 16:9 --- */
.pc__media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg,#eefaf2,#fff2cc);
  flex:0 0 auto;
}
.pc__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.pc:hover .pc__media img{transform:scale(1.04)}

.pc__ph{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#dff269,#f7b942);
  font-size:2.4rem;
}

/* badge kategori di atas foto (hero saja) */
.pc__badge{
  position:absolute;
  left:12px;
  top:12px;
  z-index:2;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(11,60,44,.86);
  color:#fff;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

/* --- body --- */
.pc__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
  padding:15px 17px 17px;
}

.pc__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin:0 0 2px;
  font-size:.73rem;
  font-weight:750;
  color:var(--pc-muted);
  line-height:1.4;
}
.pc__cat{
  color:var(--pc-accent);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.68rem;
}
.pc__dot{opacity:.45}

.pc__title{
  margin:6px 0 8px;
  font-size:1.02rem;
  line-height:1.32;
  letter-spacing:-.012em;
  font-weight:900;
}
.pc__title a{
  color:var(--pc-ink);
  text-decoration:none;
}
.pc__title a:hover{color:var(--pc-accent)}

.pc__excerpt{
  margin:0 0 12px;
  color:var(--pc-muted);
  font-size:.9rem;
  line-height:1.58;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.pc__more{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:38px;
  color:var(--pc-accent);
  font-size:.85rem;
  font-weight:900;
  text-decoration:none;
}
.pc__more:hover{color:var(--pc-ink)}
.pc__more span{transition:transform .18s ease}
.pc__more:hover span{transform:translateX(3px)}

/* ==========================================================================
   VARIANT — HERO
   ========================================================================== */
.pf-hero{margin-bottom:var(--pc-gap)}
.pc--hero{border-radius:22px;box-shadow:var(--pc-shadow)}
.pc--hero .pc__body{padding:20px 22px 22px}
.pc--hero .pc__title{
  font-size:clamp(1.24rem,2.6vw,1.85rem);
  line-height:1.24;
  font-weight:950;
  margin:8px 0 10px;
}
.pc--hero .pc__excerpt{
  font-size:.96rem;
  line-height:1.66;
  -webkit-line-clamp:3;
  max-width:74ch;
}
.pc--hero .pc__more{font-size:.89rem;min-height:42px}
.pc--hero .pc__meta{font-size:.76rem}

/* ==========================================================================
   VARIANT — DUO (2 kolom)
   ========================================================================== */
.pf-duo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--pc-gap);
  margin-bottom:var(--pc-gap);
}
.pc--duo .pc__title{font-size:1.06rem;font-weight:900}

/* ==========================================================================
   VARIANT — GRID
   3 kolom di desktop. Kalau sisa kartu hanya 1, kartu terakhir dibiarkan
   melebar penuh supaya tidak menggantung sendirian (pola news portal).
   ========================================================================== */
.pf-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--pc-gap);
}

/* ==========================================================================
   KARTU TERAKHIR YANG SISA SENDIRIAN
   Kalau jumlah kartu tidak habis dibagi jumlah kolom, kartu terakhir
   dibentangkan penuh dan diubah jadi layout horizontal (gambar kiri, teks
   kanan). Tujuannya: tidak ada slot kosong menggantung ala template murah.

   Catatan penting: `grid-column:1 / -1` WAJIB ada di setiap aturan bentang,
   kalau tidak kartu tetap di slot 1 kolom -> gambar jadi gepeng.
   ========================================================================== */

/* --- desktop 3 kolom: sisa 1 (4, 7, 10, ... kartu) --- */
@media (min-width:1025px){
  .pf-grid > .pc:last-child:nth-child(3n + 1){
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,52%) minmax(0,1fr);
    align-items:stretch;
  }
  .pf-grid > .pc:last-child:nth-child(3n + 1) .pc__media{
    height:100%;
  }
  .pf-grid > .pc:last-child:nth-child(3n + 1) .pc__body{
    justify-content:center;
    padding:22px 24px;
  }
  .pf-grid > .pc:last-child:nth-child(3n + 1) .pc__title{
    font-size:1.18rem;
  }
  .pf-grid > .pc:last-child:nth-child(3n + 1) .pc__excerpt{
    -webkit-line-clamp:3;
    font-size:.93rem;
  }
}

/* --- tablet 2 kolom: sisa 1 (ganjil) --- */
@media (min-width:761px) and (max-width:1024px){
  .pf-grid > .pc:last-child:nth-child(odd){
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,46%) minmax(0,1fr);
    align-items:stretch;
  }
  .pf-grid > .pc:last-child:nth-child(odd) .pc__media{height:100%}
  .pf-grid > .pc:last-child:nth-child(odd) .pc__body{
    justify-content:center;
    padding:18px 20px;
  }
  .pf-grid > .pc:last-child:nth-child(odd) .pc__excerpt{
    -webkit-line-clamp:3;
  }
}

/* ==========================================================================
   LEGACY BRIDGE — .article-grid dipakai home.php / index.php / archive.php /
   front-page.php. Diberi grid supaya tidak flat, tanpa mengubah markup mereka.
   ========================================================================== */
.article-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.article-grid .post-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e1ede6;
  border-radius:18px;
  overflow:hidden;
  height:100%;
}
.article-grid .post-thumb-link{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg,#eefaf2,#fff2cc);
}
.article-grid .post-thumb-link img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.article-grid .post-placeholder{
  width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(135deg,#dff269,#f7b942);font-size:2.2rem;
}
.article-grid .post-body{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1 1 auto}
.article-grid .post-body h3{font-size:1rem;line-height:1.32;margin:5px 0 8px}
.article-grid .post-body h3 a{color:#17322a;text-decoration:none}
.article-grid .post-body h3 a:hover{color:#18734b}
.article-grid .post-body p{
  color:#5c7168;font-size:.89rem;line-height:1.56;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.article-grid .post-body > a{
  margin-top:auto;font-weight:900;font-size:.84rem;color:#18734b;text-decoration:none;
  min-height:36px;display:inline-flex;align-items:center;
}
.article-grid .post-meta{font-size:.73rem;color:#5c7168;margin-bottom:2px}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pf-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:34px 0 0;
}
.pf-pager .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--pc-border);
  border-radius:12px;
  background:#fff;
  color:var(--pc-ink);
  font-size:.9rem;
  font-weight:850;
  text-decoration:none;
  line-height:1;
}
.pf-pager .page-numbers:hover{border-color:var(--pc-accent);color:var(--pc-accent)}
.pf-pager .page-numbers.current{
  background:var(--pc-accent);
  border-color:var(--pc-accent);
  color:#fff;
}
.pf-pager .page-numbers.dots{
  border:0;background:transparent;min-width:auto;padding:0 4px;
}
.pf-pager__info{
  margin-left:auto;
  color:var(--pc-muted);
  font-size:.83rem;
  font-weight:800;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.pf-empty{
  text-align:center;
  padding:60px 24px;
  background:#fffaf0;
  border:1px dashed var(--pc-border);
  border-radius:22px;
}
.pf-empty h2{margin:0 0 .4em;color:var(--pc-ink)}
.pf-empty p{margin:0;color:var(--pc-muted)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* tablet lebar — grid turun 2 kolom */
@media (max-width:1024px){
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* tablet kecil — hero body rapat */
@media (max-width:860px){
  .pc--hero .pc__body{padding:17px 18px 19px}
  .pc--hero .pc__title{font-size:1.24rem}
  .gzd-portal{--pc-gap:14px}
}

/* mobile — semua 1 kolom */
@media (max-width:760px){
  .pf-duo,
  .pf-grid{grid-template-columns:1fr}
  .article-grid{grid-template-columns:1fr}
  .gzd-portal{--pc-gap:15px;--pc-radius:16px}
  .pc--hero{border-radius:18px}
  .pc--hero .pc__body{padding:15px 16px 17px}
  .pc--hero .pc__title{font-size:1.14rem;line-height:1.27}
  .pc--hero .pc__excerpt{font-size:.9rem;-webkit-line-clamp:3}
  .pc__body{padding:14px 15px 16px}
  .pc__title{font-size:1rem}
  .pc__badge{left:9px;top:9px;font-size:.62rem;padding:4px 9px}
  .pf-pager__info{margin-left:0;width:100%;margin-top:4px}
}

/* HP kecil */
@media (max-width:359px){
  .pf-head h1{font-size:1.45rem}
  .pc{border-radius:14px}
  .pc__body{padding:12px 13px 14px}
  .pc__title{font-size:.95rem}
  .pc__excerpt{font-size:.85rem}
  .pc__more{font-size:.82rem}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .pc,
  .pc__media img,
  .pc__more span,
  .pf-chips a{transition:none!important}
  .pc:hover{transform:none}
  .pc:hover .pc__media img{transform:none}
  .pc__more:hover span{transform:none}
}