/* ====== Global Reset ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ====== Base ====== */
body {
  font-family: 'Alte Haas Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #171716; /* dark background */
  color: #eee;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }


/* Desktop (≥ 992px) */
@media (min-width: 992px) {
  .custom-container { padding: 10px 40px; }
}


/* ====== Intro (left column) ====== */
.intro-title { font-size: 28px; font-weight: 600; margin-bottom: 20px; }
.intro-title .name { color: var(--text-1); }
.intro-title .role { color: #aaa; font-weight: 400; font-style: italic; }
.intro-text { font-size: 20px; color: #8c8c8b; margin-bottom: 12px;  }

/* Add some extra space between the two main columns on desktop */
@media (min-width: 992px) {
  .main-content > .col-md-2 { padding-right: 30px; } /* left column */
  .main-content > .col-md-10 { padding-left: 30px; }  /* right column */
}

/* ====== Projects Grid (right column) ====== */
.projects-grid { margin-top: 25px; }

/* ---- Screenshot-style project cards (title + subtitle + inset image) ---- */

/* The anchor fills the column and provides hover */
.project-card {
  display: block;
  border-radius: 24px;
  overflow: hidden; /* clip children to the radius */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 24px; /* vertical rhythm between cards */
}


/* Map each card to its image (adjust paths if needed) */
.illume-card     { --thumb: url('/images/IllumeCard.png'); }
.arcticwolf-card { --thumb: url('/images/ArcticWolfCard.png'); }
.oto-card        { --thumb: url('/images/OtOCard.png'); }
.reciplore-card  { --thumb: url('/images/ReciploreCard.png'); }
/* If you open the file without a server, remove the leading slash:
   url('images/IllumeCard.png') etc. */

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .project-card .card { border-radius: 20px; padding: 16px; }
  .project-card .card::after { border-radius: 16px; aspect-ratio: 16 / 11; }
  .project-card .card .card-content h3 { font-size: 18px; }
}



/* Optional: ensure the row doesn't clip sticky positioning */
.main-content {
  overflow: visible;
}


/* ===== Ensure ancestors don't block sticky ===== */
.custom-container,
.main-content { overflow: visible; }

/* === Sticky Left Intro Column === */
@media (min-width: 992px) {
  .main-content .col-md-3 {
    position: sticky;   /* stick within parent */
    top: 25px;          /* adjust to match your nav height */
    align-self: flex-start;
    height: fit-content;
  }
}


/* === Top Navigation Bar === */
.nav-bar {
  height: 80px;           /* match the sticky offset */
  display: flex;
  align-items: center;
}
/* === Projects Grid & Cards — DARK THEME === */
.projects-grid {
  padding-top: 10px;
}

.project-card {
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
  color: #e5e7eb; /* light text on dark */
}

/* Card container */
.card {
  position: relative;
  border-radius: 14px;
  height: 250px;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* size + left align */
  max-width: 400px;
  margin: 0 0 24px 0;

  /* dark surface + subtle ring */
  background-color: #141414;                 /* near-black so it pops on #000 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);   /* deeper dark shadow */
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.12);
}

/* Dark overlay covering full card, text pinned at bottom */
.card-content {
  position: absolute;
  top: 0;           /* cover from top */
  left: 0;
  right: 0;
  bottom: 0;        /* cover to bottom */
  display: flex;    /* keep text at bottom */
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55) 10%,   /* darkest at bottom */
    rgba(0,0,0,0.05) 50%,  /* mid fade */
    rgba(0,0,0,0.00) 100%  /* fully transparent at top */
  );
  backdrop-filter: saturate(110%);
}


/* Headline + body on dark */
.card-content h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .1px;
  color: #ffffff;        /* crisp on dark */
}

.card-content p {
  margin: 0;
  font-size: 14px;
  color: #9ca3af;        /* cool gray body text */
}

/* Tag styles (dark-friendly) */
.card-tag {
  font-size: 13px;
  margin-left: 8px;
  font-weight: 400;
  color: #cbd5e1; /* lighter slate for contrast */
  opacity: .95;
}

/* ===== Specific Project Backgrounds (keep your images) ===== */
.reciplore-card {
  background-color: #141414;
  background-image: url('/images/ReciploreCard.png');
}

.parker-card {
  background-color: #141414;
  background-image: url('/images/ParkerCard.png');
}

.illume-card {
  background-color: #141414;
  background-image: url('/images/IllumeCard.png');
}

.oto-card {
  background-color: #141414;
  background-image: url('/images/OtOCard.png');
  background-size: cover;
  background-position: center;
}

.questrade-card {
  background-color: #141414;
  background-image: url('/images/QuestradeCard.png');
  background-size: cover;
  background-position: center;
}

.arcticwolf-card  {
  background-color: #141414;
  background-image: url('/images/ArcticWolfCard.png');
  background-size: cover;
  background-position: center;
}

