/* ==========================================
   MAIN TITLE AND SUBTITLE
   ========================================== */

/* Main title */
.title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1em !important;
  white-space: nowrap;
}

/* Subtitle */
.subtitle {
  font-family: "DM Sans", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* ==========================================
   PROFILE / 3D MODEL COLUMN
   ========================================== */

/* Profile image and 3D model */
.about-image {
  margin-top: -2em !important;
  padding: 0 2em 0 0;
}

/* Prevent portrait flashing before 3D model loads */
.about-entity img.about-image {
  display: none !important;
}

/* 3D model viewer */
model-viewer.about-image {
  display: block;
  width: 100% !important;
  min-width: 300px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
  border-radius: 0;
}

/* Smooth appearance after loading */
model-viewer.about-image.loaded {
  opacity: 1;
}

/* 3D model background */
.model-stage {
  position: relative;
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1em;
}

/* Gradient circle */
.model-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;

  background: linear-gradient(
    90deg,
    var(--circle-1, #2784DF) 0%,
    var(--circle-2, #9A9BE8) 35%,
    var(--circle-3, #DCC9ED) 68%,
    var(--circle-4, #F8E8E5) 100%
  );

  z-index: 0;
}

/* 3D model above the circle */
.model-stage model-viewer {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* No panel or border around the home page content */
.quarto-about-solana .about-entity {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ==========================================
   PROFILE SOCIAL LINKS
   ========================================== */

.about-entity .about-links {
  column-gap: 0em !important;
  justify-content: flex-end !important;
}

.about-entity .about-link {
  padding: 0.25em !important;
  border: none !important;
}

/* Icon size (works for both Bootstrap icons and Academicons) */
.about-entity .about-links .about-link i,
.about-entity .about-links .about-link .bi,
.about-entity .about-links .about-link .ai {
  font-size: 1.8rem !important;
}


/* ==========================================
   INTRODUCTION TEXT COLUMN
   ========================================== */

.entity-contents {
  text-align: right !important;
  padding: 0 2em;
}

.about-contents,
.about-contents p {
  font-family: "DM Sans", sans-serif !important;
  padding: 0 0 0 2em !important;
}


/* ==========================================
   PAGE SPACING
   ========================================== */

#quarto-content {
  padding-top: 10rem;
}


/* ==========================================
   LEARN MORE LINK
   ========================================== */

.about {
  margin-top: 2em;
  text-align: right;
}

.about-link {
  font-family: "DM Sans", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.about-link:hover {
  text-decoration: underline !important;
}

/* Colour comes from --link-accent, set in each theme file
   (blue in light mode, orange in dark mode) */
div.quarto-about-solana .about-entity .about .about-link,
div.quarto-about-solana .about-entity .about .about-link:hover,
div.quarto-about-solana .about-entity .about .about-link:focus {
  color: var(--link-accent, #2784DF) !important;
}

div.quarto-about-solana .about-entity .about .about-link:hover {
  text-decoration: underline !important;
}

/* Symmetrical two-column layout: the gap sits on the page's centre line */
@media (min-width: 992px) {

  .quarto-about-solana .about-entity {
    --circle: 340px;   /* match the circle size set in .model-stage::before */
    --gap: 48px;       /* half of the visible gap between text and circle */

    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1120px;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* Two equal-width columns */
  .quarto-about-solana .entity-contents,
  .quarto-about-solana .model-stage {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Text: right-aligned against the centre line */
  .quarto-about-solana .entity-contents {
    padding: 0 var(--gap) 0 0 !important;
  }

  /* Circle: left-aligned against the centre line */
  .quarto-about-solana .model-stage {
    justify-content: flex-start !important;
    max-width: none !important;
  }

  .quarto-about-solana .model-stage::before {
    left: var(--gap);
    width: var(--circle);
    max-width: none;
    transform: translateY(-50%);
  }

  .quarto-about-solana .model-stage model-viewer {
    flex: none !important;
    width: var(--circle) !important;
    margin: 0 0 0 var(--gap) !important;
  }
}


/* ==========================================
   RESPONSIVE HOMEPAGE LAYOUT
   ========================================== */

/* Medium screens and smaller laptops */
@media (max-width: 1100px) {
  .model-stage {
    height: 340px;
  }

  .model-stage::before {
    max-width: 340px;
  }

  .model-stage model-viewer {
    transform: none;
  }

  .title {
    font-size: 2.4rem;
    white-space: normal;
  }
}

/* Stacked layout (Bootstrap lg breakpoint and below) */
@media (max-width: 991.98px) {

  /* Less clearance needed above the content when stacked */
  #quarto-content {
    padding-top: 6rem;
  }

  /* Stack everything in one centred column */
  .about-entity {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Model and circle first */
  .model-stage {
    order: -1 !important;
    width: 100%;
    max-width: 300px;
    height: 300px;
    margin: 0 auto 1.5em auto !important;
  }

  .model-stage::before {
    width: 100%;
    max-width: none;
  }

  .model-stage model-viewer,
  model-viewer.about-image {
    min-width: 0 !important;
    width: 100% !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Text, title and socials after the model */
  .entity-contents,
  .about-contents,
  .about-contents p {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 1em !important;
  }

  .title,
  .subtitle {
    text-align: center !important;
    white-space: normal;
  }

  /* Social icons in one centred row */
  .about-entity .about-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center !important;
    width: 100%;
  }

  .about-entity .about-link {
    display: inline-block !important;
    width: auto !important;
    padding: 0.25em 0.4em !important;
  }

  /* "Learn more" link */
  .about {
    text-align: center;
  }
}

/* Larger model and circle on tablet-sized screens */
@media (min-width: 742px) and (max-width: 991.98px) {
  .model-stage {
    max-width: 380px;
    height: 380px;
  }
}

/* Smaller model and circle on phones */
@media (max-width: 741px) {
  .model-stage {
    max-width: 260px;
    height: 260px;
  }

  .title {
    font-size: 2rem;
  }
}

/* Balance line lengths in the bio */
.about-contents p {
  text-wrap: balance;
}

@media (min-width: 992px) {
  .about-contents p {
    text-align: justify !important;
    text-align-last: right;   /* keeps the final line aligned to the right edge */
  }
}