/* ==========================================================================
   Limitless Local Resources — hub (/resources/) + trade hubs (/resources/<cat>/).
   Builds on css/archive.css tokens. Canonical copy:
   LIMITLESS/platform/tools/answer-library/wp/theme/css/hub.css
   ========================================================================== */

/* hero */
.ll-hub-hero{background-color:#001b52;background-size:cover;background-position:center;padding:84px 24px 76px;font-family:var(--ll-font)}
.ll-hub-hero-in{max-width:860px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.ll-hub-hero-pill{display:inline-block;background:rgba(255,255,255,.1);border-radius:100px;padding:8px 18px;color:rgba(255,255,255,.6);font-size:14px;font-weight:300;margin:0}
.ll-hub-hero h1{color:#fff;font-size:clamp(34px,5.2vw,58px);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:18px 0 18px}
.ll-hub-hero h1 span{background:var(--ll-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ll-hub-hero-text{color:rgba(255,255,255,.75);font-size:18px;font-weight:300;line-height:1.6;max-width:680px;margin:0 0 30px}
.ll-hub-hero-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.ll-hub-hero .ll-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ll-gold-btn);color:var(--ll-navy);font-weight:800;font-size:15px;padding:15px 24px;border-radius:999px;white-space:nowrap;line-height:1.2;text-decoration:none;transition:transform .2s,box-shadow .2s}
.ll-hub-hero .ll-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(189,108,9,.45);color:var(--ll-navy)}
.ll-hub-hero .ll-btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff;font-weight:700}
.ll-hub-hero .ll-btn.ghost:hover{background:rgba(255,255,255,.12);box-shadow:none;color:#fff}
.ll-hub-hero .ll-btn svg{width:11px;height:11px;flex:none}
.ll-hub-hero-note{color:rgba(255,255,255,.45);font-size:13.5px;font-weight:300;margin:26px 0 0}

/* shared */
.ll-hub-body{padding-top:56px}
.ll-hub-h2{font-size:clamp(26px,3.2vw,36px);line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--ll-navy);margin:0 0 22px}
.ll-hub-h2 a{color:var(--ll-navy)!important}
.ll-hub-h2 a:hover{color:var(--ll-gold-1)!important}
.ll-hub-sub{font-size:20px;font-weight:800;color:var(--ll-navy);margin:0 0 16px;letter-spacing:-.01em}
.ll-hub-intro{color:var(--ll-muted);font-size:16px;margin:-10px 0 0;max-width:720px;line-height:1.6}

/* 3x2 trade cards */
.ll-hub-trades{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ll-hub-trade{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ll-line);border-radius:var(--ll-radius);box-shadow:var(--ll-shadow-sm);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;color:var(--ll-ink)!important}
a.ll-hub-trade:hover{transform:translateY(-3px);box-shadow:var(--ll-shadow);border-color:#f0c86277}
.ll-hub-trade-media{display:block;aspect-ratio:16/8;overflow:hidden;background:var(--ll-soft)}
.ll-hub-trade-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
a.ll-hub-trade:hover .ll-hub-trade-media img{transform:scale(1.04)}
.ll-hub-trade-body{display:flex;flex-direction:column;padding:16px 18px 18px;flex:1}
.ll-hub-trade-title{font-size:20px;font-weight:800;color:var(--ll-navy);letter-spacing:-.01em;line-height:1.2}
.ll-hub-trade-blurb{font-size:14px;color:var(--ll-muted);line-height:1.5;margin:6px 0 12px;flex:1}
.ll-hub-trade-meta{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ll-gold-1)}
.ll-hub-trade-meta .go{width:28px;height:28px;border-radius:50%;background:var(--ll-gold-grad);display:grid;place-items:center;color:#fff}
.ll-hub-trade-meta .go svg{width:10px;height:10px}
div.ll-hub-trade{opacity:.6}
div.ll-hub-trade .ll-hub-trade-meta{color:var(--ll-muted)}

/* trade sections */
.ll-hub-section{margin-top:72px}
.ll-hub-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px;padding-top:28px;border-top:1px solid var(--ll-line)}
.ll-hub-viewall{flex:none}
.ll-hub-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}
.ll-hub-pin{position:relative}
.ll-hub-pin:after{content:"Featured";position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ll-navy);padding:5px 10px;border-radius:999px}

