/* XY-011 模板样式 - 复刻 itelmobiledialer.com */

:root {
    --wine: #7b1e3c;
    --wine-dark: #4a1024;
    --wine-light: #a0284f;
    --gold: #d4a857;
    --gold-hover: #e5bc6a;
    --gold-light: #f5e6c8;
    --text: #2b2b2b;
    --text-light: #666;
    --text-white: #fff;
    --bg-light: #f9f6f0;
    --border: #e0d5da;
    --shadow: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
    --radius: 12px;
    --radius-sm: 8px;
    --transition: all .3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; color: var(--text); line-height: 1.7; background: #fff; }
a { color: var(--wine); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--gold); }
img { max-width: 100%; height: auto; }

/* Header - 单行布局 */
.xy11-header { background: var(--wine-dark); padding: 0; box-shadow: 0 2px 12px rgba(0,0,0,.35); position: sticky; top: 0; z-index: 1000; }
.xy11-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; gap: 20px; max-width: 1400px; margin: 0 auto; height: 60px; }
.xy11-logo-text { color: var(--text-white); font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.xy11-logo-text i { color: var(--gold); margin-right: 8px; }
.xy11-nav { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; flex: 1; justify-content: center; }
.xy11-nav .nav-link { color: rgba(255,255,255,.85); padding: 8px 14px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; white-space: nowrap; }
.xy11-nav .nav-link:hover, .xy11-nav .nav-link.active { color: var(--gold); background: rgba(255,255,255,.08); }
.xy11-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.xy11-btn-reg { background: var(--gold); color: var(--wine-dark); padding: 6px 16px; border-radius: 20px; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.xy11-btn-reg:hover { background: var(--gold-hover); color: var(--wine-dark); }
.xy11-toggle { display: none; background: none; border: none; color: var(--text-white); font-size: 1.4rem; cursor: pointer; }

/* Hero */
.xy11-hero { position: relative; overflow: hidden; }
.xy11-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/hero-bg.jpg') center/cover; }
.xy11-hero-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(74,16,36,.93) 0%, rgba(123,30,60,.78) 50%, rgba(74,16,36,.65) 100%); }
.xy11-hero-body { position: relative; text-align: center; padding: 90px 20px 70px; color: var(--text-white); max-width: 760px; margin: 0 auto; }
.xy11-hero-chip { display: inline-block; background: rgba(212,168,87,.18); border: 1px solid rgba(212,168,87,.5); color: var(--gold); padding: 6px 20px; border-radius: 20px; font-size: .82rem; margin-bottom: 22px; letter-spacing: 1px; }
.xy11-hero-body h1 { font-size: 2.9rem; font-weight: 800; margin-bottom: 14px; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.xy11-hero-sub { color: var(--gold); font-size: .95rem; letter-spacing: 2px; margin-bottom: 14px; font-weight: 600; }
.xy11-hero-desc { font-size: 1.05rem; color: rgba(255,255,255,.8); margin-bottom: 30px; line-height: 1.8; }
.xy11-hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Buttons */
.xy11-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 600; cursor: pointer; border: none; transition: var(--transition); text-decoration: none; }
.xy11-btn-gold { background: var(--gold); color: var(--wine-dark); }
.xy11-btn-gold:hover { background: var(--gold-hover); color: var(--wine-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,168,87,.4); }
.xy11-btn-wine { background: var(--wine); color: var(--text-white); }
.xy11-btn-wine:hover { background: var(--wine-light); color: var(--text-white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(123,30,60,.35); }
.xy11-btn-line { background: transparent; color: var(--text-white); border: 2px solid rgba(255,255,255,.4); }
.xy11-btn-line:hover { border-color: var(--gold); color: var(--gold); }
.xy11-btn-white { background: var(--text-white); color: var(--wine); }
.xy11-btn-white:hover { background: var(--gold-light); color: var(--wine-dark); transform: translateY(-2px); }
.xy11-btn-outline { background: transparent; color: var(--wine); border: 2px solid var(--wine); }
.xy11-btn-outline:hover { background: var(--wine); color: var(--text-white); }

/* Section */
.xy11-section { padding: 70px 20px; }
.xy11-section-alt { background: var(--bg-light); }
.container { max-width: 1200px; margin: 0 auto; }

/* Heading */
.xy11-heading { text-align: center; margin-bottom: 46px; }
.xy11-heading h2 { font-size: 1.95rem; font-weight: 700; color: var(--wine); margin-bottom: 10px; }
.xy11-heading p { color: var(--text-light); font-size: 1rem; max-width: 580px; margin: 0 auto; }
.xy11-heading-bar { width: 54px; height: 3px; background: var(--gold); margin: 16px auto 0; border-radius: 2px; }

/* Category Grid */
.xy11-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.xy11-cat-card { background: #fff; border-radius: var(--radius); padding: 36px 26px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--border); transition: var(--transition); display: block; }
.xy11-cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.xy11-cat-icon { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, var(--wine) 0%, var(--wine-light) 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.xy11-cat-icon i { font-size: 1.7rem; color: var(--gold); }
.xy11-cat-card h4 { font-size: 1.15rem; color: var(--wine); margin-bottom: 10px; font-weight: 700; }
.xy11-cat-card p { color: var(--text-light); font-size: .88rem; line-height: 1.7; margin-bottom: 16px; }
.xy11-cat-more { color: var(--gold); font-size: .85rem; font-weight: 600; }

/* About */
.xy11-about { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.xy11-about-text h2 { font-size: 1.8rem; color: var(--wine); margin-bottom: 20px; }
.xy11-about-text p { color: var(--text-light); line-height: 1.9; margin-bottom: 20px; }
.xy11-about-img img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* Stats */
.xy11-stats-sec { background: var(--wine-dark); color: var(--text-white); }
.xy11-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; }
.xy11-stat-item h3 { font-size: 2.5rem; color: var(--gold); font-weight: 800; margin-bottom: 8px; }
.xy11-stat-item p { color: rgba(255,255,255,.7); font-size: .95rem; }

/* Mission */
.xy11-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.xy11-mission-text h2 { font-size: 1.8rem; color: var(--wine); margin-bottom: 20px; }
.xy11-mission-list { list-style: none; }
.xy11-mission-list li { padding: 12px 0; display: flex; gap: 12px; align-items: flex-start; }
.xy11-mission-list li i { color: var(--gold); margin-top: 4px; }
.xy11-mission-img img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* News Cards */
.xy11-news-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.xy11-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); transition: var(--transition); }
.xy11-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.xy11-card-img { position: relative; height: 200px; overflow: hidden; }
.xy11-card-img img { width: 100%; height: 100%; object-fit: cover; }
.xy11-card-tag { position: absolute; top: 12px; left: 12px; background: var(--wine); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: .75rem; }
.xy11-card-body { padding: 20px; }
.xy11-card-body h4 { font-size: 1.05rem; color: var(--text); margin-bottom: 10px; line-height: 1.5; }
.xy11-card-body p { color: var(--text-light); font-size: .88rem; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xy11-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--text-light); }
.xy11-card-more { color: var(--gold); font-weight: 600; }

