/* =========================================================
   Jackson Shuminski Portfolio — styles2.css
   - Smaller project images
   - Projects in two-column grid (auto rows)
   - Polished, responsive, professional theme
   ========================================================= */

/* ------------------------------
   Design Tokens
   ------------------------------ */
:root{
  --bg: #0f1115;
  --panel: #151923;
  --panel-2: #1b2130;
  --text: #e8ebf1;
  --muted: #a9b1c3;
  --link: #7cc7ff;
  --link-hover: #9bd6ff;
  --accent: #7c4dff;
  --accent-2: #2ee6a6;

  --radius: .9rem;
  --radius-lg: 1.2rem;
  --shadow-1: 0 8px 24px rgba(0,0,0,.22);
  --shadow-2: 0 12px 32px rgba(0,0,0,.28);

  --fs-1: clamp(2rem, 3.5vw + .5rem, 3rem);
  --fs-2: clamp(1.25rem, 1.2vw + .75rem, 1.65rem);
  --fs-3: 1.075rem;
  --fs-4: 1rem;

  --space-xs: .4rem;
  --space-sm: .7rem;
  --space: 1rem;
  --space-md: 1.35rem;
  --space-lg: 1.75rem;
  --space-xl: 2.25rem;
}

/* ------------------------------
   Base / Reset
   ------------------------------ */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ height: 100%; }
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: var(--fs-4);
  line-height: 1.6;
  background: radial-gradient(1200px 800px at 10% -10%, #1b1f2b 0%, transparent 60%),
              radial-gradient(1200px 800px at 110% 10%, #162234 0%, transparent 60%),
              var(--bg);

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:hover{ color: var(--link-hover); }
:focus-visible{ outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: .5rem; }
img{ max-width: 100%; display: block; }

/* ------------------------------
   Header / Hero
   ------------------------------ */
h1#top{
  font-size: var(--fs-1);
  text-align: center;
  margin: var(--space-xl) auto var(--space);
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.15;
  background: linear-gradient(90deg, var(--text) 0%, #cfe7ff 60%, var(--text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------
   Top Navigation (#topbar)
   ------------------------------ */
#topbar{
  list-style: none;
  display: flex;
  gap: .25rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: .5rem;
  margin: 0 auto var(--space-xl);
  position: sticky;
  top: .5rem;
  z-index: 50;
  width: min(980px, 94vw);
  background: color-mix(in oklab, var(--panel), black 8%);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in oklab, var(--panel-2), black 25%);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}
#topbar li{ display: contents; }
#topbar a{
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;
  color: var(--text);
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  border: 1px solid transparent;
  margin: 0 2em;
  text-align: center;
  width: 20%;
}
#topbar a:hover{
  background: color-mix(in oklab, var(--panel-2), white 4%);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* ------------------------------
   Projects Section
   ------------------------------ */
#projects{ padding: 0 0 var(--space-xl); }
#projects > h1{
  font-size: var(--fs-2);
  text-align: center;
  margin: var(--space-lg) 0 var(--space);
  font-weight: 800;
  letter-spacing: .2px;
}

ul a {
  
  color: inherit;
  text-decoration: inherit;
}
ul a :hover {
  
  color: inherit;
  text-decoration: inherit;
}

/* Two-column grid for the list (auto rows) */
#projects > ul{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: 0 var(--space);
  max-width: 1200px;
  margin: 0 auto;
}

/* ------------------------------
   Project Card (vertical layout)
   ------------------------------ */
.project{
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel), black 3%), color-mix(in oklab, var(--panel), black 10%));
  border: 1px solid color-mix(in oklab, var(--panel-2), black 30%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  isolation: isolate;
}
.project:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in oklab, var(--accent), var(--panel-2) 70%);
}

