/* ===== 武汉助产学校 - 共享样式 ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  color:#2c3e50; line-height:1.8; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; background:#fff;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
::selection { background:#1e3a5f; color:#fff; }

:root {
  --primary:#1e3a5f;
  --primary-light:#2a5080;
  --accent:#c45c3e;
  --accent-light:#d47155;
  --blue:#4a90d9;
  --blue-light:#e8f1fa;
  --bg:#f8f9fa;
  --bg-warm:#f5f7fa;
  --text:#2c3e50;
  --text-light:#5a6c7d;
  --text-muted:#8a9aaa;
  --border:#e8ecf0;
  --white:#fff;
  --shadow:0 2px 12px rgba(30,58,95,.08);
  --shadow-hover:0 8px 32px rgba(30,58,95,.12);
}

/* ===== Top Bar ===== */
.top-bar {
  background:var(--primary); color:#fff; font-size:13px;
  padding:8px 0;
}
.top-bar-inner {
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.top-bar a { color:rgba(255,255,255,.85); transition:color .2s; }
.top-bar a:hover { color:#fff; }
.top-bar-left { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.top-bar-right { display:flex; gap:20px; align-items:center; }
.top-bar-tag {
  background:var(--accent); color:#fff; font-size:11px; font-weight:600;
  padding:2px 10px; border-radius:3px;
}

/* ===== Scroll Progress ===== */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px; background:var(--blue);
  z-index:9999; width:0%; transition:width .1s linear;
}

/* ===== Header ===== */
.header {
  position:sticky; top:0; left:0; right:0; z-index:1000;
  height:72px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:rgba(255,255,255,.98);
  box-shadow:0 1px 0 rgba(30,58,95,.06);
  transition:all .3s ease;
}
.header.scrolled {
  box-shadow:0 4px 20px rgba(30,58,95,.1);
}
.header-logo { display:flex; align-items:center; gap:12px; }
.header-logo-icon {
  width:42px; height:42px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  object-fit:cover;
}
.header-logo-text { font-size:17px; font-weight:700; color:var(--primary); letter-spacing:.3px; }
.header-logo-sub { font-size:11px; color:var(--text-muted); font-weight:400; display:block; }
.header-nav { display:none; align-items:center; gap:32px; }
.header-nav a {
  font-size:14px; color:var(--text-light); font-weight:500;
  transition:color .3s; position:relative; padding:4px 0;
}
.header-nav a:hover, .header-nav a.active { color:var(--primary); }
.header-nav a::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--blue); transition:width .3s ease;
}
.header-nav a:hover::after, .header-nav a.active::after { width:100%; }
.header-phone {
  display:none; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--accent);
}
.header-phone svg { width:16px; height:16px; }
.header-cta {
  display:none; padding:8px 20px; background:var(--accent); color:#fff;
  font-size:13px; font-weight:600; border-radius:6px;
  transition:all .3s ease;
}
.header-cta:hover { background:var(--accent-light); transform:translateY(-1px); }
.header-menu-btn { display:block; background:none; border:none; padding:8px; cursor:pointer; }
.header-menu-btn svg { width:24px; height:24px; color:var(--primary); }

@media(min-width:768px) {
  .header { padding:0 40px; height:76px; }
  .header-nav { display:flex; }
  .header-phone { display:flex; }
  .header-menu-btn { display:none; }
}
@media(min-width:1024px) {
  .header { padding:0 60px; }
  .header-cta { display:inline-block; }
}

