/* =============================================================
   CIF HOME LAYOUT v2 — only /new/home.php
   Loaded AFTER cif-motion.css, no global CSS replaced.
   Goal: eliminate accidental blank areas due to min-heights,
   bottom alignment and giant section padding.
   ============================================================= */

/* HOME spacing system. Affects no other pages. */
.cif-home .motion-home {
  --home-section-gap: clamp(52px, 6.2vw, 94px);
  --home-inner-gap: clamp(18px, 2.8vw, 36px);
}

.cif-home .motion-section {
  padding-block: var(--home-section-gap);
}

.cif-home .motion-section__head {
  margin-bottom: var(--home-inner-gap);
}

.cif-home .motion-section__head > p:last-child {
  margin-top: 13px;
}

/* 1 — HERO: tall enough for the 3D ball and floating cards, not
   hundreds of extra pixels because of inherited grid min-height. */
.cif-home .motion-hero {
  min-height: clamp(600px, 82svh, 790px);
}

.cif-home .motion-hero__grid {
  min-height: 0;
  padding-block: clamp(62px, 6vw, 96px) clamp(64px, 6vw, 90px);
}

.cif-home .motion-hero__stage {
  min-height: clamp(380px, 45vw, 510px);
}

.cif-home .motion-kicker {
  margin-bottom: 22px;
}

.cif-home .motion-hero__lead {
  margin-top: 22px;
}

.cif-home .motion-hero__actions {
  margin-top: 24px;
}

.cif-home .motion-hero__stats {
  margin-top: 35px;
}

.cif-home .motion-hero__stats div {
  min-width: 0;
  padding-inline: clamp(12px, 2vw, 24px);
}

.cif-home .floating-card--ranking {
  top: 9%;
}

.cif-home .floating-card--edition {
  bottom: 5%;
}

/* 2 — THE PROJECT: meaningful 2-column section instead of an
   oversized heading block with bottom margin and blank area. */
.cif-home .motion-section--about {
  padding-block: clamp(44px, 5.4vw, 78px);
  background: linear-gradient(125deg, rgba(56,216,255,.035), transparent 54%);
}

.cif-home .home-about {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(24px, 6vw, 90px);
  align-items: center;
}

.cif-home .home-about__intro {
  max-width: 760px;
}

