/* v174 — product-led restraint pass.
   Keeps the right Editor's Note live and solid, but calms the middle stack:
   lighter product photography, no label-outline pills, product-weighted image crop,
   softer pink dividers, and CTA consistency. */

.home-beauty-hero-copy strong{
  padding:14px 24px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#ff3fb2,#ff6c74) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(255,63,178,.28) !important;
  line-height:1 !important;
}

/* Give the three-column section a little more balanced width, but keep the structure. */
.hero-grid{
  grid-template-columns:minmax(360px,1.08fr) minmax(342px,.98fr) minmax(342px,.88fr) !important;
  gap:20px !important;
}

/* Left feature: more actual product, less nightclub wash. */
.hero-grid > .lead{
  background:
    linear-gradient(180deg, rgba(40,0,30,.02) 0%, rgba(40,0,30,.12) 42%, rgba(40,0,30,.64) 100%),
    linear-gradient(90deg, rgba(45,0,34,.36) 0%, rgba(45,0,34,.16) 44%, rgba(45,0,34,.04) 100%),
    url('../images/article-unique/shimmer-is-not-the-enemy-after-50.jpg') center/cover no-repeat !important;
}
.hero-grid > .lead:before{
  background:
    radial-gradient(circle at 16% 10%, rgba(255,232,130,.20), transparent 24%),
    radial-gradient(circle at 78% 72%, rgba(255,63,178,.10), transparent 36%) !important;
}
.hero-grid > .lead .kicker{
  border:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-grid > .lead .hero-cta{
  border-radius:999px !important;
  padding:15px 28px !important;
}

/* Middle stack: product ranged right, text kept left, labels no longer outlined pills. */
.hero-grid > .column{
  background:#4a0038 !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

.hero-grid > .column .story.panel{
  padding:27px 26px 22px !important;
  background:
    linear-gradient(90deg,
      rgba(36,0,26,.86) 0%,
      rgba(42,0,31,.72) 31%,
      rgba(42,0,31,.31) 58%,
      rgba(42,0,31,.04) 100%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.13) 100%),
    var(--panel-img) center/cover no-repeat !important;
}

/* Choose lighter product-forward crops. */
.hero-grid > .column .story.panel:nth-child(1){
  --panel-img:url('../images/article-unique/charlotte-tilbury-selling-mood.jpg') !important;
  background-position:68% 50% !important;
}
.hero-grid > .column .story.panel:nth-child(2){
  --panel-img:url('../images/article-unique/dubai-gloss-is-not-subtle.jpg') !important;
  background-position:72% 52% !important;
}
.hero-grid > .column .story.panel:nth-child(3){
  --panel-img:url('../images/article-unique/barrier-care-no-longer-boring.jpg') !important;
  background-position:75% 50% !important;
}

.hero-grid > .column .story.panel + .story.panel{
  border-top:2px solid rgba(255,63,178,.78) !important;
  box-shadow:inset 0 8px 14px rgba(255,63,178,.10), 0 -1px 14px rgba(255,63,178,.30) !important;
}

/* Remove the elongated label pills from the middle cards. */
.hero-grid > .column .story.panel .kicker{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 0 9px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(255,248,239,.88) !important;
  box-shadow:none !important;
  line-height:1.1 !important;
}

/* Preserve the editorial display type, but leave breathing room for the copy. */
.hero-grid > .column .story.panel h2{
  max-width:12.8ch !important;
  font-size:clamp(25px,1.92vw,33px) !important;
  line-height:.96 !important;
  margin:0 0 10px !important;
}
.hero-grid > .column .story.panel p{
  max-width:26ch !important;
  font-size:13px !important;
  line-height:1.28 !important;
}

/* keep the right column solid/glowy, but avoid over-expansion at zoom */
.hero-grid > .bg164-editor-note{
  background:
    radial-gradient(circle at 78% 22%,rgba(255,63,178,.25),transparent 35%),
    linear-gradient(150deg,#3b002b 0%,#850060 58%,#3b002b 100%) !important;
}

/* Tablet/down: stack naturally and don't crop cards. */
@media (max-width: 1420px){
  .hero-grid{
    grid-template-columns:minmax(330px,1.03fr) minmax(315px,.98fr) minmax(315px,.88fr) !important;
  }
  .hero-grid > .column .story.panel h2{
    font-size:clamp(23px,1.9vw,30px) !important;
    max-width:13.2ch !important;
  }
  .hero-grid > .column .story.panel p{
    font-size:12.2px !important;
    max-width:25ch !important;
  }
}
@media (max-width: 1180px){
  .hero-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .hero-grid > .lead{
    grid-column:1 / -1 !important;
  }
}
@media (max-width: 900px){
  .home-beauty-hero-copy strong{
    padding:12px 20px !important;
  }
  .hero-grid > .column{
    background:transparent !important;
  }
  .hero-grid > .column .story.panel{
    border-radius:18px !important;
    min-height:240px !important;
  }
  .hero-grid > .column .story.panel + .story.panel{
    border-top:0 !important;
    box-shadow:0 20px 46px rgba(74,0,56,.14) !important;
  }
}