/* Page styles for /services/post-construction-cleaning/ (builder: services-b / post-business).
   Kept deliberately small; uses only design tokens from site.css. Candidates to promote into site.css later. */

/* Keep the arched hero photo in proportion beside (and, on phones, below) the page title */
.page-hero--split .media-arch { width: 100%; max-width: 27rem; justify-self: end; }
@media (max-width: 859px) { .page-hero--split .media-arch { justify-self: center; max-width: 19rem; margin-top: var(--space-4); } }

/* Keep hyphenated words like "post-construction" whole in display headings */
.nowrap { white-space: nowrap; }

/* Local patch for a shared-stylesheet rhythm quirk (reported to the site.css owner; harmless once fixed there):
   site.css zeroes the top padding of ANY plain section that follows a .section, including a band,
   so a plain section after a linen band loses its breathing room. Restore it after bands/tints. */
.section--band + .section:not(.section--band):not(.section--tint):not(.theme-ink),
.section--tint + .section:not(.section--band):not(.section--tint):not(.theme-ink) { padding-top: var(--space-section); }

/* ---------- Phases: table + tabs ---------- */
table.pc-phase-table { min-width: 42rem; }
table.pc-phase-table thead th, table.pc-phase-table tbody th { white-space: normal; }
table.pc-phase-table tbody th { min-width: 10rem; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
table.pc-phase-table td:nth-child(3) { min-width: 15rem; }
.pc-panel { display: grid; gap: var(--space-5); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--gt-white); border: var(--border-hair); border-radius: var(--radius-l); }
.pc-panel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.pc-panel-head { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--gt-ink); }
.pc-panel-head h3 { font-size: var(--step-3); }
.pc-panel .ticks { row-gap: var(--space-3); }

/* ---------- Ours / not ours ---------- */
.pc-scope > .card { gap: var(--space-4); }
.pc-scope > .card h3 { padding-bottom: var(--space-3); border-bottom: 1px solid var(--gt-ink); }
.pc-scope .ticks--x li { color: var(--gt-ink-2); }

.pc-older { max-width: 52rem; }
.pc-areas { margin-top: var(--space-6); }

/* ---------- Bid request: explanation beside a wider form card ---------- */
.bid-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (max-width: 899px) { .bid-layout { grid-template-columns: 1fr; } }
@media (min-width: 900px) and (min-height: 820px) { .bid-layout > .bid-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.bid-aside-title { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gt-ink-2); }
.bid-steps { list-style: none; margin: 0; padding: 0; counter-reset: bid; display: grid; gap: var(--space-4); }
.bid-steps li { counter-increment: bid; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: var(--space-3); align-items: baseline; }
.bid-steps li::before { content: "0" counter(bid); grid-row: span 2; font: 400 var(--step-3)/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--gt-ink); }
.bid-steps strong { font-weight: 500; }
.bid-steps span { grid-column: 2; color: var(--color-text-muted); font-size: var(--step--1); }
.stack > * + .bid-steps { margin-top: var(--space-4); }

/* Long builder form: small caps part headings with a hairline, so the form reads as five short groups */
.form .form-part { margin: 0; padding-top: var(--space-5); border-top: var(--border-hair);
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gt-ink-2); }
.form > .hp-field + .form-part, .form > input[type="hidden"] + .form-part { padding-top: 0; border-top: 0; }
.form fieldset > .hint { margin-top: calc(var(--space-1) * -1); }
.pc-older p { max-width: none; }
/* Phase tabs work without JavaScript: every panel is in the page source (each has its own h3), so with JS off they all
   show and the tab buttons, which would do nothing, are hidden. With JS on, the extra panels stay collapsed until the
   page's inline script marks the tabs ready (after site.js has wired them), so there's no flash of all three lists. */
html:not(.js) .pc-tabs > .tablist { display: none; }
.js .pc-tabs:not(.is-ready) > [role="tabpanel"] ~ [role="tabpanel"] { display: none; }
/* Phase tabs on phones: three equal segments instead of a pill that wraps onto two rows */
@media (max-width: 599px) {
  .pc-tabs > .tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; border-radius: var(--radius-m); }
  .pc-tabs > .tablist [role="tab"] { padding: 6px 8px; border-radius: var(--radius-s); line-height: 1.25; }
}
/* Printing the page prints all three phase lists, not just the open tab */
@media print {
  .pc-tabs > .tablist { display: none !important; }
  .pc-tabs > [role="tabpanel"], .pc-tabs > [role="tabpanel"][hidden] { display: grid !important; break-inside: avoid; }
}