/*
 * VALDIER V3 — hero spacing (content-driven, not fullscreen).
 *
 * Audit (docs/HERO.md): the hero has no vh / min-height / fullscreen wrapper;
 * its height is already its content (807px from 1440×900 to 3840×2160). The
 * empty space came from fixed spacing in the Webflow export:
 *   .section-large        padding 7.5rem (120px) top and bottom
 *   .hero_content-grid    margin-bottom 3.5rem (56px) before the logo row
 * The padding is reduced here for the hero only, from 768px up. Phones keep
 * the export's 4.5rem (72px), already natural. The Webflow CSS is untouched.
 */

@media screen and (min-width: 768px) {
  #vario-header-02.section-large {
    padding-top: 4.5rem;     /* 120 → 72px */
    padding-bottom: 4.5rem;  /* 120 → 72px */
  }
}

/* The partner-logo row below the grid was removed (no "Trusted by" without
   real clients), so the grid is the last thing in the hero at every width:
   its bottom margin would only add empty space before the section padding. */
#vario-header-02 .hero_content-grid {
  margin-bottom: 0;          /* export: 56px, then 32px before the logos */
}

/* Left column in two groups (index.html): top = eyebrow, H1, lead;
   bottom = the two features, the divider and the actions, with its own
   explicit spacing: 2.5rem from the features to the divider and 2.5rem
   from the divider to the actions. Desktop: the column takes the grid
   row's height (the Booking Card sets it, or the column itself when its
   text is taller: the row, and the hero, grow — never a fixed height) and
   the whole column is ONE group centred vertically in it by the flex
   layout (justify-content: center): the space above equals the space
   below, whatever the font size, line height, wrapping, spacing of the
   fields or language. The two groups keep the column's own 2.5rem gap;
   nothing is offset or centred one by one (docs/HERO.md, "Vertical
   centring"). */
#vario-header-02 .hero_content-bottom {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#vario-header-02 .hero_content-bottom > .divider {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

@media screen and (min-width: 992px) {
  #vario-header-02 .hero_left-wrapper {
    align-self: stretch;
    justify-content: center;
  }

  /* The Booking Card (Classic, or Shift's compact preview) centred in its
     column the same way: by the grid (align-self: center), never offset.
     When the card is the taller column it sets the row and nothing moves;
     when the text is taller, the card sits in the middle of the row. */
  #vario-header-02 .hero_image-wrapper {
    align-self: center;
  }
}

/* Compact widths: normal flow, centred as the export, 2rem from the lead to
   the features as before. */
@media screen and (max-width: 991px) {
  #vario-header-02 .hero_left-wrapper {
    row-gap: 2rem;
  }

  #vario-header-02 .hero_content-bottom {
    align-items: center;
  }
}

/* Photo Framing of the hero photograph on computers and tablets (VALDIER → Website → Homepage → Top of the page,
   Starter inc/photo-framing.php — the same system as Fleet): fit and focal point as custom properties on the image.
   Nothing chosen: no property, so exactly the export's cover, centred. */
.hero_background > .image-cover {
  object-fit: var(--vd-fit, cover);
  object-position: var(--vd-pos, 50% 50%);
}

/* Phones (both homepages, index.html and shift/index.html): below 768px the
   export hides the photograph (.hero_background), so the same S-Class image
   opens the hero instead: a sibling just before the section, right under the
   navbar, full-bleed (outside the section's gutter: no 100vw, no negative
   margins), 16:9 cropped on the car, square edges. The hero below starts
   40px under it. From 768px up it is not displayed. */
.hero_mobile-photo {
  display: none;
}

@media screen and (max-width: 767px) {
  .hero_mobile-photo {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--vs-surface, #f5f5f5); /* the export's photo backdrop while it loads */
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .hero_mobile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--vd-fit, cover);
    object-position: var(--vd-pos-m, 50% 30%);
  }

  /* Photo Framing → Whole photograph with the height on Auto: the band takes the photograph's own proportion
     (--vd-ratio, printed by the server), never taller than 70% of the screen; the photograph is never cut. */
  .hero_mobile-photo[data-vd-fit="contain"] {
    aspect-ratio: var(--vd-ratio, 16 / 9);
    max-height: 70vh;
    max-height: 70svh;
  }

  /* Photo Framing → Mobile photo height (Custom): a share of the phone's width (--vd-hero-h, 40–130vw), so every
     iPhone keeps the same proportion; never shorter than 10rem, never taller than 70% of the small viewport (svh:
     steady while Safari's bars come and go, no jump). The image keeps its proportion (object-fit), never stretched. */
  .hero_mobile-photo[data-vd-height] {
    aspect-ratio: auto;
    height: clamp(10rem, var(--vd-hero-h, 56.25vw), 70vh);
    height: clamp(10rem, var(--vd-hero-h, 56.25vw), 70svh);
    max-height: none;
  }

  .hero_mobile-photo + #vario-header-02.section-large {
    padding-top: 2.5rem;       /* export: 4.5rem (72px) */
  }

  /* Phones: photograph > booking card > words. The card comes up right under the photograph, the headline, its
     lead, the highlights and the buttons follow. Only the drawing order changes: the document keeps the H1 first
     (outline, screen readers, search engines), and the grid's own gap spaces the two blocks as before. */
  #vario-header-02 .hero_content-grid > .hero_image-wrapper {
    order: -1;
  }
}