/* Homepage Operational Intelligence — the same selected-story "squeezy" pattern used on Stripe's homepage. */
/* Mobile cards keep their own copy visible after the story order changes. */
@media (max-width: 767px) {
  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card__title,
  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card__link {
    opacity: 1 !important;
  }
}

html body [data-mw-home-events-desktop="true"] .mw-home-events-intro,
html body [data-mw-home-events-desktop="true"] .mw-home-events-detail {
  display: none !important;
}

@media (min-width: 768px) {
  html body [data-mw-home-events-desktop="true"] {
    position: relative !important;
    padding-top: 96px !important;
  }

  /* The original desktop canvas depends on removed source-site runtime. Use the
     approved local card markup as its deterministic replacement. */
  html body [data-mw-home-events-desktop="true"] .squeezy-carousel {
    display: none !important;
  }

  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel,
  html body [data-mw-home-events-desktop="true"] .mobile-carousel {
    display: block !important;
    width: 100% !important;
  }

  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel {
    position: relative !important;
    overflow: visible !important;
  }

  html body [data-mw-home-events-desktop="true"] .carousel__section-container.mobile-carousel,
  html body [data-mw-home-events-desktop="true"] .mobile-carousel {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /* Match Stripe's header/control placement: copy left, paired quiet controls right. */
  html body [data-mw-home-events-desktop="true"] .mw-home-events-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 32px !important;
    width: 100% !important;
    margin: 0 0 64px !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-intro__copy {
    min-width: 0 !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-intro__title,
  html body [data-mw-home-events-desktop="true"] .mw-home-events-intro__subtitle {
    width: fit-content !important;
    margin: 0 !important;
    font-family: sohne-var, "SF Pro Display", sans-serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 35.2px !important;
    letter-spacing: -.64px !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-intro__title {
    color: #061b31 !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-intro__subtitle {
    color: #64748b !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-controls {
    display: flex !important;
    align-self: end !important;
    align-items: center !important;
    gap: 8px !important;
    transform: translateY(32px) !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-control {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #e8e9ff !important;
    color: #000 !important;
    cursor: pointer !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-control-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    stroke: none !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-control:hover,
  html body [data-mw-home-events-desktop="true"] .mw-home-events-control:focus-visible {
    background: #dfe2ff !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-control:focus-visible {
    outline: 3px solid #635bff !important;
    outline-offset: 2px !important;
  }

  /* Squeezy geometry: one dominant visual followed by progressively narrower previews. */
  html body [data-mw-home-events-desktop="true"] .mobile-carousel__scroller {
    display: flex !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: max-content !important;
    min-width: 100% !important;
    height: clamp(320px, 31.1vw, 460px) !important;
    min-height: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    list-style: none !important;
    scroll-snap-type: none !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item {
    display: block !important;
    flex: 0 0 4px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    scroll-snap-align: none !important;
    transition: flex-basis 420ms cubic-bezier(.2, .75, .25, 1), filter 220ms ease !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item[data-mw-carousel-position="0"] {
    flex-basis: clamp(440px, 54.05vw, 800px) !important;
    cursor: default !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item[data-mw-carousel-position="1"] {
    flex-basis: clamp(96px, 12.97vw, 192px) !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item[data-mw-carousel-position="2"] {
    flex-basis: clamp(48px, 6.49vw, 96px) !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item[data-mw-carousel-position="3"] {
    flex-basis: clamp(24px, 3.24vw, 48px) !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item[data-mw-carousel-position="4"] {
    flex-basis: clamp(12px, 1.62vw, 24px) !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item[data-mw-carousel-position="5"] {
    flex-basis: clamp(6px, .81vw, 12px) !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item[data-mw-carousel-position="6"] {
    flex-basis: clamp(4px, .4vw, 6px) !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item:not(.is-active) {
    filter: saturate(.96) brightness(.99) !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item:focus-visible {
    outline: 3px solid #635bff !important;
    outline-offset: 3px !important;
  }

  html body [data-mw-home-events-desktop="true"] .carousel__inner,
  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card,
  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card__media,
  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card__media picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card__media {
    overflow: hidden !important;
  }

  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* The supplied wide header artworks carry their composition and title from
     the left edge. Preserve that focal edge instead of centre-cropping it. */
  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item:nth-child(-n + 6) .events-mobile-carousel-card__image,
  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item:nth-child(8) .events-mobile-carousel-card__image {
    object-position: left center !important;
  }

  /* Desktop uses one shared metadata/action row, exactly as the reference does. */
  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card__link {
    display: none !important;
  }

  /* Keep the supplied source artwork unobstructed. Its story title and
     description are presented in the shared detail row beneath the visual. */
  html body [data-mw-home-events-desktop="true"] .events-mobile-carousel-card__title {
    display: none !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 32px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__copy {
    width: min(817.778px, 100%) !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #64748b !important;
    font: 300 22px/24.2px sohne-var, "SF Pro Display", sans-serif !important;
    letter-spacing: -.22px !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__title {
    color: #061b31 !important;
    font-weight: 300 !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__copy,
  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__cta {
    transition: opacity .12s ease !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail.is-changing .mw-home-events-detail__copy,
  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail.is-changing .mw-home-events-detail__cta {
    opacity: 0 !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__cta {
    display: flex !important;
    align-items: center !important;
    justify-content: normal !important;
    gap: 8px !important;
    flex: 0 1 auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 14.5px 24px 15.5px !important;
    border: 1px solid #b9b9f9 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #533afd !important;
    font: 400 16px/16px sohne-var, "SF Pro Display", sans-serif !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__cta-label {
    display: inline-block !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__cta-arrow {
    display: block !important;
    flex: none !important;
    width: 5px !important;
    height: 8px !important;
    margin: 0 !important;
    fill: currentColor !important;
    stroke: none !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__cta:hover,
  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__cta:focus-visible {
    border-color: #533afd !important;
    background: #f7f8ff !important;
    color: #4032c8 !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__cta:focus-visible {
    outline: 3px solid #635bff !important;
    outline-offset: 2px !important;
  }
}

@media (min-width: 768px) and (max-width: 959px) {
  html body [data-mw-home-events-desktop="true"] .mw-home-events-intro {
    margin-bottom: 24px !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__scroller {
    height: 330px !important;
  }

  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item[data-mw-carousel-position="0"] {
    flex-basis: min(58vw, 560px) !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html body [data-mw-home-events-desktop="true"] .mw-home-events-detail__cta {
    justify-self: start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body [data-mw-home-events-desktop="true"] .mobile-carousel__item {
    transition: none !important;
  }
}