/*
 * 企业站点目录 — 站点门户首页样式
 *
 * 独立于站点 templates/base.css：门户是「整套系统」的入口页，
 * 不随站点模板切换而变化，自持一套简洁的配色与排版。
 *
 * 设计原则：
 *   1. 顶部一个高亮搜索框，承担当下站点目录的检索入口；
 *   2. 下方为整齐的公司卡片列表（名称 / 主营 / 地址 / 联系方式）；
 *   3. 适配 PC 与移动端，移动端搜索框与卡片宽度自动充满屏幕。
 */

:root {
    --bg:        #f5f7fb;
    --bg-alt:    #ffffff;
    --ink:       #0f1a2e;
    --ink-soft:  #33415c;
    --muted:     #6b7a94;
    --line:      #e6ebf3;
    --line-strong: #d4dbe7;
    --brand:     #2f5de3;
    --brand-deep: #1c3fae;
    --brand-soft: #eaf0ff;
    --danger:    #d0444b;
    --radius:    14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(15, 26, 46, .05), 0 4px 12px rgba(15, 26, 46, .04);
    --shadow-md: 0 8px 28px rgba(15, 26, 46, .08);
    --shadow-focus: 0 0 0 4px rgba(47, 93, 227, .15);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* 触屏：去掉系统默认的灰色点击高亮 */
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================
   顶部 Header
   ============================================ */
.portal-header {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 13px;
}

.brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-text strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

.brand-text em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    margin-top: 2px;
}

.header-stat {
    color: var(--muted);
    font-size: 13px;
}

/* ============================================
   搜索区
   ============================================ */
.portal-main {
    padding-bottom: 60px;
}

.search-section {
    padding: 48px 0 28px;
    background:
        radial-gradient(circle at 18% -10%, rgba(47, 93, 227, .10), transparent 50%),
        radial-gradient(circle at 82% 10%, rgba(123, 77, 224, .08), transparent 55%),
        var(--bg);
}

.search-title {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--ink);
}

.search-sub {
    margin: 8px 0 28px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.search-box {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    height: 56px;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s, box-shadow .2s;
}

.search-box:focus-within {
    border-color: var(--brand);
    box-shadow: var(--shadow-focus);
}

.search-icon {
    color: var(--muted);
    font-size: 22px;
    margin-right: 12px;
    line-height: 1;
    flex: none;
}

#company-search {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: var(--ink);
    height: 100%;
    min-width: 0;
}

#company-search::-webkit-search-cancel-button { display: none; }

.search-clear {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--line);
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1;
    margin-left: 8px;
    flex: none;
}

.search-clear[hidden] { display: none; }

.search-tip {
    margin: 18px auto 0;
    max-width: 720px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
}

.tip-label { line-height: 28px; }

.tip-chip {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 13px;
    transition: border-color .15s, color .15s, background .15s;
}

/* 触屏按压反馈 */
.tip-chip:active {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

@media (hover: hover) {
    .tip-chip:hover {
        border-color: var(--brand);
        color: var(--brand);
        background: var(--brand-soft);
    }

    .search-clear:hover { background: var(--line-strong); }

    .footer-meta a:hover { color: var(--brand); }
}

/* ============================================
   列表区
   ============================================ */
.list-section {
    padding: 24px 0 0;
}

.list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.list-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}

.list-count {
    color: var(--muted);
    font-size: 13px;
}

.company-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* min() 兜底：屏幕比卡片最小宽还窄时收缩为单列满宽，避免横向溢出 */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 14px;
}

.company-item {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* 触屏按压反馈：手指按下即见边框变色 + 轻微缩放，替代不可用的 hover */
.company-item:active {
    border-color: var(--brand);
    transform: scale(.99);
}

/* hover 效果仅在真正支持悬停的设备上生效（触屏点击后不会粘滞高亮） */
@media (hover: hover) {
    .company-item:hover {
        border-color: var(--brand);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

    .company-item:hover .company-name { color: var(--brand); }
}

.company-link {
    display: block;
    padding: 16px 18px;
}

.company-main {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.company-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    flex: 1;
    word-break: break-word;
}

.company-region {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: 12px;
    line-height: 1.5;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-main-biz,
.company-meta {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.company-main-biz .lbl,
.company-meta .lbl {
    flex: none;
    color: var(--muted);
    font-size: 12px;
    width: 32px;
    text-align: right;
}

.company-main-biz .val,
.company-meta .val {
    flex: 1;
    word-break: break-word;
    min-width: 0;
}

/* ============================================
   空态
   ============================================ */
.empty-state {
    text-align: center;
    padding: 56px 16px;
    color: var(--muted);
    background: var(--bg-alt);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
}

.empty-state[hidden] { display: none; }

.empty-icon {
    font-size: 36px;
    color: var(--line-strong);
    margin-bottom: 8px;
}

.empty-state h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--ink-soft);
    font-weight: 600;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

.link-btn {
    color: var(--brand);
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================
   底部 Footer
   ============================================ */
.portal-footer {
    border-top: 1px solid var(--line);
    background: var(--bg-alt);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 18px;
    color: var(--muted);
    font-size: 13px;
}

.footer-sep {
    margin: 0 8px;
    color: var(--line-strong);
}

.footer-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.footer-meta a {
    color: var(--muted);
}

/* ============================================
   响应式
   ============================================ */
@media (max-width: 720px) {
    .wrap { padding: 0 16px; }

    .header-inner { height: 56px; }
    .header-stat  { display: none; }

    .search-section { padding: 28px 0 18px; }
    .search-title   { font-size: 22px; }
    .search-sub     { margin-bottom: 20px; }
    .search-box     { height: 50px; padding: 0 14px; }
    /* 关键：输入框字号必须 >=16px，否则 iOS Safari 聚焦时会强制放大整个页面 */
    #company-search { font-size: 16px; }
    .search-icon    { font-size: 18px; margin-right: 10px; }

    /* 加大提示词按钮的触控区域（44px 是移动端推荐最小触控目标） */
    .tip-chip { padding: 8px 16px; font-size: 14px; }
    .tip-label { line-height: 36px; }

    .company-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .company-link { padding: 14px 16px; }

    /* 卡片信息行在小屏允许换行，避免长地址横向挤压 */
    .company-region { max-width: 40%; }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 16px;
        /* 刘海屏/手势条安全区 */
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .footer-meta { flex-wrap: wrap; gap: 8px 14px; }
}

@media (max-width: 360px) {
    .search-title { font-size: 19px; }
    .search-sub   { font-size: 13px; }
}