/* ============================================================
   STYLES.CSS — Quinn Carrick Portfolio
   Structure only. Color, typography, and visual styling
   will be applied in a later pass.
   ============================================================ */


/* ============================================================
   CSS CUSTOM PROPERTIES
   Design tokens — edit here, propagates everywhere.
   TODO: Fill in final color values once design is locked.
   TODO: Fill in final font families once selected.
============================================================ */
:root {
  /* --- Color Palette --- */
  /* TODO: Apply colors in styling pass */
  --color-bg:          #F2E5D6;
  --color-primary:     #445552;
  --color-bg-alt:      ;
  --color-placeholder: #E0CFC0;
  --color-placeholder-hero: #C9B8A8;
  --color-surface:     ;
  --color-text:        ;
  --color-text-muted:  ;
  --color-border:      ;
  --color-accent:      ;

  /* --- Skill Bubble Category Colors --- */
  /* TODO: Define categories and colors once decided */
  --skill-default:     ;

  /* --- Typography --- */
  /* TODO: Replace placeholders with final font choices */
  --font-body:         serif;
  --font-display:      serif;
  --font-wordmark:     "Anton", sans-serif;; /* TODO: Replace with QCARRICK custom font */

  --font-size-base:    1.125rem;  /* 18px */
  --font-size-sm:      0.875rem;  /* 14px */
  --font-size-md:      1rem;      /* 16px */
  --font-size-lg:      1.25rem;   /* 20px */
  --font-size-xl:      1.5rem;    /* 24px */
  --font-size-2xl:     2rem;      /* 32px */
  --font-size-3xl:     2.75rem;   /* 44px */
  --font-size-4xl:     3.5rem;    /* 56px */

  /* --- Spacing scale (multiples of 4px, in rem) --- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* --- Layout --- */
  /* Nav margin: 30px at 1440px → clamp to viewport */
  --margin-nav:     clamp(1rem, 2.083vw, 1.875rem);
  /* Section margin: 72px at 1440px → clamp to viewport */
  --margin-section: clamp(1.25rem, 5vw, 4.5rem);

  --max-width: 90rem; /* 1440px */

  /* --- Borders & Radii --- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-pill: 999px;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}


/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* rem anchor */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  background-color: var(--color-bg);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul {
  list-style: none;
}


/* ============================================================
   UTILITY CLASSES
============================================================ */

/* Section-level content wrapper — applies horizontal margin */
.section-container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-section);
}

/* Full-bleed: bypasses section-container padding for edge-to-edge elements */
.full-bleed {
  margin-inline: calc(-1 * var(--margin-section));
}

/* Section heading style */
.section-header {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
}

/* Skill bubble — base structure only */
/* TODO: Add color variants per data-category in styling pass */
.skill-bubble {
  display: inline-block;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid; /* color TBD */
  background-color: var(--color-placeholder);
}

/* Wireframe placeholder image block */
.placeholder-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid;
  background-color: var(--color-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  position: relative;
  overflow: hidden;
}

