/* Dialog Group website concept v23
   Floating hero card refinement.
   This layer keeps the existing brand and component styling intact and only
   aligns dimensions, spacing and placement for the two-card composition.
*/

:root {
  --floating-card-width: clamp(17.5rem, 22vw, 19rem);
  --floating-card-min-height: 5rem;
  --floating-card-padding-block: 1rem;
  --floating-card-padding-inline: 1.1rem;
  --floating-card-radius: 16px;
  --floating-card-gap: 0.75rem;
  --floating-card-dot-size: 16px;
  --floating-card-dot-ring: 8px;
  --floating-card-image-overlap: 1.5rem;
  --floating-card-edge-overhang: clamp(1.75rem, 4.5vw, 4rem);
  --floating-card-top-offset: 1.25rem;
}

/* One shared component definition for both the blue and green card. */
main .hero-visual--floating .floating-card {
  box-sizing: border-box;
  width: var(--floating-card-width);
  min-width: 0;
  max-width: var(--floating-card-width);
  height: var(--floating-card-pair-height, auto);
  min-height: var(--floating-card-min-height);
  padding: var(--floating-card-padding-block) var(--floating-card-padding-inline);
  align-items: center;
  gap: var(--floating-card-gap);
  border-radius: var(--floating-card-radius);
  box-shadow: var(--shadow-md);
}

main .hero-visual--floating .floating-card > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

main .hero-visual--floating .floating-card strong,
main .hero-visual--floating .floating-card small {
  display: block;
  margin: 0;
}

main .hero-visual--floating .floating-card strong {
  font-size: 0.95rem;
  line-height: 1.25;
}

main .hero-visual--floating .floating-card small {
  margin-top: 0.12rem;
  font-size: 0.76rem;
  line-height: 1.35;
}

/* The green and blue indicators use exactly the same geometry. */
main .hero-visual--floating .status-dot,
main .hero-visual--floating .status-dot--route,
main .hero-visual--floating .status-dot--blue {
  flex: 0 0 var(--floating-card-dot-size);
  width: var(--floating-card-dot-size);
  height: var(--floating-card-dot-size);
  margin: 0;
  align-self: center;
  border-radius: 50%;
}

main .hero-visual--floating .status-dot {
  box-shadow: 0 0 0 var(--floating-card-dot-ring) rgba(37, 87, 184, 0.14);
}

main .hero-visual--floating :is(.status-dot--route, .status-dot--blue) {
  box-shadow: 0 0 0 var(--floating-card-dot-ring) rgba(52, 104, 208, 0.14);
}

@media (min-width: 1081px) {
  /* Both cards cross the corresponding photo edge by the same amount.
     The lower card also overlaps the bottom edge by 22px, which is about
     20 to 30 percent of the normal card height. */
  main .hero-visual.hero-visual--floating > .floating-card-route {
    top: calc(0.2rem + var(--floating-card-top-offset));
    left: calc(2.5rem - var(--floating-card-edge-overhang));
  }

  main .hero-visual.hero-visual--floating > .floating-card-execution {
    top: calc(100% - var(--floating-photo-footer) - var(--floating-card-image-overlap));
    right: calc(0.2rem - var(--floating-card-edge-overhang));
    bottom: auto;
  }
}

@media (min-width: 641px) and (max-width: 1080px) {
  :root {
    --floating-card-width: clamp(17.5rem, 44vw, 19rem);
    --floating-card-edge-overhang: clamp(0.75rem, 2vw, 1.5rem);
  }

  main .hero-visual.hero-visual--floating > .floating-card-route {
    top: calc(0.2rem + var(--floating-card-top-offset));
    left: calc(2.5rem - var(--floating-card-edge-overhang));
  }

  main .hero-visual.hero-visual--floating > .floating-card-execution {
    top: calc(100% - var(--floating-photo-footer) - var(--floating-card-image-overlap));
    right: calc(0.2rem - var(--floating-card-edge-overhang));
    bottom: auto;
  }
}

@media (max-width: 640px) {
  :root {
    --floating-card-width: 100%;
    --floating-card-min-height: 5rem;
    --floating-card-padding-block: 0.95rem;
    --floating-card-padding-inline: 1rem;
  }

  /* On narrow screens the pair remains visually identical but stacks below
     the image, preventing overlap with captions and preserving touch space. */
  main .hero-visual--floating .floating-card {
    width: 100%;
    max-width: none;
  }

  main .hero-visual.hero-visual--floating > :is(.floating-card-route, .floating-card-execution) {
    position: relative;
    inset: auto;
  }
}