/* HTNS Home highlighted-card left-tile alignment · v202
   The calendar/date tile uses one exact anchor in all four Home cards. */
#mainApp #view-home{
  --home-highlight-tile-size:42px;
  --home-highlight-tile-left:10px;
  --home-highlight-tile-gap:8px;
}

#mainApp #view-home .hero.assignment-hero:not(:has(.assignment-setlist)),
#mainApp #view-home .home-sermon-card,
#mainApp #view-home .home-worship-card,
#mainApp #view-home .home-next-event-ref{
  position:relative !important;
  height:68px !important;
  min-height:68px !important;
  padding:9px 10px !important;
  box-sizing:border-box !important;
  align-items:center !important;
}

/* One fixed x/y position and one fixed size for every left tile. */
#mainApp #view-home .hero.assignment-hero:not(:has(.assignment-setlist)) .assignment-hero-icon,
#mainApp #view-home .home-sermon-date,
#mainApp #view-home .home-worship-date,
#mainApp #view-home .home-next-event-ref .home-event-date,
#mainApp #view-home .home-next-event-ref .event-chip.home-event-date{
  position:absolute !important;
  left:var(--home-highlight-tile-left) !important;
  top:50% !important;
  width:var(--home-highlight-tile-size) !important;
  height:var(--home-highlight-tile-size) !important;
  min-width:var(--home-highlight-tile-size) !important;
  min-height:var(--home-highlight-tile-size) !important;
  margin:0 !important;
  padding:0 !important;
  transform:translateY(-50%) !important;
  justify-self:start !important;
  align-self:center !important;
  box-sizing:border-box !important;
  z-index:2 !important;
}

/* Reserve the same 42px tile column and 8px text gap in every card. */
#mainApp #view-home .hero.assignment-hero:not(:has(.assignment-setlist)) .assignment-hero-main,
#mainApp #view-home .home-sermon-card,
#mainApp #view-home .home-worship-card,
#mainApp #view-home .home-next-event-ref .event-item-inner{
  grid-template-columns:var(--home-highlight-tile-size) minmax(0,1fr) !important;
  column-gap:var(--home-highlight-tile-gap) !important;
  align-items:center !important;
}

#mainApp #view-home .hero.assignment-hero:not(:has(.assignment-setlist)) .assignment-hero-main,
#mainApp #view-home .home-next-event-ref .event-item-inner{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:42px !important;
  box-sizing:border-box !important;
}

#mainApp #view-home .hero.assignment-hero:not(:has(.assignment-setlist)) .assignment-hero-copy,
#mainApp #view-home .home-sermon-copy,
#mainApp #view-home .home-worship-copy,
#mainApp #view-home .home-next-event-ref .home-event-copy{
  grid-column:2 !important;
  min-width:0 !important;
}

#mainApp #view-home .home-next-event-main{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Keep the Church Only badge at the far right of the Event card. */
#mainApp #view-home .home-next-event-ref .home-event-copy{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "kicker kicker"
    "title title"
    "time badge" !important;
  align-content:center !important;
  align-items:center !important;
  column-gap:8px !important;
  row-gap:1px !important;
  text-align:left !important;
}
#mainApp #view-home .home-next-event-ref .home-event-kicker{
  grid-area:kicker !important;
  width:100% !important;
  text-align:left !important;
}
#mainApp #view-home .home-next-event-ref .home-event-title{
  grid-area:title !important;
  width:100% !important;
  min-width:0 !important;
  text-align:left !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#mainApp #view-home .home-next-event-ref .home-event-copy .muted{
  grid-area:time !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  text-align:left !important;
  white-space:nowrap !important;
}
#mainApp #view-home .home-next-event-ref .home-event-church-only-badge{
  grid-area:badge !important;
  justify-self:end !important;
  align-self:center !important;
  width:max-content !important;
  margin:0 !important;
  white-space:nowrap !important;
}

@media(max-width:350px){
  #mainApp #view-home .home-next-event-ref .home-event-copy{
    column-gap:5px !important;
  }
  #mainApp #view-home .home-next-event-ref .home-event-church-only-badge{
    padding:2px 5px !important;
    font-size:8px !important;
  }
}