/*
 * Gigsplay Music Directory — Frontend Styles v1.3.5
 * Mencakup semua komponen: direktori musisi, label, profil, profile box.
 * @package Gigsplay
 */

/* ─── CSS VARIABLES ─────────────────────────────────────────────────────────── */
:root {
  --gp-navy:        #0d1b2a;
  --gp-navy-mid:    #1e3a8a;
  --gp-red:         #e53935;
  --gp-red-dark:    #c62828;
  --gp-gray:        #6b7280;
  --gp-gray-light:  #f3f4f6;
  --gp-gray-border: #e5e7eb;
  --gp-white:       #ffffff;
  --gp-text:        #111827;
  --gp-text-muted:  #6b7280;

  /* Jenis warna */
  --gp-independen:  #1e3a8a;
  --gp-major:       #7b2d8b;
  --gp-sublabel:    #c17f24;

  --gp-radius:      12px;
  --gp-radius-sm:   8px;
  --gp-shadow:      0 2px 8px rgba(0,0,0,0.06);
  --gp-shadow-hover:0 4px 20px rgba(0,0,0,0.12);
  --gp-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gp-font-head:   'Poppins', var(--gp-font);
}

/* ─── CONTAINER ─────────────────────────────────────────────────────────────── */
.gmd-dir-page {
  font-family: var(--gp-font);
  color: var(--gp-text);
  background: var(--gp-white);
  line-height: 1.6;
}

.gmd-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* ─── PAGE HEADER ───────────────────────────────────────────────────────────── */
.gmd-page-header {
  margin-bottom: 1.75rem;
}

.gmd-page-header__title {
  font-family: var(--gp-font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gp-navy);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.gmd-page-header__desc {
  font-size: 1rem;
  color: var(--gp-gray);
  margin: 0;
}

/* ─── SEARCH BAR ────────────────────────────────────────────────────────────── */
.gmd-search-bar {
  margin-bottom: 1.25rem;
}

.gmd-search-form__inner {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.gmd-search-input {
  flex: 1;
  min-width: 180px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--gp-gray-border);
  border-radius: var(--gp-radius-sm);
  font-size: 0.925rem;
  font-family: var(--gp-font);
  color: var(--gp-text);
  background: var(--gp-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gmd-search-input:focus {
  outline: none;
  border-color: var(--gp-navy-mid);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.12);
}

.gmd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--gp-radius-sm);
  font-family: var(--gp-font);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.15s;
  line-height: 1.4;
  white-space: nowrap;
}

.gmd-btn--cari {
  background: #0d1b2a;
  color: var(--gp-white);
  flex-shrink: 0;
}
.gmd-btn--cari:hover {
  background: #1558a8;
  color: var(--gp-white);
  transform: translateY(-1px);
}

.gmd-btn--featured {
  background: var(--gp-navy);
  color: var(--gp-white)!important;
  margin-top: 1.25rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
}
.gmd-btn--featured:hover {
  background: var(--gp-navy-mid);
  color: var(--gp-white);
  transform: translateY(-1px);
}

.gmd-filter-select {
  padding: 0.58rem 0.9rem;
  border: 1px solid var(--gp-gray-border);
  border-radius: var(--gp-radius-sm);
  font-size: 0.875rem;
  font-family: var(--gp-font);
  color: var(--gp-text);
  background: var(--gp-white);
  cursor: pointer;
  flex-shrink: 0;
}
.gmd-filter-select:focus {
  outline: none;
  border-color: var(--gp-navy-mid);
}

/* ─── A-Z FILTER ────────────────────────────────────────────────────────────── */
.gmd-az-wrap {
  margin-bottom: 1.75rem;
  overflow: hidden;
}

.gmd-az-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.gmd-az-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.4rem;
  border: 1px solid var(--gp-gray-border);
  border-radius: var(--gp-radius-sm);
  background: var(--gp-white);
  color: var(--gp-text);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.gmd-az-btn.is-active,
.gmd-az-btn:hover {
  background: var(--gp-navy);
  border-color: var(--gp-navy);
  color: var(--gp-white);
}

/* ─── FEATURED HERO ─────────────────────────────────────────────────────────── */
.gmd-featured-section {
  margin-bottom: 2.5rem;
}

/* Label "★ MUSISI PILIHAN" di atas hero */
.gmd-featured-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-gray);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/*
 * HERO — Light theme (sesuai referensi)
 * Background putih, border abu tipis, foto di kanan tanpa blok pemisah.
 * Tinggi compact ~160px, konten kiri rata tengah vertikal.
 */
