/* employee-feedback.css: /employee-feedback/ 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, scoped to .page-ef.

   The subject is a channel a worker uses once, in a bad week, from a phone in
   a van. So the page is drawn plainly and says exactly what it promises: the
   one thing a reporting channel must never do is overstate what it protects.
   ────────────────────────────────────────────────────────────────────────── */


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

.page-ef .pf-hero .sub { max-width: 46ch; }

/* The photograph is portrait, so the hero slot takes it almost whole. The
   mask and the arc sit centre-left; hold both rather than centring on the
   bench. */
.page-ef .pf-hero-media img { object-position: 44% 46%; }


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

.page-ef .pain-cell { min-height: 0; padding: 26px 24px; }
.page-ef .pain-cell .what {
  font-size: var(--fs-lg);
  line-height: 1.32;
  margin-top: 12px;
  text-wrap: pretty;
}
.page-ef .pain-cell .cost { margin-top: 22px; }

@media (min-width: 901px) {
  .page-ef .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-ef .pain-cell.heavy { background: var(--paper); color: var(--ink); }
  .page-ef .pain-cell.heavy .tag { color: var(--ink-mute); }
  .page-ef .pain-cell.heavy .cost { color: var(--ink-2); border-color: var(--rule-soft); }
  .page-ef .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. */
.page-ef .point-bar {
  margin-top: 56px;
  padding: 14px 22px;
  gap: 20px;
}
.page-ef .point-bar .pb-v {
  font-size: var(--fs-xl);
  line-height: 1.45;
  text-wrap: pretty;
}
.page-ef .point-bar .pb-v b { padding: 1px 9px; }
@media (min-width: 901px) {
  .page-ef .point-bar { grid-template-columns: minmax(0, auto) minmax(0, 3fr) minmax(0, auto); }
  .page-ef .point-bar .pb-l,
  .page-ef .point-bar .pb-r { max-width: 17ch; }
}


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

/* platform.css:292 puts flex:1 on the card paragraph, so it absorbs the slack
   and pushes the bullet list away from the text it belongs to. */
.page-ef .pf-mod p { flex: 0 0 auto; }
.page-ef .pf-mod > ul { margin-top: 4px; }
.page-ef .pf-mod > .pf-mod-foot { margin-top: auto; padding-top: 26px; }

.page-ef .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 LAW BLOCK ═════════════════════════════════════════════════════
   Three statutory duties, each with the instrument that creates it and the
   date it bit. Set as a register rather than as prose: a commercial manager
   reading this wants to know which law, from when, and whether it applies to
   him, and that is three columns of fact.

   The dates carry the accent because they are the part that changed, and
   because "in force 26 October 2024" is the sentence a reader checks. */
.ef-law {
  margin-top: 44px;
  border-top: 1px solid var(--ink);
}
.ef-law-row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px);
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.ef-law-k h3 {
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h3);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.ef-law-cite {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-mute);
}
.ef-law-date {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: var(--hazard);
  color: var(--hazard-ink);
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ef-law-v { margin: 0; font-size: var(--fs-md); line-height: 1.62; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.ef-law-v + .ef-law-v { margin-top: 12px; }

@media (max-width: 900px) {
  .ef-law-row { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
}

/* The standing caveat under the law block. Not a disclaimer in small print:
   it is a statement in the page's own voice that this is a channel rather
   than legal advice, and it is set to be read. */
.ef-note {
  margin-top: 40px;
  padding: 22px 26px;
  border: 1px solid var(--hazard);
  background: var(--paper);
}
.ef-note b {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hazard);
  margin-bottom: 10px;
}
.ef-note p { margin: 0; font-size: var(--fs-md); line-height: 1.62; color: var(--ink-2); max-width: 78ch; }


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

.page-ef #faq .faq-list { padding-bottom: 0; }
.page-ef #faq { padding-bottom: clamp(72px, 8vw, 112px); }

/* 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-ef .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-ef .final .row .btn-ghost:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
  transform: none;
}