/* ── live companies ─────────────────────────────────────────────
   One panel divided into columns rather than five separate cards.

   The dividers are borders on the cells, not gaps showing a coloured
   grid behind them. The gap approach put the divider colour hard
   against the panel border, which read as a thicker, brighter edge
   than the stat cards above. Now the outer edge is exactly one
   1px --line-2 border, the same as .stat.
   ─────────────────────────────────────────────────────────────── */

.companies { margin-top: 28px; }

/* On desktop the label and the link share a line, the link pushed to
   the right edge of the panel below it. */
.co-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 12px;
}

.eyebrow-h {
  color: var(--ink-2);
  margin: 0;
  font-weight: 400;
}

.co-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* dividers, five across */
.co-grid > li:not(:first-child) .co {
  border-left: 1px solid var(--line-2);
}

.co {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 150px;
  padding: 22px 20px;
  background: var(--card);
  transition: background var(--fast) var(--ease);
}
.co:hover { background: var(--card-2); }

.co-nm {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.012em;
}

.co-what {
  flex: 1;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

.co-visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-text);
}

/* Motion answering an action: the arrow steps out on hover. */
.co-visit .icon,
.more-link .icon {
  transition: transform var(--fast) var(--ease);
}
.co:hover .co-visit .icon,
.more-link:hover .icon {
  transform: translateX(3px);
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.more-link:hover { color: var(--ink); }

/* Below the panel on narrow screens: `display: contents` lifts the
   label and the link into the same flex column as the grid, so the
   link can simply be ordered last. */
@media (max-width: 700px) {
  .companies { display: flex; flex-direction: column; }
  .co-head { display: contents; }
  .eyebrow-h { order: 1; margin-bottom: 12px; }
  .co-grid { order: 2; }
  /* back onto the page's left axis once it is below the panel */
  .more-link { order: 3; margin-top: 22px; margin-left: 0; }
}

@media (max-width: 1000px) {
  .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co { min-height: 0; }

  /* two up: left edge on the right-hand column, top edge from row two */
  .co-grid > li:not(:first-child) .co { border-left: 0; }
  .co-grid > li:nth-child(2n) .co { border-left: 1px solid var(--line-2); }
  .co-grid > li:nth-child(n + 3) .co { border-top: 1px solid var(--line-2); }
  /* Five items in two columns leaves one slot empty, which would show
     the panel's divider colour as a grey block; the last one takes the
     whole final row instead. */
  .co-grid > li:last-child { grid-column: 1 / -1; }
}

/* ── site previews ──────────────────────────────────────────────
   A full-bleed rail of the five homepages, scrolled horizontally.
   It sits outside .wrap so it can run to the edges, with the page
   gutter reproduced as scroll padding so the first card still lines
   up with the column above it.

   They sit small and open up under the pointer. The rail carries
   vertical padding because overflow-x: auto forces the other axis to
   clip — without it the enlarged card would be cut off top and bottom.
   ─────────────────────────────────────────────────────────────── */

.shotstrip {
  --rail-gap: 12px;
  margin-top: var(--s-3);
  /* room for the hover scale — overflow-x: auto clips the other axis */
  padding-block: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* without this the first card snaps past the rail's own padding */
  scroll-padding-inline: var(--gutter);
}
.shotstrip::-webkit-scrollbar { display: none; }

.shotstrip-rail {
  display: flex;
  gap: var(--rail-gap);
  /* max-content + auto margins centres the row when it fits and falls
     back to normal left-origin scrolling when it does not — unlike
     justify-content: center, which clips the overflow on the left */
  width: max-content;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shotcard {
  display: block;
  position: relative;
  width: 315px;
  scroll-snap-align: start;
  /* Equal values across the row leave the cards stacked in document
     order, which is what they look like at rest — and give the lift
     below something to sit above. */
  z-index: 1;
  transition: transform .38s var(--ease),
              opacity .3s var(--ease);
}

/* Set by app.js for as long as a card that has just lost focus is
   still shrinking. Without it the lift ends the instant the pointer
   leaves, and the card — still at 1.36 and still coming down —
   spends the whole transition behind its right-hand neighbour,
   which comes later in the document and so wins on equal footing. */
.shotcard.is-settling {
  z-index: 2;
}

/* Driven only from the list above; the rail has no hover state of its
   own. .is-focus is the single source of truth for which one is out
   front. */
.shotstrip.is-focusing .shotcard {
  opacity: .22;
}
.shotstrip.is-focusing .shotcard.is-focus {
  opacity: 1;
  transform: scale(1.36);
  z-index: 2;
}

.shotcard img {
  width: 100%;
  height: 198px;
  object-fit: cover;
  object-position: center;
  background: var(--card);
  transition: box-shadow .38s var(--ease);
}

.shotcard.is-focus img {
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .75);
}

@media (max-width: 640px) {
  .shotstrip {
    padding-block: 20px;
    overflow-x: hidden;      /* the marquee drives it, not the finger */
  }
  .shotcard { width: 250px; }
  .shotcard img { height: 158px; }

  /* The trailing gap makes the duplicated run exactly twice one copy,
     so translating -50% lands on a seam that matches the internal
     spacing and the loop is invisible. */
  .shotstrip.is-marquee .shotstrip-rail {
    padding-inline: 0;
    padding-right: var(--rail-gap);
    margin-inline: 0;
    animation: rail-marquee 34s linear infinite;
  }

  /* no pointer, so nothing is ever singled out */
  .shotstrip.is-focusing .shotcard,
  .shotstrip.is-focusing .shotcard.is-focus {
    opacity: 1;
    transform: none;
  }
}

@keyframes rail-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .shotstrip.is-marquee .shotstrip-rail { animation: none; }
}