/* =============================================================================
 * The Lupaxa Project Portal
 * About Page
 * ============================================================================= */

.about-introduction {
  margin: 1.5rem 0 var(--lupaxa-spacing-lg);
  padding: 1.5rem 1.75rem;
  cursor: default;
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--md-default-bg-color) 96%,
        var(--lupaxa-blue)
      ),
      var(--md-default-bg-color)
    );
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--lupaxa-radius-card);
  box-shadow: var(--lupaxa-shadow-card);
  transition:
    background var(--lupaxa-transition-medium),
    border-color var(--lupaxa-transition-medium),
    box-shadow var(--lupaxa-transition-medium);
}

.about-introduction:hover {
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--md-default-bg-color) 90%,
        var(--lupaxa-light-blue)
      ),
      var(--md-default-bg-color)
    );
  border-color:
    color-mix(
      in srgb,
      var(--lupaxa-light-blue) 45%,
      var(--md-default-fg-color--lightest)
    );
  box-shadow: var(--lupaxa-shadow-card-hover);
}

.about-introduction p {
  margin: 0;
  color: var(--md-default-fg-color--light);
  font-size: 1.05rem;
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.about-introduction p + p {
  margin-top: 0.9rem;
}

.about-introduction strong {
  color: var(--lupaxa-blue);
  font-weight: 650;
}

[data-md-color-scheme="slate"] .about-introduction strong {
  color: var(--lupaxa-light-blue);
}

.md-typeset .grid.cards.about-summary,
.md-typeset .grid.cards.about-principles,
.md-typeset .grid.cards.about-build {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md-typeset .about-summary > ul > li,
.md-typeset .about-summary > li,
.md-typeset .about-principles > ul > li,
.md-typeset .about-principles > li,
.md-typeset .about-build > ul > li,
.md-typeset .about-build > li {
  padding: var(--lupaxa-spacing-md) 1.4rem;
}

.md-typeset .about-summary > ul > li > p:first-child,
.md-typeset .about-summary > li > p:first-child,
.md-typeset .about-principles > ul > li > p:first-child,
.md-typeset .about-principles > li > p:first-child,
.md-typeset .about-build > ul > li > p:first-child,
.md-typeset .about-build > li > p:first-child {
  margin: 0;
}

.md-typeset .about-summary hr,
.md-typeset .about-principles hr,
.md-typeset .about-build hr {
  margin: 0.65rem 0;
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 var(--lupaxa-spacing-lg);
}

.about-name {
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin: 1.5rem 0 var(--lupaxa-spacing-lg);
  padding: 1.5rem;
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--md-default-bg-color) 94%,
        var(--lupaxa-blue)
      ),
      var(--md-default-bg-color)
    );
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--lupaxa-radius-card);
  box-shadow: var(--lupaxa-shadow-panel);
}

.about-name-mark {
  color: var(--lupaxa-light-blue);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
}

.about-name-content p {
  margin: 0;
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.about-name-content p + p {
  margin-top: 0.75rem;
}