/* =========================================================
   入境医疗网 · 黄页目录（医疗机构 / 服务商）
   与 extend_common.css 共用配色变量
   ========================================================= */

.dir-hero{
  background:
    radial-gradient(900px 320px at 85% -20%, rgba(184,145,46,.30), transparent 60%),
    linear-gradient(135deg,#0f172a 0%,#13202f 55%,#0f2a2a 100%);
  color:#e2e8f0;
  border-bottom:3px solid var(--gold);
}
.dir-hero-provider{
  background:
    radial-gradient(900px 320px at 85% -20%, rgba(20,184,166,.26), transparent 60%),
    linear-gradient(135deg,#0f172a 0%,#0e2b2b 55%,#0f172a 100%);
  border-bottom-color:var(--pine);
}
.dir-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:center;padding:38px 0 34px}
.dir-eyebrow{font-size:11px;letter-spacing:2.6px;color:var(--gold-soft);font-weight:700;margin-bottom:12px}
.dir-hero-provider .dir-eyebrow{color:#5eead4}
.dir-hero h1{font-family:"Noto Serif SC",serif;font-size:38px;font-weight:900;letter-spacing:3px;color:#fff;line-height:1.2;margin-bottom:12px}
.dir-hero-copy p{font-size:14px;line-height:1.9;color:#a9b8c8;max-width:640px}
.dir-hero-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.dir-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:8px;font-size:13.5px;font-weight:700;transition:.18s;white-space:nowrap}
.dir-btn-gold{background:linear-gradient(135deg,#d6b04f,#b8912e);color:#2b2007;box-shadow:0 8px 20px rgba(184,145,46,.28)}
.dir-btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px);color:#2b2007}
.dir-btn-ghost{border:1px solid rgba(255,255,255,.26);color:#dbe5ee}
.dir-btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}
.dir-hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dir-hero-stats .dhs{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:14px 12px;text-align:center}
.dir-hero-stats .dhs b{display:block;font-family:"Noto Serif SC",serif;font-size:27px;color:#f2d06b;line-height:1.15}
.dir-hero-provider .dir-hero-stats .dhs b{color:#5eead4}
.dir-hero-stats .dhs span{font-size:11.5px;color:#94a3b8;letter-spacing:.5px}

.dir-wrap{padding-top:22px;padding-bottom:30px}

.dir-toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.dir-searchbox{display:flex;flex:1;min-width:280px;max-width:560px;border:1.5px solid var(--pine);border-radius:8px;overflow:hidden;background:#fff}
.dir-searchbox input[type=text]{flex:1;border:none;outline:none;padding:9px 12px;font-size:13.5px;color:var(--ink);background:transparent}
.dir-searchbox button{border:none;background:var(--pine);color:#fff;font-size:13.5px;font-weight:700;padding:0 22px;cursor:pointer}
.dir-searchbox button:hover{background:var(--pine-deep)}
.dir-sort{display:flex;gap:4px;align-items:center;font-size:13px}
.dir-sort a{padding:6px 12px;border-radius:6px;color:var(--muted)}
.dir-sort a:hover{color:var(--pine-deep);background:var(--paper)}
.dir-sort a.on{background:var(--ink);color:#fff}
.dir-sort a:last-child{color:var(--pine-deep)}

.dir-filter{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 16px;margin-top:12px}
.df-row{display:flex;gap:14px;padding:10px 0;border-bottom:1px dashed #eef2ef;align-items:flex-start}
.df-row:last-child{border-bottom:none}
.df-label{width:76px;flex-shrink:0;font-size:12.5px;font-weight:700;color:#475569;padding-top:4px;letter-spacing:.5px}
.df-options{display:flex;flex-wrap:wrap;gap:4px 6px;flex:1}
.df-options a{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:100px;font-size:12.5px;color:#475569;border:1px solid transparent}
.df-options a:hover{background:var(--paper);color:var(--pine-deep)}
.df-options a.on{background:var(--mist);border-color:#99f6e4;color:var(--pine-deep);font-weight:700}
.df-options a i{font-style:normal;font-size:10.5px;color:#94a3b8}
.df-options a.on i{color:var(--pine-deep)}

.dir-resultbar{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:16px 2px 12px;flex-wrap:wrap}
.dr-left{font-size:13px;color:var(--muted)}
.dr-left b{color:var(--red);font-size:16px;font-family:"Noto Serif SC",serif}
.dr-tip{font-size:11.5px;color:#94a3b8}

.dir-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dir-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 16px 13px;transition:.18s;position:relative;overflow:hidden}
.dir-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--pine),var(--gold));opacity:0;transition:.18s}
.dir-card:hover{border-color:#cbd5e1;box-shadow:0 12px 26px rgba(15,23,42,.09);transform:translateY(-2px)}
.dir-card:hover:before{opacity:1}
.dc-head{display:flex;gap:11px;align-items:flex-start}
.dc-logo{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Noto Serif SC",serif;font-size:20px;font-weight:900;flex-shrink:0}
.dir-card:nth-child(3n+2) .dc-logo{background:linear-gradient(135deg,#8a6a1c,#c9a13c)}
.dir-card:nth-child(3n) .dc-logo{background:linear-gradient(135deg,#9a1620,#b52028)}
.dc-title{flex:1;min-width:0}
.dc-title h3{font-size:15px;line-height:1.45;font-weight:800;color:var(--ink);margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dc-cat{display:inline-block;font-size:10.5px;color:var(--pine-deep);background:var(--mist);border-radius:4px;padding:1px 7px;font-weight:700}
.dc-rec{position:absolute;right:12px;top:12px;font-size:10px;color:#7a5a10;background:linear-gradient(135deg,#f7e3a8,#e8c86a);border-radius:4px;padding:2px 7px;font-weight:800;letter-spacing:.5px}
.dc-tags{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 9px}
.dc-tags span{font-size:11px;color:#475569;background:#f1f5f9;border-radius:4px;padding:2px 7px;white-space:nowrap}
.dir-org-badge{background:#e0f2fe !important;color:#0369a1 !important;font-weight:800}
.dir-org-badge-2{background:#ccfbf1 !important;color:#0f766e !important}
.dir-org-badge-3{background:linear-gradient(135deg,#f7e3a8,#e8c86a) !important;color:#6b4d08 !important}
.dc-intro{font-size:12.5px;line-height:1.75;color:#64748b;margin:0 0 11px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:65px}
.dc-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11.5px;color:#475569;padding-top:10px;border-top:1px dashed #eef2ef}
.dc-meta .dcm{display:inline-flex;align-items:center;gap:4px}
.dc-meta .dcm i{font-style:normal;color:#94a3b8;font-size:10.5px}
.dc-spec{font-size:11.5px;color:#7c5a12;background:#fdf8e8;border:1px solid #f3e6bd;border-radius:6px;padding:5px 8px;margin-top:9px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dc-cert{font-size:11px;color:var(--muted);margin-top:7px}
.dc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;font-size:11.5px}
.dc-link{color:var(--pine-deep);font-weight:700}
.dc-date{color:#94a3b8}

.dir-pager{display:flex;justify-content:center;gap:6px;margin-top:24px;flex-wrap:wrap}
.dir-pager a{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:7px;font-size:13px;color:#475569;background:#fff}
.dir-pager a:hover{border-color:var(--pine);color:var(--pine-deep)}
.dir-pager a.on{background:var(--pine);border-color:var(--pine);color:#fff;font-weight:700}

.dir-empty{background:#fff;border:1px dashed #cbd5e1;border-radius:12px;padding:52px 20px;text-align:center;color:var(--muted)}
.dir-empty b{display:block;font-size:16px;color:var(--ink);margin-bottom:8px}
.dir-empty p{font-size:13px}
.dir-empty a{color:var(--pine-deep);font-weight:700}

.dir-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(120deg,#0f172a,#132a2a);border-radius:12px;padding:22px 26px;margin-top:24px;color:#e2e8f0}
.dc-cta-copy h3{font-family:"Noto Serif SC",serif;font-size:18px;color:#fff;margin-bottom:6px;letter-spacing:1px}
.dc-cta-copy p{font-size:12.5px;color:#94a3b8;line-height:1.7;max-width:760px}

.dir-note-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-top:14px}
.dir-note-box b{font-size:12.5px;color:var(--ink)}
.dir-note-box p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:5px}

@media(max-width:1080px){
  .dir-hero-inner{grid-template-columns:1fr;gap:24px}
  .dir-hero-stats{max-width:520px}
  .dir-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .dir-hero h1{font-size:28px;letter-spacing:1px}
  .dir-hero-inner{padding:28px 0}
  .dir-hero-stats{grid-template-columns:repeat(2,1fr)}
  .dir-toolbar{flex-direction:column;align-items:stretch}
  .dir-searchbox{max-width:none}
  .dir-sort{justify-content:space-between}
  .df-row{flex-direction:column;gap:6px}
  .df-label{width:auto;padding-top:0}
  .dir-grid{grid-template-columns:1fr}
  .dc-intro{min-height:0}
  .dir-cta{flex-direction:column;align-items:flex-start}
}