/* =============================================================
   324D — COMPACT EDGE-TO-EDGE AD RAIL
   Presentation-only correction to 323D.
   The rail returns to a quiet sidebar scale; artwork is edge-to-edge.
   ============================================================= */

/* Reduce the actual advertising column to roughly 60% of the original
   220px desktop rail instead of making the individual ads fill a huge box. */
body.home-300d .d300-home-grid{
  grid-template-columns:135px minmax(300px,.82fr) minmax(420px,1.18fr)!important;
}

body.home-300d .d300-left-column .d323-ad-showcase{
  display:grid!important;
  grid-template-rows:auto auto auto auto auto auto auto!important;
  align-content:space-between!important;
  gap:5px!important;
  height:100%!important;
  min-height:0!important;
  padding:9px 7px 8px!important;
  overflow:hidden!important;
}

body.home-300d .d323-ad-heading h2{
  margin:1px 0 3px!important;
  font-size:.82rem!important;
  line-height:1.02!important;
}
body.home-300d .d323-ad-heading p{
  margin:0!important;
  font-size:.46rem!important;
  line-height:1.22!important;
}

/* All four inventory positions use the same compact 4:5 footprint.
   The supplied sample graphics were designed for this shape. */
body.home-300d .d323-sample-card,
body.home-300d .d323-available-ad{
  width:100%!important;
  aspect-ratio:4 / 5!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  flex:none!important;
  box-sizing:border-box!important;
}

/* Absolutely no mat / inner padding around supplied artwork. */
body.home-300d .d323-sample-card{
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:4px!important;
  line-height:0!important;
  background:#101114!important;
}
body.home-300d .d323-sample-card img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
}
body.home-300d .d323-sample-tag{
  top:3px!important;
  right:3px!important;
  padding:2px 4px!important;
  font-size:.30rem!important;
}

body.home-300d .d323-open-label{
  display:block!important;
  padding:0!important;
  line-height:1.02!important;
}
body.home-300d .d323-open-label strong{
  display:block!important;
  font-size:.43rem!important;
}
body.home-300d .d323-open-label small{
  display:block!important;
  margin-top:2px!important;
  font-size:.34rem!important;
  line-height:1.12!important;
  text-align:left!important;
}
body.home-300d .d323-available-ad{
  padding:4px!important;
  border-radius:4px!important;
}
body.home-300d .d323-available-ad strong{font-size:.54rem!important}
body.home-300d .d323-available-ad small{font-size:.36rem!important;margin-top:2px!important}
body.home-300d .d323-reserve-link{padding-top:1px!important}
body.home-300d .d323-reserve-link strong{font-size:.55rem!important}
body.home-300d .d323-reserve-link span{font-size:.40rem!important;line-height:1.1!important}

@media(max-width:1050px){
  body.home-300d .d300-home-grid{
    grid-template-columns:122px minmax(280px,.92fr) minmax(360px,1.18fr)!important;
  }
  body.home-300d .d300-left-column .d323-ad-showcase{padding:7px 6px!important;gap:4px!important}
  body.home-300d .d323-ad-heading h2{font-size:.70rem!important}
  body.home-300d .d323-ad-heading p{font-size:.39rem!important}
}

@media(max-width:850px){
  body.home-300d .d323-ad-heading h2{font-size:.62rem!important}
  body.home-300d .d323-ad-heading p{font-size:.34rem!important;line-height:1.15!important}
  body.home-300d .d323-sample-tag{font-size:.25rem!important;padding:1px 3px!important}
  body.home-300d .d323-open-label strong{font-size:.38rem!important}
  body.home-300d .d323-open-label small{font-size:.30rem!important}
  body.home-300d .d323-available-ad strong{font-size:.46rem!important}
  body.home-300d .d323-available-ad small{font-size:.31rem!important}
}

/* Phone retains the three-column composition, but the advertising rail is
   deliberately quieter than 323D. */
@media(max-width:650px){
  body.home-300d .d300-home-grid{
    grid-template-columns:minmax(0,15fr) minmax(0,35fr) minmax(0,50fr)!important;
    gap:4px!important;
  }
  body.home-300d .d300-left-column .d323-ad-showcase{
    padding:4px 3px!important;
    gap:2px!important;
    border-radius:6px!important;
  }
  body.home-300d .d323-ad-heading .eyebrow{font-size:.27rem!important}
  body.home-300d .d323-ad-heading h2{font-size:.47rem!important;line-height:1!important;margin:1px 0 2px!important}
  body.home-300d .d323-ad-heading p{font-size:.24rem!important;line-height:1.12!important}
  body.home-300d .d323-sample-card{border-radius:3px!important}
  body.home-300d .d323-sample-tag{top:2px!important;right:2px!important;font-size:.18rem!important;padding:1px 2px!important}
  body.home-300d .d323-open-label strong{font-size:.30rem!important}
  body.home-300d .d323-open-label small{font-size:.23rem!important;line-height:1.08!important}
  body.home-300d .d323-available-ad{padding:2px!important;border-radius:3px!important}
  body.home-300d .d323-available-ad strong{font-size:.34rem!important}
  body.home-300d .d323-available-ad small{font-size:.23rem!important;margin-top:1px!important}
  body.home-300d .d323-reserve-link strong{font-size:.35rem!important}
  body.home-300d .d323-reserve-link span{font-size:.25rem!important}
}