/* X lines inside placeholder — mimics wireframe image block */
.placeholder-img::before,
.placeholder-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    currentColor calc(50% - 0.5px),
    currentColor calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  opacity: 0.2;
}
.placeholder-img::after {
  background: linear-gradient(
    to bottom left,
    transparent calc(50% - 0.5px),
    currentColor calc(50% - 0.5px),
    currentColor calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

.placeholder-img span {
  position: relative;
  z-index: 1;
  padding: var(--space-1) var(--space-2);
}


/* ============================================================
   STICKY SIDEBAR WORDMARK — "QCARRICK"
   Fixed to left edge, rotated vertically, scrolls with page.
   Hidden on mobile. Shown at 75rem+.
   TODO: Replace with SVG + custom font when asset is ready.
============================================================ */
.sidebar-wordmark {
  display: none; /* hidden on mobile, restored at 75rem */
  position: fixed;
  left: 78px;
  top: 56%;
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform-origin: center center;

  font-family: var(--font-wordmark);
  font-size: 6rem;
  letter-spacing: 3rem;

  color: #DDD0C1;

  white-space: nowrap;
  z-index: -1;
  pointer-events: none;
}


/* ============================================================
   NAVIGATION
============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(68, 85, 82, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.nav__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-nav);
  padding-block: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Resume link in nav — visually distinct from regular nav links */
.nav__resume-link {
  border: 1px solid;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  /* TODO: Style color in styling pass */
}

/* TODO: Replace text logo with SVG/custom font asset */
.nav__logo {
  font-family: var(--font-wordmark);
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.nav__links {
  display: none; /* hidden on mobile — restore at 48rem+ */
  gap: var(--space-8);
}

.nav__links a {
  font-size: var(--font-size-md);
}


/* ============================================================
   SECTION 1: HERO
============================================================ */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Full-bleed background placeholder */
/* TODO: Replace with actual hero image / portfolio reel still */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-placeholder-hero);
}

/* Mobile: single column, no sprite */
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-section);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.hero__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.hero__subheading {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-8);
}

.hero__bio {
  font-size: var(--font-size-base);
  max-width: 40ch;
  line-height: 1.7;
}

/* TODO: Replace with animated sprite image/canvas element when asset is ready */
/* Hidden on mobile, shown at 48rem+ */
.hero__sprite {
  display: none;
  width: clamp(10rem, 20vw, 18rem);
  aspect-ratio: 1 / 1;
  border: 1px solid;
  background-color: var(--color-placeholder);
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}


/* ============================================================
   SECTION 2: HIGHLIGHTED PROJECTS
   Glide.js carousel — structure ready, init at bottom of HTML.
============================================================ */
#projects {
  padding-block: var(--space-24);
}

/* Mobile: single column */
.projects__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-left: var(--margin-section);
  padding-right: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: start;
}

#projects .section-header {
  padding-right: var(--margin-section);
}

.projects__description {
  margin-top: var(--space-4);
  line-height: 1.7;
  padding-right: var(--margin-section);
}

/* Glide carousel wrapper — clips slides to column boundary */
.projects__carousel-wrapper {
  position: relative;
  overflow: hidden;
  min-width: 0; /* prevents grid blowout */
}

/* Glide track — overflow visible enables peek effect; wrapper clips it */
.projects__carousel {
  position: relative;
  padding: var(--space-6) 0;
}

.projects__carousel .glide__track {
  overflow: visible;
}

/* Arrow controls */
.projects__arrows {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.projects__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  /* TODO: Style color and hover state in styling pass */
}

.projects__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Project card — mobile: simple vertical stack */
.project-card {
  border: 1px solid;
  border-radius: var(--radius-md);
  background-color: var(--color-placeholder);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.project-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.project-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
}

.project-card__description {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.project-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Mobile: image sits below the text as a 16/9 banner */
.project-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.project-card__image .placeholder-img {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border: none;
  border-top: 1px solid;
}


/* ============================================================
   SECTION 3: OTHER WORKS
============================================================ */
#other-works {
  padding-block: var(--space-24);
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.other-works__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-section);
}

/* Mobile: single column */
.other-works__grid {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* TODO: Replace with actual work image/thumbnail */
.work-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.work-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
}

.work-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.work-card__description {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.work-card__takeaways {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  list-style: disc;
}

.work-card__takeaways li {
  font-size: var(--font-size-sm);
}


/* ============================================================
   SECTION 4: ABOUT ME
============================================================ */
#about {
  padding-block: var(--space-24);
}

/* Mobile: single column */
.about__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-section);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* TODO: Replace with embedded portfolio reel (video/iframe) when ready */
.about__reel {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid;
  background-color: var(--color-placeholder);
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.about__bio {
  font-size: var(--font-size-base);
  line-height: 1.7;
}

/* Major named tech skills with icon placeholders */
.about__tech-skills {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
}

.tech-skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

/* TODO: Replace icon placeholder with real logo/SVG per skill */
.tech-skill__icon {
  width: 3rem;
  height: 3rem;
  border: 1px solid;
  background-color: var(--color-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

/* Categorized skill bubbles */
/* TODO: Define categories + assign data-category color variants in styling pass */
.about__skill-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


/* ============================================================
   SECTION 5: CALL TO ACTION
============================================================ */
#contact {
  padding-block: var(--space-24);
  border-top: 1px solid;
}

/* Mobile: single column */
.cta__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-section);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: start;
}

