/* Company (/company/): page layout only. Shared components live in components.css. */

/* CO-1: the headline is the aside, so the hero is one wide column */
@media (min-width: 1024px) {
  .hero-int.company-hero { grid-template-columns: minmax(0, 1fr); }
}
.company-hero .display-xl { margin-top: var(--s-5); max-width: 12ch; }
.company-hero .lede { max-width: var(--measure-wide); }
@media (max-width: 639.98px) { .company-hero .lede { margin-top: var(--s-8); } }

/* CO-2: pull statement with the pencil stroke under "piece of paper" */
.company-origin { max-width: var(--measure-wide); }
.company-pull { padding-bottom: 0.3em; max-width: 26ch; }
.company-paper { position: relative; display: inline-block; white-space: nowrap; }
.company-stroke {
  position: absolute;
  left: -2%;
  bottom: -0.16em;
  width: 104%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.company-stroke path { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
.company-stroke .company-stroke-a { stroke-width: 1.2; }
.company-stroke .company-stroke-b { stroke-width: 2.2; stroke-opacity: 0.55; }

/* S7: 1.6 s draw, pencil grey to crimson over the draw */
.js svg.company-stroke[data-reveal="draw"] path {
  stroke: var(--ink-mute);
  transition: stroke-dashoffset 1.6s var(--ease-mech) var(--d, 0s), stroke 1.6s linear var(--d, 0s);
}
.js svg.company-stroke[data-reveal="draw"] .company-stroke-b { transition-delay: calc(var(--d, 0s) + 120ms); }
.js svg.company-stroke[data-reveal="draw"].is-in path { stroke: var(--accent); }

.company-origin-body { margin-top: var(--s-6); max-width: var(--measure); color: var(--text-2); }

/* CO-3 */
.company-nums { margin-top: var(--s-4); }

/* CO-4: map left, clocks ledger right */
.company-regions { display: grid; gap: var(--s-10); align-items: start; }
.company-regions > * { min-width: 0; }
.company-map .world { display: block; }
.company-clocks .ledger-name { white-space: nowrap; }
.company-clocks td { vertical-align: middle; padding-block: var(--s-1); }
.company-clocks tr.is-home td { padding-block: var(--s-3); }
.company-clocks .ledger-use { width: 4.5rem; font-size: var(--t-small); line-height: 1.5; }
.company-clocks td:last-child { width: 7.5rem; white-space: nowrap; }
.company-clocks .stub { min-width: 7.5rem; line-height: 1.5; }
.company-clocks tr:has(.stub[aria-pressed="true"]) { background: var(--accent-dim); }
.company-clocks tr:has(.stub[aria-pressed="true"]) .stub-code { font-weight: 500; }
.company-clocks .stub[aria-pressed="true"] { color: var(--text); background: none; } /* the row carries the tint */
/* CO-4: the whole region row is the hit area (company.js hands row clicks to the stub) */
.company-clocks tr:has(.stub) { cursor: pointer; }
.company-clocks tr:has(.stub:focus-visible) { background: var(--surface-2); }
@media (min-width: 1024px) {
  .company-regions { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
}
/* below 1024 px the map sits above the ledger and stays in view while a row is pressed */
@media (max-width: 1023.98px) {
  .company-regions { gap: var(--s-4); }
  .company-map { position: sticky; top: calc(var(--nav-h, 4rem) + 1.25rem); z-index: 1; padding-block: var(--s-2); background: var(--bg); box-shadow: 0 10px 12px -10px var(--bg); }
  .company-map .world { max-height: 34vh; width: 100%; }
}
@media (max-width: 639.98px) {
  .company-clocks tr.ledger-row { flex-wrap: nowrap; align-items: center; padding-block: 0; }
  .company-clocks tr.is-home { padding-block: var(--s-2); }
  .company-clocks .ledger-name { white-space: normal; flex: 1 1 0; min-width: 0; }
  /* fixed cells: the times form one column whatever the stub width */
  .company-clocks .ledger-use { flex: 0 0 3.25rem; width: auto; text-align: right; }
  .company-clocks td:last-child { flex: 0 0 6.25rem; width: auto; }
  .company-clocks .stub { min-width: 0; }
}

/* CO-5 to CO-8 */
.company-body { max-width: var(--measure); color: var(--text-2); }
.company-statement { max-width: 28ch; margin-bottom: var(--s-4); }
.company-path { margin-top: var(--s-10); }
.company-link { margin-top: var(--s-6); }

/* CO-6: without an owner photograph the office card sits beside the chapter head */
@media (min-width: 900px) {
  #office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  #office > .rule-dots { grid-column: 1 / -1; }
  #office > .addr { margin-top: var(--s-12); }
}

/* Reduced motion: the stroke is drawn and crimson at t = 0 */
@media (prefers-reduced-motion: reduce) {
  :root svg.company-stroke[data-reveal="draw"] path { stroke: var(--accent); stroke-dashoffset: 0; transition: none; }
}
html[data-motion="reduce"] svg.company-stroke[data-reveal="draw"] path { stroke: var(--accent); stroke-dashoffset: 0; transition: none; }