/* v173 — product-led homepage feature grid.
   Purpose: reduce pink overload, reveal more beauty product imagery, keep Editor's Note live HTML and make the trio fit cleanly. */

.hero-grid{
  grid-template-columns:minmax(340px,1.12fr) minmax(320px,.96fr) minmax(330px,.86fr) !important;
  gap:22px !important;
  align-items:start !important;
}
.hero-grid > .lead,
.hero-grid > .column,
.hero-grid > .bg164-editor-note{
  height:660px !important;
  min-height:660px !important;
  box-sizing:border-box !important;
}

/* Left feature: keep the big editorial energy but make the image warmer, less solid pink. */
.hero-grid > .lead{
  border-radius:18px !important;
  padding:44px 38px 38px !important;
  background:
    linear-gradient(180deg, rgba(47,0,34,.02) 0%, rgba(47,0,34,.18) 42%, rgba(47,0,34,.72) 100%),
    linear-gradient(90deg, rgba(51,0,38,.38) 0%, rgba(83,0,62,.12) 54%, rgba(255,63,178,.10) 100%),
    url('../images/house-style/house-style-reflective-tray.jpg') center/cover no-repeat !important;
  box-shadow:0 28px 62px rgba(143,0,105,.14) !important;
  border:1px solid rgba(255,255,255,.46) !important;
}
.hero-grid > .lead:before{
  background:radial-gradient(circle at 18% 10%, rgba(255,232,130,.32), transparent 24%),
             radial-gradient(circle at 72% 80%, rgba(255,63,178,.14), transparent 34%) !important;
}
.hero-grid > .lead h1{
  max-width:520px !important;
  text-shadow:0 5px 20px rgba(31,0,24,.42) !important;
}
.hero-grid > .lead p{
  max-width:440px !important;
}
.hero-grid > .lead .hero-cta span{
  display:none !important;
}
.hero-grid > .lead .hero-cta{
  padding:15px 26px !important;
}

/* Middle stack: product-photo-led, dark editorial scrim, pink line dividers only. */
.hero-grid > .column{
  display:grid !important;
  grid-template-rows:repeat(3, minmax(0,1fr)) !important;
  gap:0 !important;
  overflow:hidden !important;
  border-radius:18px !important;
  box-shadow:0 28px 62px rgba(74,0,56,.16) !important;
  background:#320025 !important;
}
.hero-grid > .column .story.panel{
  min-height:0 !important;
  height:auto !important;
  border-radius:0 !important;
  padding:25px 26px 22px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  border:0 !important;
  background:
    linear-gradient(90deg, rgba(37,0,27,.88) 0%, rgba(50,0,37,.62) 40%, rgba(24,0,18,.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.20) 100%),
    var(--panel-img) center/cover no-repeat !important;
}
.hero-grid > .column .story.panel:nth-child(1){
  --panel-img:url('../images/article-unique/charlotte-tilbury-selling-mood.jpg') !important;
  background-position:center 48% !important;
}
.hero-grid > .column .story.panel:nth-child(2){
  --panel-img:url('../images/article-unique/dubai-gloss-is-not-subtle.jpg') !important;
  background-position:center 52% !important;
}
.hero-grid > .column .story.panel:nth-child(3){
  --panel-img:url('../images/article-unique/glass-skin-grew-up.jpg') !important;
  background-position:center 50% !important;
}
.hero-grid > .column .story.panel + .story.panel{
  border-top:2px solid rgba(255,63,178,.92) !important;
  box-shadow:inset 0 11px 18px rgba(255,63,178,.16), 0 -1px 18px rgba(255,63,178,.42) !important;
}
.hero-grid > .column .story.panel:after{
  background:
    radial-gradient(circle at 80% 22%, rgba(255,232,130,.12), transparent 30%),
    linear-gradient(180deg, rgba(47,0,34,.00), rgba(47,0,34,.20)) !important;
}
.hero-grid > .column .story.panel .kicker{
  margin:0 0 10px !important;
  padding:6px 12px !important;
  border-color:rgba(255,248,239,.50) !important;
  background:rgba(25,0,19,.22) !important;
}
.hero-grid > .column .story.panel h2{
  max-width:12.5ch !important;
  margin:0 0 9px !important;
  font-size:clamp(28px,2.12vw,36px) !important;
  line-height:.92 !important;
  letter-spacing:-.045em !important;
  text-shadow:0 3px 16px rgba(20,0,15,.55) !important;
}
.hero-grid > .column .story.panel p{
  max-width:29ch !important;
  margin:0 !important;
  font-size:13px !important;
  line-height:1.28 !important;
  color:rgba(255,248,239,.92) !important;
  text-shadow:0 2px 9px rgba(20,0,15,.52) !important;
}

/* Editor's Note: keep live text, same content, but let it sit with the product-led cards. */
.hero-grid > .bg164-editor-note{
  border-radius:18px !important;
  overflow:hidden !important;
  padding:36px 34px 34px !important;
  box-shadow:0 28px 62px rgba(74,0,56,.20), inset 0 0 80px rgba(255,63,178,.08) !important;
  background:
    radial-gradient(circle at 78% 22%,rgba(255,63,178,.24),transparent 35%),
    linear-gradient(150deg,#3b002b 0%,#850060 58%,#3b002b 100%) !important;
}
.bg164-editor-list{
  gap:13px !important;
}
.bg164-editor-list li{
  margin:0 !important;
}
.bg164-editor-list a{
  line-height:1.22 !important;
}

.vivienne-says{
  margin-top:30px !important;
}

@media (max-width: 1420px){
  .hero-grid{
    grid-template-columns:minmax(320px,1.05fr) minmax(300px,.95fr) minmax(305px,.88fr) !important;
    gap:18px !important;
  }
  .hero-grid > .lead,
  .hero-grid > .column,
  .hero-grid > .bg164-editor-note{
    height:670px !important;
    min-height:670px !important;
  }
  .hero-grid > .column .story.panel{
    padding:22px 23px 19px !important;
  }
  .hero-grid > .column .story.panel h2{
    font-size:clamp(25px,2vw,32px) !important;
    max-width:12ch !important;
  }
  .hero-grid > .column .story.panel p{
    font-size:12.4px !important;
    line-height:1.25 !important;
    max-width:27ch !important;
  }
  .hero-grid > .bg164-editor-note{
    padding:32px 30px 32px !important;
  }
}

@media (max-width: 1180px){
  .hero-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .hero-grid > .lead{
    grid-column:1 / -1 !important;
    height:560px !important;
    min-height:560px !important;
  }
  .hero-grid > .column,
  .hero-grid > .bg164-editor-note{
    height:auto !important;
    min-height:660px !important;
  }
}

@media (max-width: 900px){
  .hero-grid{
    grid-template-columns:1fr !important;
  }
  .hero-grid > .lead,
  .hero-grid > .column,
  .hero-grid > .bg164-editor-note{
    height:auto !important;
    min-height:0 !important;
  }
  .hero-grid > .column{
    gap:14px !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .hero-grid > .column .story.panel{
    min-height:230px !important;
    border-radius:18px !important;
  }
  .hero-grid > .column .story.panel + .story.panel{
    border-top:0 !important;
  }
}