/* ============================================================
   ABOUT.CSS — "À propos" Section
   ============================================================
   PURPOSE:
     Styles Brandon's bio section: headshot image on the left,
     credentials and values text on the right.

   BUG FIX APPLIED HERE:
     The original code used:
       <img style="height:auto;width:auto;">
     with NO explicit width or max-width on the image itself,
     AND no constrained width on .about-img-wrap.

     This caused two related problems:
       1. The img had no intrinsic size to fill the grid column,
          so the column could collapse.
       2. The .about-accent corner decoration used z-index: -1,
          which placed it BEHIND the section's background,
          making it invisible — and in some stacking contexts
          it pulled the entire image container behind the
          background too, visually hiding the section.

     FIXES:
       - Added width: 100% to the <img> so it fills its column.
       - Added max-width: 520px so it doesn't over-stretch.
       - Changed .about-accent z-index from -1 to 0, keeping
         it above the section background but below the image
         (which has z-index: 1 via position: relative).
       - Added position: relative + z-index: 1 to the <img>
         so it correctly stacks above the accent decoration.

   SAFE TO EDIT:
     - padding values inside the section
     - max-width on the image if you want it larger/smaller
     - about-value icon color (currently var(--gold))
     - gap between value rows (currently 1.2rem)

   DO NOT MODIFY:
     - display: grid on #about — this is the two-column layout.
       The column widths are controlled in layout.css.
     - z-index values — changing them can re-introduce the
       section-disappearing bug described above.
============================================================ */


/* ── Section Wrapper ─────────────────────────────────────────
   #about layout (grid columns) is declared in layout.css.
   Only section-specific overrides live here.
────────────────────────────────────────────────────────────── */
#about {
  background: var(--white);
}


/* ── Image Column ────────────────────────────────────────────
   Wraps the headshot and the decorative corner accent.
   position: relative is required for .about-accent positioning.
────────────────────────────────────────────────────────────── */
.about-img-wrap {
  position: relative;
}


/* ── Headshot Image ──────────────────────────────────────────
   BUG FIX: width: 100% ensures the image fills its grid column.
   Without this, the column had no intrinsic width and could
   collapse, hiding the entire section.

   IMAGE PATH NOTE:
     src="assets/images/brandonheadshot.png"
     If you rename the file, update the src in index.html.
     The image should be placed at: assets/images/

   BUG FIX: position: relative + z-index: 1 ensures the image
   stacks ABOVE the .about-accent corner decoration.
────────────────────────────────────────────────────────────── */
.about-headshot {
  width: 100%;           /* FIX: fill the grid column */
  max-width: 520px;      /* FIX: prevent over-stretching on large screens */
  height: auto;          /* maintain natural aspect ratio */
  display: block;
  position: relative;    /* FIX: establishes stacking context */
  z-index: 1;            /* FIX: sits above .about-accent (z-index: 0) */
  border-radius: 2px;    /* subtle rounding — remove for sharp corners */
}


/* ── Decorative Corner Accent ────────────────────────────────
   The L-shaped green corner bracket behind/around the image.

   BUG FIX: Changed z-index from -1 to 0.
   Original z-index: -1 placed the accent BEHIND the section's
   background color, making it invisible. In some browsers it
   also caused the entire .about-img-wrap to be treated as
   behind the background, hiding the headshot.
────────────────────────────────────────────────────────────── */
.about-accent {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 80px;
  height: 80px;
  border-top: 3px solid var(--gold-lt);
  border-left: 3px solid var(--gold-lt);
  z-index: 0; /* FIX: was -1, which hid this element and broke layout */
  pointer-events: none; /* decorative only — not clickable */
}


/* ── Bio Paragraphs ───────────────────────────────────────────
   Was two copies of the same inline style block; second paragraph
   gets its top margin from the adjacent-sibling rule instead of a
   duplicated style attribute. */
.about-bio-text {
  font-size: 1rem;
  color: var(--stone);
  line-height: 1.75;
}

.about-bio-text + .about-bio-text {
  margin-top: 0.6rem;
}


/* ── AMF Credential Badge ────────────────────────────────────
   Small bordered tag showing "Accrédité AMF — Québec"
────────────────────────────────────────────────────────────── */
.about-amf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(76,156,46,0.35);
  padding: 0.4rem 0.8rem;
  margin-bottom: 1.4rem;
}


/* ── Values List ─────────────────────────────────────────────
   Three key value propositions (Transparency, One contact,
   Commercial expertise) with icons.
────────────────────────────────────────────────────────────── */
.about-values {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.about-value {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  font-size: 0.87rem;
  color: var(--stone);
  line-height: 1.65;
}

/* Green icon beside each value */
.about-value-icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;    /* prevents icon from squishing */
  margin-top: 2px;   /* optical alignment with first text line */
}

/* Value title (bold) and description */
.about-value-text strong {
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin-bottom: 0.1rem;
}