/* =============================================================
   322D — SAMPLE AD RAIL / LOCKED AD CANVAS
   Presentation-only override to 321D.
   Removes the utility-card experiment and establishes the intended
   advertising canvas before real sample artwork is supplied.
   ============================================================= */

/* One clean rail card. No clock/calendar filler, no flex-grown billboards. */
body.home-300d .d300-left-column{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  min-height:0!important;
}
body.home-300d .d300-left-column .d322-ad-showcase{
  flex:1 1 auto!important;
  height:100%!important;
  min-height:0!important;
  padding:14px 13px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  background:linear-gradient(155deg,rgba(27,22,29,.985),rgba(31,37,35,.975))!important;
}
body.home-300d .d322-ad-showcase>.eyebrow{
  color:#d6a674!important;
  flex:0 0 auto!important;
}
body.home-300d .d322-ad-showcase h2{
  flex:0 0 auto!important;
  margin:.15rem 0 .35rem!important;
  font-size:1.22rem!important;
  line-height:1.04!important;
}
body.home-300d .d322-ad-explainer{
  flex:0 0 auto!important;
  margin:0 0 10px!important;
  color:#d8cec6!important;
  font-size:.67rem!important;
  line-height:1.34!important;
}

/* This is the locked ad canvas: 4:3. Real ads should be created/cropped to
   this ratio so the same artwork fits every breakpoint without being cut off. */
body.home-300d .d322-ad-slots{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:none!important;
  gap:9px!important;
  margin:0!important;
}
body.home-300d .d322-ad-slots .d322-sample-ad{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:4 / 3!important;
  padding:12px 12px 10px!important;
  overflow:hidden!important;
  border:1px solid rgba(203,169,137,.45)!important;
  border-left:3px solid rgba(203,169,137,.72)!important;
  border-radius:8px!important;
  text-decoration:none!important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.16),0 5px 12px rgba(0,0,0,.20)!important;
  opacity:1!important;
}
body.home-300d .d322-sample-ad::after{
  content:'';
  position:absolute;
  right:-24px;
  bottom:-36px;
  width:96px;
  height:96px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 13px rgba(255,255,255,.025),0 0 0 27px rgba(255,255,255,.018);
  pointer-events:none;
}
body.home-300d .d322-sample-plum{background:linear-gradient(135deg,#5d405d,#342b39 64%,#34483f)!important}
body.home-300d .d322-sample-sage{background:linear-gradient(135deg,#526b60,#303f3b 64%,#5a4158)!important}
body.home-300d .d322-sample-charcoal{background:linear-gradient(135deg,#343236,#222628 62%,#57434c)!important}
body.home-300d .d322-sample-bronze{background:linear-gradient(135deg,#554136,#302a2b 58%,#46564c)!important}
body.home-300d .d322-sample-tag{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  padding:3px 6px!important;
  border:1px solid rgba(234,211,190,.30)!important;
  border-radius:999px!important;
  background:rgba(15,13,16,.32)!important;
  color:#e7c7a7!important;
  font-size:.48rem!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
}
body.home-300d .d322-sample-ad strong{
  position:relative!important;
  z-index:1!important;
  color:#fff5eb!important;
  font-family:'Fraunces',Georgia,serif!important;
  font-size:1rem!important;
  line-height:1.02!important;
  max-width:82%!important;
}
body.home-300d .d322-sample-ad small{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  margin-top:4px!important;
  color:#ddd2c8!important;
  font-size:.57rem!important;
  line-height:1.18!important;
  max-width:78%!important;
}
body.home-300d .d322-sample-cta{
  position:relative!important;
  z-index:1!important;
  margin-top:8px!important;
  color:#ddb181!important;
  font-size:.53rem!important;
  font-weight:800!important;
}
body.home-300d .d322-reserve-link{
  flex:0 0 auto!important;
  margin-top:auto!important;
  padding-top:10px!important;
}

@media(max-width:850px){
  body.home-300d .d300-left-column .d322-ad-showcase{padding:10px 9px 8px!important}
  body.home-300d .d322-ad-showcase h2{font-size:.88rem!important;margin:2px 0 4px!important}
  body.home-300d .d322-ad-explainer{font-size:.49rem!important;line-height:1.25!important;margin-bottom:7px!important}
  body.home-300d .d322-ad-slots{gap:6px!important}
  body.home-300d .d322-ad-slots .d322-sample-ad{padding:8px!important;border-radius:6px!important}
  body.home-300d .d322-sample-tag{top:5px!important;right:5px!important;font-size:.36rem!important;padding:2px 4px!important}
  body.home-300d .d322-sample-ad strong{font-size:.72rem!important}
  body.home-300d .d322-sample-ad small{font-size:.42rem!important;margin-top:2px!important}
  body.home-300d .d322-sample-cta{font-size:.39rem!important;margin-top:5px!important}
}

@media(max-width:650px){
  body.home-300d .d300-left-column .d322-ad-showcase{
    padding:5px 4px 5px!important;
    border-radius:7px!important;
  }
  body.home-300d .d322-ad-showcase>.eyebrow{font-size:.35rem!important;letter-spacing:.05em!important}
  body.home-300d .d322-ad-showcase h2{font-size:.58rem!important;line-height:1.02!important;margin:1px 0 3px!important}
  body.home-300d .d322-ad-explainer{font-size:.31rem!important;line-height:1.20!important;margin:0 0 5px!important}
  body.home-300d .d322-ad-slots{gap:4px!important}
  body.home-300d .d322-ad-slots .d322-sample-ad{
    aspect-ratio:4 / 3!important;
    padding:5px!important;
    border-left-width:2px!important;
    border-radius:4px!important;
  }
  body.home-300d .d322-sample-ad::after{width:48px;height:48px;right:-14px;bottom:-19px;box-shadow:0 0 0 7px rgba(255,255,255,.025),0 0 0 14px rgba(255,255,255,.018)}
  body.home-300d .d322-sample-tag{top:3px!important;right:3px!important;font-size:.24rem!important;padding:1px 3px!important}
  body.home-300d .d322-sample-ad strong{font-size:.43rem!important;max-width:84%!important}
  body.home-300d .d322-sample-ad small{font-size:.28rem!important;line-height:1.10!important;margin-top:1px!important;max-width:82%!important}
  body.home-300d .d322-sample-cta{font-size:.26rem!important;margin-top:3px!important}
  body.home-300d .d322-reserve-link{padding-top:5px!important}
}