/* ======================================================================
   Company pay pages — the job sheet's components (css/pages/jobs.css) on a
   company page: board band, one white sheet, then the paper sections.
   Layout only; every component class is styled in jobs.css or styles.css.
   ====================================================================== */

body.company-pay-page { background: var(--ground); }
body.company-pay-page main { background: var(--ground); }

/* Employer mark: a viewBox-only SVG logo has no intrinsic pixel size, so an
   auto-sized img inside the flex card collapses to nothing. A definite
   height lets the intrinsic ratio size the width (object-fit contain keeps
   the drawing true); png logos take the same height for one card look. */
.company-pay-page .employer-mark--logo img { height: 40px; width: auto; }

/* One sheet, single column, centred — no sticky rail on a company page. */
.company-sheet__body { padding: clamp(18px, 2.4vw, 28px) 0 clamp(8px, 1.4vw, 16px); }
.company-sheet__body .sheet-main { max-width: 56rem; margin: 0 auto; }

/* Buttons: the board's corner and sizing decision (jobs.css scopes its own
   rules to board body classes; company pages take the same rules here). */
.company-pay-page :is(.btn, .btn-chalk) { border-radius: var(--r-s) !important; }
.company-pay-page :is(.sheet-foot, .sheet-section) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 16px;
  font: 700 .98rem/1.1 var(--font-ui); letter-spacing: 0; text-transform: none; white-space: nowrap;
  border-radius: var(--r-s);
}
.company-pay-page :is(.sheet-foot, .sheet-section) .btn:focus-visible { outline: 3px solid var(--stamp-blue); outline-offset: 3px; }

/* Apply foot: the next step reads left-to-right, apply first. */
.company-apply { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
.company-apply .apply-notice { margin: 0; flex: 1 1 100%; max-width: 68ch; }

/* Answer-first paragraph: the reply to "{Employer} pay per hour". */
.pay-answer { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.6; max-width: 68ch; }
.pay-answer a { font-weight: 700; }
.sheet-pay .fine { max-width: 68ch; }

/* The paper sections below the sheet keep their own rhythm. */
.company-pay-page .page-section { background: transparent; }

@media (max-width: 720px) {
  .company-sheet__body { padding: 16px 0 4px; }
  /* Phones: the apply buttons stack full width instead of squeezing side by
     side — a nowrap label must never overflow its own button. The doubled
     class outranks jobs.css, whose mobile .sheet-foot rule (loaded after
     this file) turns the foot into a sticky two-column grid for job sheets;
     a company page has no rail, so it opts back out here. */
  .company-pay-page .company-apply {
    position: static; display: flex; flex-direction: column; align-items: stretch;
    padding-bottom: 22px; border-top: 1px dashed var(--rule-strong);
  }
  .company-pay-page .company-apply .btn { width: 100%; min-width: 0; max-width: 100%; }
  .company-pay-page .employer-mark--logo img { height: 34px; }
  .pay-answer { font-size: 1rem; }
}

/* The check date inside the answer sentence reads in the sentence's own face (REVIEW-GR1 6). */
.pay-answer time { font-family: inherit; font-variant-numeric: inherit; letter-spacing: inherit; }