/* ============================================================
   THE CAROUSEL: the Web page "Recent websites" plate.
   ------------------------------------------------------------
   Loaded by /services/web/ only, after home-atomic.css and
   atomic-pages.css. Real captures of sites the studio built, one
   slide per site, prev/next discs and dots, no browser chrome.
   Driven by atomic-services-b.js.
   ============================================================ */

/* ---------- the frame ----------------------------------------- */
/* The frame: a 16:10 plate with the site's own ink border and no
   browser chrome — the capture starts at the top edge and fills it. */
.at-ill-browser {
  width: 100%; aspect-ratio: 1903 / 908;
  background: var(--navy); border: 2px solid var(--ink);
  display: grid; grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.at-ill-browser__body { background: var(--navy); overflow: hidden; position: relative; }

/* ---------- the carousel inside it ----------------------------- */
.at-car { display: flex; flex-direction: column; gap: 18px; }
.at-car__track { display: flex; height: 100%; transition: transform 560ms var(--ease-out); }
.at-car__slide { flex: 0 0 100%; min-width: 0; height: 100%; }
.at-car__slide img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.at-car__ctl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.at-car__btn {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  background: var(--signal); color: var(--ink); border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.at-car__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.at-car__btn:hover { transform: scale(1.06); }
.at-car__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.at-band--navy .at-car__btn:focus-visible { outline-color: var(--paper); }
.at-car__cap { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-left: 6px; }
.at-car__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-car__page { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; white-space: nowrap; }
.at-car__dots { margin-left: auto; display: flex; flex: 0 0 auto; }
.at-car__dot { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.at-car__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out); }
.at-car__dot[aria-current="true"]::before { background: var(--signal); border-color: var(--signal); }
.at-car__dot:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.at-car__dot:hover::before { border-color: var(--signal); }

@media (prefers-reduced-motion: reduce) {
  .at-car__track { transition: none; }
}

@media (max-width: 860px) {
  .at-car__cap { margin-left: 2px; }
  .at-car__page { letter-spacing: 0.12em; }
}

/* On a phone the caption takes its own line under the controls. Two
   discs, the caption and three dots do not fit one row at 375px, and
   the name of the site must never be clipped to make them fit. */
@media (max-width: 560px) {
  .at-car__ctl { flex-wrap: wrap; row-gap: 10px; }
  .at-car__cap { order: 3; flex: 1 0 100%; margin-left: 0; }
  .at-car__page { white-space: normal; }
}