/* ==========================================================================
   Always On section (front page) — Figma 6461:10022
   ==========================================================================
   Dark band: heading left, intro right, then the clients in a scrollable row.

   This file owns GEOMETRY ONLY. The heading/intro pair is the text widget at
   its DEFAULTS (Title/Large + Body/Large), so no --tw-* knob is touched; the
   cards are the shared .case-card / .large-link components. Nothing here sets
   a font-size, a line-height or a letter-spacing. */

.alwayson { background-color: var(--bg-secondary); }

/* .container pads the bottom by default; the section's own padding owns the
   rhythm here, so that would double up. */
.alwayson__inner { padding-bottom: 0; }

/* The widget owns the space down to the nav row. */
.alwayson .text-grid { --tw-pad-bottom: 40px; }

/* ── Prev / next ───────────────────────────────────────────────────────
   Hidden until main.js decides the row actually overflows — the [hidden]
   attribute is on the markup, so without JS the row is still swipeable and no
   dead buttons are shown. */
.alwayson__nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 24px;
}
.alwayson__nav[hidden] { display: none; }

/* Figma: 46x46, 4px padding, fully round, Text/Body as the resting fill. */
.alwayson__btn {
  display: flex;
  width: 46px;
  height: 46px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 100px;
  background: var(--text-body);
  color: var(--text-light);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.alwayson__btn:disabled { opacity: 0.3; cursor: default; }
.alwayson__icon { width: 24px; height: 24px; display: block; }

@media (hover: hover) {
  .alwayson__btn:not(:disabled):hover {
    background-color: var(--dragster-blue);
    color: #fff;
  }
}
/* Own rule, never sharing a selector list with :hover — an older browser that
   does not know :focus-visible would otherwise drop the whole block. */
.alwayson__btn:focus-visible {
  outline: 2px solid var(--text-light);
  outline-offset: 3px;
}

/* ── Card row ─────────────────────────────────────────────────────────
   A real scroll container: trackpad, swipe and keyboard all work before any
   JS loads. Two cards fill the content width on desktop, as in Figma. */
.alwayson__row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The focus ring would otherwise be clipped by overflow. */
  padding: 2px;
  margin: -2px;
  /* Firefox keeps a permanent gutter; the row is swipeable, so hide the bar. */
  scrollbar-width: none;
  /* A horizontal carousel must never scroll vertically. Declaring only
     overflow-x leaves the other axis computing to auto, and the cards' own
     scroll-in transform (translateY(24px) in cards.css) is 24px of content
     below the fold — enough to arm a vertical scroll that then behaved oddly
     on touch (Kajsa 2026-10-05). Clipping it is what the reveal wants anyway:
     the card slides up INTO the row. */
  overflow-y: hidden;
}
.alwayson__row::-webkit-scrollbar { display: none; }
.alwayson__row:focus-visible { outline: 2px solid var(--text-light); outline-offset: 2px; }

.alwayson__row > .case-card {
  flex: 0 0 calc((100% - 20px) / 2);
  scroll-snap-align: start;
  /* Without this the basis is only a suggestion: a flex item defaults to
     min-width: auto, so a nowrap title stretches the card past its track and
     the ellipsis never gets a chance. Measured at 1024: cards came out 574,
     479 and 442 wide against a 444 basis, and the longest title ran out past
     its own image (Kajsa 2026-10-05). Now every card is exactly the basis and
     .large-link__text clips as it was always built to. */
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .alwayson__row { scroll-behavior: auto; }
}

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .alwayson .text-grid { --tw-pad-bottom: 32px; }
}

/* ── Mobile ──────────────────────────────────────────────────────
   One card at a time with the next one peeking, so the row reads as swipeable
   without needing the buttons. */
@media (max-width: 767px) {
  .alwayson .text-grid { --tw-pad-bottom: 24px; }
  .alwayson__nav { margin-bottom: 16px; }
  .alwayson__row { gap: 12px; }
  .alwayson__row > .case-card { flex: 0 0 86%; }
}