/* Scope all styles under .block--documents */
.block--documents .outer-container {
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vw, 72px) min(5vw, 40px);
  background: #f7f8fb;
}

.block--documents .inner-container {
  width: min(1200px, 100%);
}

/* Title */
.block--documents .title-container {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(20px, 3vw, 36px);
}

.block--documents .title-line {
  width: 38px;
  height: 3px;
  border-radius: 3px;
  background: #ff3c3c;
  translate: 0 3px;
}

.block--documents .title {
  margin: 0;
  font-weight: 800;
  color: #111217;
  font-size: clamp(24px, 3.6vw, 40px);
}

/* Content container */
.block--documents .content-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Document card */
.block--documents .document-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.45), transparent 60%),
    rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .25s ease;
}

@media (hover:hover) {
  .block--documents .document:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px rgba(0,0,0,0.12);
  }
}

/* Left: preview + title */
.block--documents .doc-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0; /* for truncation */
}


.block--documents .doc-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #111217;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.block--documents .doc-meta {
  font-size: 0.85rem;
  color: rgba(17,18,23,0.6);
  margin: 2px 0 0;
}

/* Right: download button */
.block--documents .btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ff3c3c;
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s;
  font-size: 0.9rem;
}


.block--documents .btn-download:hover {
  background: #ff5555;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 600px) {
  .block--documents .document {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .block--documents .btn-download {
    align-self: flex-end;
  }
}