/* ============================================================
   Shared listing-page design system
   Used by: Jobs, Eat, Medical, Shopping
   Visual baseline: Community page
   ============================================================ */

:root{
  --listing-navy:#00366d;
  --listing-navy-hover:#004f98;
  --listing-accent:#0067c9;
  --listing-accent-soft:#eaf4ff;
  --listing-bg:#f4f8fc;
  --listing-ink:#07315f;
  --listing-muted:#60748c;
  --listing-line:#cfe0f2;
  --listing-line-strong:#b8d0eb;
  --listing-soft:#f8fbff;
  --listing-shadow:0 8px 20px rgba(0,54,109,.08);
  --listing-shadow-hover:0 12px 28px rgba(0,54,109,.12);
  --listing-max:1160px;
  --map-height:calc(100vh - 128px);
  --site-navy:var(--listing-navy);
  --site-blue-soft:var(--listing-accent-soft);
  --line:var(--listing-line);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0;
  background:
    linear-gradient(rgba(244,248,252,.96), rgba(244,248,252,.98)),
    url("/assets/images/brand/site-bg.jpg") center top / cover fixed no-repeat,
    var(--listing-bg);
  color:var(--listing-ink);
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
button{cursor:pointer}

.hero{
  width:min(var(--listing-max), calc(100% - 32px));
  margin:0 auto;
  padding:18px 0 10px;
}
.hero-box{
  border:1px solid var(--listing-line);
  border-radius:8px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.99) 0%, rgba(248,251,255,.96) 100%),
    #fff;
  box-shadow:var(--listing-shadow);
  padding:18px;
  overflow:hidden;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--listing-navy);
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.eyebrow-dot{width:9px;height:9px;border-radius:999px;background:var(--listing-accent);flex:0 0 auto}
.jc-directory-breadcrumb{margin:-2px 0 8px}
.hero h1{
  margin:0;
  max-width:760px;
  color:var(--listing-navy);
  font-size:clamp(26px,3.1vw,36px);
  line-height:1.12;
  letter-spacing:0;
  font-weight:900;
}
.hero p{
  max-width:760px;
  margin:7px 0 0;
  color:var(--listing-muted);
  font-size:14px;
  line-height:1.6;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hero-btn,.hero-link{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--listing-line);
  border-radius:7px;
  background:#fff;
  color:var(--listing-navy);
  padding:0 12px;
  font-size:12px;
  font-weight:900;
  box-shadow:0 5px 12px rgba(30,58,95,.04);
}
.hero-btn-primary{background:var(--listing-accent-soft);border-color:var(--listing-line-strong)}

