/* Desktop first-fold composition.
   Keep the existing DOM order and horizontal layout unchanged. The hero height
   is derived from the viewport so the initial desktop view always ends inside
   the first row of event images, before the card text begins. */
@media (min-width: 1051px) {
  .layout.cardsMode .cardsPane {
    padding-top: 14px;
  }

  .layout.cardsMode .walkHero {
    height: calc(100dvh - 460px);
    min-height: 300px;
    margin-bottom: 10px;
  }

  .layout.cardsMode .walkHeroMain,
  .layout.cardsMode .walkMapPreview,
  .layout.cardsMode .cityPulseCard {
    min-height: 0;
    height: 100%;
  }

  .layout.cardsMode .walkHeroCopy {
    padding: clamp(16px, 2.4dvh, 34px) 36px;
  }

  .layout.cardsMode .walkHeroCopy > span {
    margin-bottom: 6px;
  }

  .layout.cardsMode .walkHeroCopy h1 {
    font-size: clamp(42px, 6dvh, 66px);
  }

  .layout.cardsMode .walkHeroCopy p {
    margin-top: clamp(8px, 1.3dvh, 14px);
    font-size: clamp(14px, 1.8dvh, 17px);
    line-height: 1.3;
  }

  .layout.cardsMode .walkHeroActions {
    margin-top: clamp(10px, 1.5dvh, 18px);
    gap: 10px;
  }

  .layout.cardsMode .walkHeroActions button {
    min-height: 42px;
  }

  .layout.cardsMode .walkHeroCopy small {
    margin-top: clamp(6px, 1.1dvh, 12px);
    font-size: 11px;
    line-height: 1.2;
  }

  .layout.cardsMode .cityPulseCard {
    padding: clamp(16px, 2.2dvh, 24px) 22px;
  }

  .layout.cardsMode .cityPulseCard p {
    margin-bottom: 8px;
  }

  .layout.cardsMode .cityPulseCard > strong {
    font-size: clamp(46px, 6.4dvh, 58px);
  }

  .layout.cardsMode .cityPulseCard > small {
    margin: 3px 0 8px;
  }

  .layout.cardsMode .cityPulseCard div {
    padding: clamp(5px, 0.8dvh, 9px) 0;
  }

  .layout.cardsMode .discoveryDock {
    height: 74px;
    min-height: 74px;
    margin-bottom: 10px;
    padding: 8px 12px;
  }

  .layout.cardsMode .discoveryDock button {
    height: 48px;
  }

  .layout.cardsMode .homeCardsPanel {
    padding-top: 12px;
  }

  .layout.cardsMode .allEventsHeading {
    height: 64px;
    min-height: 64px;
    margin-bottom: 8px;
    overflow: hidden;
  }

  .layout.cardsMode .allEventsHeading p {
    margin-bottom: 3px;
  }

  .layout.cardsMode .allEventsHeading h2 {
    font-size: 30px;
    line-height: 1;
  }

  .layout.cardsMode .allEventsHeading small {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.15;
  }

  .layout.cardsMode .bigThumb {
    height: 190px;
  }
}