/* Logo brand di sisi kanan hero beranda. Menggunakan data brand yang dikelola dari admin. */
.page-home .hero-layout-with-brand-logos{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.95fr);
  gap:2rem;
  align-items:flex-start;
}
.page-home .hero-layout-with-brand-logos .hero-content{
  max-width:100%;
}
.page-home .hero-brand-wall{
  display:flex;
  justify-content:flex-end;
  width:100%;
}
.page-home .hero-brand-wall-inner{
  width:min(100%,380px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.9rem;
  align-items:stretch;
}
.page-home .hero-brand-logo-item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:74px;
  padding:12px 16px;
  border:1px solid #d9e6f0;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 14px 30px rgba(6,44,96,.08);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.page-home .hero-brand-logo-item:hover,
.page-home .hero-brand-logo-item:focus-visible{
  transform:translateY(-1px);
  border-color:#a8c4de;
  box-shadow:0 18px 32px rgba(6,44,96,.12);
  outline:none;
}
.page-home .hero-brand-logo-item img{
  display:block;
  width:100%;
  max-width:110px;
  max-height:34px;
  object-fit:contain;
}
@media (max-width: 1080px){
  .page-home .hero-layout-with-brand-logos{
    grid-template-columns:minmax(0,1fr) minmax(250px,320px);
    gap:1.5rem;
  }
  .page-home .hero-brand-wall-inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 900px){
  .page-home .hero-layout-with-brand-logos{
    grid-template-columns:1fr;
    gap:1.25rem;
  }
  .page-home .hero-brand-wall{
    justify-content:flex-start;
  }
  .page-home .hero-brand-wall-inner{
    width:100%;
    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  }
}
@media (max-width: 520px){
  .page-home .hero-brand-wall-inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
  }
  .page-home .hero-brand-logo-item{
    min-height:66px;
    padding:10px 12px;
    border-radius:16px;
  }
  .page-home .hero-brand-logo-item img{
    max-height:30px;
  }
}

/* Align the brand logo group with the middle of the hero headline, not its bottom. */
@media (min-width: 901px) {
  body.page-home .home-hero .container.hero-layout.hero-layout-no-visual.hero-layout-with-brand-logos {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 420px) !important;
    column-gap: clamp(28px, 3vw, 52px) !important;
    align-items: center !important;
  }
  body.page-home .home-hero .hero-layout-with-brand-logos .hero-content {
    min-width: 0;
    width: 100%;
    align-self: center;
    justify-content: center;
  }
  body.page-home .home-hero .hero-brand-wall {
    align-self: center;
    justify-self: end;
    align-items: center;
    margin: 0;
  }
  body.page-home .home-hero .hero-brand-wall-inner {
    width: 100%;
    max-width: 420px;
    align-items: center;
  }
}
@media (max-width: 900px) {
  body.page-home .home-hero .container.hero-layout.hero-layout-no-visual.hero-layout-with-brand-logos {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    align-items: center !important;
    gap: 16px !important;
  }
  body.page-home .home-hero .hero-brand-wall {
    align-self: center;
    justify-content: flex-start;
    margin: 0;
  }
  body.page-home .home-hero .hero-brand-wall-inner {
    width: 100%;
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
 body.page-home .hero-brand-logo-item { transition: none; }
}

/* 2026-10-12: six logos should stay in two even rows on medium desktop widths. */
@media (min-width: 901px) and (max-width: 1080px) {
  body.page-home .home-hero .hero-brand-wall-inner {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
  }
  body.page-home .home-hero .hero-brand-logo-item {
    min-width:0;
    min-height:66px;
    padding:10px;
  }
  body.page-home .home-hero .hero-brand-logo-item img {
    max-width:100%;
    max-height:36px;
  }
}
/* Prevent six small logos becoming unreadable on very narrow phones. */
@media (max-width: 359px) {
  body.page-home .home-hero .hero-brand-wall-inner {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  body.page-home .home-hero .hero-brand-logo-item {
    min-width:0;
    min-height:62px;
  }
}