/* =========================================================
   1) GLOBAL RESET
   Removes default browser spacing and makes sizing predictable
========================================================= */
* {
  margin: 0;                  /* Remove default margins */
  padding: 0;                 /* Remove default padding */
  box-sizing: border-box;     /* Include padding/border in width/height */
}


/* =========================================================
   2) BASE / BODY STYLES
========================================================= */
body {
  font-family: "Inter", Arial, sans-serif;  /* Primary site font */
  background-color: #f0f0f0;                /* Light grey page background */
  color: #1f2937;                           /* Default text color */
}


/* =========================================================
   3) NAVIGATION BAR
   Fixed header with left logo + right links
========================================================= */
.navbar {
  position: fixed;            /* Stick to top while scrolling */
  top: 0;                     /* Align to very top */
  width: 100%;                /* Full width bar */
  background-color: #ffffff;  /* White background */
  border-bottom: 1px solid #ddd; /* Subtle divider line */

  display: flex;              /* Horizontal layout */
  justify-content: space-between; /* Push left/right apart */
  align-items: center;        /* Vertically center items */

  padding: 15px 60px;         /* Inner spacing */
  z-index: 1000;              /* Ensure it stays above content */
}

/* Logo text (your name) */
.navbar .logo {
  font-size: 20px;            /* Logo font size */
  font-weight: bold;          /* Emphasize */
}

/* Logo link */
.logo a {
  text-decoration: none;      /* Remove underline */
  color: #1f2937;             /* Default link color */
}

.logo a:hover {
  color: #1e3a8a;             /* Blue on hover */
}

/* Nav links */
.navbar .nav-links a {
  text-decoration: none;      /* Remove underline */
  color: #1f2937;             /* Default link color */
  margin-left: 30px;          /* Space between links */
  font-weight: 500;           /* Medium weight */
  transition: 0.2s ease;      /* Smooth hover */
}

.navbar .nav-links a:hover {
  color: #1e3a8a;             /* Dark blue on hover */
}


/* =========================================================
   4) MAIN PAGE CONTENT WRAPPER
   Adds top padding to compensate for fixed navbar
========================================================= */
.content {
  padding: 120px 80px;        /* Space from top + side padding */
  max-width: 1000px;          /* Limit content width (center via parent if used) */
}


/* =========================================================
   5) HERO SECTION
   Full-width hero with background image layer + bottom-left text
========================================================= */
.hero {
  position: relative;         /* Anchor absolute children */
  height: 70vh;               /* Hero height (not full screen) */
  background: #ffffff;        /* White base */
  overflow: hidden;           /* Crop overflowing image */
}

/* Background image layer container */
.hero-image {
  position: absolute;         /* Fill the hero */
  inset: 0;                   /* top/right/bottom/left = 0 */
  z-index: 0;                 /* Behind text */
  display: flex;              /* Use flex for centering image if needed */
  align-items: center;        /* Vertical center */
  justify-content: center;    /* Horizontal center */
}

/* Bottom-left text block */
.hero-text {
  position: absolute;         /* Place over hero image */
  bottom: 80px;               /* Distance from bottom edge */
  left: 80px;                 /* Distance from left edge */
  max-width: 650px;           /* Limit line length */
  z-index: 1;                 /* Above image layer */
}

/* Hero headline */
.hero-text h1 {
  font-size: 42px;            /* Headline size */
  font-weight: 800;           /* Strong emphasis */
  line-height: 1.2;           /* Tight line spacing */
  margin-bottom: 25px;        /* Space under headline */
  color: #111827;             /* Near-black */
}

/* Hero supporting text */
.hero-text p {
  font-size: 18px;            /* Body size */
  line-height: 1.6;           /* Readable spacing */
  color: #4b5563;             /* Muted slate */
}


/* =========================================================
   6) EXPERIENCE SECTION
   Reveal animation + container + tile layout
========================================================= */
.experience {
  padding: 120px 80px;        /* Section spacing */
  background: #ffffff;        /* White section background */

  opacity: 0;                 /* Hidden before reveal */
  transform: translateY(30px);/* Slightly shifted down before reveal */
  transition: opacity 700ms ease, transform 700ms ease; /* Smooth reveal */
}

