/*
 * munchterm plus: the landing page (home). Owned by the HOME flow agent.
 *
 * Linked on every page after base.css (app/root.tsx), so every class in here is prefixed
 * `home-` to keep it from touching another flow's pages. Anything a second flow needs belongs
 * in base.css (raise it with the orchestrator). Tokens, buttons, forms, notices, cards, the pass,
 * chips, tiles, rails, menus and the action bar are all in base.css already.
 *
 * Markup: app/components/home/HomePage.tsx. Mobile first: the base rules are the 375px phone,
 * the 900px block widens it. Calm is the look: one hero, square edges, the pink kept for the
 * things that matter (the price band, the icons, the button).
 */

/* --- sign-in failure notice ---------------------------------------------------------------- */

.home-notice {
  padding-top: var(--s4);
}

/* --- hero ---------------------------------------------------------------------------------- */

.home-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.home-hero__inner {
  display: grid;
  gap: var(--s5);
  padding-bottom: var(--s7);
}

/* The plus artwork, edge to edge on a phone: the first thing in the room. Its width and height
   are on the tag (Img), so the space is reserved before it loads. */
.home-hero__art {
  margin: 0 calc(-1 * (var(--gutter) + var(--safe-right))) 0 calc(-1 * (var(--gutter) + var(--safe-left)));
  background: var(--pink);
}

.home-hero__art img {
  width: 100%;
}

.home-hero__title {
  margin-bottom: var(--s4);
}

.home-hero__pitch {
  max-width: 34ch;
  margin-bottom: 0;
}

/* The price, beside every join button: big number, quiet terms. */
.home-join {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
}

.home-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  margin: 0;
}

.home-price__amount {
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.home-price__terms {
  color: var(--ink-muted);
}

.home-join__cta {
  display: grid;
  gap: var(--s2);
}

.home-join__note {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--size-small);
}

/* Unavailable or closed: said plainly, in a quiet block where the button would be. */
.home-join__note--state {
  padding: var(--s3) var(--s4);
  background: var(--surface-sunk);
  color: var(--ink);
  font-size: var(--size-body);
}

/* --- benefits ------------------------------------------------------------------------------ */

.home-benefits__list {
  display: grid;
  gap: var(--s3);
}

.home-benefit {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-content: start;
  column-gap: var(--s4);
  padding: var(--s5) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
}

.home-benefit__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--pink-wash);
  color: var(--pink);
}

.home-benefit__title {
  margin: 0 0 var(--s1);
}

.home-benefit__body {
  margin: 0;
  color: var(--ink-muted);
}

/* --- drops preview ------------------------------------------------------------------------- */

/* The rail and tiles are base.css, shared with the dashboard's held drops. */

/* --- steps --------------------------------------------------------------------------------- */

.home-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--line-strong);
}

.home-step:last-child {
  border-bottom: 1px solid var(--line-strong);
}

.home-step__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
}

.home-step__title {
  margin: 0 0 var(--s1);
}

.home-step__text p {
  margin: 0;
  color: var(--ink-muted);
}

/* --- questions ----------------------------------------------------------------------------- */

.home-faq__list {
  border-top: 1px solid var(--line-strong);
}

.home-faq__item {
  border-bottom: 1px solid var(--line-strong);
}

.home-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 56px;
  padding-block: var(--s3);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.home-faq__q::-webkit-details-marker {
  display: none;
}

/* Plus when closed, minus when open: two icons swapped, never one turned 45 degrees, which
   would put a pixel art icon's pixels off the grid. Both sit in one 24px cell, so the summary
   only ever has two flex children (question, mark) and the pair can never spread apart. */
.home-faq__marks {
  display: grid;
  flex: none;
}

.home-faq__marks > .home-faq__mark {
  grid-area: 1 / 1;
}

.home-faq__item[open] .home-faq__mark--closed,
.home-faq__item:not([open]) .home-faq__mark--open {
  display: none;
}

.home-faq__a {
  max-width: 60ch;
  padding-bottom: var(--s4);
}

.home-faq .section-head__body a {
  color: var(--ink);
}

/* --- closing price band -------------------------------------------------------------------- */

.home-band__title {
  margin-bottom: var(--s5);
}