.gmd-featured-hero {
    display:flex;
    align-items:stretch;
    min-height: 280px;
    height: 280px;
    background:linear-gradient(
        90deg,
        #f7f7f8 0%,
        #f7f7f8 45%,
        #eef1f4 65%,
        #dce5ee 100%
    );
    border:1px solid var(--gp-gray-border);
    border-radius:12px;
    overflow:hidden;
}

.gmd-featured-hero__content {
    width:38%;
    flex:0 0 38%;
    padding:1.5rem 2rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.gmd-featured-hero__name {
  font-family: var(--gp-font-head);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gp-navy);       /* gelap, bukan putih */
  margin: 0;
  line-height: 1.1;
  margin-bottom:.75rem;
}

.gmd-featured-hero__genre {
  font-size: 1rem;
  color: var(--gp-gray);       /* abu gelap di atas putih */
  margin-bottom:1rem;
}

/* Badge: solid biru, teks putih */
.gmd-featured-hero__badge {
  display: inline-block;
  background: #1e6fcc;
  border: none;
  color: var(--gp-white);
  border-radius: 100px;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  width: fit-content;
  margin-top: 0.1rem;
}

/* Tombol "Lihat Profil →" — solid navy, sesuai referensi */
.gmd-btn--featured {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--gp-navy);
  color: var(--gp-white);
  padding: 0.55rem 1.25rem;
  border-radius: var(--gp-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  margin-top: 0.5rem;
  transition: background 0.2s, transform 0.15s;
  border: none;
  cursor: pointer;
}
.gmd-btn--featured:hover {
  background: var(--gp-navy-mid);
  color: var(--gp-white);
  transform: translateY(-1px);
}

/*
 * Foto kanan: mengisi tinggi penuh hero, rata kanan,
 * foto tidak diberi blok warna — langsung tampil di atas bg putih.
 */
.gmd-featured-hero__image {
    width:62%;
    flex:0 0 62%;
    max-width:none;
    height:100%;
    overflow:hidden;
    position:relative;
}
.gmd-featured-hero__image::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 180px;
    height: 100%;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        #f7f7f8 0%,
        rgba(247,247,248,.95) 15%,
        rgba(247,247,248,.75) 40%,
        rgba(247,247,248,.30) 70%,
        transparent 100%
    );
}

.gmd-featured-hero__image img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}

/* Logo label: contain + background abu sangat muda */
.gmd-featured-hero__image--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gp-gray-light);
  padding: 1.5rem;
}

.gmd-featured-hero__image--logo img {
  object-fit: contain;
  max-height: 120px;
  width: auto;
}

/* Monogram fallback jika tidak ada foto */
.gmd-featured-hero__mono {
  width: 80px;
  height: 80px;
  border-radius: var(--gp-radius);
  background: var(--gp-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gp-white);
  letter-spacing: 2px;
}

/* ─── LIST HEADER ───────────────────────────────────────────────────────────── */
.gmd-list-section {
  margin-top: 0.5rem;
}

.gmd-list-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.gmd-list-header__title {
  font-family: var(--gp-font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gp-navy);
  margin: 0;
}

.gmd-list-header__count {
  font-size: 0.85rem;
  color: var(--gp-gray);
}

/* ─── GRID ──────────────────────────────────────────────────────────────────── */
.gmd-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 2rem;
}

/* ─── CARD ──────────────────────────────────────────────────────────────────── */
.gmd-card {
  background: var(--gp-white);
  border: 1px solid var(--gp-gray-border);
  border-radius: var(--gp-radius);
  overflow: hidden;
  box-shadow: var(--gp-shadow);
  transition: box-shadow 0.2s, transform 0.18s;
}

.gmd-card:hover {
  box-shadow: var(--gp-shadow-hover);
  transform: translateY(-3px);
}

.gmd-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Card thumb - foto / monogram */
.gmd-card__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gp-navy);
  position: relative;
}

.gmd-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.gmd-card:hover .gmd-card__thumb img {
  transform: scale(1.05);
}

.gmd-card__mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gp-navy);
  color: var(--gp-white);
  font-family: var(--gp-font-head);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
}

/* Logo label: cover center agar tidak terpotong di sisi */
.gmd-card__thumb--logo {
  background: var(--gp-gray-light);
}

.gmd-card__thumb--logo img {
  object-fit: cover;
  object-position: center center;
  padding: 0;
}

