/* ===========================
   Juliana — About page
   =========================== */

/* A-TITLE, A-BIO, A-DRAWN, A-QUOTE */

/* ===========================
   Main content styles
   =========================== */

/* display: grid provided by companion .j-grid-* class */
.j-bio__grid {
  /* grid */
  align-items: start;
  gap: var(--sp-48);

}

@media (min-width: 769px) {
  .j-bio__grid {
    /* grid */
    grid-template-columns: 5fr 7fr;
    align-items: stretch;
    gap: var(--sp-64);

  }

  /* Desktop: portrait stretches to match text column height; object-fit covers the crop */
  .j-bio__portrait {
    /* other */
    aspect-ratio: auto;

  }
}

/*
 * Portrait column: always visible with defined aspect-ratio.
 * Fallback gradient shows when no featured image is set.
 */
.j-bio__portrait {
  /* color */
  background-color: var(--c-surface-1);
  background-image: linear-gradient(160deg, var(--c-surface-2) 0%, var(--c-surface-1) 100%);

  /* box model */
  width: 100%;

  /* border */
  border-radius: var(--r-card);

  /* positioning */
  position: relative;

  /* other */
  aspect-ratio: 2 / 3;
  overflow: hidden;

}

.j-bio__portrait .wp-block-post-featured-image {
  /* box model */
  width: 100%;
  height: 100%;

  /* positioning */
  position: absolute;
  inset: 0;

}

.j-bio__img,
.j-bio__portrait .wp-block-post-featured-image img {
  /* box model */
  width: 100%;
  height: 100%;

  /* border */
  border-radius: var(--r-card);

  /* other */
  object-fit: cover;

}

.j-bio__text {
  /* display */
  display: flex;

  /* flexbox */
  flex-direction: column;
  gap: var(--sp-24);

}

.j-bio__heading {
  /* box model */
  margin: 0;

}

.j-bio__quote {
  /* text */
  text-align: left;

  /* box model */
  padding-left: var(--sp-24);
  margin: var(--sp-8) 0;

  /* border */
  border-left: 3px solid var(--c-accent);

}


/* ===========================
   Preoccupations grid (A-DRAWN)
   =========================== */

.j-drawn {
  /* border */
  border-top: 1px solid var(--c-hairline);

}

.j-drawn__grid {
  /* box model */
  margin-top: var(--sp-48);

}


/* ===========================
   Quote band
   =========================== */

.j-quote-band {
  /* border */
  border-top: 0;

}

.j-quote-band .j-container {
  /* box model */
  max-width: 900px;

}


/* ===========================
   About - Media Queries
   =========================== */