/* =====================================================================
   隆昌市图书馆 - 前端样式 (扁平化 + 响应式)
   ===================================================================== */
:root{
  --primary:#1a6fb5;
  --primary-dark:#124e80;
  --accent:#e8663d;
  --accent2:#17a589;
  --bg:#f4f7fa;
  --card:#ffffff;
  --text:#2c3e50;
  --muted:#7a8794;
  --line:#e6ecf2;
  --shadow:0 6px 20px rgba(20,60,110,.08);
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:15px}
a{color:inherit;text-decoration:none;transition:.25s}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.clearfix::after{content:"";display:block;clear:both}

/* ---------- 顶部 ---------- */
.topbar{background:var(--primary-dark);color:#dbe8f5;font-size:13px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{color:#dbe8f5}
.topbar a:hover{color:#fff}

.header{background:var(--card);box-shadow:var(--shadow);top:0;z-index:100}
.header .container{display:flex;align-items:center;justify-content:space-between;height:88px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:14px}
.logo .mark{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent2));display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700;box-shadow:0 4px 12px rgba(26,111,181,.35)}
.logo h1{font-size:24px;color:var(--primary-dark);letter-spacing:1px}
.logo p{font-size:12px;color:var(--muted);letter-spacing:3px}

/* ---------- 导航 ---------- */
.nav{background:var(--primary)}
.nav .container{display:flex;flex-wrap:wrap}
.nav a{color:#fff;padding:15px 26px;font-size:16px;position:relative;font-weight:500}
.nav a::after{content:"";position:absolute;left:50%;bottom:8px;width:0;height:3px;background:var(--accent);transition:.3s;transform:translateX(-50%);border-radius:2px}
.nav a:hover,.nav a.active{background:var(--primary-dark)}
.nav a:hover::after,.nav a.active::after{width:60%}
.nav-toggle{display:none}

/* ---------- 通用板块 ---------- */
.section{margin:34px 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;border-bottom:2px solid var(--line);padding-bottom:10px}
.sec-head h2{font-size:22px;color:var(--primary-dark);position:relative;padding-left:16px}
.sec-head h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:22px;background:var(--accent);border-radius:3px}
.sec-head .more{font-size:13px;color:var(--muted)}
.sec-head .more:hover{color:var(--accent)}

/* ---------- 首页顶部: 动态 + 轮播 ---------- */
.hero{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;margin:28px 0}
/* 轮播 16:9 */
.slider{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#000}
.slider .slides{position:relative;width:100%;padding-top:56.25%}
.slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s;background-size:cover;background-position:center}
.slider .slide.active{opacity:1}
.slider .slide .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 20px 16px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:17px;font-weight:600}
.slider .dots{position:absolute;bottom:14px;right:16px;display:flex;gap:8px;z-index:5}
.slider .dots span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.3s}
.slider .dots span.on{background:var(--accent);width:26px;border-radius:6px}
.slider .arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,.35);color:#fff;border:none;font-size:22px;cursor:pointer;z-index:5;border-radius:50%;transition:.3s}
.slider .arrow:hover{background:var(--accent)}
.slider .prev{left:12px}.slider .next{right:12px}

/* 工作动态列表 */
.news-box{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;display:flex;flex-direction:column}
.news-box .sec-head{margin-bottom:12px}
.news-list{list-style:none;flex:1}
.news-list li{display:flex;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line);gap:10px}
.news-list li:last-child{border-bottom:none}
.news-list .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.news-list .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news-list li:hover .t{color:var(--primary);padding-left:4px}
.news-list .d{color:var(--muted);font-size:13px;flex:none}

/* ---------- 首页: 公告信息 + 站内检索 两栏并排 ---------- */
.home-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:34px 0;align-items:stretch}
.home-split .hs-col{min-width:0;display:flex}
.home-split .hs-col>div{flex:1}