#content .ll-hub-featured .ll-arch-card-title{font-size:20px;line-height:1.28}
.ll-hub-featured .ll-arch-pill,.ll-hub-cat .ll-arch-pill{display:none}
#content .ll-hub .ll-arch-card-title,#content .ll-hub-cat .ll-arch-card-title,#content .ll-hub .ll-arch-card-title a,#content .ll-hub-cat .ll-arch-card-title a{font-weight:700;font-family:var(--ll-font)}
#content .ll-hub-cat .ll-arch-grid .ll-arch-card-title{font-size:19px;line-height:1.28}
.ll-hub-featured .ll-arch-card-body{padding-top:18px}
#content .ll-hub-h2,#content .ll-hub-h2 a{font-weight:800;font-family:var(--ll-font)}
#content .ll-hub-track .ll-arch-card-title{font-size:16px;line-height:1.3}

/* carousel: 4 visible, scroll-snap, arrows */
.ll-hub-carousel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ll-hub-carousel-head .ll-hub-sub{margin:0}
.ll-hub-carousel-nav{display:flex;gap:8px}
.ll-hub-carousel-nav button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ll-line);background:#fff;color:var(--ll-navy);font-size:18px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.ll-hub-carousel-nav button:hover:not(:disabled){background:var(--ll-gold-grad);border-color:transparent}
.ll-hub-carousel-nav button:disabled{opacity:.35;cursor:default}
.ll-hub-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*20px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:12px 2px 18px;scrollbar-width:none}
.ll-hub-track::-webkit-scrollbar{display:none}
.ll-hub-track>.ll-arch-card{scroll-snap-align:start}
.ll-hub-track .ll-arch-card-title{font-size:16.5px}
.ll-hub-track .ll-arch-card-ex{display:none}
.ll-hub-track .ll-arch-card-go{display:none}
.ll-hub-track .ll-arch-card-body{padding:14px 16px 16px}
.ll-hub-track .ll-arch-pill{display:none}

/* category hub */
.ll-hub-cat-head{max-width:780px;margin:0 0 22px}
.ll-hub-cat-money{margin:12px 0 0;font-weight:700}
.ll-hub-cat .ll-hub-section{margin-top:34px}
.ll-hub-cat .ll-hub-featured{margin-bottom:10px}

@media (max-width:1024px){
	.ll-hub-trades,.ll-hub-featured{grid-template-columns:repeat(2,1fr)}
	.ll-hub-track{grid-auto-columns:calc((100% - 20px)/2)}
}
@media (max-width:700px){
	.ll-hub-hero{padding:56px 16px 52px}
	.ll-hub-hero-text{font-size:16px}
	.ll-hub-trades{grid-template-columns:1fr 1fr;gap:12px}
	.ll-hub-trade-media{aspect-ratio:16/10}
	.ll-hub-trade-body{padding:12px 12px 14px}
	.ll-hub-trade-title{font-size:16px}
	.ll-hub-trade-blurb{display:none}
	.ll-hub-featured{grid-template-columns:1fr;gap:12px}
	.ll-hub-featured .ll-arch-card{flex-direction:row}
	.ll-hub-featured .ll-arch-card-media{width:36%;flex:none;aspect-ratio:auto;min-height:104px}
	.ll-hub-featured .ll-arch-card-body{padding:12px 14px}
	#content .ll-hub-featured .ll-arch-card-title{font-size:16px;margin:0 0 6px}
	.ll-hub-featured .ll-arch-card-ex,.ll-hub-featured .ll-arch-card-go{display:none}
	.ll-hub-pin:after{top:8px;left:8px;font-size:9.5px;padding:3px 7px}
	.ll-hub-section{margin-top:52px}
	.ll-hub-section-head{flex-direction:column;align-items:flex-start}
	.ll-hub-viewall{width:100%}
	.ll-hub-track{grid-auto-columns:82%}
}
