/* ===================================================
   earthity — dock-catalog.css: rules only the dock-catalog page uses.
   Load after base.css.

   A near-twin of drone-catalog.css (2026-09-12): same one-screen layout,
   same card pane, same spec panel. Kept as its own page file rather than
   promoted into base.css — base.css loads on all nine pages, and the
   seven that are not catalogs would carry ~180 lines they never use,
   which is the reason the stylesheet was split per page to begin with.
   A change to one catalog page usually wants the same change in the
   other; there is no tooling that will tell you so.
   =================================================== */
/* ===== SHARED PAGE-LEVEL HELPERS — notes in drone-program.css ===== */

/* Visually-hidden text (used for the hero h1 — design has no overarching
   headline, but the page contract requires a single h1 for SEO + a11y). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================
   DOCK CATALOG PAGE (dock-catalog.html)
   One fixed screen laid out like the operator onboarding's "Pick your
   dock" step: the catalog card (the design system's .eu-parallax-card,
   FIELD theme — which draws its scenery into a canvas instead of
   painting it, see js/dock-card-field.js) on the left, the shown dock's
   specs on the right. Data and paging: js/dock-catalog.js.
   =================================================== */

/* No page scroll: the canvas is exactly one dynamic viewport (nav +
   main) and there is no footer. dvh, not the canvas's usual 100vh,
   which on iOS is taller than the visible area. Short viewports get
   the scroll back — see the end of this block. */
.dock-catalog-body { overflow: hidden; }
.dock-catalog-body .wf-canvas { height: 100vh; height: 100dvh; min-height: 0; }
.dock-catalog-body .wf-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.dock-catalog-page {
  flex: 1;
  min-height: 0;
  background-color: var(--white);
  color: var(--gray-100);
}

/* White ground, like the onboarding card pane. The field theme's card is
   white too, and the design system gives it a green-tinted shadow of its
   own so its top half does not dissolve into this surface.
   overflow stays visible — a product shot overhangs the card. */
.dock-catalog__visual {
  position: relative; /* anchors .dock-catalog__position in its bottom-right corner */
  display: grid;
  place-items: center;
  min-height: 0;
  padding: var(--spacing-06) var(--spacing-07);
  border-right: 1px solid var(--gray-20);
}
/* `hidden` has to beat the design system pager's display: flex. */
.dock-catalog__visual [hidden] { display: none; }

.dock-catalog__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  min-height: 0;
  max-width: 560px;
  padding: var(--spacing-06) var(--spacing-09);
  overflow-y: auto;
}

.dock-catalog__title {
  font-family: var(--font-brand);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: var(--spacing-04);
}

.dock-catalog__lead {
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-70);
  margin-bottom: var(--spacing-07);
}

.dock-catalog__specs {
  margin-bottom: var(--spacing-05);
  border-top: 1px solid var(--gray-20);
}

.dock-catalog__spec {
  padding: var(--spacing-04) 0;
  border-bottom: 1px solid var(--gray-20);
}

/* The onboarding's mono label (.ob-label). Weight 500 is the face the
   card's eyebrow already loads, so the page fetches one mono file. */
.dock-catalog__label {
  margin-bottom: var(--spacing-02);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--gray-60);
}

.dock-catalog__value {
  font-size: 20px;
  line-height: 1.3;
  color: var(--gray-100);
  overflow-wrap: anywhere;
}

/* The position in the catalog ("12 / 62"), in the bottom-right corner of the card's
   pane — where the onboarding keeps its fleet count. Mono 500: the face the card's
   eyebrow already loads, so it costs no extra font file. */
.dock-catalog__position {
  position: absolute;
  right: var(--spacing-07);
  bottom: var(--spacing-06);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16px;
  color: var(--gray-60);
  font-variant-numeric: tabular-nums;
}

.dock-catalog__hint {
  margin-bottom: var(--spacing-06);
  font-size: 12px;
  letter-spacing: 0.32px;
  color: var(--gray-60);
}

/* Keys are no help without a keyboard. */
@media (hover: none) {
  .dock-catalog__hint { display: none; }
}

.dock-catalog__actions { display: flex; }

/* Stacked: card over specs, still one screen. */
@media (max-width: 860px) {
  .dock-catalog__visual {
    padding: var(--spacing-05) var(--spacing-05) var(--spacing-03);
    border-right: 0;
  }
  .dock-catalog__panel {
    max-width: none;
    justify-content: flex-start;
    padding: var(--spacing-03) var(--spacing-05) var(--spacing-05);
  }
  .dock-catalog__title { font-size: 22px; margin-bottom: var(--spacing-03); }
  .dock-catalog__lead { display: none; }
  .dock-catalog__specs { margin-bottom: var(--spacing-04); }
  /* Label and value on one row, so three specs cost three short lines. */
  .dock-catalog__spec {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: var(--spacing-03);
    align-items: baseline;
    padding: var(--spacing-03) 0;
  }
  .dock-catalog__label { margin-bottom: 0; }
  .dock-catalog__value { font-size: 15px; }
  /* Stacked, the pane is only as tall as the card: the position takes its own row,
     right-aligned beneath it, and the key hint gives way so the screen still holds. */
  .dock-catalog__position { position: static; justify-self: end; margin-top: var(--spacing-03); }
  .dock-catalog__hint { display: none; }
}

/* Phones: the design system card is 280px at 3:4 here. Size it from the
   height left after everything else on the stacked screen (nav, paddings,
   specs, CTA: ~312px, so 320px leaves room), but never below 256px —
   narrower squeezes the caption beside the pager. */
@media (max-width: 440px) {
  .dock-catalog__stage { width: clamp(256px, calc((100dvh - 320px) * 0.75), 280px); }
}

/* Too short to hold the card and the specs on one screen: at 660px and
   under even the 256px card (341px tall) runs out of room, and landscape
   phones, small laptops and tablets (whose 540px card needs ~840px) hit
   the same wall. Give the scroll back rather than clip. */
@media (max-height: 660px), (min-width: 441px) and (max-width: 860px) and (max-height: 840px) {
  .dock-catalog-body { overflow: visible; }
  .dock-catalog-body .wf-canvas { height: auto; min-height: 100vh; }
}