/* backend/src/main/resources/static/modules_styles/pikiner_sites/p1-home.css */

/* ==============================================
   HOME PAGE COMPOSITION — pikiner_sites

   What is true of this page and of no other: how its sections sit against
   each other, and the two-column arrangement of the closing call to
   action.

   The file is in the module root and named after the page, which is how
   Gabion binds a stylesheet to one page (see ai-context auto-pickup). It
   is not a scoping trick — nothing here is delivered to the other
   thirteen pages at all. Everything that IS shared — the type scale, the
   hero, the steps, the criteria — lives in the starter or in
   components/, where every page gets it.
   ============================================== */

/* This page used to close two of its five joins tighter than the rest —
   hero to editorial, and criteria to the call that answers them — on the
   argument that each pair is one movement. Measured against the other
   thirteen pages it read as an accident rather than an argument: 48px
   twice among 120px, and only here. The rhythm is now the token's at
   every join, on every page; if a pair ever earns a closer join again, it
   should earn it as a named modifier that any page can use, not as two
   ids in a page file.
   ============================================== */

/* ==============================================
   THE CLOSING CALL TO ACTION

   One column of reading at every width up to desk, where the two
   preparation panels — what to bring, what can be left out — become a
   pair, because they are read against each other rather than in order.
   ============================================== */

/* The measure caps what is read line by line — paragraphs, lists, the
   panels. The header, the button pair, the trust line and the link row
   are the poster's centred parts: capped to the measure they were centred
   inside a box on the left, 80px off the axis of the lead below them. */
#p1-final-cta .section-content > :not(.section-header, .btn-group, .site-links, .site-trust) {
  max-width: var(--gb-measure);
}

#p1-final-cta .section-header {
  margin-bottom: var(--gb-spacing-xl);
}

/* The panel's own outer margin would double the rhythm the edges below
   set for the closing argument. */
#p1-final-cta .site-panel {
  margin: 0;
}

#p1-final-cta .site-panel ul {
  margin: var(--gb-spacing-sm) 0 0;
}

#p1-final-cta .site-panel li {
  margin-bottom: 0.35em;
  overflow-wrap: break-word;
}

#p1-final-cta .site-panel li:last-child {
  margin-bottom: 0;
}

#p1-final-cta .site-panel li::marker {
  color: var(--gb-text-tertiary);
}

#p1-final-cta .site-panel ul + p {
  margin-top: var(--gb-spacing-lg);
}

/* Each part of the closing argument is a titled panel, and a titled
   panel carries no rule: the title opens it and the step of space above
   it closes the part before. The parts used to be opened by rules of
   three weights — a strong edge on the preparation pair, a hairline on
   what follows, a rule down the left of the confidentiality note — and
   the same page-wide decision that took the accent off the criteria
   columns takes these off too: a line beside a title is a question, not
   a signal, and the site keeps its one rule for the callout sentence. */
#p1-final-cta .p1-cta-prep--show {
  margin-top: var(--gb-spacing-2xl);
}

#p1-final-cta .p1-cta-prep--omit {
  margin-top: var(--gb-spacing-xl);
}

#p1-final-cta .p1-cta-process,
#p1-final-cta .p1-cta-safeguard,
#p1-final-cta .p1-cta-aside {
  margin-top: var(--gb-spacing-2xl);
}

#p1-final-cta .site-trust {
  margin-top: var(--gb-spacing-md);
}

#p1-final-cta .site-links {
  gap: var(--gb-spacing-md) var(--gb-spacing-lg);
  margin-top: var(--gb-spacing-md);
}

/* ==============================================
   DESK — the preparation pair
   ============================================== */

@media screen and (min-width: 1024px) {
  #p1-final-cta .section-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gb-spacing-lg);
    align-items: start;
  }

  /* Everything spans both columns by default; only the two preparation
     panels opt into a column of their own. */
  #p1-final-cta .section-content > * {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* The button group keeps the width of its buttons: stretched to the
     sheet, its 1fr column would stretch the button with it. */
  #p1-final-cta .section-content > .btn-group {
    width: fit-content;
  }

  #p1-final-cta .p1-cta-prep--show {
    grid-column: 1;
  }

  #p1-final-cta .p1-cta-prep--omit {
    grid-column: 2;
    margin-top: var(--gb-spacing-2xl);
  }

  /* The two panels are read against each other, and each closes with a
     paragraph after a list of a different length. The closing paragraph
     of each stands on the row's bottom line, the way a card's way out
     does, instead of wherever its list happened to end. */
  #p1-final-cta .p1-cta-prep--show,
  #p1-final-cta .p1-cta-prep--omit {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  #p1-final-cta .p1-cta-prep--show > p:last-child,
  #p1-final-cta .p1-cta-prep--omit > p:last-child {
    margin-top: auto;
    padding-top: var(--gb-spacing-lg);
  }
}

/* ==============================================
   NARROW
   ============================================== */

@media screen and (max-width: 767px) {
  #p1-final-cta .site-panel ul {
    padding-left: 1.15em;
  }
}