/* Variables */
:root {
  --text: #ddd;
  --muted: #777;
  --accent: #7eb8f7;
  --border: #222;
}

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

body { 
  background: #111; 
  color: var(--text); 
  font-family: sans-serif; 
  font-size: 15px; 
  line-height: 2; 
  overflow: auto; 
  display: flex; 
  flex-direction: column; 
}

a { 
  color: inherit; 
  text-decoration: none; 
}
ul { 
  list-style: none; 
}

/* Nav */
nav { 
  display: flex; 
  justify-content: space-between; 
  padding: 20px 32px; 
  border-bottom: 1px solid var(--border); 
  flex: 0 0 auto; 
  z-index: 100;
}
.nav-logo { 
  font-size: 20px; 
  font-weight: bold; 
}
#download-resume { 
  font-size: 13px; 
  padding: 8px 16px; 
  border: 1px solid var(--muted); 
  background: var(--accent); 
  color: #0a0a0a; 
  cursor: pointer; 
}
#download-resume:hover { 
  color: var(--text); 
  border-color: var(--accent); 
}

/* Social Buttons */
.button-container a {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid var(--muted);
  background: var(--accent);
  border-radius: 8px;
  padding: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.button-container a:hover {
  background: var(--muted);
  border-color: var(--accent);
}
.button-container a:focus {
  outline: none;
}
.github-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.linkedin-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.indeed-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.handshake-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Layout */
main { flex: 1; display: flex; overflow: hidden; }
.layout-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: auto 1fr; 
  width: 100%; 
  height: 100%; 
}
.grid-hero { 
  padding: 0px 32px; 
  border-bottom: 1px solid var(--border); 
  border-right: 1px solid var(--border); 
  overflow-y: auto; 
  justify-content: space-between; 
}
.grid-demo { 
  grid-column: 1; 
  grid-row: 2; 
  padding: 40px 32px; 
  border-right: 1px solid var(--border); 
  background: #0a0a0a; 
  display: flex; 
  align-items: stretch; 
  justify-content: center; 
  width: 100%; 
  height: 100%; 
  overflow: hidden;
  position: relative; 
}
.media-placeholder { 
  width: 100%; 
  height: 100%; 
  max-width: 100%;      /* Hard limit */
  max-height: 100%;     /* Hard limit */
object-fit: contain;  /* If this is an actual <video> or <img> tag */
  background: #1a1a1a; 
  border: 1px solid var(--border); 
  border-radius: 8px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  color: var(--muted); 
}
.media-placeholder h3 { color: var(--text); margin-bottom: 12px; }
.grid-panels { 
  grid-column: 2; 
  grid-row: 1 / 3; 
  position: relative; 
  background: #0d0d0d; 
  overflow: hidden; 
}

/* Hero */
section { 
  padding-top: 40px; 
}
.label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 28px;
  background: #111;
  padding: 8px;
  border-radius: 6px;
}
.hero-text .label {
  margin-bottom: 0;
  padding-bottom: 8px;
}
.hero {
  display: flex;
  align-items: center; 
  justify-content: space-between;
  gap: 32px; 
  width: 100%;
  padding-top: 0;
}
.hero-text, .hero-image-container {
  flex: 1; 
  width: 50%; 
}
.hero h1 { 
  font-size: clamp(52px, 10vw, 88px); 
  font-weight: 300; 
  line-height: 1; 
  margin-bottom: 16px; 
}
.hero h1 span { 
  color: var(--muted); 
  display: block; 
}
.hero-bio { 
  color: var(--muted); 
  max-width: 100%; 
  margin-bottom: 12px; 
}
.hero-links { 
  display: flex; 
  gap: 12px; 
}
.hero-links button { 
  font-size: 13px; 
  padding: 8px 16px; 
  border: 1px solid var(--border); 
  background: transparent; 
  color: inherit; 
  cursor: pointer; 
}
.hero-links button:hover { 
  color: var(--accent); 
  border-color: var(--accent); 
}
.hero-image-container {
  display: flex;
  justify-content: center;
}
.hero-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--border);
}

