/* Desktop-only flat WebGL hero experiment. Phones and tablets retain the
   approved native swipe implementation below the 1024px breakpoint. */
@media (min-width: 1024px) {
  .proo-static-hero--three-card-stage,
  .proo-static-hero--three-card-stage.proo-static-hero--service-ring.has-proo-flow-header {
    --hero-title-size: clamp(1.8976rem, min(4.845vw, 8.075vh), 4.845rem);
    --centered-intro-height: clamp(315px, 39.5vh, 403px);
    --centered-card-width: min(
      1180px,
      78vw,
      calc((var(--proo-hero-viewport-height, 100svh) - var(--centered-intro-height) - 1px) * 16 / 9)
    );
    --centered-card-height: calc(var(--centered-card-width) * .5625);
    --three-card-side-offset: calc(var(--centered-card-width) + 1px);
    --three-card-side-drop: 0px;
    --three-card-side-opacity: 1;
  }

  .proo-static-hero--three-card-stage .proo-static-hero__cards {
    perspective: none !important;
    isolation: isolate;
  }

  .proo-static-hero--three-card-stage .proo-service-ring--flat-track {
    width: 100% !important;
    height: var(--centered-card-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .proo-static-hero--three-card-stage .proo-service-ring--flat-track
  .proo-service-ring__surface,
  .proo-static-hero--three-card-stage .proo-service-ring--flat-track
  .proo-service-ring__canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .proo-static-hero--three-card-stage[data-centered-card-index="0"] .proo-static-hero__slide:nth-child(3) .proo-static-hero__card,
  .proo-static-hero--three-card-stage[data-centered-card-index="1"] .proo-static-hero__slide:nth-child(1) .proo-static-hero__card,
  .proo-static-hero--three-card-stage[data-centered-card-index="2"] .proo-static-hero__slide:nth-child(2) .proo-static-hero__card {
    transform: translate3d(calc(0px - var(--three-card-side-offset)), 0, 0) !important;
    opacity: 1 !important;
  }

  .proo-static-hero--three-card-stage[data-centered-card-index="0"] .proo-static-hero__slide:nth-child(2) .proo-static-hero__card,
  .proo-static-hero--three-card-stage[data-centered-card-index="1"] .proo-static-hero__slide:nth-child(3) .proo-static-hero__card,
  .proo-static-hero--three-card-stage[data-centered-card-index="2"] .proo-static-hero__slide:nth-child(1) .proo-static-hero__card {
    transform: translate3d(var(--three-card-side-offset), 0, 0) !important;
    opacity: 1 !important;
  }

  .proo-static-hero--three-card-stage .proo-static-hero__slide .proo-static-hero__card {
    top: 0 !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 0 !important;
    transform-style: flat !important;
    transform-origin: 50% 50% !important;
    backface-visibility: visible !important;
  }

  .proo-static-hero--three-card-stage .proo-static-hero__card--empty,
  .proo-static-hero--three-card-stage .proo-static-hero__card--software,
  .proo-static-hero--three-card-stage .proo-static-hero__card--commerce,
  .proo-static-hero--three-card-stage .proo-static-hero__card--formation {
    border-radius: 0 !important;
  }

  .proo-static-hero--three-card-stage .proo-static-hero__builder-video,
  .proo-static-hero--three-card-stage .proo-static-hero__card-media,
  .proo-static-hero--three-card-stage .proo-static-hero__software-bg,
  .proo-static-hero--three-card-stage .proo-static-hero__formation-bg {
    border-radius: 0 !important;
  }

  .proo-static-hero--three-card-stage .proo-static-hero__mobile-card-indicator {
    display: block !important;
    top: calc(var(--centered-intro-height) - 13px) !important;
  }
}

/* Main hero H1 optical-weight matrix. These values deliberately follow the
   typeface, not a universal device rule: Junicode keeps finer mobile detail,
   while Noto Serif needs the full stroke to retain the intended Greek color. */
.proo-static-hero[data-lang="el"] :is(
  .proo-static-hero__title,
  .proo-static-hero__mobile-video-title,
  .proo-static-hero__frosted-title,
  .proo-static-hero__card-title
),
.proo-card-one-followup[data-lang="el"] .proo-card-one-followup__title {
  -webkit-text-stroke: 1px currentColor !important;
  text-stroke: 1px currentColor !important;
}

@media (min-width: 1024px) {
  .proo-static-hero[data-lang="en"] :is(
    .proo-static-hero__title,
    .proo-static-hero__mobile-video-title,
    .proo-static-hero__frosted-title,
    .proo-static-hero__card-title
  ),
  .proo-card-one-followup[data-lang="en"] .proo-card-one-followup__title {
    -webkit-text-stroke: .77px currentColor !important;
    text-stroke: .77px currentColor !important;
  }
}

@media (max-width: 1023px) {
  .proo-static-hero[data-lang="en"] :is(
    .proo-static-hero__title,
    .proo-static-hero__mobile-video-title,
    .proo-static-hero__frosted-title,
    .proo-static-hero__card-title
  ),
  .proo-card-one-followup[data-lang="en"] .proo-card-one-followup__title {
    -webkit-text-stroke: .65px currentColor !important;
    text-stroke: .65px currentColor !important;
  }
}

.proo-static-hero__flat-desktop-indicator {
  display: none !important;
}

@media (min-width: 1024px) {
  .proo-static-hero__flat-desktop-indicator {
    display: block !important;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .proo-static-hero--three-card-stage .proo-static-hero__slide .proo-static-hero__card {
    transition-duration: 1ms !important;
  }
}

/* The phone type fitter is intentionally width-aware up to 600px. Tablets use
   the same native layout, but cap that scale at the phone design maximum so a
   wide tablet cannot inflate the intro stack. The language-specific ratio is
   preserved. */
@media (min-width: 601px) and (max-width: 1023px) {
  .proo-static-hero[data-lang="en"] {
    --mobile-hero-title-size: calc(2.65rem * .95) !important;
    --mobile-hero-subtitle-size: calc(.96rem * .95) !important;
  }

  .proo-static-hero[data-lang="el"] {
    --mobile-hero-title-size: calc(2.25rem * .95) !important;
    --mobile-hero-subtitle-size: calc(.815rem * .95) !important;
  }
}

/* One optical inset and baseline for the phone/tablet video-service label. The
   desktop canvas uses the matching proportional values in JS. */
@media (max-width: 1023px) {
  .proo-static-hero--three-card-stage {
    --mobile-service-title-inset: clamp(20px, 5.8vw, 24px);
    --mobile-service-title-size: clamp(19px, 5.2vw, 22px);
  }

  .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__slide:first-child .proo-static-hero__mobile-software-label,
  .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__card--software .proo-static-hero__card-title,
  .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__card--formation .proo-static-hero__card-title {
    left: var(--mobile-service-title-inset) !important;
    bottom: var(--mobile-service-title-inset) !important;
    height: 26px !important;
    min-height: 26px !important;
    display: flex !important;
    align-items: center !important;
    font-size: var(--mobile-service-title-size) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .proo-static-hero[data-lang="en"]
  .proo-static-hero__mobile-software-label,
  .proo-static-hero[data-lang="en"]
  .proo-static-hero__card--software .proo-static-hero__card-title,
  .proo-static-hero[data-lang="en"]
  .proo-static-hero__card--formation .proo-static-hero__card-title {
    font-family: Junicode, Georgia, serif !important;
  }

  .proo-static-hero[data-lang="el"]
  .proo-static-hero__mobile-software-label,
  .proo-static-hero[data-lang="el"]
  .proo-static-hero__card--software .proo-static-hero__card-title,
  .proo-static-hero[data-lang="el"]
  .proo-static-hero__card--formation .proo-static-hero__card-title {
    font-family: "Noto Serif", Georgia, serif !important;
  }

  .proo-static-hero--three-card-stage .proo-static-hero__card-kind {
    position: absolute;
    z-index: 12;
    top: var(--card-content-inset, 20px);
    right: var(--card-content-inset, 20px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: #f7f7f5;
    color: #131314;
    font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    pointer-events: none;
  }

  .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__slide:first-child .proo-static-hero__mobile-software-label {
    left: var(--mobile-service-title-inset) !important;
    bottom: var(--mobile-service-title-inset) !important;
    width: max-content !important;
    height: 26px !important;
    align-items: center !important;
    gap: .32em !important;
    font-size: var(--mobile-service-title-size) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .proo-static-hero--mobile-card1-followup:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__slide:first-child .proo-static-hero__mobile-software-label > span {
    top: 2px !important;
    line-height: 1 !important;
  }

  .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__card--software .proo-static-hero__card-title,
  .proo-static-hero--three-card-stage:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__card--formation .proo-static-hero__card-title {
    transform: translateY(2px) !important;
  }

  /* Junicode's visible baseline sits fractionally higher in the shared
     26px label box. Lower only the English mobile labels optically. */
  .proo-static-hero[data-lang="en"]:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__slide:first-child .proo-static-hero__mobile-software-label,
  .proo-static-hero[data-lang="en"]:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__card--software .proo-static-hero__card-title,
  .proo-static-hero[data-lang="en"]:not(.is-proo-mobile-ring-mounted)
  .proo-static-hero__card--formation .proo-static-hero__card-title {
    bottom: calc(var(--mobile-service-title-inset) - 3px) !important;
  }
}