/* Hallmark · layout: unggulan (3 kartu besar + kartu ringkas 4 kolom) · dalam sistem desain MBS (variables.css)
 * Dipakai section dengan 'layout' => 'unggulan' di Config\Sections (saat ini: Blog HIMA MBS, /blog-hima).
 * Semua warna dari token --mbs-*; tidak ada font/token baru. Kartu besar = pages/_card 'news' apa adanya,
 * di sini hanya rasio foto 4:3 (sama dengan slider beranda), tint gradasi tema, dan susunan responsif. */

/* ---------- Kartu besar ---------- */
/* Satu-satunya aksen halaman ini: tint tema di dasar foto (hijau tua memudar ke transparan).
   Label kategori, hover, dan fokus sengaja sama persis dengan kartu Berita (pages.css), bukan gaya sendiri. */
.pgu-utama .pg-card-media{ aspect-ratio: 4 / 3; }
.pgu-utama .pg-card-figure::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--mbs-green-dark) 42%, transparent) 100%);
}

/* Kurang dari 3 tulisan: tanpa kotak kosong. 1 tulisan = kartu mendatar penuh, 2 = dua kolom. */
.pgu-utama--1{ grid-template-columns: minmax(0, 1fr); }
.pgu-utama--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Kartu mendatar: foto kiri, teks kanan (1 tulisan di layar lebar; kartu pertama di tablet) */
/* Teks dipusatkan vertikal; "Baca selengkapnya" ikut teks (bukan terdorong ke dasar kartu oleh margin-top:auto) */
@media (min-width: 992px){
  .pgu-utama--1 > .pg-card{ flex-direction: row; }
  .pgu-utama--1 > .pg-card > .pg-card-figure{ flex: 0 0 42%; }
  .pgu-utama--1 > .pg-card > .pg-card-body{ justify-content: center; padding: 32px 40px; }
  .pgu-utama--1 .pg-card-title{ font-size: 1.3rem; }
  .pgu-utama--1 .pg-card-more{ margin-top: 10px; }
}
@media (min-width: 576px) and (max-width: 991.98px){
  .pgu-utama--3 > .pg-card:first-child,
  .pgu-utama--1 > .pg-card{ grid-column: 1 / -1; flex-direction: row; }
  .pgu-utama--3 > .pg-card:first-child > .pg-card-figure,
  .pgu-utama--1 > .pg-card > .pg-card-figure{ flex: 0 0 48%; }
  .pgu-utama--3 > .pg-card:first-child > .pg-card-body,
  .pgu-utama--1 > .pg-card > .pg-card-body{ justify-content: center; }
  .pgu-utama--3 > .pg-card:first-child .pg-card-more,
  .pgu-utama--1 .pg-card-more{ margin-top: 10px; }
}

/* ---------- Pemisah ---------- */
.pgu-sep{ margin: 40px 0 28px; }

/* ---------- Kartu ringkas 4 kolom ---------- */
.pgu-ringkas{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.pgu-mini{
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--mbs-white); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pgu-mini-media{ aspect-ratio: 4 / 3; min-height: 0; padding: 0; border-radius: 0; font-size: 1.8rem; }
.pgu-mini-media.photo-ph{ background: var(--mbs-grad-soft); color: var(--mbs-teal); }
.pgu-mini-body{ display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; min-width: 0; }
.pgu-mini-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .74rem; color: var(--mbs-muted); }
.pgu-mini-meta .bi{ line-height: 1; color: var(--mbs-teal); }
.pgu-dot{ width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
/* Bobot 500 = judul kartu besar (h3 bawaan): kartu ringkas dibedakan oleh ukuran, tidak boleh lebih tebal dari kartu utama */
.pgu-mini-title{
  margin: 0; font-size: .95rem; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.pgu-mini-title a{ color: var(--mbs-ink); text-decoration: none; transition: color var(--dur) var(--ease); }
.pgu-mini-title a::after{ content: ""; position: absolute; inset: 0; z-index: 1; } /* seluruh kartu satu target klik */
.pgu-mini-title a:focus-visible{ outline: none; }
.pgu-mini:focus-within{ outline: 3px solid var(--mbs-blue-light); outline-offset: 3px; }
@media (hover: hover){
  .pgu-mini:hover{ transform: translateY(-4px); box-shadow: var(--shadow-blue-hover); }
  .pgu-mini:hover .pgu-mini-title a{ color: var(--mbs-teal); }
}
.pgu-mini:active{ transform: translateY(-1px); }

/* ---------- Responsif ---------- */
/* Kartu ringkas sempit: kategori selalu baris sendiri (bukan titik pemisah yang tertinggal di ujung baris) */
@media (max-width: 1199.98px){
  .pgu-dot{ display: none; }
  .pgu-mini-kat{ flex-basis: 100%; }
}
@media (max-width: 767.98px){
  .pgu-ringkas{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pgu-sep{ margin: 28px 0 22px; }
}
@media (max-width: 575.98px){
  /* kartu besar 1 kolom (pages.css); 2 tulisan juga 1 kolom supaya ringkasan tidak terjepit */
  .pgu-utama--2{ grid-template-columns: minmax(0, 1fr); }
  .pgu-ringkas{ gap: 12px; }
  .pgu-mini-body{ padding: 10px 12px 14px; gap: 4px; }
  .pgu-mini-title{ font-size: .88rem; }
  .pgu-mini-meta{ font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce){
  .pgu-mini, .pgu-mini-title a{ transition: none; }
}