/*
 * CSS Architecture
 * 1. Custom Properties (Variables)
 * 2. Theme Variants
 * 3. Base Styles
 * 4. Layout & Grid
 * 5. Components
 * 6. Media Queries
 * 7. Print Styles
 */

/* -----------------------------
 * 1. Custom Properties
 * ----------------------------- */
:root {
  /* Colors - Light Theme */
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-secondary: #666666;
  --color-accent: #ff0000;
  --color-border: #dddddd;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  /* Typography */
  --font-mono: 'JetBrains Mono', monospace;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --line-height: 1.5;

  /* Layout */
  --grid-gap: var(--space-lg);
  --container-width: 1200px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
}

/* -----------------------------
 * 2. Theme Variants
 * ----------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-text: #ffffff;
    --color-secondary: #999999;
    --color-accent: #ff0000;
    --color-border: #333333;
  }
}

/* -----------------------------
 * 3. Base Styles
 * ----------------------------- */
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  line-height: var(--line-height);
  font-size: var(--font-size-base);
}

/* Base Typography */
h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0 0 var(--space-md);
  line-height: 1.1;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 0;
}

/* Links */
a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
}

a:hover {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* -----------------------------
 * 4. Layout & Grid
 * ----------------------------- */
/* Base Container Layout */
.container {
  display: grid;
  grid-template-rows:
    [primary-header] auto
    [about] auto
    [main] auto
    [system-gestures] 2rem;
  grid-template-columns:
    [fullbleed-start] minmax(var(--space-xs), 1fr)
    [main-start] repeat(
      7,
      minmax(
        0,
        calc((min(var(--container-width), 100%) - (var(--space-xs) * 2)) / 7)
      )
    )
    [main-end] minmax(var(--space-xs), 1fr)
    [fullbleed-end];
  grid-gap: var(--space-xs);
}

/* Main Content Grid */
.main {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: main;
  grid-template-rows: auto auto auto;
}

/* -----------------------------
 * 5. Components
 * ----------------------------- */
/* Header Component */
.header {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: main;
  grid-row: primary-header;
}

.header > .contact-list {
  grid-column: main;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto auto;
  grid-row-gap: var(--space-xs);
}

.header > .contact-list > .contact {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

/* About Section */
.about {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: main;
  grid-template-rows: auto auto;
  grid-gap: var(--space-md);
}

.about > .photo {
  grid-column: 2;
  grid-row: 2;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.about > .name {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
}

.about > .about-text {
  grid-column: main;
  grid-row: 3;
}

/* Experience Section */
.experience {
  grid-column: main;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--space-lg);
}

.experience > h3 {
  grid-column: main;
}

.experience > .list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: main;
  row-gap: inherit;
}

/* Episode Component */
.episode {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: main;
  align-items: baseline;
}

/* Episode Grid Layout */
.episode > .date {
  grid-column: 1;
  grid-row: 1;
}
.episode > .company {
  grid-column: 2 / main-end;
  grid-row: 1;
}
.episode > .company-description {
  grid-column: 2 / main-end;
  grid-row: 2;
}
.episode > .role {
  text-transform: uppercase;
  grid-column: 2 / main-end;
  grid-row: 3;
}
.episode > .responsibilities {
  grid-column: 2 / main-end;
  grid-row: 4;
}

/* Skills Component */
.skills {
  grid-column: 2 / main-end;
  grid-row: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.skills > li {
  background-color: var(--color-secondary);
  color: var(--color-bg);
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

/* Section Spacing */
section {
  margin-bottom: var(--space-md);
}

/* -----------------------------
 * 6. Media Queries
 * ----------------------------- */
/* Mobile First Breakpoint */
@media screen and (min-width: 400px) {
  .about > .photo {
    grid-column: 5;
    grid-row: 1;
  }

  .about > .name {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Tablet/iPad Breakpoint */
@media screen and (min-width: 768px) {
  .container {
    grid-gap: var(--space-md);
  }

  .about > .photo {
    grid-column: 4;
    grid-row: 1;
  }

  .about > .name {
    grid-column: 2;
    grid-row: 1;
  }

  .header > .contact-list {
    grid-template-rows: auto;
  }

  .header > .contact-list > .contact {
    grid-column-end: span 1;
    grid-row-end: span 1;
  }

  .episode {
    grid-template-rows: 1fr auto;
    row-gap: var(--space-sm);
  }

  .episode > .date {
    grid-column: 1;
    grid-row: 1;
  }

  .episode > .company {
    grid-column: 2 / 4;
  }

  .episode > .company-description {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .episode > .role {
    text-transform: uppercase;
    grid-column: 4 / main-end;
    grid-row: 1;
  }

  .episode > .responsibilities {
    grid-column: 4 / main-end;
    grid-row: 2;
  }

  .skills {
    grid-column: 4 / main-end;
    grid-row: 3;
  }

  .main {
    padding-top: var(--space-xl);
  }

  section {
    margin-bottom: var(--space-xl);
  }
}

/* Desktop Breakpoint */
@media screen and (min-width: 1024px) {
  .episode {
    row-gap: var(--space-md);
  }

  .episode > .date {
    grid-column: 1;
    grid-row: 1;
  }

  .episode > .company {
    grid-column: 2/4;
    grid-row: 1;
  }

  .episode > .company-description {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .episode > .role {
    text-transform: uppercase;
    grid-column: 4 / main-end;
    grid-row: 1;
  }

  .episode > .responsibilities {
    grid-column: 4 / main-end;
    grid-row: 2;
  }

  .skills {
    grid-column: 4 / main-end;
    grid-row: 3;
  }
}

/* Typography Responsive Adjustments */
@media screen and (min-width: 768px) {
  :root {
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 2.5rem;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 2.5rem;
    --font-size-2xl: 3rem;
  }
}