/* Accessibility: reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* Responsive tweak: shorter cards on small screens */
@media (max-width: 575.98px) {
  .card { height: 200px; }
}

.card {
  border-radius: 16px;
  background-color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

.card-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #E5E7EB;
  margin: 0 0 4px 0;
}

.card-content p {
  font-size: 14px;
  color: #C7CED1; /* subtle gray */
  margin: 0;
}

/* About button — base */
.nav-links a.about-btn {
  display: inline-block;     /* makes padding work */
  padding: 16px 0px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  background: transparent;   /* keep it link-like; change if you want a pill */
  text-decoration: none;
  transition: background-color .2s ease, opacity .2s ease, color .2s ease;
}

.about-btn:hover {
  opacity: 0.5;          /* slightly transparent */
  color: #f3f4f6;        /* optional lighter text */
  text-decoration: none; /* kill underline */
}

/* Make the whole link a flex row so spacing/hover are reliable */


/* Use one gap value everywhere */
:root { --grid-gap: 24px; }

/* Make Bootstrap's 2x2 grid use the same gap horizontally & vertically */
.projects-grid .row {
  margin-left: calc(-1 * var(--grid-gap) / 2);
  margin-right: calc(-1 * var(--grid-gap) / 2);
}

.projects-grid .col-md-6,
.projects-grid .col-sm-12 {
  padding-left: calc(var(--grid-gap) / 2);
  padding-right: calc(var(--grid-gap) / 2);
  margin-bottom: var(--grid-gap);        /* vertical gap = horizontal gap */
}

/* Let the card fill the column so it centers visually with equal gutters */
.project-card { margin-bottom: 0; }      /* spacing handled by columns */
.card {
  max-width: none;                       /* remove 400px cap */
  width: 100%;
  margin: 0;                             /* no extra bottom margin */
  height: 375px;                         /* optional: consistent height */
  border-radius: 16px;
}


.footer-left{
  font-size: 14px;
  color: #9ca3af;
}

.footer-links{
  display: flex;
  gap: 22px;
}

.footer-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
  text-decoration: none;
  transition: background-color .2s ease, opacity .2s ease, transform .15s ease;
}

.footer-link .arrow{
  font-size: 16px;
  transition: transform .2s ease;
}

.footer-link:hover{
  opacity: 0.5;          /* slightly transparent */
  color: #f3f4f6;        /* optional lighter text */
  text-decoration: none; /* kill underline */
}

.footer-link:hover .arrow{
  transform: translate(2px,-2px);
}

@media (max-width: 575.98px){
  .footer-inner{ align-items: flex-start; gap: 12px; }
  .footer-links{ flex-wrap: wrap; }
}


/* Ensure sticky isn't clipped by ancestors */
.custom-container,
.main-content { overflow: visible; }

/* Safety: avoid transforms on sticky ancestors */
.main-content .col-md-3,
.intro-content { transform: none !important; }



/* Portfolio container */
.portfolio-container {
    min-height: 100vh;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2rem;
    font-weight: 500;
}

/* Grid system */
:root {
    --grid-gap: 2rem;
}

.projects-grid .row {
    margin-left: calc(-1 * var(--grid-gap) / 2);
    margin-right: calc(-1 * var(--grid-gap) / 2);
    display: flex;
    flex-wrap: wrap;
}

.projects-grid .col-md-6,
.projects-grid .col-sm-12 {
    padding-left: calc(var(--grid-gap) / 2);
    padding-right: calc(var(--grid-gap) / 2);
    margin-bottom: var(--grid-gap);
}

.projects-grid .col-md-6 {
    width: 50%;
}

