/* Shared customer-facing directory layout for Tradesman and Local Pros. */
.directory-hero{
  padding:76px 0 36px;
  position:relative;
  border-bottom:1px solid var(--hair);
}
.directory-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--bg-deep);
  opacity:.42;
  pointer-events:none;
}
.directory-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:42px;
  align-items:center;
}
.directory-hero h1{
  margin-top:18px;
  max-width:14ch;
  color:var(--text-strong);
}
.directory-hero h1 span{color:var(--accent)}
.directory-hero .lead{
  margin-top:20px;
  max-width:62ch;
  color:var(--sub);
  font-size:16px;
}
.directory-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.directory-steps{
  background:var(--surface);
  border:1px solid var(--line);
  padding:22px 24px;
}
.directory-steps-top{
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--hair);
  padding-bottom:15px;
  margin-bottom:4px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.directory-steps-top>span{color:var(--accent)}
.directory-steps-top b{color:var(--good);margin-left:auto}
.directory-route-step{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid var(--hair);
}
.directory-route-step:last-child{border-bottom:0}
.directory-route-step strong{
  font-family:var(--font-display);
  color:var(--accent);
  font-size:14px;
}
.directory-route-step span{font-size:12.5px;color:var(--sub)}
.directory-main{padding-top:56px;padding-bottom:80px}
.directory-search-shell{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px;
  margin-bottom:28px;
}
.directory-search-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--hair);
  padding-bottom:20px;
  margin-bottom:20px;
}
.directory-search-head h2,.directory-results-head h2{
  color:var(--text-strong);
  margin-top:10px;
}
.directory-search-head p{
  max-width:46ch;
  color:var(--sub);
  font-size:13.5px;
  margin-top:4px;
}
.directory-search-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:end;
}
.directory-search-grid label{display:block}
.directory-search-grid label>span{
  display:block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sub);
  margin-bottom:8px;
}
.directory-search-grid input,
.directory-search-grid select{
  width:100%;
  min-height:45px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  padding:12px 13px;
  outline:none;
}
.directory-search-grid input:focus,
.directory-search-grid select:focus{border-color:var(--accent)}
.directory-search-grid input::placeholder{color:var(--sub);opacity:.72}
.directory-checks{
  grid-column:1/3;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.directory-checks label{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  border:1px solid var(--line);
  background:var(--bg);
  padding:9px 12px;
}
.directory-checks label>span{
  margin:0;
  font-size:10.5px;
  color:var(--text);
}
.directory-checks input{width:16px;height:16px;min-height:0;padding:0;accent-color:var(--accent)}
.directory-search-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  grid-column:3/5;
}
.directory-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:24px;
  align-items:start;
}
.directory-results-panel,.directory-side-panel{min-width:0}
.directory-results-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.directory-count{
  border:1px solid var(--line);
  background:var(--surface);
  padding:10px 12px;
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.directory-results{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.directory-side-panel{display:grid;gap:14px}
.directory-info-card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:22px;
}
.directory-info-k{
  display:block;
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.directory-info-card h3{
  color:var(--text-strong);
  font-size:16px;
  text-transform:uppercase;
}
.directory-info-card p{
  color:var(--sub);
  font-size:12.5px;
  margin-top:10px;
}
.directory-provider-note{
  border-top:1px solid var(--hair);
  margin-top:18px;
  padding-top:18px;
}
.directory-provider-note .btn{margin-top:12px}

/* Local Pros result cards use the same full-width result rhythm as Tradesman. */
.local-pros-directory-page .lp-provider-results{
  grid-template-columns:1fr;
  gap:14px;
}
.local-pros-directory-page .lp-result-card{
  padding:24px;
}
.local-pros-directory-page .lp-directory-status{
  margin:0 0 14px;
}

@media(max-width:1100px){
  .directory-search-grid{grid-template-columns:1fr 1fr}
  .directory-checks{grid-column:1/2}
  .directory-search-actions{grid-column:2/3}
  .directory-content-grid{grid-template-columns:1fr}
  .directory-side-panel{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .directory-hero-grid{grid-template-columns:1fr}
  .directory-hero h1{max-width:15ch}
  .directory-side-panel{grid-template-columns:1fr}
}
@media(max-width:640px){
  .directory-hero{padding-top:48px}
  .directory-search-head,.directory-results-head{display:block}
  .directory-search-grid{grid-template-columns:1fr}
  .directory-checks,.directory-search-actions{grid-column:auto}
  .directory-search-actions{justify-content:flex-start}
  .directory-search-actions .btn{flex:1;justify-content:center}
}