/* Tabs */
.tabs-container { 
  display: flex; 
  flex: 0 0 60px; 
  background: #111; 
  border-top: 1px solid var(--border); 
  z-index: 50; 
}
.tab-button { 
  flex: 1; 
  border: none; 
  background: transparent; 
  color: var(--muted); 
  text-transform: uppercase; 
  font-size: 12px; 
  cursor: pointer; 
  border-right: 1px solid var(--border); 
  transition: 0.3s; 
}
.tab-button:hover, .tab-button.active { 
  color: var(--accent); 
}

/* Panels */
.sliding-content { 
  position: absolute; 
  inset: 0; 
  background: #111; 
  overflow-y: auto; 
  opacity: 0; 
  pointer-events: none; 
  transition: 0.3s; 
  z-index: 200;
}
.sliding-content.active { 
  opacity: 1; 
  pointer-events: all; 
}
.sliding-content-inner { 
  padding: 40px 32px; 
}

/* Experience */
.job, .skill-group { 
  padding: 24px 0; 
  border-top: 1px solid var(--border); 
}
.job:last-child, .skill-group:last-child { 
  border-bottom: 1px solid var(--border); 
}
.job-header { 
  display: flex; 
  justify-content: space-between; 
  font-weight: 600; 
  flex-wrap: wrap; 
}
.job-period, .job-company { 
  font-size: 13px; 
  color: var(--muted); 
}
.job-company { 
  margin-bottom: 12px; 
  display: block; 
}
.job ul li { 
  font-size: 13px; 
  color: var(--muted); 
  padding-left: 14px; 
  position: relative; 
  margin-bottom: 4px; 
}
.job ul li::before { 
  content: '-'; 
  position: absolute; 
  left: 0; 
}

/* Tags */
.tags { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 6px; 
  margin-top: 12px; 
}
.tag { 
  font-size: 11px; 
  padding: 3px 8px; 
  border: 1px solid var(--border); 
  color: var(--muted); 
}

/* Skills */
.skill-group-label { 
  font-size: 11px; 
  text-transform: uppercase; 
  letter-spacing: 0.08em; 
  color: var(--muted); 
  margin-bottom: 10px; 
}

/* Projects */
.projects-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 16px; 
}
.project { 
  border: 1px solid var(--border); 
  cursor: pointer; 
  aspect-ratio: 1; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  padding: 20px; 
  transition: 0.3s; 
}
.project-content {
  width: 100%;
  height: auto;
  background: rgba(26, 26, 26, 0.95);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  padding: 16px;
}
.project:hover {
  background: rgba(26, 26, 26, 0.2);
  border-color: var(--accent);
}
.project h3,
.project .label {
  background: #1a1a1a;
  padding: 8px;
  border-radius: 6px;
  color: var(--text);
}
.project p, .project a { 
  display: none; 
}

/* Footer */
footer { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 0 32px; 
  flex: 0 0 60px; 
  border-top: 1px solid var(--border); 
  font-size: 12px; 
  color: var(--muted); 
  z-index: 60; 
}
.footer-links { 
  display: flex; 
  gap: 24px; 
}
.footer-link { 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  justify-content: flex-start;
}
.footer-link-label { 
  font-size: 1.75em; 
  font-weight: 600; 
  margin-right: 10px; 
}
.footer-link-value { 
  font-size: 1.75em; 
  color: var(--text); 
}
.footer-link:hover .footer-link-value { 
  color: var(--accent); 
}
.footer-link-label::after {
  content: ":";
}

/* Responsive */
@media (max-width: 1440px) {
  body, main {
    height: auto;
    overflow: visible;
  }
  .layout-grid {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
  }
  .grid-hero, .grid-demo, .grid-panels {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .grid-panels {
    grid-column: auto;
    grid-row: auto;
    min-height: 400px;
  }
  .sliding-content {
    position: relative; 
    display: none;
    opacity: 0;
    width: 100%;
  }
  .sliding-content.active {
    display: block;
    opacity: 1;
    pointer-events: all;
  }
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-text {
    order: 1;
  }
  .hero-image {
    width: 150px;
    height: 150px;
  }
  .hero-links {
    justify-content: center;
  }
}