/* ========================= */
/* HERO */
/* ========================= */

.documents-hero{

  position:relative;
 
   height: var(--hero-height);
  min-height: var(--hero-min-height);

  overflow:hidden;
}

.documents-hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.documents-overlay{

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to bottom,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.55)
  );
}

.documents-hero-content{

  position:absolute;
  inset:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  z-index:2;

  padding:20px;
}

.documents-hero-content h1{

  color:white;

  font-size:clamp(2.6rem, 5vw, 5rem);

  font-weight:300;

  margin:22px 0;
}

.documents-hero-content p{

  max-width:720px;

  color:rgba(255,255,255,0.82);

  line-height:1.8;

  font-size:1.05rem;
}

/* ========================= */
/* CATEGORIES */
/* ========================= */

.doc-categories{

  padding:80px 20px 20px;
}

.doc-categories-container{

  width:min(1200px, 92%);
  margin:auto;

  display:grid;

  grid-template-columns:
  repeat(auto-fit, minmax(220px, 1fr));

  gap:24px;
}

.doc-category-card{

  background:white;

  border-radius:28px;

  padding:40px 30px;

  text-decoration:none;

  color:#2e2621;

  transition:0.3s ease;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.04);
}

.doc-category-card:hover{

  transform:translateY(-6px);

  box-shadow:
  0 20px 40px rgba(0,0,0,0.08);
}

.doc-category-card span{

  font-size:2rem;

  display:block;

  margin-bottom:20px;
}

.doc-category-card h3{

  font-size:1.2rem;

  font-weight:500;
}

/* ========================= */
/* DOCUMENTS */
/* ========================= */

.documents-main{

  width:min(1200px, 92%);
  margin:auto;
}

.documents-section{

  padding:120px 0 40px;
}

.section-header{

  margin-bottom:50px;
}

.section-header h2{

  font-size:clamp(2rem, 4vw, 3.5rem);

  margin-top:18px;

  font-weight:300;
}

.documents-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit, minmax(240px, 1fr));

  gap:20px;
}

.document-card{

  position:relative;

  background:white;

  border-radius:24px;

  padding:22px;

  transition:0.3s ease;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.04);

  overflow:hidden;
}

.document-card:hover{

  transform:translateY(-4px);

  box-shadow:
  0 16px 34px rgba(0,0,0,0.08);
}

.document-top{

  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:18px;
}

.document-badge{

  background:#f2ebe4;

  color:#7a5b44;

  padding:6px 12px;

  border-radius:999px;

  font-size:0.68rem;

  font-weight:600;

  letter-spacing:1px;
}

.document-private{

  color:#9b6c45;

  font-size:0.72rem;

  font-weight:500;
}

.document-public{

  color:#6c8b63;

  font-size:0.72rem;

  font-weight:500;
}

.document-card h3{

  font-size:1rem;

  font-weight:500;

  line-height:1.45;

  margin-bottom:24px;
}

.document-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:11px 18px;

  border-radius:999px;

  background:#c9915a;

  color:white;

  text-decoration:none;

  font-size:0.9rem;

  font-weight:500;

  transition:0.3s ease;

  cursor:pointer;
}
.download-row{
  display:flex;
  gap:10px;
  margin-top:auto;
}

.document-btn:hover{

  background:#dba36a;

  transform:translateY(-2px);
}
.document-buttons{
  display:flex;
  gap:10px;
}


/* ========================= */
/* LOCKED CARDS */
/* ========================= */

.locked-card::before{

  content:"";

  position:absolute;
  inset:0;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  pointer-events:none;
}

.locked-card .document-title{

  filter:blur(6px);

  user-select:none;
}

.locked-card .document-top{

  filter:blur(2px);

  user-select:none;
}

/* ========================= */
/* PASSWORD MODAL */
/* ========================= */

.password-modal{

  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.55);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;

  transition:0.3s ease;

  z-index:5000;
}

.password-modal.active{

  opacity:1;
  visibility:visible;
}

.password-box{

  width:min(420px, 92vw);

  background:white;

  border-radius:30px;

  padding:42px;

  text-align:center;

  box-shadow:
  0 30px 80px rgba(0,0,0,0.25);
}

.password-box h3{

  font-size:1.8rem;

  margin-bottom:12px;

  font-weight:400;
}

.password-box p{

  color:#6d6258;

  margin-bottom:26px;

  line-height:1.7;
}

.password-box input{

  width:100%;

  padding:16px 20px;

  border:none;

  background:#f5f1eb;

  border-radius:16px;

  font-size:1rem;

  outline:none;

  margin-bottom:24px;
}

.password-actions{

  display:flex;
  gap:14px;
}

.password-actions button{

  flex:1;

  padding:14px;

  border:none;

  border-radius:999px;

  cursor:pointer;

  font-weight:500;

  transition:0.25s ease;
}

#password-cancel{

  background:#ece7e1;

  color:#5d5148;
}

#password-cancel:hover{

  background:#ddd5cc;
}

#password-submit{

  background:#c9915a;

  color:white;
}

#password-submit:hover{

  background:#dba36a;
}

.password-error{

  color:#c14c4c !important;

  margin-top:18px !important;

  display:none;
}

@media (max-width: 768px){

  .documents-grid{

    grid-template-columns:1fr;
  }


  .documents-section{

    padding:90px 0 20px;
  }

  .document-card{

    padding:26px;
  }

}