.cif-home .home-about__intro h2 {
  max-width: 720px;
  margin: 0;
  color: var(--text);
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.cif-home .home-about__intro > p:not(.eyebrow) {
  max-width: 65ch;
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.cif-home .home-about__link {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin-top: 23px;
  color: var(--cyan);
  font-size: .83rem;
  font-weight: 850;
  text-decoration: none;
}

.cif-home .home-about__link:hover {
  color: var(--text);
}

.cif-home .home-about__details {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.cif-home .home-about__details article {
  padding: clamp(18px, 2vw, 25px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(16,39,63,.53), rgba(6,17,30,.62));
}

.cif-home .home-about__details span {
  color: var(--cyan);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cif-home .home-about__details p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.65;
}

/* 3 — CONTENT CARDS: the old 390px/430px minimum heights and
   justify-content:flex-end caused large empty tops. */
.cif-home .motion-feature-grid {
  gap: clamp(10px, 1.3vw, 16px);
  align-items: stretch;
}

.cif-home .motion-feature-card {
  min-height: 265px;
  justify-content: center;
  padding: clamp(20px, 2.3vw, 30px);
}

.cif-home .motion-feature-card:not(.motion-feature-card--wide) {
  padding-top: 68px; /* room for index and icon, not 200px of air */
}

.cif-home .motion-feature-card--wide {
  min-height: 285px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr);
  gap: clamp(15px, 3vw, 32px);
  align-items: center;
}

.cif-home .motion-feature-card h3 {
  font-size: clamp(1.65rem, 2.7vw, 2.7rem);
}

.cif-home .motion-feature-card p:last-child {
  margin-top: 9px;
}

.cif-home .motion-live-dot {
  margin-bottom: 17px;
}

.cif-home .mini-ranking {
  gap: 7px;
}

.cif-home .mini-ranking div {
  padding: 10px 12px;
}

/* 4 — LATEST EDITIONS: preserve the known working full-card links,
   trim excessively tall logo/description cards. */
.cif-home .editions-showcase {
  grid-template-rows: repeat(2, minmax(215px, auto));
  gap: clamp(10px, 1.2vw, 16px);
}

.cif-home .edition-showcase-card {
  min-height: 215px;
}

.cif-home .edition-showcase-card--featured {
  min-height: 450px;
  grid-template-rows: minmax(220px, 1fr) auto;
}

.cif-home .edition-showcase-card--featured .edition-showcase-card__visual {
  min-height: 220px;
}

.cif-home .edition-showcase-card--featured .edition-showcase-card__visual img {
  width: min(174px, 48%);
  height: 174px;
}

.cif-home .edition-showcase-card__content {
  justify-content: center;
  padding: 18px;
}

.cif-home .edition-showcase-card--featured .edition-showcase-card__content {
  padding: 22px 25px 25px;
}

.cif-home .edition-showcase-card__cta {
  margin-top: 12px;
}

/* 5 — COMPETITIONS: no huge empty top above a logo positioned with
   top:13% within a 630px card. Logo participates in normal layout. */
.cif-home .competition-duo {
  gap: clamp(11px, 1.4vw, 18px);
}

.cif-home .competition-crown {
  min-height: 395px;
  justify-content: center;
  gap: 0;
  padding: clamp(25px, 3.2vw, 40px);
}

.cif-home .competition-crown__glow {
  top: 0;
  width: min(400px, 90%);
  height: 350px;
  pointer-events: none;
}

.cif-home .competition-crown img {
  position: relative;
  inset: auto;
  top: auto;
  width: clamp(128px, 15vw, 200px);
  height: clamp(128px, 15vw, 200px);
  margin-top: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.cif-home .competition-crown h3 {
  margin-top: 12px;
  font-size: clamp(1.9rem, 3.1vw, 3.15rem);
}

.cif-home .competition-crown p {
  margin-top: 10px;
}

.cif-home .competition-crown__cta {
  margin-top: 17px;
}

/* 6 — LIVE: replace a 620px fixed-height panel and 440px mock-up with
   content-sized layouts while preserving the functional CTA. */
.cif-home .live-experience {
  min-height: 0;
  gap: clamp(25px, 4vw, 60px);
  padding: clamp(24px, 4vw, 52px);
}

.cif-home .live-experience h2 {
  margin-top: 17px;
  font-size: clamp(2.3rem, 4.6vw, 4.5rem);
}

.cif-home .live-experience__copy > p {
  margin-top: 16px;
}

.cif-home .live-dashboard-mock {
  min-height: 0;
  padding: 15px;
}

.cif-home .live-dashboard-mock__player {
  margin-top: 13px;
  padding: 15px;
}

.cif-home .live-dashboard-mock__metrics div {
  padding: 14px;
}

.cif-home .live-dashboard-mock__feed {
  gap: 7px;
  margin-top: 12px;
}

.cif-home .live-dashboard-mock__feed span {
  height: 27px;
}

.cif-home .live-dashboard-mock__feed span::before,
.cif-home .live-dashboard-mock__feed span::after {
  top: 8px;
  height: 10px;
}

/* 7 — FINAL CTA: naturally sized, not a forced 650px block with
   another 2 * 160px of padding. */
.cif-home .motion-section--final {
  min-height: 0;
  padding-block: clamp(75px, 8vw, 115px);
}

.cif-home .final-cta h2 {
  font-size: clamp(2.7rem, 6vw, 5.5rem);
}

.cif-home .final-cta > p:not(.eyebrow) {
  margin-top: 15px;
}

.cif-home .final-cta .motion-hero__actions {
  margin-top: 22px;
}

/* Tablet: prevent empty scene area after switching the hero to one column. */
@media (max-width: 1120px) {
  .cif-home .motion-feature-card--accent {
    min-height: 245px;
  }
}

@media (max-width: 900px) {
  .cif-home .motion-hero {
    min-height: 0;
  }

  .cif-home .motion-hero__grid {
    min-height: 0;
    align-content: start;
    padding-block: 62px 58px;
    row-gap: 22px;
  }

  .cif-home .motion-hero__stage {
    min-height: 235px;
  }

  .cif-home .floating-card--ranking {
    top: 0;
    right: 3%;
  }

  .cif-home .floating-card--edition {
    left: 2%;
    right: auto;
    bottom: 0;
  }

  .cif-home .home-about {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .cif-home .home-about__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cif-home .competition-crown {
    min-height: 0;
    padding-block: 28px;
  }

  .cif-home .competition-crown img {
    width: clamp(115px, 18vw, 175px);
    height: clamp(115px, 18vw, 175px);
  }

  .cif-home .live-experience {
    grid-template-columns: 1fr;
  }

  .cif-home .live-dashboard-mock {
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
  }
}

@media (max-width: 700px) {
  .cif-home .motion-home {
    --home-section-gap: 52px;
    --home-inner-gap: 22px;
  }

  .cif-home .motion-hero {
    min-height: 0;
  }

  .cif-home .motion-hero__grid {
    padding-block: 40px 42px;
    row-gap: 18px;
  }

  .cif-home .motion-hero__stage {
    min-height: 245px;
  }

  .cif-home .motion-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 27px;
  }

  .cif-home .motion-hero__stats div,
  .cif-home .motion-hero__stats div:nth-child(3) {
    min-width: 0;
    padding: 0 9px 0 12px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .cif-home .motion-hero__stats div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .cif-home .motion-hero__stats strong {
    font-size: 1.13rem;
  }

  .cif-home .motion-hero__stats span {
    font-size: .57rem;
    line-height: 1.4;
  }

  .cif-home .motion-scroll-hint {
    display: none;
  }

  .cif-home .motion-feature-grid {
    grid-template-columns: 1fr;
  }

  .cif-home .motion-feature-card,
  .cif-home .motion-feature-card--wide,
  .cif-home .motion-feature-card--accent {
    grid-column: auto;
    min-height: 0;
    padding: 70px 21px 22px;
  }

  .cif-home .motion-feature-card--wide {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 17px;
  }

  .cif-home .mini-ranking {
    margin-top: 0;
  }

  .cif-home .editions-showcase {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 11px;
  }

  .cif-home .edition-showcase-card,
  .cif-home .edition-showcase-card--featured {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 0;
  }

  .cif-home .edition-showcase-card__visual,
  .cif-home .edition-showcase-card--featured .edition-showcase-card__visual {
    min-height: 185px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .cif-home .edition-showcase-card__visual img,
  .cif-home .edition-showcase-card--featured .edition-showcase-card__visual img {
    width: 83px;
    height: 83px;
  }

  .cif-home .edition-showcase-card__content,
  .cif-home .edition-showcase-card--featured .edition-showcase-card__content {
    padding: 16px;
  }

  .cif-home .edition-showcase-card--featured h3 {
    font-size: clamp(1.15rem, 5vw, 1.5rem);
  }

  .cif-home .competition-duo {
    grid-template-columns: 1fr;
  }

  .cif-home .competition-crown {
    min-height: 0;
    padding: 27px 20px;
  }

  .cif-home .competition-crown img {
    width: 142px;
    height: 142px;
  }

  .cif-home .competition-crown h3 {
    font-size: 2rem;
  }

  .cif-home .live-experience {
    min-height: 0;
    padding: 22px;
  }

  .cif-home .live-dashboard-mock {
    min-height: 0;
  }

  .cif-home .final-cta .motion-hero__actions {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .cif-home .motion-hero__stage {
    min-height: 252px;
  }

  .cif-home .motion-hero__stats div {
    min-width: 0;
  }

  .cif-home .floating-card {
    width: min(205px, 57vw);
  }

  .cif-home .home-about__details {
    grid-template-columns: 1fr;
  }

  .cif-home .motion-section__head h2 {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }

  .cif-home .edition-showcase-card,
  .cif-home .edition-showcase-card--featured {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .cif-home .edition-showcase-card__visual,
  .cif-home .edition-showcase-card--featured .edition-showcase-card__visual {
    min-height: 195px;
  }

  .cif-home .edition-showcase-card__visual img,
  .cif-home .edition-showcase-card--featured .edition-showcase-card__visual img {
    width: 70px;
    height: 70px;
  }

  .cif-home .live-dashboard-mock__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cif-home .live-dashboard-mock__metrics div {
    padding: 9px;
  }

  .cif-home .live-dashboard-mock__player {
    grid-template-columns: auto minmax(0,1fr);
    gap: 12px;
  }

  .cif-home .live-dashboard-mock__player b {
    grid-column: 2;
  }

  .cif-home .live-dashboard-mock__bar em {
    font-size: .55rem;
  }
}

/* Reduced motion: no forced invisible content. */
@media (prefers-reduced-motion: reduce) {
  .cif-home .motion-section [data-reveal],
  .cif-home .motion-hero [data-reveal] {
    opacity: 1;
    transform: none;
  }
}