/* =============================================================
   312D — ASSET + COSMETIC POLISH PASS
   Visual-only follow-up to stable 311D.
   No Vendor/Realtor/Admin/backend behavior changes.
   ============================================================= */

/* New clean people artwork supplied for the build. */
body.home-300d .d300-dream-team-strip img{
  object-position:center center!important;
}

/* Move Design Services into the center flow as a compact horizontal card. */
body.home-300d .d300-center-column .d312-design-card{
  min-height:0!important;
  padding:11px 14px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "eyebrow kofi"
    "title   kofi"
    "copy    kofi"
    "price   kofi"!important;
  column-gap:12px!important;
  row-gap:2px!important;
  align-items:center!important;
  background:linear-gradient(145deg,rgba(20,18,23,.97),rgba(12,13,16,.96))!important;
}
body.home-300d .d300-center-column .d312-design-card>.eyebrow{grid-area:eyebrow!important}
body.home-300d .d300-center-column .d312-design-card>h2{
  grid-area:title!important;
  font-size:1.05rem!important;
  line-height:1.05!important;
  margin:.1rem 0!important;
}
body.home-300d .d300-center-column .d312-design-card>p{
  grid-area:copy!important;
  font-size:.68rem!important;
  line-height:1.25!important;
  margin:1px 0!important;
}
body.home-300d .d300-center-column .d312-design-card>.d300-price{
  grid-area:price!important;
  font-size:.9rem!important;
  margin:3px 0 0!important;
  line-height:1.1!important;
}
body.home-300d .d300-center-column .d312-design-card>.d300-kofi-button{
  grid-area:kofi!important;
  align-self:center!important;
  justify-self:end!important;
  width:78px!important;
  min-height:38px!important;
  margin:0!important;
  padding:5px 7px!important;
}
body.home-300d .d300-center-column .d312-design-card>.d300-kofi-button img{
  max-width:66px!important;
  max-height:27px!important;
}

/* Hourly inspiration panel. Artwork stays responsive; quote is real HTML text. */
body.home-300d .d312-inspiration-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  width:100%!important;
  min-height:138px!important;
  aspect-ratio:2.35/1!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  background:#17141a!important;
  border-color:rgba(189,145,105,.74)!important;
}
body.home-300d .d312-inspiration-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(13,11,15,.34),rgba(20,16,22,.18) 48%,rgba(12,14,14,.42));
}
body.home-300d .d312-inspiration-picture{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  opacity:1;
  transition:opacity .42s ease!important;
}
body.home-300d .d312-inspiration-picture img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  filter:saturate(.83) brightness(.82) contrast(1.02)!important;
}
body.home-300d .d312-inspiration-card blockquote{
  position:relative!important;
  z-index:2!important;
  width:min(91%,390px)!important;
  margin:0!important;
  padding:15px 16px!important;
  border:0!important;
  color:#f4e8db!important;
  font-family:'Fraunces',Georgia,serif!important;
  font-size:clamp(.88rem,1.35vw,1.08rem)!important;
  line-height:1.28!important;
  font-weight:600!important;
  font-style:italic!important;
  text-align:center!important;
  text-wrap:balance!important;
  text-shadow:0 2px 10px rgba(0,0,0,.88),0 1px 2px rgba(0,0,0,.9)!important;
  background:radial-gradient(ellipse at center,rgba(12,10,13,.42),rgba(12,10,13,0) 74%)!important;
  opacity:1;
  transition:opacity .42s ease!important;
}
body.home-300d .d312-inspiration-card.is-changing .d312-inspiration-picture,
body.home-300d .d312-inspiration-card.is-changing blockquote{opacity:.08!important}

