/* ==========================================================================
   Home page — Hero, Latest Reels, From the Journal, About Teaser, Collab CTA
   Reuses .container, .section-head*, .btn-primary/.btn-secondary,
   .see-more-link, .reel-tile*, .article-card* from components.css.
   ========================================================================== */

/* ---------- Hero ---------- */
.home-hero {
  position: relative;
  width: 100%;
  height: 640px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  background-image: var(--hero-overlay-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
}

.home-hero__content {
  position: absolute;
  top: 180px;
  left: var(--nav-h-pad);
  right: var(--nav-h-pad);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 640px;
  max-width: calc(100% - (var(--nav-h-pad) * 2));
}

.home-hero__eyebrow {
  color: var(--color-terracotta);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.home-hero__headline {
  color: var(--text-inverse);
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 600;
  line-height: 60px;
  width: 100%;
}

.home-hero__subhead {
  color: var(--text-inverse-dim);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  max-width: 520px;
}

.home-hero__followers {
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}

.home-hero__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .home-hero__content {
    top: 130px;
  }
}

@media (max-width: 640px) {
  .home-hero {
    height: 560px;
  }

  .home-hero__content {
    top: 90px;
    gap: 16px;
  }

  .home-hero__headline {
    font-size: 34px;
    line-height: 40px;
  }

  .home-hero__subhead {
    font-size: 15px;
    line-height: 22px;
    max-width: 100%;
  }

  .home-hero__buttons {
    gap: 12px;
  }
}

/* ---------- Reels Section ---------- */
.home-reels {
  width: 100%;
  padding: 80px 0;
}

.home-reels__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.home-section-head__col {
  display: flex;
  flex-direction: column;
}

.home-reels__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 24px;
  width: 100%;
}

@media (max-width: 900px) {
  .home-reels {
    padding: 56px 0;
  }
}

@media (max-width: 640px) {
  .home-reels__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 16px;
  }

  .home-reels {
    padding: 48px 0;
  }
}

/* ---------- Articles Section ---------- */
.home-articles {
  width: 100%;
  background-color: var(--color-sand);
  padding: 40px 0 80px;
}

.home-articles__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.home-articles__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.home-articles__eyebrow {
  color: var(--color-olive);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.home-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
}

@media (max-width: 900px) {
  .home-articles {
    padding: 32px 0 56px;
  }
}

@media (max-width: 640px) {
  .home-articles__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- About Teaser ---------- */
.home-about {
  width: 100%;
  padding: 80px 0;
}

.home-about__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.home-about__photo {
  flex-shrink: 0;
  width: 440px;
  height: 440px;
  border-radius: var(--radius-lg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-about__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1 1 0;
}

.home-about__body {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  max-width: 520px;
}

.home-about__link {
  color: var(--color-terracotta);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
}

.home-about__link:hover {
  color: var(--color-terracotta-dark);
}

@media (max-width: 900px) {
  .home-about {
    padding: 56px 0;
  }

  .home-about__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .home-about__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .home-about__body {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .home-about {
    padding: 40px 0;
  }
}

/* ---------- Collab CTA Strip ---------- */
.home-collab {
  width: 100%;
  background-color: var(--color-ink);
  padding: 56px 0;
}

.home-collab__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.home-collab__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.home-collab__heading {
  color: var(--text-inverse);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
}

.home-collab__subtext {
  color: var(--footer-text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
}

@media (max-width: 640px) {
  .home-collab {
    padding: 40px 0;
  }

  .home-collab__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-collab__inner > .btn-primary {
    width: 100%;
    text-align: center;
  }
}