/* ==========================================================================
   Campaign 01 — Starter Website

   A checkout page, not an agency page. The offer is S$599 and 48 hours, which
   is a small fast decision, so the page is built to be decided above the
   fold: price, what you get, and a live calendar all visible without
   scrolling. Everything below the fold exists to remove one objection.

   Shared components live in nayfla.css, which loads first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — the whole offer, above the fold
   -------------------------------------------------------------------------- */

/* etch-global.css sets `main > section:first-of-type` to 1.5x --section-space-l
   (up to ~200px). That is fine for a brochure page and wrong for one whose
   whole job is to be decided above the fold. */
.n-hero,
main > section.n-hero:first-of-type {
  padding-block: var(--space-l) var(--section-space-m);

  @media (min-width: 1024px) { padding-block: var(--space-xl) var(--section-space-m); }
}

/* The hero itself is shared — see section 4 of nayfla.css. The price block
   that used to lead it is gone with it: the offer is proved with the work
   above the fold now, and S$599 is stated where it says what it covers.
   The sticky bar carries the price the whole way down regardless. */

/* .n-checks moved to nayfla.css when Campaign 03's hero picked it up too. */

/* --------------------------------------------------------------------------
   Booking card

   Was a sticky column of the hero grid. The hero is one centred column now
   with the work montage in it, so the card sits in its own section beside an
   agenda, the same arrangement Campaigns 02 and 03 use — layout comes from
   .n-booklayout in nayfla.css and only the surface is set here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   The planner

   Controls (.n-field, .n-choice) are shared — sections 7b of nayfla.css. Only
   the output is here, because only this page has one.
   -------------------------------------------------------------------------- */

.n-plan {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--white);
  overflow: hidden;
}

.n-plan > .n-field { padding: var(--space-m); }

/* .n-choice--4 lives in nayfla.css — Campaign 03 uses it too. */

.n-plan__pages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: var(--grid-1);
  /* 1px gaps over the hairline colour: three cells that read as one table
     rather than three floating cards inside an already-bordered panel. */
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);

  @media (min-width: 700px) { grid-template-columns: var(--grid-3); }
}

.n-plan__page {
  padding: var(--space-m);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.n-plan__num {
  font-family: var(--heading-font-family);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.n-plan__name { margin: 0; font-size: var(--text-l); }

.n-plan__sections {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  font-size: var(--prose-s);
  color: var(--text-dark-muted);

  & li { padding-inline-start: 1em; position: relative; line-height: 1.45; }
  & li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.6em;
    inline-size: 0.35em;
    block-size: 0.35em;
    border-radius: 50%;
    background: var(--text-dark-muted);
  }
}

/* One ask under whichever panel ran — the three page plans and the catch-all
   both end on it. A row where there is space for one, so the button is beside
   the reason rather than a third thing to scroll past. */
.n-plan__lock {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-s);
  padding: var(--space-m);
  border-block-end: 1px solid var(--hairline);
  background: color-mix(in oklch, var(--primary) 7%, transparent);

  & p { font-size: var(--prose-s); line-height: 1.45; max-inline-size: 70ch; }

  @media (min-width: 700px) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);

    /* The button never squeezes to two lines while the sentence has room. */
    & .btn--primary { flex: none; }
  }
}

/* The "Something else?" panel. No page plan to show, so it takes the slot the
   three-column grid would have used and asks for the call instead. */
.n-plan__prompt {
  padding: var(--space-l) var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  border-block: 1px solid var(--hairline);

  & h3 { margin: 0; font-size: var(--text-l); }
  & p { font-size: var(--prose); line-height: 1.55; max-inline-size: 62ch; }
}

/* The kickoff list. It is the only thing the visitor has to do for the 48
   hours to start, so it is the one block in the planner that gets a surface of
   its own: a tint, the hero's grid lines, the booking button inside it, and a
   screenshot filling the rest of the row. The CTAs that used to sit loose
   under the whole section are gone — this is the ask. */
.n-plan__send {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--grid-1);
  background:
    linear-gradient(135deg,
      color-mix(in oklch, var(--primary) 12%, transparent),
      color-mix(in oklch, var(--primary) 3%, transparent) 55%,
      transparent 80%),
    var(--base-ultra-light);

  /* The image takes the smaller half: the list is what is being read. */
  @media (min-width: 50rem) { grid-template-columns: 1.2fr 1fr; }
}

/* The same 64px grid as the hero, at half the pitch and faded out before it
   reaches the screenshot. --black is light-dark(), so it inverts with the
   palette rather than washing out in dark mode. */
.n-plan__send::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--black) 20%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--black) 20%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to right, black, transparent 65%);
  -webkit-mask-image: linear-gradient(to right, black, transparent 65%);
  opacity: 0.3;
}

.n-plan__sendmain {
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-s);
}

.n-plan__sendlede { font-size: var(--prose-s); line-height: 1.5; color: var(--text-dark-muted); max-inline-size: 46ch; }
.n-plan__send .n-checks li { font-size: var(--prose-s); }

/* Fills its cell rather than sitting in it: the row is as tall as the list and
   the screenshot crops to match. Cropped from the top left, which is the part
   of a homepage worth seeing. */
.n-plan__sendshot {
  margin: 0;
  /* min-height only matters in the one-column layout, where the cell has no
     list beside it to take its height from. */
  min-block-size: 12rem;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-block-start: 1px solid var(--hairline);
  }

  @media (min-width: 50rem) {
    & img { border-block-start: 0; border-inline-start: 1px solid var(--hairline); }
  }
}

.n-plan__note {
  padding: var(--space-s) var(--space-m);
  font-size: var(--prose-s);
  color: var(--text-dark-muted);
  border-block-start: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   What's included
   -------------------------------------------------------------------------- */

.n-cols {
  display: grid;
  grid-template-columns: var(--grid-1);
  gap: var(--grid-gap);

  @media (min-width: 640px) { grid-template-columns: var(--grid-2); }
  @media (min-width: 1024px) { grid-template-columns: var(--grid-3); }
}