/* Tor Directory — visual alinhado ao restante do projeto Camada.
   Este arquivo só é carregado dentro de /tor-directory/. */

.directory-page{
  background:#f7f9ff;
  color:var(--ink);
}
.directory-page .directory-current{
  color:var(--blue);
}
.directory-page .directory-current::after{
  content:"";
  display:block;
  width:100%;
  height:2px;
  margin-top:5px;
  border-radius:2px;
  background:var(--blue);
}

.directory-hero{
  min-height:535px;
  padding:91px max(7vw,35px) 78px;
  display:grid;
  grid-template-columns:1.05fr .72fr;
  gap:8vw;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 82% 38%,#2d3f83 0,transparent 27%),
    #10183b;
  overflow:hidden;
}
.directory-hero-copy{
  max-width:700px;
}
.directory-hero .eyebrow{
  color:#c1cceb;
}
.directory-hero h1{
  margin:0;
  color:#fff;
  font-size:clamp(46px,5.6vw,77px);
  letter-spacing:-4px;
  line-height:1.01;
}
.directory-hero h1 em{
  color:#b9a5ff;
}
.directory-lead{
  max-width:610px;
  margin:25px 0 0;
  color:#c4cee6;
  font-size:16px;
  line-height:1.78;
}
.directory-hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:28px;
}
.directory-hero .light{
  margin:0;
}
.directory-back{
  color:#d7def1;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}
.directory-back:hover{
  color:#fff;
}

.directory-alert{
  position:relative;
  padding:30px;
  border:1px solid #485a91;
  border-radius:25px;
  background:#ffffff0d;
  overflow:hidden;
}
.directory-alert::after{
  content:"";
  position:absolute;
  width:245px;
  height:245px;
  right:-125px;
  bottom:-145px;
  border:1px solid #7f70ce;
  border-radius:50%;
  box-shadow:0 0 0 37px #7966d80a;
}
.directory-alert-mark{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:16px;
  color:#423000;
  background:#f2c56b;
  font:bold 29px Georgia,serif;
}
.directory-alert p{
  position:relative;
  z-index:2;
  margin:22px 0 10px;
  color:#fff;
  font-size:20px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:-.6px;
}
.directory-alert small{
  position:relative;
  z-index:2;
  color:#c7d1e9;
  font-size:12px;
  line-height:1.6;
}

.directory-safety{
  padding:100px max(7vw,35px);
  display:grid;
  grid-template-columns:.77fr 1.23fr;
  gap:8vw;
  background:#fff;
}
.directory-safety-heading h2{
  margin:0;
  color:var(--ink);
  font-size:clamp(35px,4.1vw,58px);
  letter-spacing:-3px;
  line-height:1.02;
}
.directory-safety-heading h2 em{
  color:#2b5ee7;
}
.directory-safety-heading>p:not(.eyebrow){
  max-width:500px;
  color:#596a8e;
  font-size:14px;
  line-height:1.75;
}
.directory-safety-list{
  border-top:1px solid var(--line);
}
.directory-safety-list article{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.directory-safety-list article>span{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#eaf0ff;
  color:#315fdc;
  font:500 10px 'DM Mono',monospace;
}
.directory-safety-list h3{
  margin:0;
  color:#17285a;
  font-size:14px;
}
.directory-safety-list p{
  margin:3px 0 0;
  color:#607095;
  font-size:12px;
  line-height:1.58;
}
.directory-vpn-note{
  grid-column:2;
  margin:3px 0 0 52px;
  color:#7a86a4;
  font-size:11px;
  line-height:1.65;
}
.directory-vpn-note strong{
  color:#4e5f89;
}

.directory-wrap{
  width:min(1230px,calc(100% - 70px));
  margin:0 auto;
}
.directory-wrap.layout{
  display:grid;
  grid-template-columns:235px minmax(0,1fr);
  gap:52px;
  align-items:start;
  padding:82px 0 110px;
}

.directory-page .sidebar{
  position:sticky;
  top:24px;
  padding:22px 21px;
  border:1px solid #d7dff0;
  border-radius:21px;
  background:#fff;
  box-shadow:0 13px 34px #30406d0b;
}
.directory-page .sidebar-title{
  margin:0 0 12px;
  color:#536288;
  font:500 10px 'DM Mono',monospace;
  letter-spacing:1px;
  text-transform:uppercase;
}
.directory-page .sidebar nav{
  display:flex;
  flex-direction:column;
}
.directory-page .sidebar a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #e5eaf5;
  color:#3d486c;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.directory-page .sidebar a:hover{
  color:var(--blue);
}
.directory-page .sidebar small{
  color:#8390b0;
  font:500 10px 'DM Mono',monospace;
}
.directory-page .sidebar .meta{
  margin:20px 0 0;
  padding-top:17px;
  border-top:1px solid #e5eaf5;
  color:#8995b2;
  font:500 10px/1.65 'DM Mono',monospace;
}

.directory-page .content{
  min-width:0;
}
.directory-page .intro{
  padding:0 0 34px;
  border-bottom:1px solid var(--line);
  background:transparent;
}
.directory-page .intro h2{
  margin:0;
  color:var(--ink);
  font-size:clamp(35px,4vw,53px);
  letter-spacing:-3px;
  line-height:1.05;
}
.directory-page .intro p{
  max-width:820px;
  margin:16px 0 0;
  color:#5e6c8d;
  font-size:14px;
  line-height:1.75;
}

.directory-page .group{
  padding:53px 0 12px;
  border-bottom:1px solid #dbe3f3;
}
.directory-page .group:last-child{
  border-bottom:0;
}
.directory-page .group-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}
.directory-page .group-number{
  margin:0 0 7px;
  color:#6b84d8;
  font:500 10px 'DM Mono',monospace;
  letter-spacing:.8px;
}
.directory-page .group h2{
  margin:0;
  color:var(--ink);
  font-size:29px;
  line-height:1.16;
  letter-spacing:-1.4px;
}
.directory-page .group-count{
  padding-bottom:4px;
  color:#8692ae;
  font:500 10px 'DM Mono',monospace;
}
.directory-page .group-note{
  max-width:780px;
  margin:10px 0 23px;
  color:#667493;
  font-size:12px;
  line-height:1.65;
}