.gmd-card__mono--label {
  background: var(--gp-navy);
  color: rgba(255,255,255,0.6);
}

/* Card body */
.gmd-card__body {
  padding: 0.875rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.gmd-card__name {
  font-family: var(--gp-font-head);
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--gp-navy);
  line-height: 1.3;
}

.gmd-card__sub {
  font-size: 0.78rem;
  color: var(--gp-gray);
  min-height: 1.1em;
}

/* Jenis label warna */
.gmd-card__sub--jenis { font-weight: 600; }
.gmd-jenis--independen { color: var(--gp-independen); }
.gmd-jenis--major      { color: var(--gp-major); }
.gmd-jenis--sub-label  { color: var(--gp-sublabel); }

.gmd-card__label-utama {
  font-size: 0.72rem;
  color: var(--gp-gray);
}

.gmd-card__count {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e6fcc;
  margin-top: 0.2rem;
}

.gmd-card__cta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gp-navy);
  margin-top: 0.35rem;
  transition: color 0.2s;
}

.gmd-card:hover .gmd-card__cta {
  color: #1e6fcc;
}

/* ─── PAGINATION ────────────────────────────────────────────────────────────── */
.gmd-pagination {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.gmd-pagination .page-numbers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
}

.gmd-pagination .page-numbers li {}

