// Page-specific styles

// My Documents page

.user-profile-notice p {
  font-size: 1rem;
  color: var(--dt-grey);
  line-height: 1.3;
  margin-bottom: 1.35rem;
}

// Header: h2 full-width on mobile, inline on sm+
.my-documents-instrument--title {
  h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dt-dark);
    line-height: 1;
    margin: 0;
    flex-basis: 100%;

    @include dt-bp-sm {
      flex-basis: auto;
    }
  }
}

// Content inner layout
.my-documents-instrument--content {
  .my-documents-instrument--analyzer-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dt-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.7rem;

    & ~ .my-documents-instrument--analyzer-title {
      margin-top: 1.35rem;
    }
  }

  .views-row {
    margin-bottom: 0.45rem;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// Document row
.document-instances {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  padding: 0.7rem;
  border-radius: $dt-radius-xl;
  background-color: var(--dt-bg);
  transition: background-color 0.2s;

  &:hover {
    background-color: var(--dt-blue-light);
  }

  @include dt-bp-sm {
    flex-wrap: nowrap;
    padding: 0.9rem;
    gap: 0.9rem;
  }
}

// Document icon circle with file icon
.document-instances-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--dt-surface);
  border: 1px solid var(--dt-border);
  display: flex;
  align-items: center;
  justify-content: center;

  &::after {
    content: "";
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    -webkit-mask: url('../images/icon-documents.svg') no-repeat center / contain;
    mask: url('../images/icon-documents.svg') no-repeat center / contain;
    background-color: var(--dt-red);
  }
}

// Document title: fills row 1 exactly (icon 2.25rem + gap 0.7rem + title = 100%)
// forcing selector + download to wrap to row 2 on mobile
.document-instances-title {
  flex: 1 0 calc(100% - 2.95rem);
  min-width: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--dt-dark);
  line-height: 1.3;

  @include dt-bp-sm {
    flex: 1 1 auto;
  }
}

// Language/version selector: leaf-r shape, pushed right on row 2 (mobile) and row 1 (sm+)
.document-instances-selector {
  flex-shrink: 0;
  margin-left: auto;

  select {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0.35rem 1.8rem 0.35rem 0.7rem;
    border-radius: $dt-radius-leaf-r;
    background-color: var(--dt-surface);
    font-size: 0.875rem;
    font-weight: 500;
  }
}

// Download button: icon only below md, icon + text at md+
.document-instances-download-button {
  flex-shrink: 0;

  .button {
    @include dt-icon('../images/download.svg', 0.7rem);
    padding: 0.45rem 0.7rem;
    gap: 0;
    font-size: 0;

    @include dt-bp-md {
      gap: 0.45rem;
      font-size: 0.875rem;
      padding: 0.45rem 0.9rem;
    }
  }
}

// Front page

// Subtitle sits right below h1: collapse title block bottom padding
.path-frontpage .block-page-title-block {
  padding-bottom: 0.25rem;

  @include dt-bp-sm {
    padding-bottom: 0.25rem;
  }
}

// Node page: subtitle + section cards
.node--type-page .text-formatted {
  > p.subtitle {
    font-size: 1rem;
    color: var(--dt-grey);
    line-height: 1.3;
    margin: 0 0 1.8rem;
  }

  .card {
    @extend %dt-card;
    padding: 1.35rem;
    margin-bottom: 1.8rem;

    @include dt-bp-sm {
      padding: 1.8rem;
    }

    &:last-child {
      margin-bottom: 0;
    }

    h2 {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--dt-dark);
      margin: 0 0 1.35rem;
    }

    p {
      font-size: 1rem;
      color: var(--dt-dark);
      line-height: 1.4;
      margin: 0 0 0.7rem;

      &:last-child {
        margin-top: 1.35rem;
        margin-bottom: 0;
      }
    }

    ul {
      list-style: disc;
      padding-left: 1.35rem;
      margin: 0.9rem 0 0;

      li {
        font-size: 1rem;
        color: var(--dt-dark);
        line-height: 1.4;
        margin-bottom: 0.35rem;

        &:last-child {
          margin-bottom: 0;
        }

        ul {
          list-style: circle;
          margin-top: 0.35rem;
          margin-bottom: 0;
        }
      }
    }

    li::marker {
      color: var(--dt-red);
    }
  }
}