/* official-s16-lol.com.cn — editorial design 42 */
:root { --bg:#11131c; --surface:#1b2030; --text:#f7f4ef; --accent:#ed7958; --secondary:#e5c36b; --line:#ed795855; --radius:23px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font:16px/1.8 "Microsoft YaHei",Arial,sans-serif; }
a { color:var(--accent); text-decoration:none; } .topbar { position:sticky; top:0; z-index:5; background:#11131cf2; border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.nav-wrap { max-width:1240px; margin:auto; padding:15px 24px; display:flex; flex-direction:column; gap:9px; } .brand { font-size:1.2rem; font-weight:850; color:var(--text); letter-spacing:.03em; } .nav-links { display:flex; flex-wrap:wrap; gap:7px 19px; } .nav-links a { color:var(--text); font-size:.91rem; }
main { max-width:1240px; margin:auto; padding:32px 24px 78px; } .hero { padding:clamp(24px,5vw,58px); background:linear-gradient(125deg,var(--surface),#ed795818); border:1px solid var(--line); border-radius:var(--radius); position:relative; overflow:hidden; }
.hero:after { content:""; position:absolute; width:280px; height:280px; right:-100px; top:-110px; border-radius:50%; background:radial-gradient(circle,#e5c36b66,transparent 70%); } .eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:800; } h1 { font-size:clamp(2rem,5vw,3.6rem); line-height:1.25; max-width:1000px; margin:12px 0 18px; } .hero p { max-width:1000px; font-size:1.05rem; margin:0; }
.brand-intro { margin:30px 0 46px; padding:27px 30px; border-left:4px solid var(--accent); background:var(--surface); } .brand-intro p { margin:0; line-height:2; } section { margin:46px 0; scroll-margin-top:120px; } .section-title { display:flex; align-items:end; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:20px; } h2 { font-size:clamp(1.45rem,3vw,2.15rem); margin:0; } h3 { line-height:1.45; } .news-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.news-card,.faq-card,.topic-card,.community-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; } .news-card:nth-child(2) { border-top:3px solid var(--accent); } .news-card h3 { margin:9px 0; font-size:1.19rem; } .news-card p { margin:0; } .meta { color:#aebbc8; font-size:.83rem; letter-spacing:.04em; } .faq-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } details summary { cursor:pointer; font-weight:750; } .answer { color:#c4cfda; } .topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; } .topic-card h3 { margin:0 0 8px; color:var(--accent); } .community-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } footer { border-top:1px solid var(--line); padding:24px; text-align:center; color:#aebbc8; }
@media(max-width:720px) { .nav-wrap { padding:12px 16px; } main { padding:18px 14px 54px; } .news-grid,.faq-list,.topic-grid,.community-grid { grid-template-columns:1fr; } .hero { padding:24px 20px; } .brand-intro { padding:21px; } }

.schedule-card{padding:24px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius)}.schedule-timeline{display:grid;gap:12px;padding-left:24px}.schedule-timeline li{padding:12px 14px;border-left:3px solid var(--accent)}.schedule-timeline strong,.schedule-timeline span{display:block}.schedule-note{font-size:.9rem;opacity:.82}.match-table-wrap{overflow-x:auto;margin:20px 0}.match-table{width:100%;border-collapse:collapse;min-width:690px;background:var(--bg)}.match-table caption{text-align:left;font-size:1.1rem;font-weight:750;padding:12px 0;color:var(--accent)}.match-table th,.match-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}.match-table th{color:var(--accent);white-space:nowrap}.match-table tbody tr:nth-child(even){background:var(--surface)}

.brand-intro{display:grid;grid-template-columns:150px 1fr;gap:24px}.brand-intro:before{content:"赛事视角";color:var(--accent);font-weight:800}.news-card{box-shadow:7px 7px 0 color-mix(in srgb,var(--accent) 17%,transparent)}

/* layout family 10 */
.hero{clip-path:polygon(0 0,96% 0,100% 14%,100% 100%,4% 100%,0 86%);border:0}.brand-intro{border:1px solid var(--line);border-radius:var(--radius) 0}.topic-grid{gap:22px}.topic-card{box-shadow:0 12px 32px #0003}

/* Per-site layout recipe 26: official-s16-lol.com.cn; responsive composition 02 */
body.site-design-26 {
  --site-measure: 1200px;
  --site-space: 30px;
  --site-radius: 9px;
}
main { max-width: var(--site-measure); }
.section-title { gap: var(--site-space); }
.news-card, .topic-card, .faq-card { border-radius: var(--site-radius); }
.hero-visual, .article-image { overflow:hidden; }
.hero-visual img, .article-image img { display:block; width:100%; height:100%; object-fit:cover; }
.hero-visual { min-width:0; min-height:220px; border-radius:calc(var(--site-radius) + 4px); }
.article-image { margin:0 0 14px; aspect-ratio:1.47 / 1; border-radius:calc(var(--site-radius) - 2px); }
.site-map-rss { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:14px auto; }

.nav-wrap { flex-direction:row; align-items:center; justify-content:space-between; }
.brand { flex:0 0 auto; }
.nav-links { justify-content:flex-end; max-width:78%; }
.hero { display:flex; flex-direction:column; }
.hero > .hero-visual { order:2; width:100%; max-height:360px; }
.news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.news-card { border-radius:4px; border-top:4px solid var(--accent); }
.topic-grid { display:flex; flex-wrap:wrap; gap:18px; }
.topic-card { flex:1 1 28%; }
.faq-list { display:grid; grid-template-columns:1fr; }
@media(max-width:760px){.nav-wrap{flex-direction:column;align-items:flex-start}.nav-links{max-width:100%}.news-grid{grid-template-columns:1fr}.topic-card{flex-basis:100%}}

/* Uploaded assets are 128px square icons: keep them compact, never as blown-up covers. */
body.site-design-26 .hero { position:relative !important; padding:22px 22px 22px 122px !important; min-height:120px !important; }
body.site-design-26 .hero > .hero-visual { position:absolute !important; inset:auto !important; top:22px !important; left:22px !important; width:76px !important; height:76px !important; min-height:76px !important; max-height:76px !important; margin:0 !important; padding:0 !important; opacity:1 !important; grid-column:auto !important; grid-row:auto !important; border-radius:10px !important; }
body.site-design-26 .hero > .hero-visual img { display:block; width:76px !important; height:76px !important; max-width:76px !important; max-height:76px !important; object-fit:contain !important; }
body.site-design-26 .news-card .article-image { float:none; display:block; width:48px !important; height:48px !important; min-height:48px !important; max-width:48px !important; max-height:48px !important; aspect-ratio:1 / 1 !important; margin:0 10px 8px 0 !important; grid-column:auto !important; grid-row:auto !important; border-radius:7px !important; }
body.site-design-26 .news-card .article-image img { display:block; width:48px !important; height:48px !important; max-width:48px !important; max-height:48px !important; object-fit:contain !important; }

@media(max-width:680px) {
  .site-map-rss { gap:10px; }
  body.site-design-26 .hero { padding:108px 16px 18px !important; }
  body.site-design-26 .hero > .hero-visual { top:14px !important; left:16px !important; }
}