/* ============================================================
   BUNKROS LEARNING hub (2026-09-27)
   V1 hero · V2 broadcast + rainbow · V3 Prism · V4 modules · AI Tips
   ============================================================ */
.learning-hub { --rb: linear-gradient(90deg, #ff3b3b, #ff9f1c, #ffe14d, #2ee59d, #22c3ff, #7a5cff, #ff4fd8); }
.ln-h2 { font: 900 var(--fs-h2)/1.02 var(--font-heading); text-transform: uppercase; letter-spacing: -.01em; margin: 14px 0 14px; }
.ln-h2 em { font-style: normal; background: var(--rb); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* V1 */
.ln-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (min-width: 768px) and (max-width: 1199px) { .ln-hero .hero-content { padding-inline: 56px 76px; } }

/* V2 broadcast */
.ln-broadcast { overflow: hidden; }
.ln-rainbow { background: var(--rb) !important; background-size: 200% 100% !important; animation: lnRb 12s linear infinite; }
@keyframes lnRb { to { background-position: 200% 0; } }
.ln-rainbow .marquee-item { color: #0a0a0f !important; font-weight: 800; }
.ln-rainbow .marquee-divider { background: #0a0a0f !important; }
.ln-broadcast-inner { width: min(1280px, 100%); margin: 0 auto; box-sizing: border-box; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ln-tv { margin: 0; border-radius: 24px; overflow: hidden; background: #000; position: relative; padding: 3px;
    background: var(--rb); background-size: 200% 100%; animation: lnRb 10s linear infinite; box-shadow: 0 40px 90px -40px rgba(122,92,255,.8); }
.ln-tv figcaption { display: flex; justify-content: space-between; padding: 10px 14px; background: #07070b; border-radius: 21px 21px 0 0; font: 700 .72rem/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: #d6d6e6; text-transform: uppercase; }
.ln-rec { display: inline-flex; align-items: center; gap: 8px; }
.ln-rec b { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; animation: lnBlink 1.2s steps(2) infinite; }
@keyframes lnBlink { 50% { opacity: .2; } }
.ln-tv video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0 0 21px 21px; background: #000; }
.ln-broadcast-copy p { color: var(--text-secondary); font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); line-height: 1.65; max-width: 48ch; }
.ln-stats { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ln-stats li { padding: 14px; border-radius: 16px; background: var(--sh-surface); border: 1px solid var(--sh-border); display: flex; flex-direction: column; gap: 6px; }
.ln-stats b { font: 900 clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem)/1 var(--font-heading); background: var(--rb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ln-stats span { font: 700 .72rem/1.2 var(--font-accent); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }

/* V3 Prism */
.ln-prism { isolation: isolate; }
.ln-prism::before { content: ''; position: absolute; inset: -20%; z-index: -1; background: conic-gradient(from 200deg at 50% 50%, rgba(255,59,59,.16), rgba(255,159,28,.12), rgba(255,225,77,.1), rgba(46,229,157,.12), rgba(34,195,255,.14), rgba(122,92,255,.16), rgba(255,79,216,.14), rgba(255,59,59,.16)); filter: blur(60px); animation: lnSpin 40s linear infinite; }
@keyframes lnSpin { to { transform: rotate(360deg); } }
.ln-prism-head { width: min(1280px, 100%); margin: 0 auto; text-align: center; }
.ln-prism-head p { color: var(--text-secondary); max-width: 60ch; margin: 0 auto; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6; }
.ln-prism-grid { list-style: none; margin: 0 auto; padding: 0; width: min(1280px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.ln-pillar { position: relative; padding: clamp(20px, 2.2vw, 30px); border-radius: 24px; background: color-mix(in srgb, var(--bg-surface) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--sh-border); overflow: hidden; transition-delay: calc(var(--i) * 90ms); }
.ln-pillar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rb); background-size: 400% 100%; background-position: calc(var(--i) * 33%) 0; }
.ln-pillar-no { font: 900 2.6rem/1 var(--font-heading); background: var(--rb); background-size: 400% 100%; background-position: calc(var(--i) * 33%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ln-pillar h3 { font: 800 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.15 var(--font-heading); margin: 12px 0 10px; }
.ln-pillar p { color: var(--text-secondary); line-height: 1.6; margin: 0; font-size: .98rem; }

/* V4 modules */
.ln-modules { width: min(1320px, 100%); margin: 0 auto; box-sizing: border-box; padding: clamp(50px, 9vh, 100px) var(--gutter) 40px; }
.ln-modules-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ln-search { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 8px 0 16px; border-radius: 16px; background: var(--sh-surface); border: 1.5px solid var(--sh-border-2); width: min(460px, 100%); box-sizing: border-box; }
.ln-search:focus-within { border-color: var(--sh-accent); }
.ln-search i { color: var(--text-secondary); }
.ln-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--sh-text); font: 500 16px/1.2 var(--font-body); min-height: 44px; }
.ln-count { flex: none; font: 700 .72rem/1 var(--font-accent); letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px; border-radius: 10px; background: var(--sh-surface-2); color: var(--text-secondary); }
.ln-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.ln-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.ln-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--sh-text) !important; background: var(--bg-surface); border: 1px solid var(--sh-border); transition: transform .45s var(--sh-spring), box-shadow .3s, border-color .3s; }
.ln-card:hover { transform: translateY(-5px); border-color: rgba(var(--sh-accent-rgb), .5); box-shadow: 0 26px 50px -30px rgba(var(--sh-accent-rgb), .8); }
.ln-card:active { transform: scale(.98); }
.ln-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.ln-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sh-ease); }
.ln-card:hover .ln-card-media img { transform: scale(1.06); }
.ln-card-badge { position: absolute; left: 10px; top: 10px; padding: 6px 9px; border-radius: 9px; font: 800 .68rem/1 var(--font-accent); letter-spacing: .14em; text-transform: uppercase; color: #0a0a0f; background: #22c3ff; }
.ln-card-badge[data-type="applied"] { background: #2ee59d; }
.ln-card-badge[data-type="ethics"] { background: #ffe14d; }
.ln-card-badge[data-type="generative"] { background: #ff4fd8; }
.ln-card-no { position: absolute; right: 10px; top: 10px; padding: 6px 8px; border-radius: 9px; background: rgba(10,10,15,.65); color: #fff; font: 700 .7rem/1 var(--font-accent); }
.ln-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.ln-card-title { font: 800 1.12rem/1.2 var(--font-heading); }
.ln-card-title i { color: var(--sh-accent); margin-right: 4px; font-size: .95rem; }
.ln-card-desc { color: var(--text-secondary); font-size: .95rem; line-height: 1.5; }
.ln-card-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 800 .78rem/1 var(--font-accent); letter-spacing: .12em; text-transform: uppercase; color: var(--sh-accent); }
.ln-card[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ln-empty { display: none; text-align: center; color: var(--text-secondary); padding: 30px 0; }

/* AI Tips */
.ln-tips { width: min(1320px, 100%); margin: 0 auto; box-sizing: border-box; padding: clamp(50px, 9vh, 100px) var(--gutter) clamp(50px, 8vh, 90px); }
.ln-tips-head p { color: var(--text-secondary); margin: 0 0 20px; }
.ln-tips-strip { list-style: none; margin: 0; padding: 4px 0 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; }
.ln-tip { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: 6px; border-radius: 22px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--sh-border); padding-bottom: 18px; }
.ln-tip img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ln-tip-no { position: absolute; top: 10px; left: 10px; padding: 6px 9px; border-radius: 9px; background: var(--sh-grad); color: #fff; font: 800 .7rem/1 var(--font-accent); letter-spacing: .1em; text-transform: uppercase; }
.ln-tip strong { padding: 8px 16px 0; font: 800 1.08rem/1.25 var(--font-heading); }
.ln-tip > span:last-child { padding: 0 16px; color: var(--text-secondary); line-height: 1.5; font-size: .95rem; }

/* breakpoints */
@media (min-width: 1024px) and (max-width: 1199px) {
    .ln-broadcast-inner, .ln-modules, .ln-tips, .ln-prism { padding-right: calc(var(--gutter) + 56px); }
    .ln-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ln-prism-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .ln-broadcast-inner { grid-template-columns: 1fr; padding-right: calc(var(--gutter) + 56px); }
    .ln-prism, .ln-modules, .ln-tips { padding-right: calc(var(--gutter) + 56px); }
    .ln-prism-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ln-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ln-tips-strip { grid-auto-columns: 42%; }
}
@media (max-width: 767px) {
    .ln-broadcast { min-height: auto; padding-bottom: 40px; gap: 24px; }
    .ln-broadcast-inner { grid-template-columns: 1fr; padding: 0 16px; }
    .ln-tv { border-radius: 18px; }
    .ln-prism { min-height: auto; padding: 50px 16px; }
    .ln-prism-head { text-align: left; }
    .ln-prism-head p { margin: 0; }
    .ln-prism-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 12px; width: auto; }
    .ln-pillar { scroll-snap-align: center; }
    .ln-modules { padding: 44px 16px 20px; }
    .ln-search { width: 100%; }
    .ln-filters { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 18px; padding: 0 16px; scrollbar-width: none; }
    .ln-filters::-webkit-scrollbar { display: none; }
    .ln-filters .bk-chip { flex: none; }
    .ln-grid { grid-template-columns: 1fr; }
    .ln-card { flex-direction: row; }
    .ln-card-media { width: 38%; flex: none; aspect-ratio: auto; }
    .ln-card-desc { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .ln-card-body { padding: 12px 14px 12px; }
    .ln-tips { padding: 44px 16px 40px; }
    .ln-tips-strip { grid-auto-columns: 78%; margin: 0 -16px; padding: 4px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ln-prism::before, .ln-rainbow, .ln-tv { animation: none; } }

/* ===== 2026-09-28 viewport pass: broadcast + Prism are clean scenes (.vp) ===== */
.ln-hero { scroll-snap-align: start; }
.ln-hero .hero-content { padding-top: var(--sh-top-h); padding-bottom: var(--sh-bot-h); }
.vp.ln-broadcast { padding-left: 0; padding-right: 0; overflow: hidden; }
.vp.ln-broadcast > .ln-rainbow { width: 100%; }
.vp.ln-broadcast > .ln-broadcast-inner { padding-inline: var(--vp-pad-x); width: min(1400px, 100%); }
.vp.ln-prism { overflow: hidden; }
.vp.ln-prism .ln-prism-head, .vp.ln-prism .ln-prism-grid { width: min(1280px, 100%); }
.ln-pillar { display: flex; flex-direction: column; }
.ln-modules, .ln-tips { scroll-snap-align: start; scroll-margin-top: var(--sh-top-h); }
@media (min-width: 768px) and (max-height: 860px) {
    .ln-pillar-no { font-size: 2rem; }
    .ln-pillar p { font-size: .92rem; }
    .ln-tv video { aspect-ratio: 16 / 9; max-height: 52svh; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .vp.ln-broadcast > .ln-broadcast-inner { grid-template-columns: 1fr; padding-right: var(--vp-pad-x); }
    .ln-tv video { aspect-ratio: 16 / 9; }
    .vp.ln-prism { padding-right: var(--vp-pad-x); }
}
@media (max-width: 767px) {
    .vp.ln-broadcast { min-height: 100dvh; padding-bottom: calc(var(--sh-bot-h) + 16px); }
    .vp.ln-broadcast > .ln-broadcast-inner { padding-inline: 16px; gap: 18px; }
    .ln-broadcast-copy p { font-size: .95rem; margin: 0; }
    .ln-stats { margin-top: 14px; }
    .ln-stats li { padding: 10px; }
    .vp.ln-prism { min-height: 100dvh; padding-left: 16px; padding-right: 16px; }
    .ln-prism-grid { grid-auto-columns: 84%; }
    .ln-pillar { padding: 20px; }
}
@media (max-width: 767px) and (max-height: 700px) {
    .ln-broadcast-copy p { display: none; }
    .ln-tv video { aspect-ratio: 16 / 9; }
    .ln-pillar p { font-size: .9rem; }
}
.vp.ln-tips { padding-left: var(--vp-pad-x); padding-right: var(--vp-pad-x); width: auto; }
.vp.ln-tips > * { width: min(1320px, 100%); }
.ln-tip img { aspect-ratio: 4 / 3; }
@media (min-width: 768px) and (max-width: 1023px) {
    .ln-prism-grid { gap: 12px; }
    .ln-pillar { padding: 18px 20px; }
    .ln-pillar-no { font-size: 1.9rem; }
    .ln-pillar p { font-size: .92rem; }
}
@media (max-width: 767px) and (max-height: 700px) {
    .ln-hero .hero-headline, .ln-hero .hero-headline-word { font-size: 2.1rem !important; }
    .ln-hero .hero-subtitle { font-size: .92rem !important; margin-bottom: 16px !important; }
    .ln-hero .hero-scroll-indicator { display: none; }
    .ln-hero .hero-cta { flex-direction: row !important; gap: 10px; }
    .ln-hero .hero-cta .cta-btn { flex: 1 1 0; padding: 0 .6rem; white-space: nowrap; }
    .ln-prism-head p { font-size: .88rem; }
    .ln-pillar { padding: 16px 18px; }
    .ln-pillar-no { font-size: 1.8rem; }
    .ln-pillar h3 { margin: 6px 0; }
    .ln-tips-head p { display: none; }
}
@media (max-width: 767px) { .ln-tips-strip { grid-auto-columns: 78%; } .ln-tip img { aspect-ratio: 16 / 11; } }