/* EchoToFuture Home Desktop Fix V2.3
   Desktop: hide old mobile intro under the new hero.
   Mobile: keep old intro.
*/

@media (min-width: 1024px) {
  body.e2f-home-page .cards-column {
    width: min(1120px, calc(100vw - 160px)) !important;
    max-width: min(1120px, calc(100vw - 160px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 28px !important;
  }

  body.e2f-home-page .cards-column > .card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide only the old phone-like intro card, not the form/community cards. */
  body.e2f-home-page .cards-column > section.card.text-center:first-of-type {
    display: none !important;
  }

  /* Hide the old intro text and old CTA directly following the hidden card. */
  body.e2f-home-page .cards-column > section.card.text-center:first-of-type + p,
  body.e2f-home-page .cards-column > section.card.text-center:first-of-type + p + a,
  body.e2f-home-page .cards-column > section.card.text-center:first-of-type + p + a + div {
    display: none !important;
  }

  /* Make the form feel like desktop, not phone. */
  body.e2f-home-page #form {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.e2f-home-page #messageForm {
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.e2f-home-page .community-card {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1500px) {
  body.e2f-home-page .cards-column {
    width: min(1240px, calc(100vw - 220px)) !important;
    max-width: min(1240px, calc(100vw - 220px)) !important;
  }

  body.e2f-home-page #form {
    max-width: 1040px !important;
  }
}

@media (max-width: 1023px) {
  body.e2f-home-page .cards-column {
    max-width: 540px;
  }
}