/* holiday-planner.css: /holiday-planner/ only.

   Loaded after blocks.css, which carries the definitional aside, the mechanics
   run, the numbered steps and the action band as .ub-*. Only what is specific
   to this page is here, and every rule is scoped to .page-hp so nothing
   reaches the other pages on module-page.css.

   The subject is one person's absence and what the rest of the week does about
   it, so the page is drawn as a register: hairlines, one row per fact, the
   accent spent only where something has been decided. Density is graded top to
   bottom, the same as the other two module pages.
   ────────────────────────────────────────────────────────────────────────── */


/* ══ 1. HERO ══════════════════════════════════════════════════════════════ */

/* The hero runs on platform.css untouched: the standard 1.7fr/0.72fr split and
   the standard photo slot. */
.page-hp .pf-hero .sub { max-width: 46ch; }

/* One person on site, shot close. The hero slot crops a 3:2 landscape to
   roughly a square, and she sits right of centre, so the crop moves with her
   rather than centring on the formwork behind. */
.page-hp .pf-hero-media img { object-position: 56% 44%; }


/* ══ 2. THE PROBLEM ═══════════════════════════════════════════════════════ */

/* Short cells, two columns inside the split so twelve words are three lines
   rather than five, and no black-and-white alternation once the grid drops to
   one column: six full-bleed panels flashing on a phone is noise, not rhythm. */
.page-hp .pain-cell { min-height: 0; padding: 26px 24px; }
.page-hp .pain-cell .what {
  font-size: var(--fs-lg);
  line-height: 1.32;
  margin-top: 12px;
  text-wrap: pretty;
}
.page-hp .pain-cell .cost { margin-top: 22px; }

@media (min-width: 901px) {
  .page-hp .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-hp .pain-cell.heavy { background: var(--paper); color: var(--ink); }
  .page-hp .pain-cell.heavy .tag { color: var(--ink-mute); }
  .page-hp .pain-cell.heavy .cost { color: var(--ink-2); border-color: var(--rule-soft); }
  .page-hp .pain-cell .cost { font-weight: 500; color: var(--hazard); }
}


/* ══ 3. POINT BAR ═════════════════════════════════════════════════════════ */

/* core.css sets .pb-v at --fs-h2, the same step as a real section heading, and
   the inline highlight carries 2px of its own vertical padding, so at a tight
   line height the highlight boxes on consecutive lines collide. --fs-xl on a
   1.45 line keeps it to one line and reads as the aside it is. Scoped here
   rather than fixed in core.css: the fault is on 42 pages and wants its own
   pass, not a fix smuggled in from a page build. */
.page-hp .point-bar {
  margin-top: 56px;
  padding: 14px 22px;
  gap: 20px;
}
.page-hp .point-bar .pb-v {
  font-size: var(--fs-xl);
  line-height: 1.45;
  text-wrap: pretty;
}
.page-hp .point-bar .pb-v b { padding: 1px 9px; }
@media (min-width: 901px) {
  .page-hp .point-bar { grid-template-columns: minmax(0, auto) minmax(0, 3fr) minmax(0, auto); }
  .page-hp .point-bar .pb-l,
  .page-hp .point-bar .pb-r { max-width: 17ch; }
}


/* ══ 4. MODULE CARDS ══════════════════════════════════════════════════════ */

/* platform.css:292 puts flex:1 on the card paragraph, so it absorbs every
   pixel of slack in the card and pushes the bullet list away from the text it
   belongs to. Let the paragraph be its own height and collect the slack above
   the footer, where a rule already sits. */
.page-hp .pf-mod p { flex: 0 0 auto; }
.page-hp .pf-mod > ul { margin-top: 4px; }
.page-hp .pf-mod > .pf-mod-foot { margin-top: auto; padding-top: 26px; }

/* Six ordinals at once on a dark band read as six pale slabs. Outline them. */
.page-hp .sec-dark .pf-mod-tag {
  background: transparent;
  color: oklch(0.66 0.005 60);
  border: 1px solid oklch(0.30 0.01 60);
}


/* ══ 5. THE HALF-DAY STRIP ════════════════════════════════════════════════
   The one genuinely distinctive mechanic on this module, and the one most
   easily lost in prose: a full day removes the allocation control, a half day
   leaves it. Drawn as three labelled states rather than described, because the
   difference between them is the whole commercial point.

   Not a spec card: three states of one control, which is what the reader has
   to understand, and the words on it are the words the software uses. */
.hp-states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ink);
  margin-top: 44px;
}
.hp-state {
  padding: 22px 24px 24px;
  border-right: 1px solid var(--rule);
}
.hp-state:last-child { border-right: 0; }
.hp-state-k {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
/* The badge is the label the labour run actually prints in the cell. */
.hp-badge {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.hp-badge.open {
  background: transparent;
  color: var(--ink);
  border-style: dashed;
  border-color: var(--rule);
}
.hp-state p {
  margin: 16px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
}
@media (max-width: 900px) {
  .hp-states { grid-template-columns: 1fr; margin-top: 32px; }
  .hp-state { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hp-state:last-child { border-bottom: 0; }
}


/* ══ 6. FAQ AND CLOSING BAND ══════════════════════════════════════════════ */

/* The heading column is sticky and short, the list is long, so the section
   ended with a band of empty paper below the last question. */
.page-hp #faq .faq-list { padding-bottom: 0; }
.page-hp #faq { padding-bottom: clamp(72px, 8vw, 112px); }

/* Hero and closing band must rank the same two actions the same way.
   core.css:816 states the intent for the hero ("secondary CTA reduced to an
   underlined text link, not a competing button"), so the closing band adopts
   it rather than adding a competing box above the fold. */
.page-hp .final .row .btn-ghost {
  background: transparent;
  border: 0;
  padding: 14px 4px;
  color: oklch(0.84 0.005 60);
  text-decoration: underline;
  text-decoration-color: oklch(0.45 0.01 60);
  text-underline-offset: 6px;
  font-weight: 500;
}
.page-hp .final .row .btn-ghost:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
  transform: none;
}