/* Send Listy Core 0.490 — Home Template Visual Carousel
   Presentation-only enhancement. Template ownership, access gates, and click behavior stay unchanged. */

.sl-home-template-cards{
  display:flex;
  /* Core 0.539 — reserve the runtime-populated carousel footprint to prevent
     the sections below it from jumping when cards are inserted on mobile. */
  min-height:218px;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 8px;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#d5ded6 transparent;
}
.sl-home-template-cards::-webkit-scrollbar{height:5px}
.sl-home-template-cards::-webkit-scrollbar-track{background:transparent}
.sl-home-template-cards::-webkit-scrollbar-thumb{background:#d5ded6;border-radius:999px}

.sl-home-template-card.sl-home-template-visual-card{
  position:relative;
  flex:0 0 calc((100% - 24px)/3);
  min-width:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  overflow:hidden;
  border:1px solid var(--sl-border,#e4e8e4);
  border-radius:18px;
  background:#fff;
  box-shadow:0 5px 14px rgba(30,45,60,.06);
  text-align:start;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.sl-home-template-card.sl-home-template-visual-card:hover{
  transform:translateY(-1px);
  border-color:#d5dfd7;
  box-shadow:0 8px 20px rgba(30,45,60,.09);
}
.sl-home-template-card.sl-home-template-visual-card:active{transform:translateY(0) scale(.995)}
.sl-home-template-card.sl-home-template-visual-card:focus-visible{
  outline:3px solid rgba(47,158,47,.24);
  outline-offset:2px;
}

.sl-home-template-card-media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
  background:#eef8eb;
  color:var(--sl-green,#2f9e2f);
}
.sl-home-template-card-media-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:38px;
  line-height:1;
  font-weight:800;
}
.sl-home-template-card-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.sl-home-template-card-media.has-featured-image .sl-home-template-card-media-fallback{opacity:0}
.sl-home-template-card-media.is-fallback .sl-home-template-card-media-fallback{opacity:1}

.sl-home-template-card-body{
  min-width:0;
  width:100%;
  min-height:86px;
  padding:11px 12px 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  box-sizing:border-box;
}
.sl-home-template-card-copy{min-width:0;display:grid;gap:3px}
.sl-home-template-card-copy strong{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  white-space:normal;
  text-overflow:ellipsis;
  min-height:2.55em;
  font-size:14px;
  line-height:1.28;
  font-weight:800;
  color:var(--sl-text,#26372d);
}
.sl-home-template-card-copy small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:11px;
  line-height:1.35;
  color:var(--sl-muted,#6f7d73);
}
.sl-home-template-card-copy .sl-template-plan-badge{margin-top:4px}

.sl-home-template-card-chevron{
  align-self:center;
  color:#8c9a91;
  font-size:23px;
  line-height:1;
  font-weight:700;
}
.sl-home-template-card-lock{
  position:absolute;
  inset-block-start:9px;
  inset-inline-end:9px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 8px rgba(20,36,26,.14);
  font-size:14px;
  line-height:1;
  z-index:2;
}

/* Preserve the access-gate dimming but keep the artwork readable enough to market the template. */
.send-list-app .sl-home-template-card.sl-home-template-visual-card.sl-free-access-locked[data-template-access-locked="1"]{filter:grayscale(30%);opacity:.82}
.send-list-app .sl-home-template-card.sl-home-template-visual-card.sl-free-access-locked[data-template-access-locked="1"]:hover{filter:grayscale(30%);opacity:.88}
.sl-home-template-card.sl-home-template-visual-card.sl-free-access-locked .sl-home-template-card-media img{filter:saturate(.78) brightness(.94)}

.send-list-app.sl-dark-mode .sl-home-template-card.sl-home-template-visual-card{
  background:#1c2721;
  border-color:#334238;
  box-shadow:0 5px 16px rgba(0,0,0,.2);
}
.send-list-app.sl-dark-mode .sl-home-template-card.sl-home-template-visual-card:hover{border-color:#425447;box-shadow:0 8px 20px rgba(0,0,0,.26)}
.send-list-app.sl-dark-mode .sl-home-template-card-media{background:#24352a;color:#8fd79b}
.send-list-app.sl-dark-mode .sl-home-template-card-copy strong{color:#edf4ef}
.send-list-app.sl-dark-mode .sl-home-template-card-copy small{color:#aab8ae}
.send-list-app.sl-dark-mode .sl-home-template-card-lock{background:rgba(27,39,32,.94)}

@media(max-width:900px){
  .sl-home-template-cards{min-height:275px}
  .sl-home-template-card.sl-home-template-visual-card{flex-basis:46%}
}
@media(max-width:650px){
  .sl-home-template-cards{
    min-height:245px;
    gap:10px;
    padding-inline-end:13%;
    scrollbar-width:none;
  }
  .sl-home-template-cards::-webkit-scrollbar{display:none}
  .sl-home-template-card.sl-home-template-visual-card{
    flex-basis:82%;
    border-radius:17px;
  }
  .sl-home-template-card-media{aspect-ratio:16/9}
  .sl-home-template-card-body{min-height:82px;padding:10px 11px 11px}
  .sl-home-template-card-copy strong{font-size:14px}
}
@media(max-width:380px){
  .sl-home-template-card.sl-home-template-visual-card{flex-basis:86%}
}
@media(prefers-reduced-motion:reduce){
  .sl-home-template-card.sl-home-template-visual-card{transition:none}
}