.view-toggle-wrap{
  width:min(var(--listing-max), calc(100% - 32px));
  margin:0 auto;
  padding:0 0 10px;
}
.view-toggle{
  display:inline-flex;
  gap:3px;
  border:1px solid var(--listing-line);
  border-radius:8px;
  background:#fff;
  padding:3px;
  box-shadow:0 6px 14px rgba(25,39,52,.05);
}
.view-btn{
  min-height:32px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#4d5b68;
  padding:0 13px;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
}
.view-btn.active{background:var(--listing-navy);color:#fff}

.layout{
  width:min(var(--listing-max), calc(100% - 32px));
  margin:0 auto;
  padding:8px 0 80px;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.layout.map-mode{
  width:min(1500px, calc(100% - 32px));
  grid-template-columns:280px minmax(0,1fr) minmax(380px,.82fr);
  gap:16px;
}
.filters{position:sticky;top:92px;min-width:0}
.content{min-width:0}
.panel,.filter-panel,.card,.map-shell,.status-box,.empty-box{
  border:1px solid var(--listing-line);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--listing-shadow);
}
.filter-panel,.filters.panel{padding:14px}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel-title,.results-title{margin:0;color:var(--listing-navy);font-weight:900;letter-spacing:0}
.panel-title{font-size:17px}.results-title{font-size:22px;line-height:1.18}
.reset-btn{
  border:1px solid var(--listing-line-strong);
  border-radius:7px;
  background:var(--listing-accent-soft);
  color:var(--listing-navy);
  min-height:32px;
  padding:0 10px;
  font-size:12px;
  font-weight:900;
}
.field{margin-bottom:14px}.field:last-child{margin-bottom:0}.field.is-empty{display:none}
.label{display:block;margin-bottom:7px;color:#405060;font-size:12px;font-weight:900}
.input,.select{
  width:100%;
  min-height:42px;
  border:1px solid var(--listing-line);
  border-radius:7px;
  background:#fff;
  color:var(--listing-ink);
  padding:10px 12px;
  outline:none;
}
.input:focus,.select:focus{border-color:var(--listing-navy);box-shadow:0 0 0 4px rgba(30,58,95,.12)}
.filter-chip-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.filter-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  border:1px solid var(--listing-line);
  border-radius:7px;
  background:#fff;
  color:#3f4d59;
  padding:5px 9px;
  font-size:12px;
  font-weight:900;
  line-height:1.25;
  text-align:center;
  box-shadow:0 5px 12px rgba(25,39,52,.04);
}
.filter-chip.active{background:var(--listing-navy);border-color:var(--listing-navy);color:#fff}
.salary-range{display:grid;gap:7px}.salary-range-values{display:flex;justify-content:space-between;color:#5f6d7a;font-size:12px;font-weight:800}.salary-range input{width:100%;accent-color:var(--listing-navy)}.salary-range-current{color:var(--listing-navy);font-size:12px;font-weight:900}

.toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.results-sub{margin-top:4px;color:var(--listing-muted);font-size:13px}.chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.chip{border:1px solid var(--listing-line);border-radius:7px;background:#fff;color:#384552;padding:7px 10px;font-size:12px;font-weight:900}
.status-box,.empty-box{padding:18px;color:var(--listing-muted)}
.status-box.error,.empty-box.error{border-color:#f2b8b8;background:#fff8f8;color:#8f3434}
.status-title{display:block;margin-bottom:6px;color:var(--listing-navy);font-weight:900}
.status-box.error .status-title,.empty-box.error .status-title{color:#8f3434}
.status-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cards{display:grid;grid-template-columns:1fr;gap:10px;min-width:0}.layout.grid-mode .cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{position:relative;overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.card:hover{transform:translateY(-1px);border-color:var(--listing-line-strong);box-shadow:var(--listing-shadow-hover)}.card.active,.card.active-map-item{border-color:var(--listing-navy);box-shadow:0 0 0 3px rgba(30,58,95,.13),var(--listing-shadow)}
.card-body{padding:14px;display:grid;gap:9px;min-width:0}.layout.list-mode .card-body{grid-template-columns:minmax(0,1fr) minmax(220px,.64fr);gap:14px;align-items:start}.card-main{display:grid;gap:8px;min-width:0}.card-title,.job-title{margin:0;color:var(--listing-ink);font-size:18px;line-height:1.28;font-weight:900;letter-spacing:0}.card-subtitle{margin:3px 0 0;color:var(--listing-muted);font-size:13px;font-weight:700}.card-desc,.job-summary{margin:0;color:#4d5b68;font-size:13px;line-height:1.55}.meta-list{display:grid;gap:5px}.meta-item{display:flex;gap:6px;align-items:baseline;min-width:0;font-size:12px;line-height:1.45}.meta-label{flex:0 0 auto;color:var(--listing-navy);font-weight:900}.meta-value{min-width:0;color:var(--listing-muted);overflow-wrap:anywhere}.layout.grid-mode .card-body{display:grid;gap:8px;padding:13px}.layout.grid-mode .card-title,.layout.grid-mode .job-title{font-size:16px}.layout.grid-mode .card-desc,.layout.grid-mode .job-summary{-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.layout.grid-mode .list-detail-comment,.layout.map-mode .list-detail-comment{display:none}
.eat-tags,.medical-tags,.shopping-tags,.job-chip-row,.detail-chip-row{display:flex;flex-wrap:wrap;gap:5px}.eat-tag,.medical-tag,.shopping-tag,.job-chip{display:inline-flex;align-items:center;min-height:23px;border:1px solid var(--listing-line);border-radius:6px;background:#fff;color:#384552;padding:3px 8px;font-size:11px;font-weight:900;line-height:1.2}.job-chip.primary{background:var(--listing-accent-soft);color:var(--listing-navy);border-color:var(--listing-line-strong)}
.list-detail-comment{display:none;border-left:1px solid var(--listing-line);padding-left:12px;color:#4d5b68;font-size:13px;line-height:1.6}.layout.list-mode .list-detail-comment{display:block}.detail-comment-label{display:block;margin-bottom:5px;color:var(--listing-navy);font-size:12px;font-weight:900}
.link-row,.job-card-actions,.detail-actions,.listing-modal-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.btn,.card-action{min-height:34px;border:1px solid var(--listing-line);border-radius:7px;background:#fff;color:var(--listing-navy);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;font-size:12px;font-weight:900;line-height:1;text-decoration:none}.btn-primary,.card-action.primary{background:var(--listing-navy);border-color:var(--listing-navy);color:#fff}.btn-primary:hover,.card-action.primary:hover{background:var(--listing-navy-hover)}.btn-secondary{background:#fff;color:var(--listing-navy)}

.job-card-body{grid-template-columns:minmax(0,1fr) minmax(190px,.58fr) auto;align-items:center}.job-main,.job-side{display:grid;gap:7px;min-width:0}.job-card-kicker,.job-detail-company{color:var(--listing-muted);font-size:12px;font-weight:900}.job-meta-line{display:flex;flex-wrap:wrap;gap:6px;color:var(--listing-muted);font-size:12px;font-weight:800}.job-meta-line span{display:inline-flex;align-items:center}.job-meta-line span:not(:last-child)::after{content:"/";margin-left:6px;color:#a0aab4}.job-card-actions{justify-content:flex-end}.save-button{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;border:1px solid var(--listing-line);border-radius:7px;background:#fff;color:var(--listing-navy);font-size:17px;font-weight:900;box-shadow:0 8px 16px rgba(30,58,95,.08)}.save-button.saved,.save-button.inline.saved{background:var(--listing-navy);border-color:var(--listing-navy);color:#fff}.save-button.inline{position:static;width:auto;height:34px;padding:0 11px;font-size:12px;display:inline-flex;align-items:center;gap:4px}.layout.grid-mode .job-card-body{display:grid;grid-template-columns:1fr;align-items:start;padding-right:48px}.layout.grid-mode .job-card-actions{justify-content:flex-start}.layout.grid-mode .job-meta-line span::after{display:none}

.map-panel{display:none;position:sticky;top:92px;min-width:0}.layout.map-mode .map-panel{display:block}.layout.map-mode .cards{gap:8px}.layout.map-mode .card-body{display:grid;grid-template-columns:1fr;gap:8px;padding:12px}.layout.map-mode .card-title,.layout.map-mode .job-title{font-size:15px}.layout.map-mode .meta-item{font-size:12px}.layout.map-mode .btn,.layout.map-mode .card-action{min-height:30px;padding:0 9px}.map-shell{height:var(--map-height);overflow:hidden}.map-shell #map,.map-shell .leaflet-container{width:100%;height:100%;min-height:360px}.map-popup{min-width:180px}.map-popup-title{color:var(--listing-navy);font-weight:900}.map-popup-sub,.map-popup-line{margin-top:4px;color:#4d5b68;font-size:12px}.map-popup-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.map-popup-btn{border:1px solid var(--listing-line);border-radius:7px;padding:5px 8px;background:#fff;color:var(--listing-navy);font-size:12px;font-weight:900}

.listing-modal[hidden]{display:none}.listing-modal{position:fixed;inset:0;z-index:1000}.listing-modal-backdrop{position:absolute;inset:0;background:rgba(30,58,95,.34);backdrop-filter:blur(4px)}.listing-modal-dialog{position:relative;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;margin:24px auto;background:#fff;border:1px solid var(--listing-line);border-radius:10px;box-shadow:0 18px 50px rgba(30,58,95,.18)}.listing-modal-content{padding:24px}.listing-modal-close{position:sticky;top:12px;float:right;z-index:2;width:38px;height:38px;margin:12px 12px 0 0;border:1px solid var(--listing-line);border-radius:7px;background:#fff;color:var(--listing-navy);font-size:24px;line-height:1;box-shadow:0 8px 18px rgba(30,58,95,.1)}.listing-detail-title,.job-detail-title{margin:0;color:var(--listing-navy);font-size:clamp(24px,3vw,34px);line-height:1.2}.listing-detail-subtitle,.job-detail-summary{margin:8px 0 0;color:var(--listing-muted);font-weight:700}.listing-detail-grid,.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:18px 0}.listing-detail-item,.detail-item{border:1px solid var(--listing-line);border-radius:9px;background:var(--listing-soft);padding:11px}.listing-detail-label,.detail-item .k{color:var(--listing-navy);font-size:12px;font-weight:900;margin-bottom:3px}.listing-detail-section,.detail-sec{border-top:1px solid var(--listing-line);padding-top:14px;margin-top:14px}.listing-detail-section h4,.detail-sec h4{margin:0 0 7px;color:var(--listing-navy)}.listing-detail-section p,.detail-sec p,.detail-sec li{color:#4d5b68;line-height:1.65}.detail-logo{margin:14px 0}.detail-logo img{max-width:160px;max-height:80px;object-fit:contain;border:1px solid var(--listing-line);border-radius:9px;background:#fff;padding:8px}.job-detail-head{display:grid;gap:9px;clear:both}

@media (max-width:1100px){
  .layout,.layout.map-mode{grid-template-columns:252px minmax(0,1fr)}
  .layout.map-mode .map-panel{grid-column:1/-1;position:static}.map-shell{height:460px}
  .job-card-body{grid-template-columns:1fr}.job-card-actions{justify-content:flex-start}.save-button{right:8px;top:8px}
}
@media (max-width:780px){
  .hero,.view-toggle-wrap,.layout,.layout.map-mode{width:100%;max-width:100vw;padding-left:12px;padding-right:12px}
  .hero{padding-top:10px}.hero-box{border-radius:8px;padding:12px}.hero h1{font-size:clamp(23px,6.4vw,27px);line-height:1.12;overflow-wrap:anywhere}.hero p{font-size:12.5px;line-height:1.45}
  .view-toggle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;overflow:hidden}.view-btn{min-width:0;padding:0 6px;font-size:13px}
  .layout,.layout.map-mode{display:block}.filters{position:static;margin-bottom:12px}.filter-chip-group{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar{align-items:flex-start}.toolbar-actions{justify-content:flex-start}.chips{justify-content:flex-start}.layout.list-mode .card-body,.card-body{grid-template-columns:1fr}.list-detail-comment{border-left:0;border-top:1px solid var(--listing-line);padding-left:0;padding-top:10px}.map-panel{position:static;margin-top:12px}.map-shell{height:420px}.listing-detail-grid,.detail-grid{grid-template-columns:1fr}.listing-modal-dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px);margin:10px auto;border-radius:10px}.listing-modal-content{padding:20px 16px}.job-card-body{padding-right:48px}
}
@media (max-width:480px){
  .filter-chip-group{grid-template-columns:1fr}.view-toggle{gap:2px}.view-btn{font-size:12px}.card-body,.layout.grid-mode .card-body{padding:12px}.job-card-actions,.link-row{align-items:stretch}.job-card-actions .card-action,.link-row .btn{flex:1 1 auto}.map-shell{height:360px}
}