/* Visible state after scroll reveal */
.experience.reveal {
  opacity: 1;                 /* Fully visible */
  transform: translateY(0);   /* Move into place */
}

/* Centers content within the experience section */
.experience-container {
  max-width: 1200px;          /* Limit width */
  margin: 0 auto;             /* Center horizontally */
}

/* Section title (outside tile) */
.experience-title {
  font-size: 34px;            /* Big heading */
  font-weight: 800;           /* Strong emphasis */
  margin-bottom: 40px;        /* Space before tile */
  color: #111827;             /* Near-black */
}


/* =========================================================
   7) EXPERIENCE TILE (CARD)
   Two-column grid: left text, right media
========================================================= */
.experience-tile {
  display: grid;                              /* Two-column layout */
  grid-template-columns: 0.85fr 1.15fr;       /* Left narrower, right wider */
  gap: 28px;                                  /* Space between columns */

  border: none;                               /* No border (was: 1px solid ...) */
  border-radius: 18px;                        /* Rounded corners */
  padding: 28px;                              /* Inner spacing */
  background: #ffffff;                        /* Card background */
  box-shadow: none;                           /* No shadow (optional) */

  align-items: stretch;                       /* Stretch columns to equal height */
}

/* Force desktop two-column layout explicitly (kept from your original) */
@media (min-width: 901px) {
  .experience-tile {
    display: grid;                            /* Grid on desktop */
    grid-template-columns: 0.85fr 1.15fr;     /* Ensure correct split */
    align-items: stretch;                     /* Equal height columns */
  }
}


/* =========================================================
   8) LEFT COLUMN (TEXT)
   Vertically center text block inside the tile
========================================================= */
.experience-text {
  height: 100% !important;          /* Fill available tile height */
  display: grid !important;         /* Use grid for robust centering */
  align-content: center !important; /* Vertically center content */
  justify-items: start !important;  /* Keep left alignment */
  gap: 16px;                        /* Space between text elements */
}

/* Role title */
.role-title {
  font-size: 30px;                  /* Role size */
  font-weight: 600;                 /* Semi-bold */
  margin: 0;                        /* Remove default margin */
  color: #111827;                   /* Near-black */
}

/* Organization + dates line */
.meta-line {
  display: flex;                    /* Org + date in a row */
  align-items: center;              /* Vertical alignment */
  gap: 16px;                        /* Space between pieces */
  font-size: 26px;                  /* Balanced size */
  font-weight: 500;                 /* Slightly thicker than default */
  color: #1f2937;                   /* Darker text */
  margin: 0;                        /* Remove default margin */
}

/* Separator dot between org and dates */
.dot {
  opacity: 0.7;                     /* Slightly faded */
}

/* Role description */
.role-desc {
  margin: 0;                        /* Remove default margin */
  font-size: 24px;                  /* Larger body text */
  line-height: 1.7;                 /* Readable spacing */
  color: #374151;                   /* Soft dark slate */
  max-width: 42ch;                  /* Keep paragraph narrow */
}


/* =========================================================
   9) RIGHT COLUMN (MEDIA / IMAGE CAROUSEL)
========================================================= */
.experience-media {
  display: flex;                    /* Stack image + counter */
  flex-direction: column;           /* Vertical stack */
  gap: 12px;                        /* Space between items */
  min-height: 420px;                /* Baseline column height */
}

/* Media tile frame (holds image + overlay controls) */
.tile-frame {
  position: relative;               /* Anchor overlay controls */
  border-radius: 16px;              /* Rounded image corners */
  overflow: hidden;                 /* Keep overlay inside */
  height: 520px;                    /* Fixed image tile height */
}

/* Image itself */
.tile-frame img {
  width: 100%;                      /* Fill width */
  height: 100%;                     /* Fill height */
  object-fit: cover;                /* Crop nicely */
  display: block;                   /* Remove inline gaps */
}


/* =========================================================
   10) CAROUSEL OVERLAY CONTROLS
   Buttons sit on top of the image at bottom center
========================================================= */
.tile-overlay-controls {
  position: absolute;               /* Overlay inside .tile-frame */
  bottom: 16px;                     /* Distance from bottom */
  left: 50%;                        /* Center horizontally */
  transform: translateX(-50%);      /* True centering */
  display: flex;                    /* Horizontal layout */
  gap: 14px;                        /* Space between buttons */
  z-index: 2;                       /* Above image */
}

