/* RAVID Game Title Readability Hotfix v30.2
   Scope: hanya halaman Game Etika (#section-salam).
   Tujuan: memperbaiki judul besar yang pecah/tidak proporsional setelah v30.1.
   Tidak mengubah logic game, route, backend, atau data.
*/

body.ravid-premium-theme #section-salam .premium-etika-shell {
  max-width: min(1180px, calc(100vw - 72px)) !important;
  padding: clamp(28px, 3.1vw, 44px) !important;
}

/* Hero dibuat 2 kolom utama agar judul punya ruang bernapas.
   Progress + coach tetap di kanan secara proporsional. */
body.ravid-premium-theme #section-salam .premium-etika-hero {
  display: grid !important;
  grid-template-columns: minmax(520px, 1.08fr) minmax(500px, .92fr) !important;
  gap: clamp(24px, 3vw, 46px) !important;
  align-items: end !important;
  margin-bottom: clamp(22px, 2.4vw, 34px) !important;
}

/* Kalau card progress dan coach adalah sibling setelah title,
   biarkan keduanya tersusun rapi di area kanan. */
body.ravid-premium-theme #section-salam .premium-etika-hero > div:first-child {
  min-width: 0 !important;
  max-width: 620px !important;
}

body.ravid-premium-theme #section-salam .premium-etika-hero > div:nth-child(2),
body.ravid-premium-theme #section-salam .premium-etika-hero > div:nth-child(3) {
  align-self: end !important;
}

/* Judul final: besar, premium, tapi tidak pecah per huruf/kata. */
body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
  width: 100% !important;
  max-width: 610px !important;
  min-width: 0 !important;
  font-size: clamp(3.25rem, 4.05vw, 4.85rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.065em !important;
  text-wrap: balance !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Subtitle dibuat lebih nyaman dibaca dan tidak terlalu menekan judul. */
body.ravid-premium-theme #section-salam .premium-etika-hero .section-subtitle {
  max-width: 590px !important;
  margin-top: 18px !important;
  font-size: clamp(1rem, 1.02vw, 1.13rem) !important;
  line-height: 1.72 !important;
  letter-spacing: -0.01em !important;
  color: #475569 !important;
}

/* Progress dan coach diposisikan lebih bersih. */
body.ravid-premium-theme #section-salam .mission-card {
  max-width: 340px !important;
  width: 100% !important;
}

body.ravid-premium-theme #section-salam .game-coach-card {
  max-width: 420px !important;
  width: 100% !important;
  min-width: 360px !important;
}

/* Pada viewport menengah, jangan paksa 3 kolom sempit. */
@media (min-width: 921px) and (max-width: 1280px) {
  body.ravid-premium-theme #section-salam .premium-etika-hero {
    grid-template-columns: minmax(470px, 1fr) minmax(430px, .88fr) !important;
    gap: 28px !important;
  }

  body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
    max-width: 560px !important;
    font-size: clamp(3rem, 4vw, 4.35rem) !important;
  }

  body.ravid-premium-theme #section-salam .game-coach-card {
    min-width: 0 !important;
  }
}

/* Mobile/tablet: satu kolom agar tetap nyaman. */
@media (max-width: 920px) {
  body.ravid-premium-theme #section-salam .premium-etika-shell {
    max-width: calc(100vw - 24px) !important;
    padding: 22px !important;
  }

  body.ravid-premium-theme #section-salam .premium-etika-hero {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.ravid-premium-theme #section-salam .premium-etika-hero .section-title {
    max-width: 100% !important;
    font-size: clamp(2.45rem, 10vw, 3.6rem) !important;
    line-height: 1.04 !important;
  }

  body.ravid-premium-theme #section-salam .mission-card,
  body.ravid-premium-theme #section-salam .game-coach-card {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}