/* Mobile Menu */
.mobile-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1999;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.mobile-overlay.open { opacity:1; pointer-events:auto; }
.mobile-menu {
  position:fixed; top:0; right:-100%; width:80%; max-width:320px; height:100vh;
  background:var(--primary); z-index:2000; padding:80px 32px 32px;
  display:flex; flex-direction:column; gap:4px;
  transition:right .35s cubic-bezier(.16,1,.3,1);
  box-shadow:-8px 0 40px rgba(0,0,0,.1);
}
.mobile-menu.open { right:0; }
.mobile-menu a {
  font-size:16px; font-weight:500; color:#fff; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.1); transition:color .2s;
}
.mobile-menu a:hover, .mobile-menu a.active { color:#a8d0f7; }
.mobile-menu-close {
  position:absolute; top:20px; right:20px; background:none; border:none;
  font-size:28px; color:#fff; cursor:pointer; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}

/* ===== Page Hero ===== */
.page-hero {
  position:relative; min-height:320px; display:flex; align-items:center;
  background:linear-gradient(135deg,var(--primary) 0%,#152a45 100%);
  padding-top:0;
}
.page-hero-bg {
  position:absolute; inset:0; opacity:.15;
  background:url('../images/school-gate.jpg') center/cover no-repeat;
}
.page-hero-content {
  position:relative; z-index:2; width:100%; max-width:1200px;
  margin:0 auto; padding:60px 24px;
}
.page-hero h1 {
  font-size:28px; font-weight:700; color:#fff; margin-bottom:12px;
}
.page-hero p {
  font-size:15px; color:rgba(255,255,255,.7); max-width:560px;
}
.page-breadcrumb {
  display:flex; gap:8px; align-items:center; margin-bottom:16px;
  font-size:13px; color:rgba(255,255,255,.5);
}
.page-breadcrumb a:hover { color:var(--blue); }
@media(min-width:768px) {
  .page-hero { min-height:360px; }
  .page-hero h1 { font-size:40px; }
  .page-hero-content { padding:80px 40px; }
}
@media(min-width:1024px) {
  .page-hero-content { padding:80px 60px; }
}

/* ===== Section Common ===== */
.section { padding:60px 0; }
@media(min-width:768px) { .section { padding:80px 0; } }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
@media(min-width:768px) { .container { padding:0 40px; } }
@media(min-width:1024px) { .container { padding:0 60px; } }

.section-header { text-align:center; margin-bottom:40px; }
.section-tag {
  display:inline-block; font-size:12px; font-weight:600;
  color:var(--blue); background:var(--blue-light); letter-spacing:2px;
  padding:4px 14px; border-radius:4px; margin-bottom:12px;
}
.section-title { font-size:26px; font-weight:700; color:var(--primary); line-height:1.3; }
@media(min-width:640px) { .section-title { font-size:32px; } }
@media(min-width:768px) { .section-title { font-size:36px; } }
.section-subtitle { font-size:15px; color:var(--text-muted); margin-top:10px; }

/* ===== Buttons ===== */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; background:var(--accent); color:#fff;
  font-size:14px; font-weight:600; border-radius:6px;
  transition:all .3s ease; border:none; cursor:pointer;
}
.btn-primary:hover { background:var(--accent-light); transform:translateY(-2px); box-shadow:0 6px 20px rgba(196,92,62,.3); }
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; background:transparent; color:var(--primary);
  font-size:14px; font-weight:600; border-radius:6px;
  border:1.5px solid var(--primary);
  transition:all .3s ease;
}
.btn-secondary:hover { background:var(--primary); color:#fff; }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; background:transparent; color:var(--primary);
  font-size:13px; font-weight:600; border-radius:6px;
  border:1.5px solid var(--border); transition:all .3s ease;
}
.btn-outline:hover { border-color:var(--primary); background:var(--primary); color:#fff; }
.btn-white {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; background:#fff; color:var(--primary);
  font-size:14px; font-weight:600; border-radius:6px;
  transition:all .3s ease;
}
.btn-white:hover { background:var(--blue-light); }

/* ===== Cards ===== */
.card {
  background:#fff; border-radius:12px;
  box-shadow:var(--shadow);
  transition:all .4s cubic-bezier(.16,1,.3,1);
  overflow:hidden; border:1px solid var(--border);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:transparent; }

/* ===== Grid helpers ===== */
.grid-2 { display:grid; grid-template-columns:1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:1fr; gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(min-width:640px) {
  .grid-2 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1024px) {
  .grid-3 { grid-template-columns:repeat(3,1fr); }
  .grid-4 { grid-template-columns:repeat(4,1fr); }
}

/* ===== Footer ===== */
.footer { background:#152a45; padding:60px 0 24px; border-top:3px solid var(--blue); }
.footer-grid {
  display:grid; grid-template-columns:1fr; gap:40px; margin-bottom:40px;
}
@media(min-width:768px) { .footer-grid { grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:32px; } }
.footer-brand .logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-brand .logo-icon {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  object-fit:cover;
}
.footer-brand .logo-text { font-size:16px; font-weight:700; color:#fff; }
.footer-brand p { font-size:13px; color:rgba(255,255,255,.45); line-height:1.8; }
.footer-brand .motto { color:var(--blue); font-weight:600; margin-top:8px; }
.footer-col h4 { font-size:14px; font-weight:600; color:#fff; margin-bottom:16px; }
.footer-col a {
  display:block; font-size:13px; color:rgba(255,255,255,.4);
  padding:6px 0; transition:color .2s;
}
.footer-col a:hover { color:var(--blue); }
.footer-divider { height:1px; background:rgba(255,255,255,.06); margin-bottom:24px; }
.footer-bottom {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
@media(min-width:768px) { .footer-bottom { flex-direction:row; justify-content:space-between; text-align:left; } }
.footer-bottom p { font-size:12px; color:rgba(255,255,255,.25); }

/* ===== Animations ===== */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}
.reveal {
  opacity:0; transform:translateY(40px);
  transition:all .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }
.reveal-d4 { transition-delay:.4s; }

/* ===== CTA Section ===== */
.cta-section {
  background:linear-gradient(135deg,var(--primary) 0%,#152a45 100%);
  padding:60px 0; text-align:center;
}
@media(min-width:768px) { .cta-section { padding:80px 0; } }
.cta-section h2 { font-size:26px; font-weight:700; color:#fff; margin-bottom:12px; }
@media(min-width:640px) { .cta-section h2 { font-size:32px; } }
.cta-section p { font-size:15px; color:rgba(255,255,255,.65); margin-bottom:28px; }
.cta-phone {
  display:inline-flex; align-items:center; gap:10px;
  font-size:24px; font-weight:700; color:#fff; margin-bottom:8px;
}
@media(min-width:640px) { .cta-phone { font-size:32px; } }
.cta-phone svg { width:24px; height:24px; color:var(--blue); }
.cta-note { font-size:13px; color:rgba(255,255,255,.45); margin-bottom:28px; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ===== Form ===== */
.form-group { margin-bottom:20px; }
.form-group label {
  display:block; font-size:14px; font-weight:500; color:var(--text); margin-bottom:6px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width:100%; padding:12px 16px; font-size:14px; color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  background:#fff; transition:border-color .3s,box-shadow .3s;
  font-family:inherit;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(74,144,217,.1);
}
.form-group textarea { resize:vertical; min-height:120px; }

/* ===== Lightbox ===== */
.lightbox {
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.lightbox.open { opacity:1; pointer-events:auto; }
.lightbox img {
  max-width:90vw; max-height:85vh;
  object-fit:contain; border-radius:8px;
  transform:scale(.9); transition:transform .3s ease;
}
.lightbox.open img { transform:scale(1); }
.lightbox-close {
  position:absolute; top:20px; right:20px;
  background:none; border:none; color:#fff;
  font-size:36px; cursor:pointer; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .3s;
}
.lightbox-close:hover { background:rgba(255,255,255,.1); }
.lightbox-prev, .lightbox-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.1); border:none;
  color:#fff; font-size:28px; cursor:pointer;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s;
}
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(255,255,255,.2); }
.lightbox-prev { left:20px; }
.lightbox-next { right:20px; }
.lightbox-counter {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:14px;
  background:rgba(0,0,0,.5); padding:6px 16px; border-radius:20px;
}

/* ===== Tables ===== */
.table-wrapper { overflow-x:auto; }
.data-table {
  width:100%; border-collapse:collapse; min-width:600px;
}
.data-table th, .data-table td {
  padding:14px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--border);
}
.data-table th {
  background:var(--primary); color:#fff; font-weight:600;
}
.data-table tr:hover td { background:var(--bg); }
.data-table td:first-child { font-weight:600; color:var(--primary); }

/* ===== Info Cards ===== */
.info-card {
  background:#fff; border-radius:10px; padding:28px;
  border:1px solid var(--border); transition:all .3s ease;
}
.info-card:hover { border-color:var(--blue); box-shadow:var(--shadow); }
.info-card-icon {
  width:48px; height:48px; border-radius:10px;
  background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:16px;
}
.info-card h3 { font-size:17px; font-weight:600; color:var(--primary); margin-bottom:8px; }
.info-card p { font-size:14px; color:var(--text-light); line-height:1.7; }

/* ===== News List ===== */
.news-item-inline {
  display:flex; gap:16px; padding:18px 0;
  border-bottom:1px solid var(--border); transition:all .2s;
}
.news-item-inline:last-child { border-bottom:none; }
.news-item-inline:hover { padding-left:8px; }
.news-item-inline .news-date {
  flex-shrink:0; width:56px; text-align:center;
}
.news-item-inline .news-date .day {
  font-size:24px; font-weight:700; color:var(--primary); line-height:1;
}
.news-item-inline .news-date .month {
  font-size:12px; color:var(--text-muted); margin-top:2px;
}
.news-item-inline .news-body h4 {
  font-size:15px; font-weight:600; color:var(--text); line-height:1.5;
  margin-bottom:4px; transition:color .2s;
}
.news-item-inline:hover .news-body h4 { color:var(--blue); }
.news-item-inline .news-body p {
  font-size:13px; color:var(--text-muted); line-height:1.6;
}
.news-tag {
  display:inline-block; font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:3px; margin-bottom:6px;
}
.news-tag.red { background:#fdeaea; color:#c45c3e; }
.news-tag.blue { background:#e8f1fa; color:#4a90d9; }
.news-tag.green { background:#e8f5e9; color:#388e3c; }


/* ===== Quick Links ===== */
.quick-links { background:#fff; padding:24px 0; border-bottom:1px solid var(--border); }
.quick-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
@media(min-width:640px) { .quick-grid { grid-template-columns:repeat(4,1fr); } }
.quick-item {
  display:flex; align-items:center; gap:12px; padding:16px;
  border-radius:10px; border:1px solid var(--border);
  transition:all .3s ease; background:#fff;
}
.quick-item:hover { border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-2px); }
.quick-icon {
  width:44px; height:44px; border-radius:10px;
  background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:20px;
}
.quick-text h4 { font-size:14px; font-weight:600; color:var(--primary); }
.quick-text p { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ===== Campus + News Combo ===== */
.combo-section { background:var(--bg); }
.combo-grid {
  display:grid; grid-template-columns:1fr; gap:32px;
}
@media(min-width:768px) { .combo-grid { grid-template-columns:1.1fr 1fr; gap:40px; } }
.combo-campus h3 { font-size:18px; font-weight:700; color:var(--primary); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.combo-main-img {
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:16px;
}
.combo-main-img img { width:100%; height:280px; object-fit:cover; }
.combo-thumb-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.combo-thumb {
  border-radius:8px; overflow:hidden; aspect-ratio:16/10; cursor:pointer;
  position:relative;
}
.combo-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.combo-thumb:hover img { transform:scale(1.08); }
.combo-thumb .mask {
  position:absolute; inset:0; background:rgba(21,42,69,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:500; opacity:0; transition:opacity .3s;
}
.combo-thumb:hover .mask { opacity:1; }

.combo-news h3 { font-size:18px; font-weight:700; color:var(--primary); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.combo-news .news-more {
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; font-weight:600; color:var(--blue); margin-top:16px;
  transition:gap .2s;
}
.combo-news .news-more:hover { gap:8px; }

/* ===== Teachers ===== */
.teachers-section { background:#fff; }
.teacher-grid-v2 {
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
@media(min-width:640px) { .teacher-grid-v2 { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) { .teacher-grid-v2 { grid-template-columns:repeat(4,1fr); } }
.teacher-card-v2 {
  background:#fff; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); transition:all .3s ease;
}
.teacher-card-v2:hover { box-shadow:var(--shadow-hover); border-color:transparent; transform:translateY(-4px); }
.teacher-card-v2 .photo {
  width:100%; aspect-ratio:3/4; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.teacher-card-v2 .photo img { width:100%; height:100%; object-fit:cover; }
.teacher-card-v2 .photo .placeholder {
  font-size:48px; color:var(--blue); opacity:.3;
}
.teacher-card-v2 .info { padding:16px; text-align:center; }
.teacher-card-v2 .info h4 { font-size:15px; font-weight:600; color:var(--primary); margin-bottom:4px; }
.teacher-card-v2 .info p { font-size:13px; color:var(--text-muted); }
.teacher-card-v2 .tag {
  display:inline-block; font-size:11px; color:var(--blue);
  background:var(--blue-light); padding:2px 10px; border-radius:20px; margin-top:6px;
}

/* ===== Partners ===== */
.partners-section { background:var(--bg); }
.partner-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
@media(min-width:640px) { .partner-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) { .partner-grid { grid-template-columns:repeat(5,1fr); } }
.partner-item {
  background:#fff; border-radius:10px; padding:20px;
  border:1px solid var(--border); text-align:center;
  transition:all .3s ease;
}
.partner-item:hover { border-color:var(--blue); box-shadow:var(--shadow); }
.partner-item .icon {
  width:48px; height:48px; border-radius:50%;
  background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin:0 auto 10px;
}
.partner-item h4 { font-size:14px; font-weight:600; color:var(--primary); }
.partner-item p { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* ===== Student Work ===== */
.student-work { background:#fff; }
.work-grid {
  display:grid; grid-template-columns:1fr; gap:24px;
}
@media(min-width:768px) { .work-grid { grid-template-columns:1fr 1fr; gap:32px; } }
.work-card {
  display:flex; gap:16px; padding:20px; background:var(--bg);
  border-radius:12px; border:1px solid var(--border);
  transition:all .3s ease;
}
.work-card:hover { background:#fff; box-shadow:var(--shadow); }
.work-card .work-img {
  width:120px; height:90px; border-radius:8px; overflow:hidden; flex-shrink:0;
}
.work-card .work-img img { width:100%; height:100%; object-fit:cover; }
.work-card h4 { font-size:16px; font-weight:600; color:var(--primary); margin-bottom:6px; }
.work-card p { font-size:13px; color:var(--text-light); line-height:1.6; }

/* ===== FAQ ===== */
.faq-section { background:var(--bg); }
.faq-grid {
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media(min-width:768px) { .faq-grid { grid-template-columns:repeat(2,1fr); } }
.faq-item {
  background:#fff; border-radius:10px; padding:20px;
  border:1px solid var(--border); transition:all .3s ease;
}
.faq-item:hover { box-shadow:var(--shadow); }
.faq-item h4 {
  font-size:15px; font-weight:600; color:var(--primary); margin-bottom:8px;
  display:flex; gap:8px; align-items:flex-start;
}
.faq-item h4 .q { color:var(--accent); font-weight:700; flex-shrink:0; }
.faq-item p { font-size:14px; color:var(--text-light); line-height:1.7; padding-left:24px; }

/* ===== Article Page ===== */
.article-hero {
  background:var(--primary); padding:100px 0 60px;
}
.article-hero-content { max-width:800px; margin:0 auto; padding:0 24px; }
.article-hero .breadcrumb {
  display:flex; gap:8px; align-items:center; font-size:13px;
  color:rgba(255,255,255,.5); margin-bottom:16px;
}
.article-hero .breadcrumb a { color:rgba(255,255,255,.6); transition:color .2s; }
.article-hero .breadcrumb a:hover { color:#fff; }
.article-hero h1 { font-size:26px; font-weight:700; color:#fff; line-height:1.4; margin-bottom:16px; }
@media(min-width:768px) { .article-hero h1 { font-size:34px; } }
.article-meta {
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  font-size:13px; color:rgba(255,255,255,.6);
}
.article-meta .tag {
  background:var(--accent); color:#fff; padding:3px 12px; border-radius:4px;
  font-size:12px; font-weight:600;
}

.article-body {
  max-width:800px; margin:0 auto; padding:48px 24px;
}
.article-body p { font-size:16px; color:var(--text); line-height:1.9; margin-bottom:20px; }
.article-body h2 { font-size:22px; font-weight:700; color:var(--primary); margin:32px 0 16px; }
.article-body h3 { font-size:18px; font-weight:600; color:var(--primary); margin:24px 0 12px; }
.article-body img { border-radius:10px; margin:20px 0; box-shadow:var(--shadow); }
.article-body ul, .article-body ol { margin:16px 0; padding-left:24px; }
.article-body li { font-size:15px; color:var(--text-light); line-height:1.8; margin-bottom:8px; }
.article-body blockquote {
  border-left:4px solid var(--blue); background:var(--blue-light);
  padding:16px 20px; border-radius:0 8px 8px 0; margin:20px 0;
  font-size:15px; color:var(--text-light);
}

.article-layout {
  max-width:1200px; margin:0 auto; padding:48px 24px;
  display:grid; grid-template-columns:1fr; gap:40px;
}
@media(min-width:1024px) { .article-layout { grid-template-columns:2.5fr 1fr; gap:48px; } }
.article-sidebar .sidebar-block {
  background:#fff; border-radius:12px; padding:24px;
  border:1px solid var(--border); margin-bottom:24px;
}
.article-sidebar .sidebar-block h4 {
  font-size:15px; font-weight:700; color:var(--primary); margin-bottom:16px;
  padding-bottom:12px; border-bottom:2px solid var(--border);
}
.sidebar-link {
  display:block; font-size:14px; color:var(--text-light); padding:10px 0;
  border-bottom:1px solid var(--border); transition:all .2s;
  line-height:1.5;
}
.sidebar-link:last-child { border-bottom:none; }
.sidebar-link:hover { color:var(--blue); padding-left:8px; }
.sidebar-contact p {
  font-size:14px; color:var(--text-light); margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}