/* v171 — final homepage feature-grid repair.
   Purpose: fix the panel/layout only. No type-size changes to Editor's Note headline, CTA or bullet text. */

/* Desktop: keep the three editorial cards in one clean row with matching panel heights. */
.hero-grid{
  display:grid !important;
  grid-template-columns:minmax(360px,1.18fr) minmax(300px,.86fr) minmax(330px,.90fr) !important;
  gap:22px !important;
  align-items:stretch !important;
}
.hero-grid > .lead,
.hero-grid > .column,
.hero-grid > .bg164-editor-note{
  grid-column:auto !important;
  min-width:0 !important;
  height:660px !important;
  min-height:660px !important;
  align-self:stretch !important;
  box-sizing:border-box !important;
}
.hero-grid > .column{
  display:grid !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  overflow:hidden !important;
  border-radius:14px !important;
}
.hero-grid > .column .story.panel{
  min-height:0 !important;
}
.hero-grid > .bg164-editor-note{
  overflow:hidden !important;
  padding:34px 34px 30px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}
.bg164-editor-pill{
  margin-bottom:20px !important;
}
.bg164-editor-title strong{
  margin-top:18px !important;
  margin-bottom:16px !important;
}
.bg164-editor-list{
  display:grid !important;
  gap:12px !important;
  margin:0 !important;
  padding:0 !important;
}
.bg164-editor-list li{
  margin:0 !important;
}
.bg164-editor-list a{
  max-width:none !important;
}
.vivienne-says{
  margin-top:36px !important;
}

/* Mid desktop / zoomed browsers: keep the row intact a little longer, but allow a taller note panel if text wraps. */
@media (max-width: 1420px){
  .hero-grid{
    grid-template-columns:minmax(330px,1.12fr) minmax(280px,.84fr) minmax(320px,.92fr) !important;
    gap:18px !important;
  }
  .hero-grid > .bg164-editor-note{
    height:auto !important;
    min-height:660px !important;
    padding:32px 30px 32px !important;
    overflow:visible !important;
  }
  .bg164-editor-pill{
    margin-bottom:18px !important;
  }
  .bg164-editor-title strong{
    margin-top:16px !important;
    margin-bottom:14px !important;
  }
  .bg164-editor-list{
    gap:11px !important;
  }
}

/* When zoom/window width makes three columns ugly, move deliberately to a balanced two-column layout. */
@media (max-width: 1180px){
  .hero-grid{
    grid-template-columns:1fr 1fr !important;
    gap:20px !important;
    align-items:stretch !important;
  }
  .hero-grid > .lead{
    grid-column:1 / -1 !important;
    height:560px !important;
    min-height:560px !important;
  }
  .hero-grid > .column,
  .hero-grid > .bg164-editor-note{
    grid-column:auto !important;
    height:auto !important;
    min-height:660px !important;
  }
  .hero-grid > .bg164-editor-note{
    padding:38px 38px 40px !important;
    overflow:visible !important;
  }
}

@media (max-width: 900px){
  .hero-grid{
    grid-template-columns:1fr !important;
  }
  .hero-grid > .lead,
  .hero-grid > .column,
  .hero-grid > .bg164-editor-note{
    grid-column:1 / -1 !important;
    height:auto !important;
    min-height:0 !important;
  }
  .hero-grid > .lead{
    min-height:520px !important;
  }
  .hero-grid > .column{
    display:grid !important;
    grid-template-rows:none !important;
    gap:14px !important;
    overflow:visible !important;
    box-shadow:none !important;
  }
  .hero-grid > .column .story.panel{
    min-height:220px !important;
    border-radius:16px !important;
    border-top:0 !important;
  }
  .hero-grid > .column .story.panel + .story.panel{
    border-top:0 !important;
  }
  .hero-grid > .bg164-editor-note{
    padding:34px 26px 34px !important;
  }
  .vivienne-says{
    margin-top:30px !important;
  }
}