.directory-page .group-list{
  overflow:hidden;
  border:1px solid #dbe3f3;
  border-radius:21px;
  background:#fff;
}
.directory-page .entry{
  padding:20px 23px 21px;
  border-bottom:1px solid #e2e8f4;
}
.directory-page .entry:last-child{
  border-bottom:0;
}
.directory-page .entry:hover{
  background:#fbfcff;
}
.directory-page .entry-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:17px;
}
.directory-page .entry h3{
  margin:0;
  color:#172250;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.2px;
}
.directory-page .risk{
  flex:none;
  padding:5px 8px;
  border-radius:99px;
  font:500 9px 'DM Mono',monospace;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.directory-page .risk.low{
  color:#277c57;
  background:#e5faef;
}
.directory-page .risk.medium{
  color:#315fdc;
  background:#eaf0ff;
}
.directory-page .risk.high{
  color:#865b18;
  background:#fff2ce;
}
.directory-page .risk.critical{
  color:#9b4545;
  background:#fff0f0;
}
.directory-page .risk.legacy{
  color:#65708d;
  background:#edf0f6;
}

.directory-page .address{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-top:10px;
}
.directory-page .address code{
  min-width:0;
  overflow-wrap:anywhere;
  color:#596b91;
  font:500 11px/1.55 'DM Mono',monospace;
}
.directory-page .copy{
  flex:none;
  border:0;
  padding:0;
  background:none;
  color:#2b5ee7;
  font:800 10px/1.55 'DM Mono',monospace;
  cursor:pointer;
}
.directory-page .copy:hover{
  color:#153aa1;
}
.directory-page .copy.done{
  color:#229369;
}
.directory-page .entry>p{
  max-width:820px;
  margin:9px 0 0;
  color:#6a7694;
  font-size:12px;
  line-height:1.62;
}

.directory-end{
  min-height:350px;
  padding:78px max(7vw,35px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  position:relative;
  overflow:hidden;
  color:#fff;
  background:#7358e3;
}
.directory-end::before,
.directory-end::after{
  content:"";
  position:absolute;
  border:1px solid #ae9cff;
  border-radius:50%;
  width:560px;
  height:560px;
  right:-155px;
  top:-120px;
}
.directory-end::after{
  width:375px;
  height:375px;
  right:-60px;
  top:-25px;
}
.directory-end>div,
.directory-end>a{
  position:relative;
  z-index:1;
}
.directory-end .eyebrow{
  color:#e7e1ff;
}
.directory-end h2{
  margin:0;
  color:#fff;
  font-size:clamp(35px,4.4vw,59px);
  line-height:1.02;
  letter-spacing:-3px;
}
.directory-end h2 em{
  color:#fff;
}
.directory-end p:not(.eyebrow){
  max-width:570px;
  color:#e3ddff;
  font-size:13px;
}
.directory-end .white{
  margin:0;
}

@media(max-width:900px){
  .directory-wrap.layout{
    grid-template-columns:1fr;
    gap:35px;
  }
  .directory-page .sidebar{
    position:static;
  }
  .directory-page .sidebar nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:28px;
  }
  .directory-page .sidebar .meta{
    display:none;
  }
}

@media(max-width:760px){
  .directory-hero{
    display:flex;
    flex-direction:column;
    gap:40px;
    min-height:0;
    padding:68px 23px 61px;
  }
  .directory-hero h1{
    font-size:50px;
    letter-spacing:-3px;
  }
  .directory-lead{
    font-size:15px;
  }
  .directory-alert{
    width:100%;
    padding:25px;
    border-radius:21px;
  }

  .directory-safety{
    display:flex;
    flex-direction:column;
    gap:35px;
    padding:72px 23px;
  }
  .directory-safety-heading h2{
    letter-spacing:-2.2px;
  }
  .directory-vpn-note{
    margin:0 0 0 52px;
  }

  .directory-wrap{
    width:calc(100% - 46px);
  }
  .directory-wrap.layout{
    padding:58px 0 76px;
  }
  .directory-page .sidebar{
    padding:20px;
  }
  .directory-page .group{
    padding-top:43px;
  }
  .directory-page .group-list{
    border-radius:18px;
  }
  .directory-page .entry{
    padding:18px 17px;
  }
  .directory-page .entry h3{
    font-size:14px;
  }

  .directory-end{
    min-height:0;
    padding:65px 23px;
    display:block;
  }
  .directory-end h2{
    letter-spacing:-2.2px;
  }
  .directory-end .white{
    margin-top:19px;
  }
}

@media(max-width:540px){
  .directory-hero h1{
    font-size:44px;
  }
  .directory-hero-actions{
    align-items:flex-start;
    flex-direction:column;
  }
  .directory-page .sidebar nav{
    grid-template-columns:1fr;
  }
  .directory-page .group-head{
    align-items:flex-start;
  }
  .directory-page .group-count{
    padding-top:7px;
  }
  .directory-page .entry-head{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .directory-page .address{
    display:block;
  }
  .directory-page .copy{
    display:block;
    margin-top:6px;
  }
}

@media(prefers-reduced-motion:reduce){
  .directory-page *{
    scroll-behavior:auto;
  }
}