/* ===========================================================================
   Home: what is happening this month. Drawn from home.js.
   Built on the shared page grammar (.sgpage bands, band heads, .sgbtn), so it
   speaks like Songs and Community and only adds what the notice board needs.
   =========================================================================== */

/* ---------- the masthead: the room photograph behind the title ---------- */
.sgpage .hm-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:96px 0 72px;
  background:var(--lwp-night);
}
.sgpage .hm-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("/assets/home-v2/hero-rehearsal-room-v1.jpg") center 40%/cover no-repeat;
  opacity:.34;
}
.sgpage .hm-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,14,18,.96) 0%,rgba(9,14,18,.78) 48%,rgba(9,14,18,.35) 100%);
}
.sgpage .hm-hero .band-head{display:block;max-width:none;margin-bottom:0}
.sgpage .hm-hero .room-title{max-width:12ch;margin:0 0 22px}
.sgpage .hm-hero .band-head p{
  font-size:var(--lwp-lead);line-height:1.55;color:var(--lwp-cream-soft);max-width:52ch;
}
.hm-hero-act{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.hm-more{margin-top:30px}
.hm-loading{margin:0;color:var(--sg-muted);font-size:15px}
.hm-example{font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;color:var(--terracotta)}

/* ---------- new releases: the coverflow ---------- */
.sgpage .hm-releases{border-top:1px solid rgba(243,234,216,.08);overflow:hidden;padding-bottom:64px}
.hm-cf{position:relative;--cf-card:clamp(170px,22vw,290px)}
.hm-cf-frame{
  overflow:hidden;padding:34px 0 40px;cursor:grab;touch-action:pan-y;outline:none;
  perspective:calc(var(--cf-card) * 3);
}
.hm-cf-frame:active{cursor:grabbing}
.hm-cf-frame:focus-visible{box-shadow:inset 0 0 0 2px var(--ochre)}
.hm-cf-track{position:relative;height:var(--cf-card);transform-style:preserve-3d;user-select:none;-webkit-user-select:none}
.hm-cf-card{
  position:absolute;left:50%;top:0;width:var(--cf-card);aspect-ratio:1;overflow:hidden;
  background:#1b2427;box-shadow:0 26px 40px rgba(0,0,0,.5);will-change:transform;
  -webkit-box-reflect:below 6px linear-gradient(transparent 70%,rgba(255,255,255,.14));
}
.hm-cf-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.hm-cf-card.on{box-shadow:0 30px 50px rgba(0,0,0,.6),0 0 0 2px rgba(224,169,78,.55)}
.hm-cf-blank{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px}
.hm-cf-blank span{font-family:var(--anton);text-transform:uppercase;color:#faf7f0;font-size:clamp(22px,2.4vw,34px);line-height:.92;letter-spacing:-.01em}
.hm-cf-tag{position:absolute;top:10px;left:10px;padding:3px 7px;background:rgba(9,14,18,.72);color:var(--ochre);font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hm-cf-nav{
  position:absolute;top:calc(34px + var(--cf-card) / 2);transform:translateY(-50%);z-index:200;
  width:48px;height:48px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(243,234,216,.35);background:rgba(9,14,18,.7);color:var(--lwp-cream);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hm-cf-nav:hover{border-color:var(--lwp-cream);background:rgba(9,14,18,.9)}
.hm-cf-nav.prev{left:max(16px,calc(50% - 560px))}
.hm-cf-nav.next{right:max(16px,calc(50% - 560px))}
.hm-cf-caption{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px;min-height:150px;animation:hm-rise .35s ease both}
@keyframes hm-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hm-cf-title{margin:0;font-family:var(--anton);text-transform:uppercase;font-size:clamp(28px,2.8vw,42px);line-height:1;color:var(--lwp-cream)}
.hm-cf-by{margin:8px 0 0;font-size:14.5px;color:rgba(243,234,216,.78)}
.hm-cf-meta{margin:6px 0 0;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre)}
.hm-cf-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.sgpage .hm-releases .hm-more{text-align:center}

/* ---------- most sung this month ---------- */
.hm-top-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;
}
.hm-top-item{position:relative;display:flex;flex-direction:column;padding-top:58px}
.hm-rank{
  position:absolute;top:0;left:0;
  font-family:var(--anton);font-weight:400;font-size:64px;line-height:.8;
  color:var(--terracotta);
}
.hm-top-item .songcard{flex:1}
.hm-thanks{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:18px 0 0;margin-top:16px;border-top:1px solid rgba(25,34,46,.18);
}
.hm-stat{margin:0;font-size:13.5px;line-height:1.5;color:var(--sg-muted)}

/* ---------- the door into projects ---------- */
.hm-door{
  position:relative;overflow:hidden;padding:80px 0;color:var(--lwp-cream);
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(224,169,78,.28),transparent 55%),
    linear-gradient(135deg,#a8432c 0%,#c75640 45%,#7a3217 100%);
}
.hm-door::after{
  content:"";position:absolute;right:-6%;bottom:-40%;width:46vw;max-width:620px;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(250,247,240,.18);box-shadow:0 0 0 60px rgba(250,247,240,.04),0 0 0 120px rgba(250,247,240,.03);pointer-events:none;
}
.hm-door-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:40px;align-items:center}
.hm-door h2{margin:22px 0 14px;font-family:var(--anton);font-weight:400;text-transform:uppercase;font-size:clamp(40px,4.4vw,64px);line-height:.94;letter-spacing:-.018em;color:#faf7f0}
.hm-door-note{margin-top:10px!important;font-size:12px!important;color:rgba(250,247,240,.65)!important}
.hm-door p{margin:0;font-size:var(--lwp-lead);line-height:1.55;color:rgba(250,247,240,.86);max-width:52ch}
.hm-door-faces{display:flex}
.hm-door-face{
  width:54px;height:54px;border-radius:50%;margin-right:-12px;border:3px solid #c75640;
  background:#2c3a2c center/cover no-repeat;display:grid;place-items:center;
}
.hm-door-mono{background:#19222e;color:#faf7f0;font-weight:800;font-size:15px}
.hm-door-btn{
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;border:0;
  padding:0 30px;height:72px;background:var(--ochre);color:#0a1115;
  font-family:var(--anton);font-size:clamp(20px,1.8vw,26px);text-transform:uppercase;letter-spacing:.01em;
  box-shadow:10px 10px 0 rgba(9,14,18,.35);transition:transform .2s ease,box-shadow .2s ease;
}
.hm-door-btn:hover{transform:translate(-2px,-2px);box-shadow:14px 14px 0 rgba(9,14,18,.4)}
.hm-door-btn:focus-visible{outline:2px solid #faf7f0;outline-offset:4px}

/* ---------- welcome to the family: rolling list and card stack ---------- */
.hm-fc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-height:520px;overflow:hidden;box-shadow:18px 18px 0 rgba(7,13,17,.12)}
.hm-fc-list{position:relative;background:var(--sg-forest);overflow:hidden;display:flex;align-items:center;padding:0 28px}
.hm-fc-list::before,.hm-fc-list::after{content:"";position:absolute;left:0;right:0;height:90px;z-index:2;pointer-events:none}
.hm-fc-list::before{top:0;background:linear-gradient(var(--sg-forest),transparent)}
.hm-fc-list::after{bottom:0;background:linear-gradient(transparent,var(--sg-forest))}
.hm-fc-chips{position:relative;width:100%;height:64px}
.hm-fc-chip{
  position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:12px;max-width:100%;
  padding:12px 22px;border:1px solid rgba(243,234,216,.24);border-radius:999px;background:transparent;
  color:rgba(243,234,216,.62);cursor:pointer;white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .8s ease,background .5s ease,color .5s ease,border-color .5s ease;
}
.hm-fc-chip span:last-child{overflow:hidden;text-overflow:ellipsis}
.hm-fc-chip:hover{border-color:rgba(243,234,216,.5);color:#faf7f0}
.hm-fc-chip.on{background:#faf7f0;border-color:#faf7f0;color:var(--sg-forest);z-index:1}
.hm-fc-chip-ic{display:grid;place-items:center;opacity:.8}
.hm-fc-stage{position:relative;background:#e9dec7;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.hm-fc-cards{position:relative;width:min(340px,80%);aspect-ratio:4/5}
.hm-fc-card{
  position:absolute;inset:0;overflow:hidden;background:#2c3a2c;border:8px solid #faf7f0;
  box-shadow:0 24px 40px rgba(25,34,46,.22);transform-origin:center;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .6s ease,filter .6s ease;
}
.hm-fc-card img{width:100%;height:100%;object-fit:cover;display:block}
.hm-fc-mono{position:absolute;inset:0;display:grid;place-items:center;font-family:Georgia,serif;font-size:96px;color:rgba(250,247,240,.9);background:linear-gradient(135deg,#c75640,#6e2a1c)}
.hm-fc-card[data-status="active"]{transform:none;opacity:1;z-index:20}
.hm-fc-card[data-status="prev"]{transform:translateX(-90px) scale(.85) rotate(-3deg);opacity:.45;z-index:10;filter:grayscale(1) blur(1.5px)}
.hm-fc-card[data-status="next"]{transform:translateX(90px) scale(.85) rotate(3deg);opacity:.45;z-index:10;filter:grayscale(1) blur(1.5px)}
.hm-fc-card[data-status="hidden"]{transform:scale(.7);opacity:0;z-index:0;pointer-events:none}
.hm-fc-card[data-status="prev"],.hm-fc-card[data-status="next"]{pointer-events:none}
.hm-fc-over{
  position:absolute;inset:auto 0 0 0;padding:110px 22px 22px;color:#faf7f0;
  background:linear-gradient(rgba(9,14,18,0),rgba(9,14,18,.8) 42%,rgba(9,14,18,.96));
  opacity:0;transform:translateY(14px);transition:opacity .5s ease .15s,transform .5s ease .15s;
}
.hm-fc-card[data-status="active"] .hm-fc-over{opacity:1;transform:none}
.hm-fc-pill{display:inline-block;padding:5px 12px;border-radius:999px;background:#faf7f0;color:var(--sg-forest);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hm-fc-over h3,.hm-fc-invite h3{margin:12px 0 6px;font-family:var(--anton);font-weight:400;text-transform:uppercase;font-size:30px;line-height:.98}
.hm-fc-over p{margin:0 0 16px;font-size:13px;color:rgba(250,247,240,.8)}
.hm-fc-live{position:absolute;top:18px;left:18px;display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#faf7f0;opacity:0;transition:opacity .3s ease}
.hm-fc-live i{width:8px;height:8px;border-radius:50%;background:var(--ochre);box-shadow:0 0 10px var(--ochre)}
.hm-fc-card[data-status="active"] .hm-fc-live{opacity:1}
.hm-fc-invite{background:var(--sg-forest);color:#faf7f0;padding:28px 24px;display:flex;flex-direction:column;justify-content:flex-end}
.hm-fc-invite p{margin:0 0 18px;font-size:14px;line-height:1.55;color:rgba(250,247,240,.8)}
.hm-fc-invite-act{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- smaller screens ---------- */
@media (max-width:980px){
  .hm-top-list{grid-template-columns:1fr 1fr}
  .hm-door-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hm-fc{grid-template-columns:1fr;min-height:0}
  .hm-fc-list{height:240px;padding:0 20px}
  .hm-fc-stage{padding:40px 16px 48px}
  .hm-fc-card[data-status="prev"]{transform:translateX(-46px) scale(.85) rotate(-3deg)}
  .hm-fc-card[data-status="next"]{transform:translateX(46px) scale(.85) rotate(3deg)}
}
@media (max-width:640px){
  .sgpage .hm-hero{padding:64px 0 52px}
  .hm-hero-act .sgbtn{flex:1 1 100%}
  .hm-top-list{grid-template-columns:1fr}
  .hm-rank{font-size:52px}
  .hm-top-item{padding-top:48px}
  .hm-cf-nav{display:none}
  .hm-door{padding:60px 0}
  .hm-door-btn{width:100%;justify-content:space-between;height:64px;padding:0 22px}
}
@media (prefers-reduced-motion:reduce){
  .hm-fc-chip,.hm-fc-card,.hm-fc-over,.hm-cf-caption{transition:none;animation:none}
}