.projects-grid .col-sm-12 {
    width: 100%;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Card header */
.card-header {
    padding: 2rem 2rem 1.5rem 2rem;
    flex-shrink: 0;
}

.card-title {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
}

.card-subtitle {
    color: var(--text-1);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Card image container */
.card-image-container {
    flex: 1;
    padding: 0 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
}

.card-image-wrapper {
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive design */
@media (max-width: 768px) {
    .projects-grid .col-md-6 {
        width: 100%;
    }
    
    .portfolio-container {
        padding: 2rem 1rem;
    }
    
    .card-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
    }
    
    .card-image-container {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .portfolio-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .project-card {
        height: 400px;
    }
    
    :root {
        --grid-gap: 1.5rem;
    }
}

/* Make entire card clickable, no underline */
.project-link { display: block; text-decoration: none; color: inherit; }

/* Card container */
.project-card{
  background: #F4F1EA; border-radius:16px; overflow:hidden;
  width:100%; height:400px;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}

/* Header (TOP) */
.project-header {
  padding: 0rem 2rem 2rem; /* reduce bottom padding */
  flex-shrink: 0;
  margin-top: -25px;

}

.project-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2; /* tighter */
}

.project-subtitle {

  font-size: 1.5rem;
  margin-top: -15px;
  font-weight: 400;
  line-height: 1.3;
}


/* Image (BOTTOM) */
.project-image-area{flex:1; padding:0 2rem 2rem; display:flex; }
.project-image-wrap{flex:1; border-radius:16px; overflow:hidden; height: 270px; /* pick a size */ }

.project-image {
  width: 100%;
  height: auto;        /* don’t stretch vertically */
  object-fit: contain; /* now works properly */
  display: block;
}

/* Spacing between columns */
.projects-grid .col-md-6, .projects-grid .col-sm-12 { margin-bottom:24px; }

/* Mobile height tweak */
@media (max-width:480px){ .project-card{ height:400px; } }

/* --- Safety: kill legacy bottom-caption overlays if present --- */
.project-card::after { content:none !important; }

.project-image-area { padding: 0 2rem 2rem !important; }  /* no top padding */
.project-link, .project-link * { text-decoration: none !important; }

:root{
  /* Surfaces */
  --bg:#181615;             /* warm near-black (not blue/gray) */
  --surface:#221F1C;        /* cards/sidebar */
  --surface-2:#26221F;      /* hovered/raised */
  --border:#302C27;

  /* Text */
  --text-1:#F4F1EA;         /* warm off-white (ivory) */
  --text-2:#D8D2C7;         /* secondary */
  --text-3:#A9A196;         /* tertiary */

  /* Accents */
  --accent:#F6C84C;         /* soft sunflower */
  --accent-2:#69A9FF;       /* calm blue for links/CTAs */
  --success:#77D17B;

  /* Effects */
  --shadow:0 12px 32px rgba(0,0,0,.45);
  --shadow-hover:0 22px 48px rgba(0,0,0,.55);
  --overlay-bottom: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
}

body{ background:var(--bg); color:var(--text-1); }
.intro-title .name{ color:var(#FFFFFF); }
.intro-title .role, .intro-text{ color:var(--text-1); }

.card{
  background-color:var(--surface);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}
.card:hover{ box-shadow:var(--shadow-hover); background-color:var(--surface-2); }

.card-content{ background:var(--overlay-bottom); }
.card-content h3{ color:var(--text-1); }
.card-content p{ color:var(--text-3); }

/* Links: friendlier + accessible */
a{ color:var(--accent-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* “About” & footer links */
.about-btn, .footer-link{ color:var(--text-1); }
.about-btn:hover, .footer-link:hover{ color:var(--accent-2); opacity:1; }

/* Re-introduce the warm status pill */
.tag, .card-tag{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:color-mix(in oklab, var(--accent) 90%, #000 10%);
  color:#2B2100; font-weight:600; font-size:12px; letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* Softer, warmer focus ring */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Optional: subtle page glow to reduce “heavy” feel */
body::before{
  content:""; position:fixed; inset:-20% -10% auto -10%; height:60%;
  background:radial-gradient(50% 40% at 30% 10%, rgba(246,200,76,.10), transparent 60%);
  pointer-events:none; filter:blur(40px);
}

/* About button — base */
.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;                     /* space between text + arrow */
  padding: 16px 0;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);         /* warm off-white */
  background: transparent;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}

/* Hover state */
.about-btn:hover {
  color: var(--accent-2);       /* calm blue, matches footer hover */
  opacity: 1;                   /* keep crisp (no fade) */
  text-decoration: none;
}

/* Arrow animation */
.about-arrow {
  display: inline-block;
  font-size: 24px;
  padding: 0 2px;
  transition: transform .2s ease;
}

.about-btn:hover .about-arrow {
  transform: translate(2px, -2px);
}

.project-title {
  color: var(#FFFFFF);         /* ivory */
  transition: color .25s ease;
}
.project-card:hover .project-title {
  color: var(--accent);         /* sunflower */
}


.modal-backdrop { display:none !important; pointer-events:none !important; }

.nav-links { position: relative; z-index: 9999; }
.nav-links a.about-btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.about-btn:focus:not(:focus-visible) {
  outline: none;
  color: inherit;   /* resets the lingering hover color */
}
/* Make sure the page can size to viewport */
html, body { height: 100%; }

/* Left column sidebar (inside .col-md-3) */
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes footer to bottom */
  min-height: 95vh;              /* fill the viewport height */
  position: sticky;               /* stays put while right side scrolls */
  top: 0;
  overflow: hidden;               /* no internal scrolling */
}

/* Content above footer expands naturally */
.sidebar-content { flex: 1; }

/* Footer stays at the bottom without waiting for any scroll */
.sidebar-footer {padding-top: 12px; }

/* Optional: disable sticky on small screens if you want normal flow */
@media (max-width: 991.98px) {
  .sidebar { position: static; min-height: auto; }
}