/* Circular button base */
.tile-btn {
  width: 36px;                      /* Button width */
  height: 36px;                     /* Button height */
  border-radius: 50%;               /* Make circular */

  border: 1px solid rgba(255, 255, 255, 0.6); /* Light border */
  background: rgba(150, 150, 150, 0.35);            /* Dark translucent */
  backdrop-filter: blur(4px);                 /* Frosted effect */

  display: flex;                    /* Center arrow */
  align-items: center;              /* Vertical center */
  justify-content: center;          /* Horizontal center */

  cursor: pointer;                  /* Pointer cursor */
  transition: all 0.2s ease;        /* Smooth hover */
}

.tile-btn:hover {
  background: rgba(0, 0, 0, 0.55);  /* Darker on hover */
  transform: scale(1.05);           /* Slight grow */
}

/* ========================================= */
/* TRIANGLE ARROWS — MANUAL CENTER ADJUST   */
/* ========================================= */

/* Left arrow */
.tile-btn.prev::before {
  content: "";
  position: relative;        /* Allows fine adjustment */
  left: -1px;                 /* 🔵 Move triangle right slightly */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #ffffff;
}

/* Right arrow */
.tile-btn.next::before {
  content: "";
  position: relative;
  right: -1px;                /* 🔵 Move triangle left slightly */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #ffffff;
}

/* =========================================================
   11) RESPONSIVE (MOBILE)
   Stack layout + reduce paddings/heights
========================================================= */
@media (max-width: 650px) {
  .experience {
    padding: 80px 20px;             /* Smaller section padding */
  }

  .experience-tile {
    grid-template-columns: 1fr;     /* Stack text above image */
  }

  .experience-media {
    min-height: 150px;              /* Reduce column height */
  }

  .role-desc {
    max-width: 60ch;                /* Allow wider text on small screens */
  }
}






            /* ========================================= */
            /* LEARN MORE BUTTON                          */
            /* ========================================= */
            
            .learn-more-btn {
              margin-top: 18px;
              padding: 12px 18px;
              border-radius: 12px;
              border: 1px solid #e5e7eb;
              background: #111827;
              color: #ffffff;
              font-weight: 700;
              cursor: pointer;
              transition: transform 0.2s ease, opacity 0.2s ease;
            }
            
            .learn-more-btn:hover {
              transform: translateY(-1px);
              opacity: 0.92;
            }
            
            /* ========================================= */
            /* MODAL OVERLAY BACKDROP                     */
            /* ========================================= */
            
            .modal-overlay {
              position: fixed;
              inset: 0;
              background: rgba(0,0,0,0.55);
              display: none;              /* Hidden by default */
              align-items: center;
              justify-content: center;
              z-index: 9999;
              padding: 20px;
            }
            
            /* When open */
            .modal-overlay.is-open {
              display: flex;
            }
            
            /* ========================================= */
            /* MODAL WINDOW (75% of screen)               */
            /* ========================================= */
            
            .modal-window {
              width: 75vw;                 /* 75% of screen width */
              height: 75vh;                /* 75% of screen height */
              background: #ffffff;
              border-radius: 18px;
              overflow: hidden;
              display: flex;
              flex-direction: column;
            }
            
            /* Header */
            .modal-header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 18px;
              border-bottom: 1px solid #e5e7eb;
            }
            
            .modal-title {
              margin: 0;
              font-size: 18px;
              font-weight: 800;
              color: #111827;
            }
            
            /* Close button */
            .modal-close {
              width: 36px;
              height: 36px;
              border-radius: 12px;
              border: 1px solid #e5e7eb;
              background: #ffffff;
              cursor: pointer;
              font-size: 16px;
            }
            
            /* Body */
            .modal-body {
              padding: 18px;
              overflow: auto;              /* Scroll if content is long */
              color: #374151;
              line-height: 1.7;
            }
            
            /* Responsive */
            @media (max-width: 900px) {
              .modal-window {
                width: 92vw;
                height: 80vh;
              }
            }