/* ===================================================
   earthity — drone-catalog.css: rules only the drone-catalog page uses.
   Load after base.css. Split from the former site.css (2026-09-11).
   =================================================== */
/* ===== 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;
}

/* ===================================================
   DRONE CATALOG PAGE (drone-catalog.html)
   One screen laid out like the operator onboarding's "Which
   drones do you fly?" step: the catalog card (the design system's
   .eu-parallax-card, sky theme) on the left, the shown drone's specs
   on the right. Data and paging: js/drone-catalog.js.
   =================================================== */

/* One screen for the catalog: the canvas is exactly one dynamic
   viewport (nav + main), and the site footer follows it in normal flow
   — its placeholder sits outside .wf-canvas, so it never takes height
   from the card. dvh, not the canvas's usual 100vh, which on iOS is
   taller than the visible area. Short viewports let the canvas grow to
   its content — see the end of this block. */
.drone-catalog-body .wf-canvas { height: 100vh; height: 100dvh; min-height: 0; }
.drone-catalog-body .wf-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }

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

/* White ground, like the onboarding card pane: the card carries its own
   deep blue, and its drop shadow only reads against a light surface.
   overflow stays visible — the product shot overhangs the card. */
.drone-catalog__visual {
  position: relative; /* anchors .drone-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. */
.drone-catalog__visual [hidden] { display: none; }

.drone-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;
}

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

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

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

.drone-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. */
.drone-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);
}

.drone-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. */
.drone-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;
}

.drone-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) {
  .drone-catalog__hint { display: none; }
}

.drone-catalog__actions { display: flex; }

/* Stacked: card over specs, still one screen. */
@media (max-width: 860px) {
  .drone-catalog__visual {
    padding: var(--spacing-05) var(--spacing-05) var(--spacing-03);
    border-right: 0;
  }
  .drone-catalog__panel {
    max-width: none;
    justify-content: flex-start;
    padding: var(--spacing-03) var(--spacing-05) var(--spacing-05);
  }
  .drone-catalog__title { font-size: 22px; margin-bottom: var(--spacing-03); }
  .drone-catalog__lead { display: none; }
  .drone-catalog__specs { margin-bottom: var(--spacing-04); }
  /* Label and value on one row, so three specs cost three short lines. */
  .drone-catalog__spec {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: var(--spacing-03);
    align-items: baseline;
    padding: var(--spacing-03) 0;
  }
  .drone-catalog__label { margin-bottom: 0; }
  .drone-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. */
  .drone-catalog__position { position: static; justify-self: end; margin-top: var(--spacing-03); }
  .drone-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) {
  .drone-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. Let the canvas grow to its content rather than clip. */
@media (max-height: 660px), (min-width: 441px) and (max-width: 860px) and (max-height: 840px) {
  .drone-catalog-body .wf-canvas { height: auto; min-height: 100vh; }
}

/* The shot idles like the Arc drone floating over the charging-dock hero (.dock-rk--3 in
   charging-dock.css): the same slow drift, turn and breath, desktop and phone alike.

   The design system owns the shot's `transform` (centring, pointer or phone parallax, the
   push forward on Z) and its `animation` (the paging crossfade). So the idle moves the
   individual `translate`, `rotate` and `scale` properties, which apply ON TOP of `transform`
   rather than replacing it, and the crossfade keyframes are named again here in the same
   list — this rule outranks the system's, so leaving them out would drop the fade.

   transform-origin 0 0: the system's translate(-50%, -50%) puts the shot's centre on the
   box's top-left corner, so that corner is the point to turn about. At the default centre
   the drone would swing round an arc half its own width wide. The system's transform is
   translations only, which the origin does not move.

   js/drone-catalog.js sets --drone-idle-t (ms since the page started) on each new shot and
   the delays start its idle that far in, so a paged-in drone picks up the pose the outgoing
   one is fading out in instead of snapping back to the start of the loop. It also sets
   --drone-idle-amp on the card: 1 is the Arc drone's full motion, and a phone too narrow to
   hold that beside the card gets a smaller float instead of a drone cut off at the screen's
   edge. */
@media (prefers-reduced-motion: no-preference) {
  .drone-catalog__visual .eu-parallax-card__product {
    transform-origin: 0 0;
    animation:
      eu-parallax-card-product-in 220ms ease-out both,
      drone-idle-float 8s ease-in-out infinite alternate,
      drone-idle-turn 7s ease-in-out infinite alternate;
    animation-delay: 0s, calc(var(--drone-idle-t, 0) * -1ms), calc(var(--drone-idle-t, 0) * -1ms);
  }
  .drone-catalog__visual .eu-parallax-card__product--out {
    animation-name: eu-parallax-card-product-out, drone-idle-float, drone-idle-turn;
  }
}

@keyframes drone-idle-float {
  from { translate: calc(-10px * var(--drone-idle-amp, 1)) calc(4px * var(--drone-idle-amp, 1)); }
  to { translate: calc(12px * var(--drone-idle-amp, 1)) calc(-30px * var(--drone-idle-amp, 1)); }
}
@keyframes drone-idle-turn {
  from { rotate: calc(-4deg * var(--drone-idle-amp, 1)); scale: calc(1 - 0.02 * var(--drone-idle-amp, 1)); }
  to { rotate: calc(12deg * var(--drone-idle-amp, 1)); scale: calc(1 + 0.02 * var(--drone-idle-amp, 1)); }
}