/* ---------- 首页快捷服务图标（6 个并列一行） ---------- */
.quick-icons{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin:34px 0;text-align:center}
.quick-icons .qi{display:flex;flex-direction:column;align-items:center;gap:11px;padding:20px 8px;border-radius:16px;background:#fff;box-shadow:var(--shadow);border:1px solid #eef1f5;transition:.28s;text-decoration:none}
.quick-icons .qi:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(26,111,181,.18);border-color:var(--primary)}
.quick-icons .qi-ico{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--accent2));transition:.28s}
.quick-icons .qi:hover .qi-ico{transform:rotate(-6deg) scale(1.06)}
.quick-icons .qi-ico svg{width:28px;height:28px;fill:#fff}
.quick-icons .qi span{font-size:14px;color:var(--text);font-weight:500;letter-spacing:.5px}

/* ---------- 站内检索 ---------- */
.search-band{position:relative;display:grid;grid-template-columns:1fr;gap:24px;align-content:center;min-height:100%;background:linear-gradient(135deg,var(--primary),var(--accent2));border-radius:var(--radius);padding:34px 38px;color:#fff;box-shadow:var(--shadow);overflow:hidden}
.search-band::before{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.08)}
.search-band::after{content:"";position:absolute;right:70px;bottom:-90px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.06)}
.search-main{position:relative;z-index:2}
.search-main h2{display:flex;align-items:center;gap:10px;font-size:24px;margin-bottom:8px;letter-spacing:1px}
.search-main h2 .sb-ico{width:28px;height:28px;fill:#fff;opacity:.95}
.search-main p{opacity:.9;margin-bottom:18px;font-size:14px}
.search-form{display:flex;align-items:center;background:#fff;border-radius:50px;padding:6px 6px 6px 18px;box-shadow:0 8px 22px rgba(0,0,0,.18);max-width:100%;transition:.3s}
.search-form:focus-within{box-shadow:0 8px 22px rgba(0,0,0,.18),0 0 0 3px rgba(255,255,255,.45)}
.search-form .sf-ico{width:20px;height:20px;fill:var(--muted);flex:none}
.search-form input{flex:1;border:none;outline:none;padding:12px 14px;font-size:15px;color:var(--text);background:transparent;min-width:0}
.search-form button{border:none;background:linear-gradient(135deg,var(--accent),#d0532c);color:#fff;padding:0 30px;height:46px;border-radius:50px;font-size:16px;cursor:pointer;transition:.3s;font-weight:600;white-space:nowrap}
.search-form button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.search-hot{margin-top:18px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px}
.search-hot .hot-label{opacity:.85}
.search-hot a{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:4px 13px;border-radius:30px;transition:.25s;line-height:1.6}
.search-hot a:hover{background:#fff;color:var(--primary);transform:translateY(-2px)}

/* ---------- 新书推荐 ---------- */
.book-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.book-card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s;cursor:pointer;display:block;text-decoration:none;color:inherit}
.book-card:hover{transform:translateY(-8px);box-shadow:0 14px 30px rgba(20,60,110,.16)}
.book-cover{position:relative;padding-top:140%;background:linear-gradient(135deg,#e3edf6,#cfe0ee);overflow:hidden}
.book-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.book-card:hover .book-cover img{transform:scale(1.06)}
.book-cover .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:15px;text-align:center;padding:10px;font-weight:600}
.book-info{padding:12px 12px 16px}
.book-info h3{font-size:15px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-info p{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 图书详情 ---------- */
.book-detail{display:flex;gap:30px;flex-wrap:wrap}
.bd-cover{width:260px;flex:0 0 260px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,#e3edf6,#cfe0ee)}
.bd-cover img{width:100%;display:block}
.bd-cover .noimg{min-height:360px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:18px;text-align:center;padding:16px;font-weight:600}
.bd-info{flex:1;min-width:260px}
.bd-info h1{font-size:26px;margin:0 0 18px;color:var(--primary)}
.bd-meta{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid #eee}
.bd-meta li{display:flex;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:15px}
.bd-meta li span{display:inline-block;width:88px;color:var(--muted);flex:0 0 88px}
.bd-intro h3{font-size:17px;color:#124e80;margin:0 0 10px}
.bd-intro p{line-height:1.9;color:#444;font-size:15px;white-space:pre-wrap;word-break:break-word}
.btn-back{display:inline-block;margin-top:26px;padding:10px 22px;background:var(--primary);color:#fff;border-radius:30px;font-size:14px;text-decoration:none;transition:.3s}
.btn-back:hover{background:#0f5a96}
@media (max-width:640px){.bd-cover{width:100%;flex:0 0 100%}}

/* ---------- 数字资源 ---------- */
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.res-card{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);height:170px;transition:.3s}
.res-card:hover{transform:translateY(-6px)}
.res-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.res-card:hover img{transform:scale(1.08)}
.res-card .mask{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(18,78,128,.85));display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff}
.res-card .mask h3{font-size:17px;margin-bottom:4px}
.res-card .mask p{font-size:12px;opacity:.9}
.res-card .placeholder{position:absolute;inset:0;background:linear-gradient(135deg,var(--primary),var(--accent2))}

/* ---------- 列表页 / 详情页 ---------- */
.crumb{font-size:13px;color:var(--muted);padding:16px 0}
.crumb a:hover{color:var(--primary)}
.page-body{display:grid;grid-template-columns:250px 1fr;gap:26px;margin-bottom:40px}
.sidebar{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;height:fit-content}
.sidebar .head{background:var(--primary);color:#fff;padding:16px 20px;font-size:18px}
.sidebar ul{list-style:none}
.sidebar li a{display:block;padding:13px 20px;border-bottom:1px solid var(--line);transition:.25s}
.sidebar li a:hover,.sidebar li a.active{background:#eef4fa;color:var(--primary);padding-left:26px;border-left:4px solid var(--accent)}
.content-box{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px;min-height:420px}
.art-list{list-style:none}
.art-list li{display:flex;align-items:center;padding:16px 4px;border-bottom:1px dashed var(--line);gap:12px}
.art-list li:hover{background:#fafcfe}
.art-list .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.art-list .t{flex:1;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-list li:hover .t{color:var(--primary)}
.art-list .d{color:var(--muted);font-size:13px}

.article h1{font-size:26px;color:var(--primary-dark);text-align:center;margin-bottom:14px;line-height:1.4}
.article .meta{text-align:center;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px}
.article .meta span{margin:0 10px}
.article .body{font-size:16px;line-height:2}
.article .body p{margin-bottom:16px}
.article .body img{margin:14px auto;border-radius:8px;max-width:100%}
.article .body table{border-collapse:collapse;width:100%;margin:16px 0}
.article .body table td,.article .body table th{border:1px solid var(--line);padding:8px 12px}
.article .body video{max-width:100%;margin:14px auto;border-radius:8px}

/* 单页(本馆概况) */
.single-page{font-size:16px;line-height:2}
.single-page img{margin:14px auto;border-radius:8px}

/* 分页 */
.pager{display:flex;gap:8px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.pager a,.pager span{padding:8px 14px;border:1px solid var(--line);border-radius:6px;font-size:14px;background:#fff}
.pager a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pager .cur{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ---------- 页脚 ---------- */
.footer{background:var(--primary-dark);color:#c6d6e6;margin-top:40px;padding:34px 0 20px;font-size:14px}
.footer .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;margin-bottom:20px}
.footer h4{color:#fff;font-size:16px;margin-bottom:12px}
.footer p{margin-bottom:6px}
.footer .copy{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;text-align:center;font-size:13px;color:#9fb4c9}

/* ---------- 动画 ---------- */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.fade-up.show{opacity:1;transform:translateY(0)}
.back-top{position:fixed;right:24px;bottom:24px;width:46px;height:46px;background:var(--primary);color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);z-index:200;font-size:22px;transition:.3s}
.back-top:hover{background:var(--accent);transform:translateY(-4px)}

/* ---------- 响应式 ---------- */
@media(max-width:992px){
  .hero{grid-template-columns:1fr}
  .book-grid{grid-template-columns:repeat(3,1fr)}
  .res-grid{grid-template-columns:repeat(2,1fr)}
  .page-body{grid-template-columns:1fr}
  .search-band{grid-template-columns:1fr;gap:24px}
  .home-split{grid-template-columns:1fr}
  .quick-icons{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media(max-width:640px){
  .nav .container{flex-direction:column}
  .nav a{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav.collapsed a:not(.active){display:none}
  .nav-toggle{display:block;color:#fff;padding:12px 16px;cursor:pointer;font-weight:600}
  .book-grid{grid-template-columns:repeat(2,1fr)}
  .logo h1{font-size:19px}
  .header .container{height:auto;padding:12px 16px}
  .search-band{padding:26px 20px}
  .search-form{padding-left:14px}
  .search-form button{padding:0 20px}
  .quick-icons{grid-template-columns:repeat(2,1fr);gap:12px}
  .quick-icons .qi-ico{width:46px;height:46px}
  .quick-icons .qi-ico svg{width:24px;height:24px}
}