/*
 * Snowbench public homepage layout.
 *
 * index.html owns the shared component primitives. This file only composes
 * the homepage across phone, tablet and desktop widths so the same semantic
 * order stays usable at every breakpoint.
 */

/* Shared homepage sections. The existing --gutter token controls their edge. */
.home-content{padding-bottom:var(--s6)}
.home-hot .hot-gear-list{display:flex;gap:var(--s3);overflow-x:auto;padding:0 var(--gutter);margin-top:var(--s4);scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.home-hot .hot-gear-list::-webkit-scrollbar{display:none}
.home-hot .rk{display:flex;flex:0 0 min(232px,78vw);flex-direction:column;align-items:stretch;gap:var(--s2);min-height:232px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-panel);background:var(--panel);scroll-snap-align:start}
.home-hot .rk:first-child{border-top:1px solid var(--line)}
.home-hot .rk .th{order:0;width:100%;height:112px;flex:none;border-radius:var(--r-ctl)}
.home-hot .rk .n{order:1;display:block}
.home-hot .rk>span:nth-child(2){order:2;min-width:0}
.home-hot .rk b{font-size:var(--sb-fs-card);font-weight:var(--sb-fw-title);line-height:1.35}
.home-hot .rk p{-webkit-line-clamp:2}
.home-community .testc{margin-top:var(--s4)}
.home-community .community-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.home-community .community-copy .t-num{font-size:var(--sb-fs-page);font-weight:var(--sb-fw-title);line-height:1.25;letter-spacing:-.02em}
.home-community .community-copy .t-num span{color:var(--on-night-3)}
.home-community .community-copy .t-small{max-width:540px;margin:0}
.home-banner{position:relative;display:block;min-width:0;overflow:hidden}
.ann.home-banner{padding-left:0;padding-right:0}
.app:not(.system-wide) .ann.home-banner{padding-left:0;padding-right:0}
.home-banner-track{display:flex;width:max-content;min-width:max-content;min-height:36px;height:100%;overflow:visible;animation:home-banner-marquee var(--banner-duration,32s) linear infinite;will-change:transform}
.home-banner-copy{display:flex;align-items:center;flex:none;min-width:max-content}
.home-banner-item{display:inline-flex;align-items:center;gap:8px;flex:none;min-width:0;min-height:36px;color:inherit;white-space:nowrap}
.home-banner-item::after{content:"";align-self:stretch;flex:0 0 1px;margin-left:var(--s4);margin-right:var(--s4);background:color-mix(in srgb,var(--on-volt) 24%,transparent)}
.home-banner-item>b{flex:none;white-space:nowrap}
.home-banner-text{display:inline-block;white-space:nowrap}
.home-banner:hover .home-banner-track,.home-banner:focus-within .home-banner-track{animation-play-state:paused}
@keyframes home-banner-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--banner-shift, 50%)))}}
.app:not(.system-wide) .home-account-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid var(--nline-2);border-radius:var(--r-ctl);color:var(--on-night);font-size:12px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.app:not(.system-wide) .home-account-link:hover,.app:not(.system-wide) .home-account-link:focus-visible{background:var(--nline);border-color:var(--nline-3);color:var(--on-night)}
.app:not(.system-wide) .home-account-link.is-signed-in{background:var(--nline);border-color:var(--nline-3)}
.app:not(.system-wide) .home-account-link .ic{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){
  .home-banner-track{animation:none!important;transform:none!important}
  .home-banner-copy-duplicate{display:none}
  .home-banner-copy:first-child .home-banner-item:not(:first-child){display:none}
}
.hero .search-submit .btn.btn-bad{background:var(--bad);color:#fff}
.hero .search-submit .btn.btn-bad:hover{background:color-mix(in srgb,var(--bad) 88%,#000)}
.hero .search-submit .btn.btn-bad:active{background:color-mix(in srgb,var(--bad) 76%,#000)}
html:not([data-theme]) .hero .search-submit .btn.btn-bad,html[data-theme="piste"] .hero .search-submit .btn.btn-bad{background:var(--volt);color:var(--on-volt)}
html:not([data-theme]) .hero .search-submit .btn.btn-bad:hover,html[data-theme="piste"] .hero .search-submit .btn.btn-bad:hover{background:var(--volt-hover)}
html:not([data-theme]) .hero .search-submit .btn.btn-bad:active,html[data-theme="piste"] .hero .search-submit .btn.btn-bad:active{background:var(--volt-press)}

/* Keep the AI action readable at every width; the logo is supplemental. */
.hero-ask-text{display:inline-block;white-space:nowrap;font-size:15px}
@media (max-width:430px){
  .app:not(.system-wide) .hero .search-submit{gap:2px}
  .app:not(.system-wide) .hero .search-submit .btn{padding:0 10px}
  .app:not(.system-wide) .hero .search-submit .field{padding:0 2px;gap:2px}
  .app:not(.system-wide) .hero .search-submit .sfield{margin:0}
}
@media (max-width:400px){
  .app:not(.system-wide) .hero .search-submit .btn{width:auto;min-width:44px;min-height:44px;padding:0 10px;gap:0;font-size:14px}
  .app:not(.system-wide) .hero .search-submit .hero-ask-text{font-size:14px}
  .app:not(.system-wide) .hero .search-submit .hero-ask-ic{display:none}
  .app:not(.system-wide) .hero .search-submit .sfield{padding:0 6px;gap:0}
  .app:not(.system-wide) .hero .search-submit .sfield svg{display:none}
  .app:not(.system-wide) .hero .sbox{padding:6px}
}
@media (max-width:360px){
  .app:not(.system-wide) .hero .search-submit .sfield input{font-size:14px}
  /* Keep the short placeholder on one line at the narrowest supported width.
   * The control remains 44px tall; reclaim horizontal space from chrome only. */
  .app:not(.system-wide) .hero .search-submit .btn{padding-left:8px;padding-right:8px}
  .app:not(.system-wide) .hero .search-submit .sfield{padding-left:2px;padding-right:2px}
  .app:not(.system-wide) .hero .sbox{padding:4px}
}

/* Mobile baseline: keep every homepage section inside the viewport while
 * preserving the existing reading order and shared design tokens. */
@media (max-width:767px){
  .app:not(.system-wide){
    width:100%;
    max-width:none;
    min-width:0;
    overflow-x:hidden;
  }
  .app:not(.system-wide) > *{min-width:0}
  .app:not(.system-wide) .ann{
    min-height:calc(44px + var(--safe-area-top));
    height:auto;
    padding-top:calc(8px + var(--safe-area-top));
    padding-bottom:8px;
    padding-left:calc(var(--gutter) + var(--safe-area-left));
    padding-right:calc(var(--gutter) + var(--safe-area-right));
    line-height:1.35;
    gap:12px;
  }
  .app:not(.system-wide) .ann.home-banner{
    padding-left:var(--safe-area-left,0);
    padding-right:var(--safe-area-right,0);
  }
  /* The outer .ann already includes the 44px touch height and safe area;
   * keep the track's content box compact so padding does not increase it. */
  .app:not(.system-wide) .home-banner-track{min-height:28px}
  .app:not(.system-wide) .home-banner-item{min-height:28px}
  .app:not(.system-wide) .home-header{
    height:calc(56px + var(--safe-area-top));
    padding:var(--safe-area-top) 12px 0 var(--gutter);
  }
  .app:not(.system-wide) .home-account-link{width:44px;height:44px;padding:0;border-color:transparent}
  .app:not(.system-wide) .home-account-link [data-home-account-label]{display:none}
  .app:not(.system-wide) .hero .ct{
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    padding-bottom:24px;
  }
  .app:not(.system-wide) .hero p{max-width:100%;overflow-wrap:anywhere}
  .app:not(.system-wide) .sbox,
  .app:not(.system-wide) .sbox .search-submit{min-width:0;max-width:100%}
  .app:not(.system-wide) .hero .sbox{width:100%}
  .app:not(.system-wide) .sbox .search-submit .field{min-width:0}
  .app:not(.system-wide) .sbox .search-submit .btn{min-width:44px;min-height:44px}
  .app:not(.system-wide) .cats{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
  .app:not(.system-wide) .cat{min-width:0;min-height:112px}
  .app:not(.system-wide) .cat b,
  .app:not(.system-wide) .cat small{overflow-wrap:anywhere}
  .app:not(.system-wide) .home-hot .hot-gear-list{
    padding-left:calc(var(--gutter) + var(--safe-area-left));
    padding-right:calc(var(--gutter) + var(--safe-area-right));
  }
  .app:not(.system-wide) .home-hot .rk{
    flex-basis:min(232px,calc(100vw - var(--gutter) - var(--gutter)));
    min-width:0;
  }
  .app:not(.system-wide) .home-community .testc{
    margin-left:calc(var(--gutter) + var(--safe-area-left));
    margin-right:calc(var(--gutter) + var(--safe-area-right));
    min-width:0;
    padding:var(--s4);
  }
  .app:not(.system-wide) .home-community .community-copy .t-num{font-size:var(--sb-fs-page-m);font-weight:var(--sb-fw-title);line-height:1.25;overflow-wrap:anywhere}
  .app:not(.system-wide) .home-community .community-copy .t-small{font-size:var(--font-size-body);line-height:1.6}
  .app:not(.system-wide) .home-community .testc .btn{min-height:44px}
  .app:not(.system-wide) .home-section .sh .more{min-height:var(--tap-target);display:inline-flex;align-items:center}
}

/* Keep the Hero in the same reading canvas as the content below it.  The
 * shared gutter is applied to the outer visual here, so the copy inside the
 * Hero starts on exactly the same vertical line as section headings/cards. */
.app:not(.system-wide)>.hero{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  border-radius:0;
  overflow:visible;
}
body{overflow-x:hidden}

/* Tablet: use the same reading order with a wider framed canvas. */
@media (min-width:521px) and (max-width:899px){
  body{background:var(--sb-bg)}
  .app:not(.system-wide){--gutter:40px;max-width:720px;overflow:hidden;box-shadow:0 0 0 1px var(--line),var(--e1)}
  .app:not(.system-wide)>.tabbar{width:min(720px,100%)}
  .app:not(.system-wide) .hero{height:660px}
  .app:not(.system-wide) .hero .ct{padding-bottom:32px}
  .app:not(.system-wide) .cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app:not(.system-wide) .home-categories .primer-list{gap:var(--s4)}
  .app:not(.system-wide) .home-community .testc{min-height:250px;padding:var(--s5)}
  .app:not(.system-wide) .home-community .testc{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.9fr);align-items:end;gap:var(--s6)}
  .app:not(.system-wide) .home-community .steps{margin-top:0}
}

/* Phone: full-width canvas, short controls and a one-column community card. */
@media (max-width:899px){
  .desktop-nav{display:none}
  .home-community .testc{width:auto}
  /* Reserve the fixed tab bar so the last line can scroll clear of it. */
  .app:not(.system-wide){padding-bottom:calc(64px + var(--safe-area-bottom))}
}

@media (max-width:520px){
  .app:not(.system-wide){overflow:hidden}
  .app:not(.system-wide) .hero{height:clamp(480px,135vw,600px);overflow:hidden}
  .app:not(.system-wide) .hero>img,
  .app:not(.system-wide) .hero::before,
  .app:not(.system-wide) .hero::after{height:62%}
  .app:not(.system-wide) .hero>img{height:62%;object-position:35% 50%}
  /* Finish the night fade at the image edge, rather than leaving a hard seam
   * behind the first title line. Keep the skier/board clear through ≈65%. */
  .app:not(.system-wide) .hero::after{background:linear-gradient(180deg,rgba(var(--night-rgb),.55) 0%,rgba(var(--night-rgb),0) 20%,rgba(var(--night-rgb),0) 65%,rgba(var(--night-rgb),.55) 88%,var(--night) 100%)}
  .hero .ct{padding-bottom:24px}
  .home-content{overflow:hidden;padding-bottom:var(--s6)}
  .home-hot .rk{flex-basis:min(232px,78vw)}
  .home-community .testc{min-height:280px;padding:var(--s5)}
  .home-community .steps{margin-top:var(--s5)}
  .primer-list{gap:var(--s3)}
  .primer-acts{gap:var(--s2)}
  .primer-acts .btn{min-height:44px}
}

/* Desktop: wide hero, top navigation, four category columns, a five-card
 * equipment rail and a full-width community section. */
@media (min-width:900px){
  body{background:var(--sb-bg)}
  .app:not(.system-wide){
    --gutter:64px;
    max-width:1180px;
    overflow:visible;
    box-shadow:0 0 0 1px var(--line),var(--e1)
  }
  .app:not(.system-wide) .ann{padding-left:var(--gutter);padding-right:var(--gutter)}
  .app:not(.system-wide) .home-header{padding-left:var(--gutter);padding-right:var(--gutter)}
  .app:not(.system-wide) .desktop-nav{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:var(--s4)}
  .app:not(.system-wide) .desktop-nav a{min-height:44px;padding:0 12px;border-radius:var(--r-ctl);display:inline-flex;align-items:center;color:var(--on-night-2);font-size:13px;font-weight:500;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
  .app:not(.system-wide) .desktop-nav a:hover,.app:not(.system-wide) .desktop-nav a:focus-visible{background:var(--nline);color:var(--on-night)}
  .app:not(.system-wide) .desktop-nav a.on{color:var(--on-night);background:var(--nline)}
  .app:not(.system-wide) .home-header .r .btn-icon[aria-label="关于"]{display:none}
  .app:not(.system-wide) .hero{height:600px;overflow:hidden;isolation:isolate}
  /* Source skier is ≈46% across; 0.46 × 148% places it at ≈68% of the hero. */
  .app:not(.system-wide) .hero>img{left:0;top:0;width:148%;height:100%;max-width:none;object-fit:cover;object-position:0% 67%}
  .app:not(.system-wide) .hero::before,.app:not(.system-wide) .hero::after{inset:0;height:100%}
  .app:not(.system-wide) .hero::after{background:linear-gradient(180deg,rgba(var(--night-rgb),0) 62%,rgba(var(--night-rgb),.42) 82%,var(--night) 100%),linear-gradient(90deg,var(--night) 0%,rgba(var(--night-rgb),.88) 30%,rgba(var(--night-rgb),.55) 52%,rgba(var(--night-rgb),.12) 70%,rgba(var(--night-rgb),.05) 100%)}
  .app:not(.system-wide) .hero .ct{left:0;right:auto;top:0;bottom:0;width:min(660px,60%);max-width:none;padding:132px 0 56px var(--gutter);justify-content:flex-end}
  .app:not(.system-wide) .hero .t-display{font-size:clamp(44px,5vw,64px)}
  .app:not(.system-wide) .hero p{max-width:min(540px,var(--sb-measure));font-size:var(--sb-fs-long);line-height:var(--sb-lh);text-align:left}
  .app:not(.system-wide) .hero .sbox{width:min(560px,100%);max-width:560px}
  .app:not(.system-wide) .home-content{padding-bottom:var(--s8)}
  .app:not(.system-wide) .home-categories .cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
  .app:not(.system-wide) .home-categories .primer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .app:not(.system-wide) .home-categories .primer{height:100%}
  .app:not(.system-wide) .home-hot .hot-gear-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
  .app:not(.system-wide) .home-hot .rk{min-width:0;flex-basis:auto}
  .app:not(.system-wide) .home-community .testc{min-height:280px;padding:var(--s6);display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);align-items:end;gap:var(--s8)}
  .app:not(.system-wide) .home-community .steps{margin-top:0}
  .app:not(.system-wide)>.tabbar{display:none}
  .app:not(.system-wide)>.disc{padding-left:var(--gutter);padding-right:var(--gutter);border-top:1px solid var(--line)}
}

@media (min-width:1200px){
  .app:not(.system-wide) .hero .ct{padding-left:72px}
  .app:not(.system-wide) .ann,.app:not(.system-wide) .home-header{padding-left:72px;padding-right:72px}
  .app:not(.system-wide){--gutter:72px}
}

@media (min-width:900px) and (max-width:1199px){
  .app:not(.system-wide) .hero .ct{width:min(660px,70%)}
}