/* Phone fixes loaded after site.css (task 4): the page stays as designed, only the seams go. */

/* The glow behind a hero is strongest at its lower edge and was cut there by a straight line; on a phone, where the
   next block follows at once, that line showed as a seam. The glow now fades out toward the bottom edge. */
@media (max-width: 860px) {
  .aurora {
    -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent);
    mask-image: linear-gradient(180deg, #000 65%, transparent);
  }

  /* The tilted panels (and their shadows) are cut by the lower edge of their box. On a screen whose pixel ratio makes that edge
     fall inside a device pixel (2.625 of many phones, a tablet) the cut showed as a one-pixel line across the page in both
     themes. The lower 28 px fade out instead, so there is no cut to see. */
  .stage3d {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  }
}

/* Footer (09.11.2026, approved by the customer through Alexander): the "Access" column is gone and the mail address stands in the
   bottom strip between the copyright and the visit counter, on one line. The columns are Company, Project, Contact: from 901 px
   three equal columns (the four of them were 100-150 px wide, so "Trade Navigator Global" broke). */
@media (min-width: 901px) {
  .foot-cols { grid-template-columns: repeat(3, 1fr); }
}
.foot-base .foot-mail { color: #fff; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); }

/* Footer on a phone (up to 520 px): "Trade Navigator Global" filled its column to the last pixel and was cut on some phones; the
   gap between the two columns is smaller, which gives each column a few more pixels. */
@media (max-width: 520px) {
  .foot-cols { column-gap: 16px; }
}

/* The three panels of the first screen (projects, map, TNG+ Review) on a phone: one under another, full width, no tilt and no
   cut at the edges (Valida's approval, 09.11.2026). The script still animates #panels (tilt and move on load and on scroll), so
   the transform and the opacity are fixed with !important; the box of the stage no longer clips or fades what is inside. The 72 px under the last panel let its shadow fade out before
   the lower edge of the first screen, otherwise the edge cuts the shadow and shows as a line in the light theme. */
@media (max-width: 600px) {
  .stage3d { height: auto; margin-top: 32px; perspective: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .stage3d::after { display: none; }
  .panels { position: static; width: auto; height: auto; transform: none !important; opacity: 1 !important;
            display: flex; flex-direction: column; gap: 16px; padding: 0 16px 72px; }
  .panel { position: static; width: auto !important; height: auto !important; left: auto; top: auto; }
}