/* Product directory adaptive authority.
   Activates after the fleet material and whole-card hit-target layers. The fleet
   owns its own geometry, content owns card height, and the first surface keeps
   enough clearance for the floating Raysor navigation and external glass bloom. */

body.products-page {
  --products-control: 54px;
  --products-card-gap: clamp(14px, 1.7vw, 22px);
}

body.products-page .v1-product-hero {
  position: relative;
  min-height: 0 !important;
  overflow: visible !important;
  padding-top: clamp(132px, 15vw, 178px) !important;
  padding-bottom: clamp(46px, 7vw, 84px) !important;
}

body.products-page .v1-product-hero :is(.breadcrumbs, .eyebrow, h1, .lede) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

body.products-page .v1-product-hero .breadcrumbs {
  flex-wrap: wrap;
  row-gap: 6px;
}

body.products-page .v1-product-hero h1 {
  max-inline-size: min(100%, 16ch);
  text-wrap: balance;
}

body.products-page .v1-product-hero .lede {
  max-inline-size: min(100%, 72ch);
  text-wrap: pretty;
}

body.products-page :is(.v1-grid.v1-grid-2:has(.product-family-card), .project-directory) {
  container-type: inline-size;
  gap: var(--products-card-gap) !important;
  align-items: stretch;
}

body.products-page :is(.product-family-card, .project-card) {
  min-height: 0 !important;
  block-size: auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  container-type: inline-size;
}

body.products-page :is(.product-family-card, .project-card) > p {
  overflow-wrap: anywhere;
}

body.products-page :is(.product-family-card, .project-card) > a:last-child {
  width: 100%;
  min-height: var(--products-control);
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center !important;
  gap: 14px;
  margin-top: auto;
  line-height: 1.25;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

/* The visual arrow is an optical end-cap, not loose inline text. Keeping a
   fixed box at the end of every CTA prevents the glyph from appearing halfway
   up/down the control when labels wrap or browser text metrics change. */
body.products-page :is(.product-family-card, .project-card) > a:last-child > span {
  width: 36px;
  height: 36px;
  display: grid !important;
  place-items: center;
  justify-self: end;
  align-self: center;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--fleet-accent) 28%, rgba(255,255,255,.12));
  border-radius: 999px;
  background: color-mix(in srgb, var(--fleet-accent) 10%, rgba(5,13,23,.62));
  font-size: 1rem !important;
  line-height: 1 !important;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease, border-color 180ms ease;
}

body.products-page :is(.product-family-card, .project-card) > a:last-child:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fleet-accent) 62%, white);
  outline-offset: 3px;
}

/* Complete CTA interaction cycle: approach gains optical lift on precision
   pointers, press compresses immediately, and release settles through the same
   compositor-only transform path. Touch does not inherit hover-only motion. */
@media (hover: hover) and (pointer: fine) {
  body.products-page :is(.product-family-card, .project-card) > a:last-child:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--fleet-accent) 48%, rgba(255,255,255,.2));
    box-shadow: 0 12px 30px color-mix(in srgb, var(--fleet-accent) 10%, transparent);
  }

  body.products-page :is(.product-family-card, .project-card) > a:last-child:hover > span {
    transform: translateX(2px);
  }
}

body.products-page :is(.product-family-card, .project-card) > a:last-child:active {
  transform: translateY(0) scale(.985);
  transition-duration: 70ms;
}

body.products-page :is(.product-family-card, .project-card) > a:last-child:active > span {
  transform: scale(.94);
  transition-duration: 70ms;
}

body.products-page .v1-product-topline {
  flex-wrap: wrap;
  gap: 8px 12px;
}

body.products-page .v1-product-topline > * {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

@container (max-width: 22rem) {
  body.products-page :is(.product-family-card, .project-card) {
    padding: 20px !important;
  }

  body.products-page .product-card-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 20px;
  }

  body.products-page :is(.product-family-card, .project-card) > a:last-child {
    padding-inline: 14px;
  }
}

@media (pointer: coarse) {
  body.products-page {
    --products-control: 56px;
  }

  body.products-page :is(.product-family-card, .project-card) > a:last-child:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.products-page :is(.product-family-card, .project-card, .product-card-icon, .project-mark, .product-family-card > a:last-child, .project-card > a:last-child, .product-family-card > a:last-child > span, .project-card > a:last-child > span) {
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.products-page :is(.product-family-card, .project-card) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #07131f !important;
  }
}

@media (prefers-reduced-data: reduce) {
  body.products-page :is(.product-family-card, .project-card, .product-card-icon, .project-mark),
  body.products-page :is(.product-family-card, .project-card)::before,
  body.products-page :is(.product-family-card, .project-card)::after,
  body.products-page :is(.product-family-card, .project-card) > a:last-child,
  body.products-page :is(.product-family-card, .project-card) > a:last-child > span {
    background-image: none !important;
    filter: none !important;
  }

  body.products-page :is(.product-family-card, .project-card, .product-card-icon, .project-mark) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: inset 0 1px rgba(255,255,255,.08) !important;
  }

  body.products-page :is(.product-family-card, .project-card)::before,
  body.products-page :is(.product-family-card, .project-card)::after {
    opacity: 0 !important;
  }
}

@media (prefers-contrast: more) {
  body.products-page :is(.product-family-card, .project-card, .product-family-card > a:last-child, .project-card > a:last-child) {
    border-color: rgba(235,243,255,.72) !important;
  }

  body.products-page :is(.product-family-card, .project-card) > a:last-child:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 3px;
  }
}

@media (forced-colors: active) {
  body.products-page :is(.product-family-card, .project-card, .product-family-card > a:last-child, .project-card > a:last-child) {
    border-color: CanvasText !important;
    color: CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
  }

  body.products-page :is(.product-family-card, .project-card):focus-within {
    outline: 3px solid Highlight !important;
    outline-offset: 4px;
  }

  body.products-page :is(.product-family-card, .project-card) > a:last-child:focus-visible {
    outline-color: Highlight !important;
  }
}