.gmd-pagination .page-numbers a,
.gmd-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border: 1px solid var(--gp-gray-border);
  border-radius: var(--gp-radius-sm);
  background: var(--gp-white);
  color: var(--gp-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gmd-pagination .page-numbers .current,
.gmd-pagination .page-numbers a:hover {
  background: #1e6fcc;
  border-color: #1e6fcc;
  color: var(--gp-white);
}

/* ─── NO RESULTS ────────────────────────────────────────────────────────────── */
.gmd-no-results {
  padding: 2.5rem;
  text-align: center;
  color: var(--gp-gray);
  background: var(--gp-gray-light);
  border-radius: var(--gp-radius);
  border: 1px solid var(--gp-gray-border);
  font-style: italic;
}

/* ─── PROFILE PAGE (taxonomy-musisi / taxonomy-label) ───────────────────────── */
.gigsplay-page {
  font-family: var(--gp-font);
  color: var(--gp-text);
}

.gigsplay-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.gigsplay-profile-header {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 3rem;
  padding: 2rem;
  background: var(--gp-white);
  border: 1px solid var(--gp-gray-border);
  border-radius: var(--gp-radius);
  box-shadow: var(--gp-shadow);
}

.gigsplay-profile-header__photo { flex-shrink: 0; width: 140px; }
.gigsplay-profile-header__photo img {
  width: 140px; height: 140px;
  object-fit: cover; border-radius: 50%;
  border: 3px solid var(--gp-gray-border);
}
.gigsplay-profile-header__photo--logo img { border-radius: var(--gp-radius); }
.gigsplay-profile-header__photo--placeholder {
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--gp-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 700; color: var(--gp-white);
}

.gigsplay-profile-header__info { flex: 1; }
.gigsplay-profile-header__name {
  margin: 0 0 0.5rem;
  font-size: 2rem; font-weight: 700;
  color: var(--gp-navy); line-height: 1.2;
}
.gigsplay-profile-header__desc {
  margin: 0 0 1rem;
  color: var(--gp-gray);
  font-size: 0.9rem;    /* sama dengan meta-list li */
  line-height: 1.7;     /* lebih longgar, tidak menumpuk */
}

.gigsplay-profile-header__meta-list {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.gigsplay-profile-header__meta-list li {
  display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem;
}
.gigsplay-meta-label { font-weight: 600; color: var(--gp-navy); }
.gigsplay-meta-value { color: var(--gp-gray); }

.gigsplay-profile-header__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Social buttons */
.gigsplay-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 1rem; border-radius: var(--gp-radius-sm);
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  cursor: pointer; border: none; line-height: 1.4;
}
.gigsplay-btn--primary    { background: var(--gp-red); color: var(--gp-white); }
.gigsplay-btn--primary:hover { background: var(--gp-red-dark); color: var(--gp-white); transform: translateY(-1px); }
.gigsplay-btn--social     { background: var(--gp-navy); color: var(--gp-white); }
.gigsplay-btn--social:hover { background: #1e3a8a; color: var(--gp-white); transform: translateY(-1px); }
.gigsplay-btn--spotify    { background: #1db954; }
.gigsplay-btn--spotify:hover { background: #17a04a; color: var(--gp-white); }
.gigsplay-btn--instagram  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.gigsplay-btn--instagram:hover { opacity: .9; color: var(--gp-white); }
.gigsplay-btn--youtube    { background: #ff0000; }
.gigsplay-btn--youtube:hover { background: #cc0000; color: var(--gp-white); }
.gigsplay-btn--tiktok     { background: #010101; }
.gigsplay-btn--facebook   { background: #1877f2; }
.gigsplay-btn--facebook:hover { background: #1062c9; color: var(--gp-white); }
.gigsplay-btn--twitter    { background: #000000; }
.gigsplay-btn--twitter:hover { background: #1d1d1d; color: var(--gp-white); }
.gigsplay-btn--bandcamp   { background: #408294; }
.gigsplay-btn--bandcamp:hover { background: #336a79; color: var(--gp-white); }
.gigsplay-btn--globe      { background: #1e6fcc; }
.gigsplay-btn--globe:hover { background: #1558a8; color: var(--gp-white); }

.gigsplay-section-title {
  font-size: 1.4rem; font-weight: 700; color: var(--gp-navy);
  margin: 0 0 1.25rem; padding-bottom: 0.5rem;
  border-bottom: 2px solid #1e6fcc; display: inline-block;
}

/* Posts grid in profile pages */
.gigsplay-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem; margin-bottom: 2rem;
}
.gigsplay-post-card {
  background: var(--gp-white); border: 1px solid var(--gp-gray-border);
  border-radius: var(--gp-radius); overflow: hidden;
  box-shadow: var(--gp-shadow); transition: box-shadow 0.2s, transform 0.2s;
}
.gigsplay-post-card:hover { box-shadow: var(--gp-shadow-hover); transform: translateY(-2px); }
.gigsplay-post-card__thumb { display: block; overflow: hidden; }
.gigsplay-post-card__thumb img { width:100%;height:180px;object-fit:cover;display:block;transition:transform 0.3s; }
.gigsplay-post-card:hover .gigsplay-post-card__thumb img { transform:scale(1.04); }
.gigsplay-post-card__body { padding: 1rem; }
.gigsplay-post-card__title { margin:0 0 0.25rem;font-size:0.95rem;font-weight:600;line-height:1.4; }
.gigsplay-post-card__title a { color:var(--gp-navy);text-decoration:none; }
.gigsplay-post-card__title a:hover { color:#1e6fcc; }
.gigsplay-post-card__date { display:block;font-size:0.78rem;color:var(--gp-gray);margin-bottom:0.4rem; }
.gigsplay-post-card__excerpt { margin:0;font-size:0.85rem;color:var(--gp-gray);line-height:1.5; }

/* Pagination profile pages */
.gigsplay-pagination {
  display:flex;flex-wrap:wrap;gap:0.35rem;justify-content:center;margin-top:2rem;
}
.gigsplay-pagination .page-numbers {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 0.5rem;
  border:1px solid var(--gp-gray-border);border-radius:var(--gp-radius-sm);
  background:var(--gp-white);color:var(--gp-navy);text-decoration:none;
  font-size:0.875rem;transition:background 0.2s,color 0.2s;
}
.gigsplay-pagination .page-numbers.current,
.gigsplay-pagination .page-numbers:hover { background:#1e6fcc;border-color:#1e6fcc;color:var(--gp-white); }
.gigsplay-no-posts { color:var(--gp-gray);font-style:italic;padding:2rem;text-align:center;
  background:var(--gp-gray-light);border-radius:var(--gp-radius);border:1px solid var(--gp-gray-border); }

/* ─── PROFILE BOX IN ARTICLES ───────────────────────────────────────────────── */
.gigsplay-profile-boxes { margin-top: 2.5rem; }

.gigsplay-profile-box {
  background: var(--gp-gray-light); border: 1px solid var(--gp-gray-border);
  border-left: 4px solid #1e6fcc; border-radius: var(--gp-radius);
  padding: 1.25rem; margin-bottom: 1rem;
}
.gigsplay-profile-box__label {
  font-size:0.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:#1e6fcc;margin:0 0 0.75rem;
}
.gigsplay-profile-box__inner { display:flex;gap:1.25rem;align-items:center; }
.gigsplay-profile-box__photo img {
  width:72px;height:72px;object-fit:cover;border-radius:50%;
  border:2px solid var(--gp-gray-border);flex-shrink:0;
}
.gigsplay-profile-box__content { flex:1; }
.gigsplay-profile-box__name { margin:0 0 0.25rem;font-size:1rem;font-weight:700; }
.gigsplay-profile-box__name a { color:var(--gp-navy);text-decoration:none; }
.gigsplay-profile-box__name a:hover { color:#1e6fcc; }
.gigsplay-profile-box__desc { margin:0 0 0.6rem;font-size:0.875rem;color:var(--gp-gray);line-height:1.5; }

/* ─── RESPONSIVE ────────────────────────────────────────────────────────────── */

/* Tablet: 3 kolom */
@media (max-width: 1199px) and (min-width: 768px) {
  .gmd-grid { grid-template-columns: repeat(3, 1fr); }
  .gmd-featured-hero__name { font-size: 1.35rem; }
  .gmd-featured-hero__image { width: 35%; }

  /* Single page — tablet */
  .gigsplay-profile-header__name { font-size: 1.6rem; }
  .gigsplay-section-title         { font-size: 1.2rem; }
}

/* Mobile: 1 kolom */
@media (max-width: 767px) {
  .gmd-container { padding: 1.25rem 1rem 2rem; }

  .gmd-page-header__title { font-size: 1.5rem; }

  .gmd-search-form__inner { flex-direction: column; align-items: stretch; }
  .gmd-search-input { min-width: unset; width: 100%; }
  .gmd-filter-select { width: 100%; }
  .gmd-btn--cari { width: 100%; }

  /* A-Z scroll horizontal */
  .gmd-az-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gmd-az-track { flex-wrap: nowrap; padding-bottom: 0.5rem; }
  .gmd-az-btn { flex-shrink: 0; }

  /* Featured: vertikal di mobile */
  .gmd-featured-hero {
    flex-direction: column;
    min-height: unset;
  }
  .gmd-featured-hero__content {
    padding: 1.25rem;
    width: 100%;
    order: 2;
  }
  .gmd-featured-hero__image {
    width: 100%;
    max-width: unset;
    min-height: 180px;
    order: 1;
  }
  .gmd-featured-hero__name { font-size: 1.3rem; }

  /* Grid 1 kolom */
  .gmd-grid { grid-template-columns: 1fr; gap: 0.75rem; }

  /* ── Card horizontal di mobile ─────────────────────────────── */
  .gmd-card__link {
    flex-direction: row;
    align-items: stretch;
  }

  /*
   * Thumb musisi: stretch mengisi penuh tinggi card.
   * height: auto + align-self: stretch → ikut tinggi card body.
   * position: relative sebagai anchor untuk img absolute.
   */
  .gmd-card__thumb {
    width: 120px;
    min-width: 120px;
    height: auto;          /* ikut tinggi card, BUKAN fixed */
    flex-shrink: 0;
    align-self: stretch;   /* isi penuh tinggi card */
    aspect-ratio: unset;
    border-radius: var(--gp-radius) 0 0 var(--gp-radius);
    position: relative;
    overflow: hidden;
    background: var(--gp-navy);
  }

  /* Foto musisi: absolute cover mengisi penuh thumb */
  .gmd-card__thumb img {
    position: absolute;
    inset: 0;              /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    padding: 0;
  }

  /*
   * Logo label: OVERRIDE thumb agar jadi flex-center.
   * img pakai cover agar tidak ada whitespace kiri/kanan/atas/bawah.
   * cover pada logo square → mengisi penuh tanpa terpotong signifikan.
   */
  .gmd-card__thumb--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gp-gray-light);
  }

  .gmd-card__thumb--logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    padding: 0;
  }

  /* Monogram: isi penuh thumb */
  .gmd-card__mono {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    font-size: 1.1rem;
  }

  .gmd-card__body {
    padding: 0.875rem 0.875rem 0.875rem 1rem;
    flex: 1;
    min-width: 0;
  }

  .gmd-card__name { font-size: 0.875rem; }

  /* Profile header mobile */
  .gigsplay-profile-header {
    flex-direction: column; align-items: center; text-align: center;
  }
  .gigsplay-profile-header__name { font-size: 1.35rem; }
  .gigsplay-profile-header__desc { font-size: 0.85rem; line-height: 1.6; }
  .gigsplay-section-title         { font-size: 1.1rem; }
  .gigsplay-profile-header__meta-list { justify-content: center; }
  .gigsplay-profile-header__links { justify-content: center; }
  .gigsplay-posts-grid { grid-template-columns: 1fr; }
  .gigsplay-profile-box__inner { flex-direction: column; text-align: center; }
}