/* Tags */
.xy11-tags-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.xy11-tag-chip { background: #fff; border: 1px solid var(--border); color: var(--wine); padding: 8px 18px; border-radius: 20px; font-size: .88rem; transition: var(--transition); }
.xy11-tag-chip:hover { background: var(--gold); color: var(--wine-dark); border-color: var(--gold); }
.xy11-tag-chip i { margin-right: 6px; color: var(--gold); }

/* CTA */
.xy11-cta { background: var(--wine); padding: 60px 20px; text-align: center; }

/* Footer */
.xy11-footer { background: var(--wine-dark); color: rgba(255,255,255,.7); padding: 50px 20px 20px; }
.xy11-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; }
.xy11-footer-about .xy11-logo-text { margin-bottom: 16px; display: block; }
.xy11-footer-links h6, .xy11-footer-contact h6 { color: var(--gold); font-size: 1rem; margin-bottom: 16px; }
.xy11-footer-links ul { list-style: none; }
.xy11-footer-links li { margin-bottom: 10px; }
.xy11-footer-links a { color: rgba(255,255,255,.6); font-size: .9rem; }
.xy11-footer-links a:hover { color: var(--gold); }
.xy11-footer-contact p { font-size: .9rem; margin-bottom: 10px; }
.xy11-footer-contact i { color: var(--gold); margin-right: 8px; width: 16px; }
.xy11-footer-bottom { max-width: 1200px; margin: 30px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; font-size: .85rem; }

/* Article Detail */
.xy11-article { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.xy11-article h1 { font-size: 1.8rem; color: var(--wine); margin-bottom: 15px; }
.xy11-article-meta { font-size: .9rem; color: var(--text-light); margin-bottom: 20px; }
.xy11-article-content { font-size: 1rem; line-height: 1.9; color: var(--text); }
.xy11-article-content p { margin-bottom: 16px; }
.xy11-article-content img { border-radius: var(--radius); margin: 20px 0; }

/* Pagination */
.xy11-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.xy11-pagination a { padding: 8px 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .9rem; }
.xy11-pagination a:hover { background: var(--gold); color: var(--wine-dark); border-color: var(--gold); }
.xy11-pagination a.active { background: var(--wine); color: #fff; border-color: var(--wine); }

/* Responsive */
@media (max-width: 768px) {
    .xy11-header-inner { flex-direction: column; gap: 12px; }
    .xy11-nav { justify-content: center; }
    .xy11-hero-body h1 { font-size: 1.8rem; }
    .xy11-about, .xy11-mission { grid-template-columns: 1fr; }
    .xy11-footer-grid { grid-template-columns: 1fr; }
    .xy11-news-row { grid-template-columns: 1fr; }
}

/* 响应式调整 */
@media (max-width: 992px) {
    .xy11-header-inner { flex-wrap: wrap; height: auto; padding: 12px 20px; }
    .xy11-nav { order: 3; width: 100%; justify-content: flex-start; padding: 10px 0; overflow-x: auto; }
    .xy11-toggle { display: block; }
    .xy11-nav:not(.show) { display: none; }
}