/* Phone overrides. Kept outside tribalhousestudios.css, which the build
   overwrites from the CMS. */

/* Backdrop blur re-samples and re-blurs what is behind it every frame, which is
   expensive on a phone GPU, most of all over the animated hero canvas. The
   panels keep their tint. */
@media screen and (max-width: 767px) {
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .hero-vid-bg { background-color: #ffffff24; }
}

/* Titles: the desktop type scale is roughly twice what a 390px screen can
   carry. Sizes are vw-based so they track the screen. */
@media screen and (max-width: 767px) {
  body .h-display { font-size: 8vw; }
  body .h-large { font-size: 9.5vw; }
  body .h-medium,
  body .tribal-legal-combined .tribal-legal-policy-heading .h-medium { font-size: 8vw; }
  body .h-price { font-size: 10.8vw; }
  body .h-small { font-size: 5.4vw; }
  body .h-s,
  body .tribal-services-reel .tribal-services-slider .chapters__card-top-inner .h-s { font-size: 5.6vw; }
  body .tribal-projects-home-hero .h-xl { font-size: 7vw; }
  body .tribal-contact-work__title { --font-size: 8.7vw; }
  body .tribal-services-reel__title-line { font-size: 7.7vw; }
  body .about-hero-heading,
  body .about-hero-heading.st-font.custom-max,
  body .blog-h1,
  body .main-header,
  body .join-career { font-size: 7vw; }
  body.tribal-route--project-detail .project-hero h1[data-load-heading],
  body [data-barba="container"] h1:not([class*="h-"]),
  body [data-barba="container"] h4.st-font { font-size: 7vw; }
}

/* Footer wordmark and divider dots */
@media screen and (max-width: 767px) {
  /* The wordmark was sized for desktop (34em) and ran off the right edge. */
  body .footer-logo { width: 100%; margin-top: 0; }
  body .about-divider-img { width: 1.1em; height: 1.1em; }
  body .about-divider-logo { width: 1.8em; height: 1.8em; }
}

/* Contact page */
@media screen and (max-width: 767px) {
  body .tribal-contact-work__title,
  body .tribal-contact-work__title-link {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  /* SplitText writes text-align inline on each line. */
  body .tribal-contact-work__title-link .single-line { text-align: center !important; }

  /* The 256px desktop gutters left a screen of empty space between blocks. */
  body .tribal-contact-pageflow .container.c-pad-top { padding-top: 7rem; }
  body .tribal-contact-pageflow section:not(.u--rel) .container.c-pad-top { padding-top: 1.5rem; }
  body .tribal-contact-pageflow .text-container.text-center { margin-bottom: 0; }

  /* Form first, then the enquiries card. */
  body .tribal-contact-shell { display: flex; flex-direction: column; }
  body .tribal-contact-form-card { order: -1; }

  /* Enquiries card: just the heading, small. */
  body .tribal-contact-copy .tribal-contact-body,
  body .tribal-contact-copy .p-small { display: none; }
  body .tribal-contact-copy .h-small { font-size: 4vw; }

  body .tribal-contact-input,
  body .tribal-contact-input::placeholder { font-size: 16px; }
}

/* Phones do not mount the rocks scene (see Base.astro), so show the photo it
   would have been drawn over. */
@media screen and (max-width: 767px) {
  body .rock-wrap > img.image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
  }
}

/* Page-wide atmosphere layers.
   Every page container carries a ::before (an animated GIF grain at 3% opacity)
   and an ::after (two soft glows with blur(110px)), each as tall as the whole
   page: about 390 x 11,000 css px on the home page. On a phone that is a
   layer of ~38 million device pixels with a blur on it, and an animated image
   repainting across it. The grain is invisible at 3% and the glows are already
   gradients, so drop the GIF and the blur. */
@media screen and (max-width: 767px) {
  body [data-barba-namespace]::before,
  body [data-barba-namespace="projects"] main.section::before,
  body .tribal-contact-pageflow__bg::before,
  body .background-grain {
    background-image: none;
  }
  body [data-barba-namespace]::after,
  body [data-barba-namespace="projects"] main.section::after,
  body .tribal-contact-pageflow__bg::after,
  body .tribal-contact-work__glow {
    filter: none;
  }
}

/* Phones do not run the hero WebGL scene (see Base.astro). Show a frame of it. */
@media screen and (max-width: 767px) {
  body .bg-wrapper[data-scene-static="landing"],
  body .bg-wrapper[data-us-project-src$="/landing-bg.json"] {
    background: url("/scenes/hero-glow-phone.webp") center top / cover no-repeat;
  }
  body .bg-wrapper[data-scene-static="rocks"] {
    background: url("/assets/runtime/scenes/images/bg-rocks.webp") center / cover no-repeat;
  }
}

/* Testimonial selector: six circles at the tablet size (3em, 64px) are wider
   than a phone and wrapped onto two rows. Scale them with the screen so the
   row stays on one line, down to a 320px screen. */
@media screen and (max-width: 767px) {
  .trusted-nav__list { flex-wrap: nowrap; }
  .trusted-nav-item { width: min(3em, 12.5vw); height: min(3em, 12.5vw); flex-shrink: 0; }
}

/* "Get started on a project" drawer. In contact mode the panel is width:100%
   anchored .625em from the right, so on a phone it hung .625em off the left
   edge; and the title glow (33rem wide, 3rem past the right edge) made the
   panel scroll sideways. Inset it on both sides and clip the glow. */
@media screen and (max-width: 767px) {
  .modal-wrap[data-modal-state="contact"] .sidebar,
  .modal-wrap .sidebar:has([data-modal="contact"][style*="display: flex"]) {
    left: .625em;
    right: .625em;
    width: auto;
    max-width: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
}