/**
 * About Person Component Styles
 *
 * Sizes:    small (220×220 image) | large (596px image)
 * Variants: light (ambience bg)   | dark  (trust bg / outline for small)
 */

/* -------------------------------------------------------
 * Component-scoped custom properties (defaults = small + light)
 * ------------------------------------------------------- */
.about-person {
  container: about-person / inline-size;

  --about-bg: var(--ambience, #ebe6e1);
  --about-border: var(--border-width-bold, 4px) solid var(--ambience, #ebe6e1);
  --about-text: var(--trust, #550a2d);
  --about-label-color: var(--accent-500, #c81e2e);
  --about-content-gap: var(--spacing-300);


  --about-grid-column-span: 10;
  --about-max-width: calc(
      var(--about-grid-column-span) * var(--grid-column-width--desktop)
      + (var(--about-grid-column-span) - 1) * var(--grid-gutter--desktop)
  );

  max-width: var(--about-max-width);
}

.about-person__inner {
  --about-content-padding-vertical: var(--spacing-300);
  --about-content-padding-horizontal: var(--spacing-300);

  @container about-person (min-width: 768px) {
    --about-content-padding-vertical: var(--spacing-600);
    --about-content-padding-horizontal: var(--spacing-600);
  }

  @container about-person (min-width: 1000px) {
    .about-person--large & {
      --about-content-padding-vertical: var(--spacing-800);
      --about-content-padding-horizontal: var(--spacing-1000);
    }
  }
}

/* dark variant: trust bg, white text */
.about-person--dark {
  --about-bg: var(--trust, #550a2d);
  --about-text: var(--white, #ffffff);
  --about-border: var(--border-width-bold, 4px) solid var(--trust, #550a2d);
}

/* large size: no border, larger padding, wider internal gap.
   Placed AFTER --dark so --about-border: none wins for large+dark. */
.about-person--large {
  --about-border: none;

}

/* small + dark: outline card — transparent bg, ambience border, text stays dark.
   Higher specificity intentionally overrides the generic --dark rule. */
.about-person--small.about-person--dark {
  --about-bg: transparent;
  --about-border: var(--border-width-bold, 4px) solid var(--ambience, #ebe6e1);
  --about-text: var(--trust, #550a2d);
}


.about-person__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-200);

  @container about-person (min-width: 768px) {
    gap: var(--spacing-400);

    .about-person--large & {
      --about-content-gap: var(--spacing-500);
      --about-gap: var(--spacing-500);
      grid-template-columns: 0.75fr 1fr;
      align-items: stretch; /* content stretches to fill image height */

      .about-person__content {
        justify-content: space-between;
        border-radius:
          0 /* top-left — meets image */
          var(--border-radius-l, 12px) /* top-right */
          var(--border-radius-l, 12px) /* bottom-right */
          var(--border-radius-l, 12px) /* bottom-left */
        ;
      }
    }

    .about-person--small & {
      display: flex;
    }
  }
}


.about-person__image {

  &,
  & img,
  & picture {
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-l, 12px);

    @container about-person (min-width: 768px) {
      border-radius:
        var(--border-radius-l, 12px) /* top-left */
        0                            /* top-right — meets content */
        var(--border-radius-l, 12px) /* bottom-right */
        var(--border-radius-l, 12px) /* bottom-left */
      ;
    }
  }

  .about-person--small & {
    width: 13.75rem;
  }
}

.about-person__image--placeholder {
  background-color: var(--ambience-600);

  .icon {
    stroke-width: 0.1rem;
    color: var(--ambience);

    width: 100%;
    height: 100%;
    padding: var(--about-content-padding-vertical) var(--about-content-padding-horizontal);
  }
}

/* -------------------------------------------------------
 * Content box — mobile: uniform border-radius
 * ------------------------------------------------------- */
.about-person__content {
  display: flex;
  flex-direction: column;
  gap: var(--about-content-gap);
  padding: var(--about-content-padding-vertical) var(--about-content-padding-horizontal);
  background-color: var(--about-bg);
  border: var(--about-border);
  border-radius: var(--border-radius-l, 12px);
  color: var(--about-text);
}

/* -------------------------------------------------------
 * Identity group (label + name + role)
 * ------------------------------------------------------- */
.about-person__identity {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-050);
}

/* -------------------------------------------------------
 * Name
 * ------------------------------------------------------- */
.about-person__name {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.665px;
  color: var(--about-text);
}

/* -------------------------------------------------------
 * Role / Title (large only)
 * ------------------------------------------------------- */
.about-person__role {
  margin: 0;
  font-weight: var(--font-weight-regular, 400);
  font-size: var(--text-paragraph-l);
  line-height: 1.4;
  letter-spacing: -0.39px;
  color: var(--about-text);
}

/* -------------------------------------------------------
 * Short Bio
 * ------------------------------------------------------- */
.about-person__bio {
  p:first-of-type,
  p:last-of-type {
    margin-block: 0;
  }

  margin: 0;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.4;
  color: var(--about-text);

  /*
  .about-person--small & {
    font-size: var(--quote-size, 26px);
    letter-spacing: -0.39px;
  }
  */

  .about-person--large & {
    font-size: var(--text-paragraph-m);
    line-height: 1.5;
    letter-spacing: -0.18px;
    margin-block: var(--spacing-250);
  }

  /* Inline links within bio text */
  a {
    color: var(--about-text);
    text-decoration: underline;
    text-decoration-skip-ink: none;
  }
}