/* Agung Grocery — customer-provided Indonesian product-photo hero.
   One optimized mosaic per viewport; no stock vegetable photograph. */
.hero-panel{isolation:isolate}
.hero-content h1{
  font-size:clamp(38px,4.05vw,62px);
  line-height:1.065;letter-spacing:-2.45px;
  max-width:560px;
}
.hero-content h1 em{
  display:inline-block;white-space:nowrap;
  font-style:italic;letter-spacing:-1.7px;
}
.hero-content .hero-copy{max-width:420px}
.hero-media{background:#113627}
.hero-collage-picture{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  overflow:hidden;isolation:isolate;
}
.hero-collage-picture img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  animation:hero-reveal .8s cubic-bezier(.22,1,.36,1) both;
  transform-origin:center center;
}
.hero-media::after{
  background:
    linear-gradient(90deg,rgba(10,43,29,.23) 0%,transparent 25%),
    linear-gradient(0deg,rgba(12,31,23,.38),transparent 26%);
}
/* Promo cards use independent grid tracks: text cannot collide with product photos. */
.hero-side .side-promo{
  display:grid;
  grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  grid-template-rows:auto minmax(0,1fr);
  align-items:stretch;
  padding:23px 22px 0;
  min-width:0;
}
.hero-side .side-promo>.promo-copy{
  position:relative;
  grid-column:1/-1;
  grid-row:1;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:none;
  min-width:0;
}
.hero-side .side-promo h2{
  font-size:clamp(19px,1.55vw,23px);
  line-height:1.16;
  margin:8px 0 10px;
  max-width:100%;
  text-wrap:balance;
}
.hero-side .side-promo>.promo-link{
  grid-column:1;
  grid-row:2;
  z-index:2;
  position:relative;
  align-self:end;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:0 0 10px;
  gap:7px;
  font-size:11px;
  white-space:nowrap;
}
.hero-side .side-promo>img{
  grid-column:2;
  grid-row:2;
  position:relative;
  right:auto;
  bottom:auto;
  width:calc(100% + 22px);
  height:100%;
  min-width:0;
  min-height:0;
  max-height:135px;
  justify-self:end;
  align-self:end;
  display:block;
  object-fit:cover;
  object-position:center center;
  margin:0 -22px 0 0;
  border:0;
  border-radius:16px 0 0 0;
  box-shadow:0 -5px 16px #162b2014;
  transform:none;
  transition:filter .24s ease;
}
.hero-side .side-promo:hover>img{transform:none;filter:brightness(1.035)}
@media(min-width:961px){
  .hero-panel .hero-content h1{font-size:clamp(42px,4.05vw,62px)}
  .hero-panel .hero-content{padding-top:51px}
}
@media(min-width:700px) and (max-width:960px){
  .hero-panel .hero-content h1{
    font-size:clamp(34px,5.1vw,42px);
    letter-spacing:-1.35px;line-height:1.08;
  }
  .hero-panel .hero-content h1 em{letter-spacing:-1.3px}
  .hero-panel .hero-content{padding-top:34px}
}
@media(max-width:760px){
  .hero-collage-picture img{object-fit:cover;object-position:center}
  .hero-media{min-height:0;aspect-ratio:1200/760;height:auto}
  .hero-media::after{background:linear-gradient(0deg,rgba(12,33,23,.25),transparent 24%)}
  .hero-panel .hero-content{padding-top:27px}
  .hero-panel .hero-content .hero-foot{display:none}
  .hero-panel .hero-content .hero-quick-links>span{display:none}
  .hero-panel .hero-content .hero-quick-links{margin-top:13px}
  .hero-panel .hero-content .hero-copy{margin:12px 0 17px;line-height:1.55}
  .hero-panel .hero-content h1{
    font-size:clamp(35px,7.8vw,48px);
    line-height:1.08;letter-spacing:-1.6px;
  }
  .hero-panel .hero-content h1 em{letter-spacing:-1.25px}
  .hero-side .side-promo{
    padding:20px 17px 0;
  }
  .hero-side .side-promo>img{
    width:calc(100% + 17px);
    height:100%;
    max-height:115px;
    margin-right:-17px;
    right:auto;
    bottom:auto;
    transform:none;
    border:0;
    border-radius:15px 0 0 0;
  }
}
@media(max-width:600px){
  /* Small screens: one readable promo at a time, not two narrow cards. */
  .hero-side{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:12px}
  .hero-side .side-promo{min-height:204px;padding:20px 21px 0}
  .hero-side .side-promo h2{font-size:22px;line-height:1.16;max-width:100%}
  .hero-side .side-promo>.promo-link{font-size:12px;margin-bottom:12px}
  .hero-side .side-promo>img{width:calc(100% + 21px);max-height:113px;margin-right:-21px}
}
@media(max-width:480px){
  .hero-panel .hero-content h1{font-size:clamp(35px,9vw,43px)}
  .hero-panel .hero-content{padding:26px 22px 17px}
  .hero-media{aspect-ratio:1200/760}
  .hero-collage-picture img{object-fit:cover}
}
@media(max-width:360px){
  .hero-panel .hero-content h1{font-size:34px;letter-spacing:-1.2px}
  .hero-panel .hero-content h1 em{letter-spacing:-1px}
  .hero-collage-picture img{object-fit:contain}
}
@media(prefers-reduced-motion:reduce){
  .hero-collage-picture img{animation:none!important;transition:none!important;transform:none!important}
  .hero-side .side-promo>img,
  .hero-side .side-promo:hover>img{transition:none!important;transform:none!important;filter:none!important}
}