/* ==========================================================================
   Mobile + tablet layer for globalvideopros.com
   ==========================================================================

   The pages here are dc-runtime templates: every declaration lives in an
   inline `style` attribute, and the runtime converts those strings into React
   style objects before render. That means the DOM's serialized style text is
   the browser's, not the source's, so a stylesheet cannot reliably match on it.

   So the responsive work is split in two:

     * Sizing stays inline. Fixed lengths were rewritten in the templates as
       `clamp(floor, N/11.8vw, N)` / `min(N, N/11.8vw)`. 11.8 is 1180px — the
       width this design was drawn at — per 100vw, so each value is unchanged
       at and above 1180px and scales proportionally below it, down to a floor
       that keeps text readable. No breakpoint needed, nothing to override.

     * Structure lives here, hooked on `gvp-*` classes added to the templates.
       Reflowing a hero or collapsing a grid is a layout decision that belongs
       at a breakpoint, and classes survive React re-renders.

   `!important` appears only where a rule has to beat an inline declaration on
   the same element; where the property is absent inline, the plain rule wins.
   ========================================================================== */

:root {
  /* The 56px desktop page gutter, scaled on the same 1180px basis. */
  --gvp-gx: clamp(18px, 4.75vw, 56px);
}


/* ==========================================================================
   Below the 1180px design width
   ========================================================================== */

@media (max-width: 1180px) {

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Belt and braces: no layer should be able to open a horizontal scroll. */
  html, body { overflow-x: hidden; }

  img, video, svg { max-width: 100%; }


  /* A distributing row is allowed to wrap. `flex-wrap` is inert until the
     content actually overflows, and `row-gap` only applies once it has, so
     both are safe to set as soon as the design width is lost. */
  .gvp-wrap { flex-wrap: wrap !important; }
  .gvp-wrap-gap { row-gap: 20px !important; }


  /* ---- Header navigation --------------------------------------------------
     The nav is a single-line flex row of six items. Below the design width it
     takes its own full-width line under the wordmark and wraps, so every
     destination stays visible instead of moving behind a menu button. */

  #dc-root header > nav {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    margin-top: 14px;
    gap: 10px 20px !important;  /* inline: gap:30px */
  }

  /* Comfortable targets for the plain text links. */
  #dc-root header > nav > a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
}


/* ==========================================================================
   Phones and small tablets
   ========================================================================== */

@media (max-width: 900px) {

  /* ---- Grids --------------------------------------------------------------
     Two-, three- and four-column layouts collapse to a single column. */

  .gvp-stack { grid-template-columns: 1fr !important; }

  /* Explicit spans from the desktop mosaics would open phantom columns in a
     one-column grid, so they take the full row instead. */
  .gvp-span {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* Work grid tiles are built from absolutely positioned media, so the row
     has to be told how tall to be. */
  .gvp-tile-grid { grid-auto-rows: clamp(180px, 52vw, 240px) !important; }

  /* Column gaps sized for side-by-side content are dead space once stacked. */
  .gvp-stack-gap { gap: 36px !important; }

  /* The service preview cannot track a scrolling list it now sits above. */
  .gvp-unsticky {
    position: relative !important;
    top: auto !important;
  }
  .gvp-preview { height: clamp(220px, 58vw, 320px) !important; }

  /* Desktop-only decoration: the hero shot montage, the vertical slug line
     down the hero edge, and the outsized outlined watermarks. All of them
     either overlap content or are illegible at this width. */
  .gvp-hide-sm { display: none !important; }


  /* ---- Homepage hero -----------------------------------------------------
     On desktop this is a fixed 860px stage with the eyebrow + headline, the
     copy/CTA panel and the status strip absolutely positioned onto it. A
     phone has no room to overlay, so the stage becomes a bottom-aligned flex
     column and those three blocks return to normal flow — which already
     matches their source order. The video, gradient and grid layers keep
     their absolute positioning and still fill the stage. */

  .gvp-hero {
    height: auto !important;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 30px;
    padding: clamp(92px, 24vw, 150px) var(--gvp-gx) 26px;
  }

  .gvp-hero-block {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
    flex-wrap: wrap;
    row-gap: 14px;
    /* These were pinned to the stage edge; in flow they need a real gutter. */
    padding-left: var(--gvp-gx);
    padding-right: var(--gvp-gx);
  }

  /* ...except inside the homepage stage, which already carries the gutter. */
  .gvp-hero .gvp-hero-block {
    padding-left: 0;
    padding-right: 0;
  }

  /* The panel's actions are right-aligned against the desktop stage edge. */
  .gvp-hero-block > div { justify-content: flex-start !important; }


  /* ---- Touch targets ----------------------------------------------------- */

  .gvp-tap {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Accordion rows, goal and service pickers: kill the 300ms tap delay. */
  #dc-root [role], #dc-root a, #dc-root button { touch-action: manipulation; }
}


/* ==========================================================================
   Smallest phones
   ========================================================================== */

@media (max-width: 480px) {

  /* Wide tracking on the mono labels is what pushes narrow rows to overflow. */
  .gvp-track { letter-spacing: .18em !important; }

  /* Side-by-side contact buttons are easier to hit at full width. */
  .gvp-tap-block {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   Motion
   ==========================================================================
   The design leans on long entrance choreography, marquees and filter-based
   transitions. On a phone those share a compositor with scrolling, and some
   visitors ask their OS not to animate at all. */

@media (max-width: 900px) {

  /* The montage fades out with a blur+scale filter over the whole stage; it is
     hidden at this width, so skip the transition rather than compositing it. */
  .gvp-hero-mosaic { animation: none !important; opacity: 0 !important; }

  /* Marquee durations are tuned to travel a 1180px stage. At phone width the
     same duration reads as a sprint. */
  .gvp-marquee { animation-duration: 52s !important; }

  /* A 22s looping scale on the full-bleed hero video repaints for the life of
     the page. Keep the one-shot reveal, drop the loop. */
  .gvp-hero-video { animation: gvpReveal 1s ease-out .25s forwards !important; }

  /* The hero entrance is choreographed to land after the boot splash and the
     montage, ~4.3s in. The splash only plays on a first visit and the montage
     is hidden here, so those delays would leave a returning visitor looking
     at an empty stage. */
  .gvp-delay-1 { animation-delay: .35s !important; }
  .gvp-delay-2 { animation-delay: .5s !important; }
  .gvp-delay-3 { animation-delay: .65s !important; }
  .gvp-delay-4 { animation-delay: 1.2s !important; }
  .gvp-delay-5 { animation-delay: 1.3s !important; }
}

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }

  /* Entrance keyframes begin hidden and translated. With the animation gone,
     the resting state has to be the end state, not the start. */
  .gvp-enter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}