/*
🏠 HOMEPAGE STYLES

Theme styles are located in:
../theme.css

This file is specifically for homepage styles


*****

AI Disclaimer

Vast majority of this site and pages was built by myself and no
course work pages were generated using AI. 

Things AI was used for; Redundant tasks, catching CSS/HTML errors, making fine tuned/minor adjustments to styles and elements on pages (If I wanted a button moved over a few pixels and just couldn't figure out how), checking links, and periodically reviewing my work upon request.

*****


Guide
1. Hero (left box)
2. Hero side (big card + 3 recent posts)

*/

.avatar img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;

}



/* --- 1. HERO (LEFT BOX) --- */
/* phone = 1 col; desktop = 1/3 left box + 2/3 hero side */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  padding: 20px 0 10px;

}


.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 4px);
  border: 3px ridge var(--teal);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--shadow);

}


.hero-text .bubble h1 {
  font-size: 36px;

}


.hero-intro {
  max-width: 520px;
  margin: 0;
  font-size: 18px;
  color: var(--muted);

}


@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);

  }

}



/* --- 2. HERO SIDE (BIG CARD + 3 RECENT POSTS) --- */
.hero-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;

}


/* Big card: picture on top (phone), picture left + text right (tablet and up) */
.hero-side .card--project .window img {
  aspect-ratio: 4 / 3;

}


@media (min-width: 700px) {
  .card--project {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: 20px;

  }

}


.identity-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
}

.identity-heading > span:last-child {
  text-align: right;
}

/* 3 recent posts: stacked on phone, 3 across on tablet and up */
.featured-posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;

}


.featured-posts .card--post {
  grid-template-columns: minmax(0, 1fr);

}


.featured-posts .card--post h3 {
  font-size: 22px;

}


@media (min-width: 700px) {
  .featured-posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}


.identity {
  display: grid; 
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;

}



.identity-role {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 4px 8px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;

}


.identity-role img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;

}