/* Homepage-specific styles
 * Loaded only on the homepage via head.html conditional.
 * swup's HeadPlugin adds/removes this stylesheet during navigation.
 */

/* Override page-container constraints when homepage content is active */
body:has(.home-page) {
  padding-left: 0;
  padding-right: 0;
}

body:has(.home-page) .page-container {
  max-width: none;
  padding-top: 0;
}

body:has(.home-page) .content {
  min-height: 0 !important;
}

body:has(.home-page) footer {
  display: none;
}

/* Reset article.css typography margins inside the homepage */
.home-page h1,
.home-page h2,
.home-page p,
.home-page ul {
  margin-top: 0;
  margin-bottom: 0;
}

/* Homepage layout */
.home-page {
  min-height: calc(100vh - var(--header-height, 80px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  padding-top: var(--header-height, 0px);
}

.home-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4rem;
  align-items: center;
  justify-content: center;
}

/* Hero image */
.hero-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-height: 450px;
  min-width: 350px;
}

.hero-image img {
  max-height: 400px;
  width: auto;
  max-width: 350px;
  display: block;
}

.hero-image figcaption {
  font-size: 0.75rem;
  color: var(--content-secondary);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

.dark .hero-image img {
  filter: brightness(0.92) contrast(1.1);
}

/* Homepage content column */
.home-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.home-info .name {
  font-size: 1.8rem;
  font-weight: 400;
}

.home-info .bio {
  font-size: 1.1rem;
  color: var(--content-secondary);
  max-width: 380px;
}

.home-info .bio a {
  color: var(--content-primary);
}

/* Homepage posts section */
.home-info .home-posts {
  margin-top: 1rem;
}

.home-info .home-posts-title {
  font-family: var(--nav-font);
  font-variant-caps: small-caps;
  font-size: 1.2rem;
  color: var(--content-secondary);
  margin-bottom: 0.8rem;
}

.home-info .home-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-info .home-post-item {
  padding: 0.35rem 0;
}

.home-info .home-post-item a {
  text-decoration: none;
  color: var(--content-secondary);
  transition: color 0.2s ease;
}

.home-info .home-post-item a:hover {
  color: var(--content-primary);
}

.home-info .home-nav-link {
  margin-top: 0.2rem;
}

.home-info .home-nav-link a {
  font-family: var(--nav-font);
  font-variant-caps: small-caps;
  font-size: 1rem;
  color: var(--content-secondary);
  text-decoration: none;
}

.home-info .home-nav-link a:hover {
  color: var(--content-primary);
}

.home-info .draft-badge {
  font-family: var(--mono-font);
  font-size: 0.65em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--orange1);
  color: var(--background);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Responsive: tablet and below */
@media (max-width: 700px) {
  .home-page {
    padding: 2rem;
    padding-top: var(--header-height, 0px);
  }

  .home-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 400px;
  }

  .hero-image {
    order: -1;
    min-height: auto;
    min-width: auto;
    margin: 0 auto;
  }

  .hero-image img {
    max-height: 250px;
    max-width: 220px;
  }

  .hero-image figcaption {
    font-size: 0.65rem;
  }

  .home-info {
    text-align: left;
  }

  .home-info .bio {
    max-width: 100%;
  }

  .home-info .home-posts {
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .home-page {
    padding: 1.5rem;
    padding-top: var(--header-height, 0px);
  }
}