/* =============================================================
   321D — LEFT RAIL PROPORTION CORRECTION
   Presentation-only override to 320D.
   Goal: utility content absorbs leftover rail height; two ad positions stay
   controlled medium size and never flex-grow into billboard towers.
   ============================================================= */

/* Keep the full left rail Tetris-aligned, but make the useful tool area the
   flexible piece. The advertising card is content-sized only. */
body.home-300d .d300-left-column{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  min-height:0!important;
}

body.home-300d .d319-utility-card{
  flex:1 1 0!important;
  min-height:285px!important;
  max-height:none!important;
  padding:14px 13px!important;
  justify-content:flex-start!important;
  gap:10px!important;
}
body.home-300d .d319-utility-card>.eyebrow{
  flex:0 0 auto!important;
  margin:0 0 1px!important;
}

/* Stack calendar and clock vertically and let each read as a real little
   utility instead of two tiny side-by-side badges. */
body.home-300d .d319-tools{
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  align-items:stretch!important;
  flex:0 0 auto!important;
}
body.home-300d .d319-calendar{
  display:grid!important;
  grid-template-columns:minmax(60px,.72fr) minmax(0,1.28fr)!important;
  grid-template-rows:auto 1fr!important;
  min-height:96px!important;
  align-items:center!important;
}
body.home-300d .d319-calendar-month{
  grid-column:1 / -1!important;
  padding:6px 5px!important;
  font-size:.68rem!important;
  letter-spacing:.15em!important;
}
body.home-300d .d319-calendar-day{
  grid-column:1!important;
  grid-row:2!important;
  min-height:66px!important;
  font-size:2.45rem!important;
}
body.home-300d .d319-calendar-weekday{
  grid-column:2!important;
  grid-row:2!important;
  display:grid!important;
  place-items:center!important;
  align-self:stretch!important;
  padding:8px 6px!important;
  border-left:1px solid rgba(73,55,68,.14)!important;
  font-family:'Fraunces',Georgia,serif!important;
  font-size:1rem!important;
  color:#5f5058!important;
}
body.home-300d .d319-clock{
  min-height:98px!important;
  padding:11px 7px!important;
}
body.home-300d .d319-clock-label{
  font-size:.58rem!important;
}
body.home-300d .d319-clock-time{
  margin:7px 0 2px!important;
  font-size:1.9rem!important;
}
body.home-300d .d319-clock-ampm{
  font-size:.68rem!important;
}
body.home-300d .d319-tip{
  flex:1 1 auto!important;
  min-height:84px!important;
  margin:0!important;
  padding:11px 10px!important;
  display:flex!important;
  align-items:center!important;
  font-size:.72rem!important;
  line-height:1.36!important;
}

/* The ad card no longer receives leftover height. This is the critical 321D
   correction: fixed, useful ad canvases instead of flex-grown skyscrapers. */
body.home-300d .d300-left-column .d300-advertise-card{
  flex:0 0 auto!important;
  height:auto!important;
  min-height:0!important;
  padding:12px!important;
  display:block!important;
}
body.home-300d .d300-left-column .d300-advertise-card h2{
  font-size:1.08rem!important;
  margin:.12rem 0 .22rem!important;
}
body.home-300d .d300-left-column .d300-advertise-card>p{
  font-size:.65rem!important;
  line-height:1.18!important;
  margin:0 0 7px!important;
}
body.home-300d .d300-ad-slots{
  flex:none!important;
  display:grid!important;
  grid-template-rows:repeat(2,124px)!important;
  gap:8px!important;
  margin:7px 0!important;
}
body.home-300d .d300-ad-slots a{
  min-height:124px!important;
  height:124px!important;
  padding:9px 8px!important;
  align-content:center!important;
  opacity:.95!important;
}
body.home-300d .d300-ad-slots strong{
  font-size:.70rem!important;
  line-height:1.08!important;
}
body.home-300d .d300-ad-slots small{
  font-size:.59rem!important;
  line-height:1.1!important;
}
body.home-300d .d300-text-link.d317-ad-inquiry{
  margin-top:3px!important;
  padding-top:7px!important;
}