/* The ticks are pink on white elsewhere; on the pink band they take the band's text colour. */
.home-band .ticks .icon {
  color: currentColor;
}

.home-band__ticks {
  margin-bottom: var(--s5);
}

.home-band .home-join {
  margin-top: 0;
}

.home-band .home-join__note:not(.home-join__note--state) {
  color: inherit;
  opacity: 0.9;
}

/* --- text and image sections --------------------------------------------------------------- */

.home-banner {
  padding-block: var(--s5);
}

.home-banner img {
  width: 100%;
}

/* --- signed in, and log out ---------------------------------------------------------------- */

.home-signed-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
  padding-block: var(--s5);
  color: var(--ink-muted);
  font-size: var(--size-small);
}

.home-signed-in__form {
  display: inline;
}

.home-signed-in .link-button {
  min-height: var(--tap-min);
}

/* The phone's sticky bar is the shared ActionBar, sticky="phone-only" (`.home-bar`): gone from
   900px, where the hero's own button is in view. base.css makes its room under the footer.

   One join button on screen at a time, on a phone, with no JavaScript:
   - baseline (every browser): the bar is pinned the whole way down and carries the price and
     the button, so the hero's and the closing band's inline buttons step aside below 900px.
   - where scroll-driven animations exist (and motion is welcome): the inline buttons stay, the
     bar waits off screen until the hero's button has scrolled up under the header, rises with
     the scroll, and steps aside again while the closing band's button is in view. */
@media (max-width: 899.98px) {
  .home-join--hero .home-join__cta,
  .home-join--band .home-join__cta {
    display: none;
  }
}

@supports (timeline-scope: --a) and (animation-timeline: view()) {
  @media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
    .main:has(.home-bar) {
      timeline-scope: --home-hero-cta, --home-band-cta;
    }

    /* The timelines follow the buttons themselves (with their one-line note), not the whole
       price block, so the bar only rises once the hero's button is actually going under the
       sticky header. */
    .home-join--hero .home-join__cta {
      display: grid;
      /* No inset: `auto` takes the page's scroll-padding-top, which already clears the sticky
         header. */
      view-timeline: --home-hero-cta block;
    }

    .home-join--band .home-join__cta {
      display: grid;
      view-timeline: --home-band-cta block;
    }

    .home-bar {
      animation: home-bar-in linear both, home-bar-aside linear none;
      animation-timeline: --home-hero-cta, --home-band-cta;
      /* In: from the hero button reaching the sticky header to its block gone under it. Aside:
         the whole time the band's button is on screen, easing out and back in at the edges. */
      animation-range-start: exit 40%, cover 0%;
      animation-range-end: exit 100%, cover 100%;
    }
  }
}

@keyframes home-bar-in {
  from {
    visibility: hidden;
    transform: translateY(100%);
  }
  to {
    visibility: visible;
    transform: none;
  }
}

@keyframes home-bar-aside {
  0%,
  100% {
    visibility: visible;
    transform: none;
  }
  12%,
  88% {
    visibility: hidden;
    transform: translateY(100%);
  }
}

/* --- wider screens ------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .home-benefits__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-benefit {
    grid-template-columns: 1fr;
    row-gap: var(--s1);
  }

  .home-benefit__icon {
    grid-row: auto;
    margin-bottom: var(--s4);
  }
}

@media (min-width: 900px) {
  .home-hero__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s7);
    padding-block: var(--s8);
  }

  .home-hero__art {
    order: 2;
    margin: 0;
  }

  .home-join {
    max-width: 400px;
  }

  .home-price__amount {
    font-size: 3rem;
  }

  .home-benefit {
    padding: var(--s6) var(--s5);
  }

  /* The closing band on a desk: the price and what it buys on the left, the button and its
     small print on the right, instead of one narrow column floating left of centre. */
  .home-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: var(--s8);
    align-items: center;
    max-width: calc(var(--wide) + 2 * var(--gutter));
  }

  .home-band__inner > * {
    grid-column: 1;
  }

  .home-band__inner > .home-join--band {
    grid-column: 2;
    grid-row: 1 / span 3;
    max-width: none;
  }

  .home-band__ticks {
    margin-bottom: 0;
  }
}