/* Replace the crude logo crop with the supplied standalone two-key artwork. */
body.home-300d .d304-key-divider.d312-key-divider{
  width:92px!important;
  height:128px!important;
  overflow:visible!important;
  display:grid!important;
  place-items:center!important;
  opacity:.92!important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.34))!important;
}
body.home-300d .d304-key-divider.d312-key-divider img{
  position:static!important;
  inset:auto!important;
  width:auto!important;
  height:118px!important;
  max-width:88px!important;
  object-fit:contain!important;
  display:block!important;
}

/* Restore the compact inline Flip Gradient control. Rescue 289's generic
   input width rule was stretching the checkbox away from its label. */
#smartFlyerModal .vb289-combined-controls .flip-gradient-control{
  display:inline-flex!important;
  width:auto!important;
  justify-self:start!important;
  align-self:end!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  white-space:nowrap!important;
}
#smartFlyerModal .vb289-combined-controls .flip-gradient-control input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  flex:0 0 18px!important;
  margin:0!important;
  padding:0!important;
}

@media(max-width:850px){
  body.home-300d .d300-center-column .d312-design-card{
    padding:8px 9px!important;
    column-gap:7px!important;
  }
  body.home-300d .d300-center-column .d312-design-card>h2{font-size:.82rem!important}
  body.home-300d .d300-center-column .d312-design-card>p{font-size:.54rem!important}
  body.home-300d .d300-center-column .d312-design-card>.d300-price{font-size:.72rem!important}
  body.home-300d .d300-center-column .d312-design-card>.d300-kofi-button{width:66px!important;min-height:34px!important}
  body.home-300d .d300-center-column .d312-design-card>.d300-kofi-button img{max-width:56px!important}
  body.home-300d .d312-inspiration-card{aspect-ratio:1.55/1!important;min-height:128px!important}
  body.home-300d .d312-inspiration-card blockquote{font-size:.82rem!important;padding:11px!important}
}

@media(max-width:650px){
  /* Mobile keeps the desktop-like three-column composition, but this center
     panel intentionally gets more vertical room for readable quote text. */
  body.home-300d .d300-center-column .d312-design-card{
    display:block!important;
    min-height:0!important;
    padding:6px!important;
  }
  body.home-300d .d300-center-column .d312-design-card>.eyebrow{font-size:.42rem!important}
  body.home-300d .d300-center-column .d312-design-card>h2{font-size:.63rem!important;margin:2px 0!important}
  body.home-300d .d300-center-column .d312-design-card>p{display:none!important}
  body.home-300d .d300-center-column .d312-design-card>.d300-price{display:block!important;font-size:.55rem!important;margin:4px 0!important}
  body.home-300d .d300-center-column .d312-design-card>.d300-kofi-button{
    width:62px!important;min-height:28px!important;padding:3px 5px!important;margin-top:3px!important;
  }
  body.home-300d .d300-center-column .d312-design-card>.d300-kofi-button img{max-width:52px!important;max-height:22px!important}

  body.home-300d .d312-inspiration-card{
    min-height:0!important;
    aspect-ratio:4/5!important;
    border-radius:10px!important;
  }
  body.home-300d .d312-inspiration-card blockquote{
    width:92%!important;
    padding:7px 5px!important;
    font-size:.70rem!important;
    line-height:1.2!important;
  }
  body.home-300d .d312-inspiration-picture img{filter:saturate(.82) brightness(.76) contrast(1.03)!important}

  body.home-300d .d304-key-divider.d312-key-divider{
    width:48px!important;
    height:72px!important;
  }
  body.home-300d .d304-key-divider.d312-key-divider img{
    height:68px!important;
    max-width:46px!important;
  }

  #smartFlyerModal .vb289-combined-controls .flip-gradient-control{
    justify-self:start!important;
    align-self:start!important;
  }
}

@media(max-width:390px){
  body.home-300d .d312-inspiration-card blockquote{font-size:.64rem!important;line-height:1.18!important}
  body.home-300d .d304-key-divider.d312-key-divider{width:42px!important;height:66px!important}
  body.home-300d .d304-key-divider.d312-key-divider img{height:62px!important;max-width:40px!important}
}