@media(max-width:850px){
  body.home-300d .d319-utility-card{
    min-height:235px!important;
    padding:10px!important;
    gap:7px!important;
  }
  body.home-300d .d319-tools{gap:6px!important}
  body.home-300d .d319-calendar{min-height:78px!important}
  body.home-300d .d319-calendar-month{padding:4px!important;font-size:.54rem!important}
  body.home-300d .d319-calendar-day{min-height:54px!important;font-size:1.95rem!important}
  body.home-300d .d319-calendar-weekday{font-size:.78rem!important;padding:6px 4px!important}
  body.home-300d .d319-clock{min-height:79px!important;padding:8px 5px!important}
  body.home-300d .d319-clock-time{font-size:1.45rem!important;margin:5px 0 1px!important}
  body.home-300d .d319-tip{min-height:65px!important;padding:8px!important;font-size:.60rem!important;line-height:1.28!important}

  body.home-300d .d300-ad-slots{
    grid-template-rows:repeat(2,94px)!important;
    gap:7px!important;
  }
  body.home-300d .d300-ad-slots a{
    min-height:94px!important;
    height:94px!important;
  }
}

@media(max-width:650px){
  body.home-300d .d300-left-column{gap:5px!important}
  body.home-300d .d319-utility-card{
    flex:1 1 0!important;
    min-height:185px!important;
    max-height:none!important;
    padding:6px 4px!important;
    gap:5px!important;
    border-radius:7px!important;
  }
  body.home-300d .d319-utility-card>.eyebrow{
    font-size:.36rem!important;
    letter-spacing:.05em!important;
  }
  body.home-300d .d319-tools{
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
  }
  body.home-300d .d319-calendar,
  body.home-300d .d319-clock{border-radius:5px!important}
  body.home-300d .d319-calendar{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    min-height:68px!important;
  }
  body.home-300d .d319-calendar-month{
    grid-column:1!important;
    grid-row:1!important;
    padding:2px!important;
    font-size:.33rem!important;
    letter-spacing:.08em!important;
  }
  body.home-300d .d319-calendar-day{
    grid-column:1!important;
    grid-row:2!important;
    min-height:31px!important;
    font-size:1.16rem!important;
  }
  body.home-300d .d319-calendar-weekday{
    grid-column:1!important;
    grid-row:3!important;
    min-height:0!important;
    padding:2px!important;
    border-left:0!important;
    border-top:1px solid rgba(73,55,68,.10)!important;
    font-family:Inter,Arial,sans-serif!important;
    font-size:.35rem!important;
    line-height:1!important;
  }
  body.home-300d .d319-clock{
    min-height:58px!important;
    padding:5px 2px!important;
  }
  body.home-300d .d319-clock-label{font-size:.30rem!important;letter-spacing:.05em!important}
  body.home-300d .d319-clock-time{font-size:.84rem!important;margin:3px 0 0!important}
  body.home-300d .d319-clock-ampm{font-size:.33rem!important}
  body.home-300d .d319-tip{
    flex:1 1 auto!important;
    min-height:50px!important;
    padding:5px!important;
    border-radius:5px!important;
    font-size:.34rem!important;
    line-height:1.20!important;
  }

  body.home-300d .d300-left-column .d300-advertise-card{
    padding:5px 3px!important;
  }
  body.home-300d .d300-left-column .d300-advertise-card .eyebrow{font-size:.36rem!important}
  body.home-300d .d300-left-column .d300-advertise-card h2{font-size:.56rem!important;margin:1px 0 2px!important}
  body.home-300d .d300-left-column .d300-advertise-card>p{font-size:.32rem!important;line-height:1.1!important;margin:0 0 3px!important}
  body.home-300d .d300-ad-slots{
    grid-template-rows:repeat(2,66px)!important;
    gap:4px!important;
    margin:4px 0!important;
  }
  body.home-300d .d300-ad-slots a{
    min-height:66px!important;
    height:66px!important;
    padding:4px 2px!important;
  }
  body.home-300d .d300-ad-slots strong{font-size:.40rem!important;line-height:1.06!important}
  body.home-300d .d300-ad-slots small{font-size:.32rem!important;line-height:1.05!important}
  body.home-300d .d300-text-link.d317-ad-inquiry{margin-top:2px!important;padding-top:4px!important}
  body.home-300d .d300-text-link.d317-ad-inquiry strong{font-size:.37rem!important}
  body.home-300d .d300-text-link.d317-ad-inquiry span{font-size:.30rem!important;line-height:1.08!important}
}