/* ==============================================================
   Home-specific styles (index.html only)
   Hybrid hero + quick-links strip
   ============================================================== */

/* --- Hero compaction ------------------------------------------------ */
/* Fixed-height hero (px, not vh) so it stays stable across browser UI
   changes (bookmarks bar toggles) and page zoom. The container becomes a
   flex column so the news bar can pin to the bottom while the
   text/Goliath row vertically centers in the remaining space. */
.vs-hero--home .vs-hero__item {
  height: 1120px;
  padding: 24px 0 12px;
  background-position: center -0px;
  display: flex;
  flex-direction: column;
}
.vs-hero--home .vs-hero__item > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.vs-hero--home .vs-hero__item .row {
  flex: 1 1 auto;
}

/* Push just the Goliath column down within the hero row (text column
   stays vertically centered per the row's align-items-center). */
.home-hero__art-col { align-self: flex-end; }
@media (max-width: 991px) {
  .vs-hero--home .vs-hero__item {
    min-height: 520px;
    padding: 36px 0 20px;
  }
}

/* Goliath artwork — capped height so the row fits inside a 16:9
   viewport without forcing the bottom-pinned news cards off-screen.
   The small top margin reintroduces a bit of vertical breathing room
   above Goliath without consuming the space the news cards reclaimed. */
.home-hero__art { text-align: left; }
.home-hero__art img {
  margin-top: 98px;
  max-width: 100%;
  height: auto;
  display: inline-block;
  transform: translateY(20px);
}

/* Default: show desktop slogan, hide the mobile variant (flipped below 767px). */
.home-hero__title-desktop,
.home-hero__desc-desktop { display: inline; }
.home-hero__title-mobile,
.home-hero__desc-mobile { display: none; }

/* H1 paired with a descriptor + ticker + buttons needs to be smaller */
.home-hero__title {
  font-size: clamp(2.2rem, 0.7rem + 2.4vw, 3.6rem);
  letter-spacing: -1.4px;
  margin-bottom: 18px;
}

/* One-line descriptor sitting under H1 */
.home-hero__desc {
  max-width: 520px;
  color: var(--body-color);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 22px 0;
}

/* Hero CTA buttons: add breathing room between them. */
.vs-hero--home .vs-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* --- News bar pinned to the bottom of the hero -------------------- */
.home-hero__newsbar {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 245, 245, 0.1);
  transform: translateY(-100px);
}

.home-hero__newsbar-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.home-hero__newsbar-heading {
  font-family: var(--title-font);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-title-color, #fff);
  margin: 0;
  line-height: 1.2;
}

.home-hero__newsbar-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--title-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vs-theme-color, #54b893);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.home-hero__newsbar-all i { font-size: 0.6rem; transition: transform .2s; }
.home-hero__newsbar-all:hover { color: #8affd4; }
.home-hero__newsbar-all:hover i { transform: translateX(3px); }

/* Card item visuals are shared with blog listings — see .post-card in style.css. */
.home-hero__newsbar-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 991px) {
  .home-hero__newsbar { padding-top: 14px; }
  .home-hero__newsbar-list { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 575px) {
  .home-hero__newsbar-heading { font-size: 0.74rem; }
  .home-hero__newsbar-all { font-size: 0.66rem; }
}

/* --- Mobile hero: let the hero flow naturally instead of fighting a
       viewport-locked height with overlapping translates. The desktop
       layout pins a 102vh hero with Goliath + newsbar visually offset
       via translate; on narrow screens that framework crams everything
       into one portrait screen, so below 768px we switch to a stacked,
       content-bound layout. ------------------------------------------- */
@media (max-width: 767px) {
  .vs-hero--home .vs-hero__item {
    height: auto;
    min-height: 0;
    /* padding-top clears the fixed header (~80px) so the "SC: Evo Complete"
       eyebrow + H1 don't slide up under the wordmark/hamburger. */
    padding: 110px 0 32px;
  }
  .home-hero__title-desktop,
  .home-hero__desc-desktop { display: none; }
  .home-hero__title-mobile,
  .home-hero__desc-mobile { display: inline; }
  .home-hero__art img {
    margin-top: 24px;
    transform: none;
  }
  .home-hero__newsbar {
    transform: none;
    margin-top: 24px;
  }
}