.cta__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-6);
}

.cta__description {
  font-size: var(--font-size-base);
  line-height: 1.7;
  margin-bottom: var(--space-16);
}

/* TODO: Style button fully in styling pass */
.cta__btn {
  display: inline-block;
  border: 1px solid;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  cursor: pointer;
  background: transparent;
}

.cta__contact-info {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cta__email {
  font-size: var(--font-size-md);
}

.cta__socials {
  display: flex;
  gap: var(--space-4);
}

/* Social icon circles — structure only */
/* TODO: Replace text labels with SVG icons in styling pass */
.cta__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  background-color: var(--color-placeholder);
}

/* Resume download button in CTA — sits alongside social icons */
.cta__resume-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  /* TODO: Style color in styling pass */
}

/* Testimonials column */
.cta__testimonials {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.testimonial {
  border: 1px solid;
  border-radius: var(--radius-md);
  background-color: var(--color-placeholder);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.testimonial__quote {
  font-size: var(--font-size-md);
  line-height: 1.7;
}

.testimonial__attribution {
  font-size: var(--font-size-sm);
  text-align: right;
  padding-block: 0;
  padding-top: var(--space-4);
}


/* ============================================================
   FOOTER
============================================================ */
footer {
  border-top: 1px solid;
  padding-block: var(--space-6);
  text-align: center;
}

.footer__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-section);
}

.footer__copy {
  font-size: var(--font-size-sm);
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   Mobile-first. Two breakpoints, matching the case study system.
     48rem  (~768px) — tablet
     75rem  (~1200px) — desktop
============================================================ */

/* ── Tablet (min-width: 48rem) ── */
@media (min-width: 48rem) {

  /* Nav: restore full link list */
  .nav__links {
    display: flex;
  }

  /* Hero: two-column with sprite */
  .hero__inner {
    grid-template-columns: 1fr auto;
  }

  .hero__sprite {
    display: flex; /* TODO: Decide final treatment for sprite */
  }

  /* Other works: 2-column grid */
  .other-works__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Projects: intro column + carousel */
  .projects__inner {
    display: grid;
    grid-template-columns: 50% 50%;
  }

  #projects .section-header {
    padding-right: 0;
  }

  .projects__description {
    padding-right: 0;
  }

  .projects__carousel {
    align-self: normal;
    width: 100%;
    overflow: hidden;
    max-width: 100%;
  }

  /* Project card: switch to horizontal layout at tablet+ */
  .project-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 16rem;
  }

  .project-card__body {
    padding: var(--space-8);
  }

  .project-card__description {
    max-width: 36ch;
  }

  /* Image peeks in from right edge */
  .project-card__image {
    width: clamp(8rem, 20vw, 18rem);
    height: 100%;
    aspect-ratio: unset;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Projects: restore right padding at tablet since it's now a proper grid column */
  .projects__inner {
    padding-right: 1.5rem;
  }

  /* CTA contact info: side by side at tablet+ */
  .cta__contact-info {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .project-card__image .placeholder-img {
    border-top: none;
    border-left: 1px solid;
  }
}

/* ── Desktop (min-width: 75rem) ── */
@media (min-width: 75rem) {

  /* Sidebar wordmark: shown on desktop */
  .sidebar-wordmark {
    display: block;
  }

  /* Other works: full 3-column grid */
  .other-works__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* About: reel + content side by side */
  .about__inner {
    grid-template-columns: 1fr 1fr;
  }

  /* CTA: left + testimonials side by side */
  .cta__inner {
    grid-template-columns: 1fr 1fr;
  }
}