/* =============================================================
   317D — AD / DESIGN SHOWCASE + MOBILE SHADOWBOX POLISH
   Presentation-only. No backend, auth, Vendor/Realtor/Admin, database,
   Supporter timing/data, or Featured Vendor timing/data changes.
   ============================================================= */

/* Turn the three-column feature area into two rows: the sellable ad rail
   spans both rows, while the Design Services showcase fills the full width
   of columns two and three beneath the main content. This removes the
   dangling card / zig-zag bottom edge without adding filler. */
body.home-300d .d300-home-grid{
  align-items:stretch!important;
}
body.home-300d .d300-left-column{
  grid-column:1!important;
  grid-row:1 / 3!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
}
body.home-300d .d300-center-column{grid-column:2!important;grid-row:1!important}
body.home-300d .d300-right-column{grid-column:3!important;grid-row:1!important}
body.home-300d .d300-left-column .d300-advertise-card{
  flex:1 1 auto!important;
  height:100%!important;
  min-height:0!important;
}
body.home-300d .d300-ad-slots{
  grid-template-rows:repeat(4,minmax(86px,1fr))!important;
}
body.home-300d .d300-ad-slots a{
  min-height:86px!important;
  text-decoration:none!important;
}
body.home-300d .d300-ad-slots a:first-child{
  opacity:1!important;
  border-left-color:rgba(190,143,99,.62)!important;
  background:linear-gradient(90deg,rgba(157,109,74,.09),rgba(255,255,255,.015))!important;
}
body.home-300d .d300-text-link.d317-ad-inquiry{
  text-decoration:none!important;
  cursor:pointer!important;
}
body.home-300d .d300-text-link.d317-ad-inquiry strong{
  color:#f0dfcf!important;
  font-size:.76rem!important;
}
body.home-300d .d300-text-link.d317-ad-inquiry span{
  color:#d6a776!important;
  font-size:.63rem!important;
}

/* Whole showcase is one link, while the three supplied package graphics
   remain visually separate. */
body.home-300d .d317-design-showcase{
  grid-column:2 / 4!important;
  grid-row:2!important;
  display:grid!important;
  grid-template-columns:minmax(210px,.68fr) minmax(0,1.32fr)!important;
  align-items:center!important;
  gap:20px!important;
  min-height:190px!important;
  padding:18px 22px!important;
  text-decoration:none!important;
  color:#f3e8dc!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 28%,rgba(96,119,97,.17),transparent 35%),
    linear-gradient(118deg,rgba(18,16,22,.985),rgba(45,32,47,.97) 48%,rgba(38,55,49,.96))!important;
  border-color:rgba(190,145,103,.62)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.24)!important;
}
body.home-300d .d317-design-showcase:hover,
body.home-300d .d317-design-showcase:focus-visible{
  border-color:rgba(221,177,129,.86)!important;
  filter:brightness(1.035);
}
body.home-300d .d317-design-copy{min-width:0}
body.home-300d .d317-design-copy .eyebrow{color:#d9a873!important}
body.home-300d .d317-design-copy h2{
  margin:.25rem 0 .45rem!important;
  font-family:'Fraunces',Georgia,serif!important;
  font-size:1.55rem!important;
  line-height:1.04!important;
  text-wrap:balance;
}
body.home-300d .d317-design-copy p{
  margin:0 0 10px!important;
  color:#d5c9bf!important;
  font-size:.78rem!important;
}
body.home-300d .d317-shop-link{
  display:inline-block;
  padding:7px 11px;
  border:1px solid rgba(200,153,108,.46);
  border-radius:7px;
  color:#e4b27e;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
}
body.home-300d .d317-design-thumbnails{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:center!important;
  min-width:0!important;
}
body.home-300d .d317-design-thumbnails img{
  width:100%!important;
  max-width:152px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  justify-self:center!important;
  border-radius:9px!important;
  border:1px solid rgba(207,175,145,.34)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.30)!important;
}

/* Mobile shadowbox: desktop remains untouched. Simplify the stacked frame
   lines and strengthen recess/depth cues so the phone reads as one cabinet. */
@media(max-width:650px){
  body.home-300d .d300-shadowbox{
    padding:23px 10px 8px!important;
    border:1px solid rgba(143,102,70,.9)!important;
    background:linear-gradient(150deg,#171217,#08090a)!important;
    box-shadow:
      inset 0 0 0 4px #201713,
      inset 0 8px 18px rgba(0,0,0,.42),
      0 8px 17px rgba(0,0,0,.38)!important;
  }
  body.home-300d .d300-supporter-art{
    width:calc(100% - 12px)!important;
    border:1px solid #886246!important;
    box-shadow:
      0 0 0 2px #1a1310,
      inset 0 0 18px rgba(0,0,0,.45),
      0 7px 16px rgba(0,0,0,.50)!important;
  }
  body.home-300d .d300-frame-lights{
    top:3px!important;
    left:24%!important;
    right:24%!important;
    z-index:4!important;
  }
  body.home-300d .d315-supporter-plaque{
    margin:7px 2px 0!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    box-shadow:inset 0 1px 0 rgba(238,209,170,.08),0 -4px 12px rgba(0,0,0,.28)!important;
  }
  body.home-300d .d315-supporter-plaque::before,
  body.home-300d .d315-supporter-plaque::after{display:none!important}

  /* Preserve the desktop-like three-column layout, now with the left rail
     spanning the Design Services row. */
  body.home-300d .d300-left-column{
    grid-column:1!important;
    grid-row:1 / 3!important;
  }
  body.home-300d .d300-center-column{grid-column:2!important;grid-row:1!important}
  body.home-300d .d300-right-column{grid-column:3!important;grid-row:1!important}
  body.home-300d .d300-ad-slots{
    grid-template-rows:repeat(4,minmax(74px,1fr))!important;
  }
  body.home-300d .d300-ad-slots a{min-height:74px!important}
  body.home-300d .d300-text-link.d317-ad-inquiry strong{font-size:.45rem!important}
  body.home-300d .d300-text-link.d317-ad-inquiry span{font-size:.36rem!important;line-height:1.12!important}

  body.home-300d .d317-design-showcase{
    grid-column:2 / 4!important;
    grid-row:2!important;
    min-height:134px!important;
    padding:7px 8px!important;
    gap:7px!important;
    grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr)!important;
    border-radius:8px!important;
  }
  body.home-300d .d317-design-copy .eyebrow{font-size:.39rem!important}
  body.home-300d .d317-design-copy h2{font-size:.66rem!important;line-height:1.04!important;margin:2px 0 4px!important}
  body.home-300d .d317-design-copy p{font-size:.39rem!important;line-height:1.15!important;margin:0 0 5px!important}
  body.home-300d .d317-shop-link{font-size:.38rem!important;padding:3px 5px!important;border-radius:4px!important}
  body.home-300d .d317-design-thumbnails{gap:4px!important}
  body.home-300d .d317-design-thumbnails img{
    max-width:92px!important;
    border-radius:5px!important;
    box-shadow:0 4px 9px rgba(0,0,0,.26)!important;
  }

  /* Hard-stop the homepage document at its actual footer content. Prevent
     legacy mobile spacer behavior from creating a blank tail below footer. */
  html{min-height:100%!important;height:auto!important;overflow-x:hidden!important}
  body.home-300d{
    min-height:100vh!important;
    height:auto!important;
    padding-bottom:0!important;
    overscroll-behavior-y:none!important;
  }
  body.home-300d footer{
    margin-bottom:0!important;
    padding-bottom:max(22px,env(safe-area-inset-bottom))!important;
  }
}