/* Smaller, consistent image size */
.project > img{
  width: 100%;
  height: 220px;              /* ↓ Adjust this if you want even smaller images */
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* Content */
.project .intro{
  padding: var(--space-lg) var(--space-lg) var(--space);
}
.project .intro .title{
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: .25rem;
  margin-top: auto;
}
.project .intro .credit{
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: .5rem;
}
.project .desc{
  color: color-mix(in oklab, var(--text), black 25%);
  line-height: 1.65;
}

/* Links / actions */
.WhatIDid{
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: auto;
  align-items: center;
}
.WhatIDid h2{ font-size: 1rem; margin: 0; }
.WhatIDid h2 a,
.WhatIDid a{
  font-size: 1rem;  
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  padding: .15rem .5rem;
  border-radius: .7rem;
  border: 1px solid color-mix(in oklab, var(--panel-2), black 25%);
  background: color-mix(in oklab, var(--panel), black 4%);
  transition: background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
}
.WhatIDid h2 a:hover,
.WhatIDid a:hover{
  background: color-mix(in oklab, var(--panel-2), white 6%);
  color: var(--link-hover);
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--panel-2), var(--accent) 40%);
}

/* ------------------------------
   Responsive
   ------------------------------ */
@media (max-width: 900px){
  #projects > ul{
    grid-template-columns: 1fr; /* single column on small screens */
    gap: var(--space-md);
    padding: 0 var(--space);
  }
  .project > img{ height: 200px; }
}

@media (max-width: 480px){
  :root{ --fs-3: 1.02rem; --fs-4: .975rem; }
  .WhatIDid a{ width: 100%; justify-content: center; }
}


/* === About Me refinements: centered avatar + boxed sections === */

/* Strong centering for the headshot on all layouts */
#face{
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* ensure odd inherited line-heights don't affect layout */
  vertical-align: middle;
}

/* Give the entire skills section a card wrapper */
#skills{
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel), black 4%), color-mix(in oklab, var(--panel), black 12%));
  border: 1px solid color-mix(in oklab, var(--panel-2), black 28%);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.4vw, 28px);
  box-shadow: var(--shadow-1);
}

/* Make the About paragraph use the same card language (already applied), tighten width a bit */
p#aboutMe.job{
  max-width: 70ch;
}

/* Add a subtle header style for About page title when present */
#top + #topbar + p#aboutMe.job::before{
  content: "About Me";
  display: block;
  font-weight: 900;
  letter-spacing: .3px;
  margin-bottom: .5rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: color-mix(in oklab, var(--text), black 20%);
  opacity: .9;
}

/* Ensure list items feel like professional 'info boxes' */
#skills .skill{
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel), black 2%), color-mix(in oklab, var(--panel), black 9%));
  border: 1px solid color-mix(in oklab, var(--panel-2), black 26%);
  border-radius: var(--radius-md, 14px);
  padding: clamp(12px, 2vw, 18px);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

/* Improve headings and spacing inside boxes */
#skills .skill h1{
  margin: 0;
}

/* Small-screen polish */
@media (max-width: 640px){
  p#aboutMe.job{ max-width: 100%; }
}
/* === About Me final layout fixes === */

/* Center and box the About Me intro */
p#aboutMe.job {
  display: block;
  max-width: 140ch;              /* keeps it readable */
  margin: 2rem auto;            /* centers horizontally */
  padding: 0.5rem;
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel), black 4%), color-mix(in oklab, var(--panel), black 12%));
  border: 1px solid color-mix(in oklab, var(--panel-2), black 28%);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-1);
  font-size: 1.05rem;
  line-height: 1.75;
  text-align: center;
}

/* Make skills display as one single horizontal row */
#skills > ul {
  display: flex;                /* one horizontal row */
  justify-content: center;
  flex-wrap: nowrap;            /* prevent wrapping */
  gap: 1.5rem;
  overflow-x: auto;             /* scroll on small screens */
  padding: 0;
  margin: 0;
  list-style: none;
  scrollbar-width: thin;        /* nice thin scrollbar */
}

/* Keep each skill card consistent */
#skills .skill {
  flex: 0 0 30%;              /* fixed card width */
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel), black 2%), color-mix(in oklab, var(--panel), black 9%));
  border: 1px solid color-mix(in oklab, var(--panel-2), black 26%);
  border-radius: var(--radius-md, 14px);
  padding: 1.2rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  transition: transform .2s ease, box-shadow .2s ease;
  margin: 0;
}
#skills .skill:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

li h2 {
  margin: 0;
}

li p {
  margin-bottom: 0;
}

/* Center the headshot */
#face {
  display: block;
  margin: 1.5rem auto;
  width: min(360px, 45vw);
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid color-mix(in oklab, var(--panel-2), white 8%);
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
}