/* ==========================================================================
   内页通用基础骨架样式 (inner.css)
   说明：仅在非首页的内页加载，包含顶栏、面包屑、左右分栏布局与通用侧边栏
   ========================================================================== */

/* -----------------------------------------
   1. 顶栏与面包屑导航 (修复移动端折行挤压)
----------------------------------------- */
.yy-page-topbar {
    background: var(--yy-gray);
    padding: 15px 0;
    border-bottom: 1px solid #e5e5e5;
}
.yy-topbar-flex {
    display: flex; justify-content: space-between; align-items: center;
}
.yy-breadcrumbs-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 核心修复：允许手机端自动折行 */
    font-size: 14px;
    color: #555;
    line-height: 1.8; /* 避免折行后文字上下粘连 */
}
.yy-breadcrumbs-wrap svg {
    margin-right: 5px;
    color: var(--yy-text-muted);
    flex-shrink: 0; /* 核心修复：防止 SVG 在窄屏被挤压变形 */
}
.yy-breadcrumb { display: inline-block; margin-left: 5px; }
.yy-breadcrumb a { color: #555; transition: var(--yy-transition); }
.yy-breadcrumb a:hover { color: var(--yy-primary); }
.yy-breadcrumb span { color: var(--yy-text-muted); }

/* 顶栏独立搜索框UI (如新闻/单页顶部用到) */
.yy-search-form { display: flex; height: 38px; }
.yy-search-form input {
    border: 1px solid #ddd; padding: 0 15px; width: 260px;
    outline: none; border-right: none; font-size: 14px;
    background: #fff; border-radius: 4px 0 0 4px; transition: var(--yy-transition);
}
.yy-search-form input:focus { border-color: var(--yy-primary); }
.yy-search-form button {
    background: var(--yy-primary); border: none; width: 45px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--yy-transition); border-radius: 0 4px 4px 0;
}
.yy-search-form button:hover { background: var(--yy-primary-hover); }

/* -----------------------------------------
   2. 左右分栏布局与主体内容区
----------------------------------------- */
/* 带侧边栏的单页专属布局 */
.yy-page-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 20px;
}
.yy-sidebar {
    /* 移除统一边框，交由内部 widget 控制 */
    background: transparent;
}
.yy-page-content {
    background: #fff; padding: 40px; border: 1px solid #eee; border-radius: 4px;
    min-height: 500px; line-height: 1.8; color: #444;
}
.yy-page-content h2, .yy-page-content h3 { color: #222; margin-top: 0; }

/* -----------------------------------------
   3. 通用侧边栏样式 (菜单类 & 小工具类)
----------------------------------------- */
/* 样式 A：传统企业单页导航菜单 (如关于我们) */
.yy-sidebar-header {
    background: var(--yy-primary); color: #fff; padding: 18px 20px;
    font-size: 18px; font-weight: bold; letter-spacing: 1px; border-radius: 4px 4px 0 0;
}
.yy-sidebar-menu {
    list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid #eee; border-top: none;
}
.yy-sidebar-menu li { border-bottom: 1px solid #f0f0f0; }
.yy-sidebar-menu li:last-child { border-bottom: none; }
.yy-sidebar-menu a {
    display: block; padding: 14px 20px; color: #444; font-size: 15px; transition: var(--yy-transition); position: relative;
}
.yy-sidebar-menu a:hover, .yy-sidebar-menu li.current-menu-item > a {
    color: var(--yy-primary); background: #fcfcfc; padding-left: 25px; font-weight: 500;
}
.yy-sidebar-menu a::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--yy-primary); opacity: 0; transition: var(--yy-transition);
}
.yy-sidebar-menu a:hover::before, .yy-sidebar-menu li.current-menu-item > a::before { opacity: 1; }

/* 样式 B：多功能小工具模块 (如搜索、最新方案、新闻列表共用) */
.yy-sidebar .yy-widget {
    background: #fff;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid #e2e4e8;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.yy-sidebar .yy-widget:last-child {
    margin-bottom: 0;
}
.yy-sidebar .yy-widget-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}
/* 侧边栏专属搜索框排版 */
.yy-sidebar .search-form { display: flex; width: 100%; }
.yy-sidebar .search-field {
    flex: 1; padding: 8px 12px; border: 1px solid #ddd;
    border-right: none; border-radius: 3px 0 0 3px;
    outline: none; font-size: 13px; width: 100%;
}
.yy-sidebar .search-field:focus { border-color: var(--yy-primary); }
.yy-sidebar .search-submit {
    padding: 8px 16px; background: var(--yy-primary); color: #fff;
    border: 1px solid var(--yy-primary); border-radius: 0 3px 3px 0;
    cursor: pointer; font-size: 13px; transition: background-color 0.2s;
}
.yy-sidebar .search-submit:hover { background: var(--yy-primary-hover); }

/* 侧边栏列表 (去圆点化、虚线下划线) */
.yy-side-case-list { list-style: none; padding: 0; margin: 0; }
.yy-side-case-list li { padding: 12px 0; border-bottom: 1px dashed #eee; }
.yy-side-case-list li:last-child { border-bottom: none; padding-bottom: 0; }
.yy-side-case-list li a { color: #444; text-decoration: none; font-size: 14px; line-height: 1.5; transition: color 0.2s; }
.yy-side-case-list li a:hover { color: var(--yy-primary); }


/* -----------------------------------------
   4. 移动端与平板响应式适配
----------------------------------------- */
@media (max-width: 992px) {
    .yy-topbar-flex { flex-direction: column; gap: 15px; align-items: flex-start; }
    .yy-search-form { width: 100%; }
    .yy-search-form input { width: 100%; flex-grow: 1; }

    /* 侧边栏转为上下堆叠结构 */
    .yy-page-layout { grid-template-columns: 1fr; gap: 20px; }
    .yy-page-content { padding: 20px; border: none; }
}

@media (max-width: 768px) {
    .yy-page-topbar { padding: 12px 0; }
    .yy-breadcrumbs-wrap { font-size: 13px; }

    /* 缩小手机端侧边栏小工具的内边距 */
    .yy-sidebar .yy-widget { padding: 15px; }
}