/* =============================================================
   experience.css — page-specific styles for the Experience page
   Shared tokens, header, footer, buttons, .icon-circle, .eyebrow,
   .section-head, .divider, .cta-banner etc. live in style.css.
   All classes below are prefixed (exp-/journey-/strength-/tag)
   to avoid colliding with the homepage or About page classes.
   ============================================================= */

:root{
  --blob-gray: #E7EAF4; /* soft gray-blue decorative blob behind the hero photo */
}

/* Serif display font, scoped to this page only */
body.page-experience h1,
body.page-experience h2{
  font-family: 'Playfair Display', serif;
}

/* Eyebrow label followed by a short horizontal rule, e.g. "My Experience ——"
   (duplicated from about.css intentionally — this page doesn't load about.css) */
.eyebrow-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.eyebrow-row .eyebrow{ margin-bottom:0; }
.eyebrow-row .eyebrow-rule{
  flex:0 0 42px;
  height:1px;
  background: var(--gold);
}

/* -------------------------------------------------------------
   1. HERO — "My Experience"
   ------------------------------------------------------------- */
.exp-hero{
  position:relative;
  background: var(--bg-light);
  overflow:hidden;
  padding: 36px 0 96px;
}

.exp-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1fr .95fr;
  gap: 40px;
  align-items:center;
}

.exp-hero-copy h1{
  font-size: 2.7rem;
  font-weight:700;
  margin-bottom:22px;
}
.exp-hero-copy h1 .accent{ color: var(--gold); }

.exp-hero-copy p{
  max-width:500px;
  color: var(--text-body);
}

/* -------------------------------------------------------------
   EXPERIENCE HERO — PHOTO COMPOSITION
   ------------------------------------------------------------- */

.exp-hero-media {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    min-height: 560px;

    /* Keeps the image visually aligned with the hero content */
    padding: 40px 30px 0;
}


/* -------------------------------------------------------------
   DECORATIVE BACKGROUND SHAPE
   Soft architectural panel behind the portrait
   ------------------------------------------------------------- */

.exp-hero-blob {
    position: absolute;

    z-index: 0;

    width: 72%;
    height: 82%;

    right: 8%;
    bottom: 0;

    background: #F4E8D2;

    border-radius: 50px 50px 0 0;

    opacity: 0.9;
}


/* -------------------------------------------------------------
   PORTRAIT
   No white card — the image blends naturally into the design.
   ------------------------------------------------------------- */

.exp-hero-photo {
    position: relative;

    z-index: 2;

    width: min(430px, 82%);
    height: 520px;

    overflow: hidden;

    background: transparent;

    border: none;
    border-radius: 0;

    box-shadow: none;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}


/* -------------------------------------------------------------
   PORTRAIT IMAGE
   ------------------------------------------------------------- */

.exp-hero-photo img {
    display: block;

    width: auto;
    height: 85%;

    object-fit: contain;
    object-position: center bottom;

    transform: none;
}


/* -------------------------------------------------------------
   2. MY PROFESSIONAL JOURNEY (vertical timeline)
   ------------------------------------------------------------- */
.journey-section{ background: var(--bg); }

.journey-timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

/* the vertical connector line running behind every row */
.journey-timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left: 155px;
  width:2px;
  background: var(--border);
  z-index:0;
}

.journey-item{
  position:relative;
  display:grid;
  grid-template-columns: 130px 50px 1fr;
  align-items:start;
}

.journey-marker{
  text-align:center;
  padding-top:4px;
}

.journey-date{
  display:block;
  font-size:.8rem;
  font-weight:700;
  color: var(--gold-dark);
  margin-bottom:10px;
}

.journey-icon{
  width:64px; height:64px;
  margin: 0 auto 10px;
  border-radius:50%;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
.journey-icon-bank{ color: #7A1F2B; }   /* maroon, echoes a bank crest */
.journey-icon-school{ color: #2F6B3A; } /* green, echoes a school crest */

.journey-org{
  display:block;
  font-size:.86rem;
  font-weight:700;
  color: var(--navy);
  line-height:1.35;
}

.journey-dot-col{
  position:relative;
  height:100%;
}
.journey-dot{
  position:absolute;
  top:52px;
  left:50%;
  transform: translate(-50%, -50%);
  width:14px; height:14px;
  border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold);
  z-index:1;
}

.journey-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 26px 28px;
}
.journey-card h3{
  font-family: var(--font-body);
  font-size:1.1rem;
  font-weight:700;
  color: var(--navy);
  margin-bottom:2px;
}
.journey-company{
  display:block;
  font-size:.88rem;
  font-weight:600;
  color: var(--gold-dark);
  margin-bottom:12px;
}
.journey-card p{
  font-size:.92rem;
  color: var(--text-body);
  margin-bottom:16px;
}

.journey-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background: var(--blue-tint);
  color: var(--navy);
  font-size:.78rem;
  font-weight:600;
  padding: 7px 13px;
  border-radius: 7px;
}
.tag i{ color: var(--blue); font-size:.75rem; }

/* -------------------------------------------------------------
   3. CORE STRENGTHS
   ------------------------------------------------------------- */
.strengths-section{ background: var(--bg-tint); }

.strengths-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
}

.strength-card{ text-align:center; }
.strength-card .icon-circle{ margin: 0 auto 16px; }
.strength-card h4{
  font-family: var(--font-body);
  font-size:.98rem;
  font-weight:700;
  color: var(--navy);
  margin-bottom:8px;
}
.strength-card p{
  font-size:.84rem;
  color: var(--text-muted);
}


/* -------------------------------------------------------------
   5. FOOTER — highlight the current page in Quick Links
   ------------------------------------------------------------- */
.footer-links a.active{ color: var(--gold); }
.footer-links a.active i{ color: var(--gold); }