/* Tata letak isi halaman (judul, kolom artikel + sidebar, foto utama, tombol LOGIN/DAFTAR, sidebar testimoni).
   Perbaikan di atas aturan bawaan update-article.min.css; dimuat SETELAH vendor CSS.
   Warna dari /css-assets/base/theme.css */

/* --- Judul --- */
.read__title {
  overflow-wrap: anywhere;
}

/* --- Kolom artikel + sidebar sejajar tinggi agar sidebar bisa menempel saat digulir --- */
.js-giant-wp-sticky-parent {
  display: flex;
  align-items: stretch;
}

.js-giant-wp-sticky-parent > .col-bs10-7,
.js-giant-wp-sticky-parent > .col-bs10-3 {
  float: none;
  min-width: 0;
}

.sidebar-sticky {
  position: sticky;
  top: 60px;
}

/* --- Foto utama: rasio 3:2 mengikuti lebar kolom (bawaan Kompas memaksa 493px tetap) --- */
.cover-photo {
  padding-top: 0;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
}

.cover-photo > .photo__wrap {
  position: absolute;
  inset: 0;
  padding-top: 0;
  height: auto;
}

.cover-photo img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transform: none;
}

/* --- Tombol LOGIN/DAFTAR --- */
.photoCarousel {
  margin-top: 15px;
  padding-bottom: 0;
}

.photoCarousel-block {
  height: auto;
}

.button-login-daftar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  font-weight: 700;
}

.button-login-daftar a {
  text-align: center;
  border-radius: 4px;
}

.login,
.register {
  color: var(--c-btn-text);
  padding: 15px 10px;
  font-size: 15px;
  background: var(--c-btn-gradient);
  border: 2px solid var(--c-btn-border);
  transition: background .3s ease, box-shadow .3s ease;
}

.login:hover,
.register:hover,
.login:focus-visible,
.register:focus-visible {
  color: var(--c-btn-text);
  background: var(--c-btn-gradient-hover);
  box-shadow: 0 0 18px rgba(var(--c-accent-rgb), 0.45);
}

/* --- Sidebar testimoni: tinggi mengikuti isi (bawaan memotong 3 baris & memaksa 100px) --- */
.most__list {
  height: auto;
  min-height: 100px;
  display: flex;
  align-items: center;
}

.most__title {
  height: auto;
  -webkit-line-clamp: unset;
  display: block;
  overflow-wrap: anywhere;
}

/* --- Responsif: bawaan Kompas hanya 1100px --- */
@media (max-width: 1100px) {
  .wrap > .container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* baris bermargin negatif -15px tidak boleh melebihi lebar viewport */
  .wrap > .container > .row,
  .wrap > .container .read__header {
    margin-left: -15px;
    margin-right: -15px;
  }

  .wrap > .container .read__header {
    margin-left: 0;
    margin-right: 0;
  }

  .read__header .col-bs10-10 {
    padding-left: 0;
    padding-right: 0;
  }

  .read__title {
    font-size: 28px;
  }
}

@media (max-width: 900px) {
  .js-giant-wp-sticky-parent {
    flex-direction: column;
  }

  .js-giant-wp-sticky-parent > .col-bs10-7,
  .js-giant-wp-sticky-parent > .col-bs10-3 {
    width: 100%;
  }

  .sidebar-sticky {
    position: static;
  }
}

@media (max-width: 600px) {
  .read__title {
    font-size: 22px;
  }

  .read__header {
    margin-bottom: 10px;
  }
}