/* =====================================================
   ALL STUDIOS v1 — page-specific styles only.
   Tokens (:root vars), .wrap, .btn, .eyebrow, .body-text,
   [data-reveal] system sudah ada di global.css.
   .section-title didefinisikan di sini karena belum ada
   di file manapun (itu sebabnya heading section kedua
   tidak ke-style sebelumnya).
===================================================== */

/* Reusable section title, disamakan dengan gaya heading di About (aboutv1.css) */
.section-title {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-dark);
  margin-top: 14px;
  margin-bottom: 20px;
}
.section-title em { font-style: normal; color: var(--burgundy); }

/* HERO — proporsi disamakan dengan .section-first di About (full-bleed, 80vh, margin 16px, rounded).
   Posisi konten tetap center, cuma ukuran/bentuk card yang mengikuti About. */
.hero-studios { padding: 0; }
.hero-studios__card {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 16px 16px 0 16px;
  background: linear-gradient(155deg, #2A1010 0%, var(--burgundy) 55%, #4A1414 100%);
}
.hero-studios__card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,4,4,0.7) 0%, rgba(10,4,4,0.3) 55%, rgba(10,4,4,0.1) 100%);
}
.hero-studios__content {
  position: relative; z-index: 2; max-width: 680px; margin-inline: auto;
  padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero-studios__badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 20px 7px 16px;
  border-radius: var(--radius-pill); background: rgba(217,179,130,0.15);
  border: 1px solid rgba(217,179,130,0.25); margin-bottom: 24px;
}
.hero-studios__badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-lt); animation: hs-pulse 2s ease-in-out infinite; }
.hero-studios__badge span:last-child {
  font-family: var(--font-family);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-lt);
}

/* Title dipecah jadi 2 baris: bold-line (putih, tebal) + accent (gold, tipis) — sama seperti pola "MORE THAN / MOVEMENT" di About */
.hero-studios__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: clamp(2.8rem, 8vw, 4.5rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
.hero-studios__title .bold-line { color: #fff; font-weight: 900; }
.hero-studios__title .accent { color: var(--gold-lt); font-weight: 300; }
.hero-studios__desc {
  font-family: var(--font-family);
  margin-top: 22px; font-size: 0.85rem; font-weight: 400;
  color: rgba(255,255,255,0.82); max-width: 520px; line-height: 1.8;
}
@keyframes hs-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(122,30,30,0.12); } 50% { box-shadow: 0 0 0 12px rgba(122,30,30,0); } }
@media (max-width: 768px) { .hero-studios__card { min-height: 70vh; margin: 12px 12px 0 12px; } }

/* STUDIO LIST */
.studios-list { padding-block: var(--section-gap); }
.studios-list__head { max-width: 640px; margin-bottom: 48px; }

.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 32px; }
.studio-card { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.3s var(--ease); display: flex; flex-direction: column; }
.studio-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(26,26,26,0.06); border-color: var(--burgundy); }
.studio-card.is-soon { opacity: 0.7; }
.studio-card__image {
  height: 200px; background: linear-gradient(155deg, #2A1010 0%, var(--burgundy) 55%, #4A1414 100%);
  position: relative; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family);
  color: rgba(255,255,255,0.2); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.studio-card__image .status {
  position: absolute; top: 16px; right: 16px; background: var(--gold); color: #fff;
  font-family: var(--font-family);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--radius-pill);
}
.studio-card__body { padding: 28px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.studio-card__body h3 {
  font-family: var(--font-family);
  font-size: 1.2rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 4px;
}
.studio-card__body .location {
  font-family: var(--font-family);
  font-size: 0.7rem; font-weight: 600; color: var(--text-light); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px;
}
.studio-card__body .desc {
  font-family: var(--font-family);
  font-size: 0.82rem; font-weight: 400; color: var(--text-mid); line-height: 1.9; margin-bottom: 20px; flex: 1;
}
.studio-card__body .features { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; }
.studio-card__body .features span {
  font-family: var(--font-family);
  font-size: 0.7rem; font-weight: 400; color: var(--text-mid); display: flex; align-items: center; gap: 6px;
}
.studio-card__body .features span::before { content: '✦'; color: var(--burgundy); font-size: 0.55rem; }
.studio-card__body .btn { align-self: flex-start; }
.studio-card__body .soon-label {
  font-family: var(--font-family);
  font-size: 0.7rem; color: var(--text-light); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
/* Tombol Coming Soon — sama bentuknya dengan .btn--fill (rounded pill),
   tapi warna abu-abu/muted biar keliatan belum aktif. Cuma muncul
   kalau studio_card_status_link_type diisi (bukan "none"). */
.btn--soon {
  background: var(--bg-subtle);
  color: var(--text-mid);
  border-color: var(--border);
}
.btn--soon:hover { background: var(--border); color: var(--text-dark); }

@media (max-width: 640px) { .studio-grid { grid-template-columns: 1fr; } }

/* CTA */
.cta-studios { padding-block: var(--section-gap); background: var(--bg-subtle); text-align: center; }
.cta-studios__inner { max-width: 680px; margin-inline: auto; }
.cta-studios h2 {
  font-family: var(--font-family);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 20px;
}
.cta-studios h2 em { font-style: normal; color: var(--burgundy); }
.cta-studios p {
  font-family: var(--font-family);
  font-size: 0.82rem; font-weight: 400; color: var(--text-mid); line-height: 1.9; margin-bottom: 32px;
}
.cta-studios .btn-group { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }