/* DESKTOP ONLY: the "Your rhythm. Your rules." card is the photograph, complete and
   uncropped, with the text and CTA overlaid on top of it.
   Hidden below 1101px, where the card stays text-only — on a phone the photo would
   push the button and Today's Rhythm off the screen. */
#hbAdd .hb-photo{ display:none; }

@media (min-width:1101px){
  /* the card is a GRID ITEM of the island's 2-column row and was being stretched to
     its neighbour's height; align-self:start lets it size to the photo */
  #hbAdd{
    position:relative; padding:0 !important; align-self:start; overflow:hidden;
  }
  #hbAdd .hb-photo{ display:block; margin:0; }
  #hbAdd .hb-photo img{
    display:block; width:100%; height:auto;   /* whole photo, never cropped */
  }
  /* the text sits over the top of the picture on a white scrim that fades out, so
     the photograph reads as complete rather than cut off */
  #hbAdd .hb-add-top{
    position:absolute; inset:0 0 auto 0;
    padding:20px 22px 26px;
    background:linear-gradient(180deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.94) 52%,
      rgba(255,255,255,.78) 78%,
      rgba(255,255,255,0) 100%);
    flex-direction:column; align-items:flex-start; gap:0;
  }
  #hbAdd .hb-add-top .hb-btn{ margin-top:14px; }
  #hbAdd .hb-nudge{ position:relative; margin:0 22px 18px; }
}