/* Phone adjustments are isolated from the approved desktop layout. */
@media (max-width: 760px) {
  body {
    isolation: isolate;
    background-image: none;
  }

  body::before {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("../0_Images/Background/cadosky-architectural-bg-v1-extended.jpg") center top / cover no-repeat;
  }

  #home .plan-slide .home-scroll-video.has-mobile-alpha {
    display: none !important;
  }

  #home .plan-slide :is(.home-mobile-poster, .home-mobile-canvas) {
    grid-area: 2 / 1 !important;
    position: relative !important;
    width: min(100%, 520px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
    background: transparent !important;
    pointer-events: none;
  }

  #home .plan-slide .home-mobile-canvas,
  #home .plan-slide .home-mobile-poster.is-decoded {
    opacity: 0 !important;
  }

  #home .plan-slide .home-mobile-poster,
  #home .plan-slide .home-mobile-canvas.is-ready {
    opacity: 1 !important;
  }

  #home .plan-slide .home-mobile-decoder {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .pillar-scroll-stage,
  .pillar-scroll-section.is-pinned .pillar-scroll-stage,
  .pillar-scroll-section.is-past .pillar-scroll-stage {
    display: grid !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-content: start !important;
    gap: 48px !important;
  }

  .pillar-heading {
    grid-row: 1 !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }

  .pillar-heading h2,
  .pillar-heading h2 .editable-content,
  body.global-font-active .pillar-heading h2,
  body.global-font-active .pillar-heading h2 .editable-content {
    font-size: 36px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .pillar-stage {
    grid-row: 2 !important;
    inset: auto !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }

  .pillar-number { display: none !important; }

  .pillar-copy h3,
  .pillar-copy h3 .editable-content {
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }

  .project-gallery-stack {
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .work-gallery {
    min-height: 0 !important;
    perspective: none;
    overscroll-behavior: auto;
  }

  .work-carousel {
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    grid-template-rows: min(48svh, 390px) !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 0 !important;
    padding: 16px 0 !important;
    user-select: none;
    -webkit-user-select: none;
    transition:
      grid-template-columns 620ms ease-in-out,
      grid-template-rows 620ms ease-in-out;
  }

  .work-carousel.is-focused {
    grid-template-columns: 0px minmax(0, 1fr) 0px !important;
    grid-template-rows: min(70svh, 560px) !important;
  }

  .work-carousel-single,
  .work-carousel-single.is-focused {
    grid-template-columns: 1fr !important;
  }

  .work-carousel .carousel-card-active.carousel-image-only,
  .work-carousel.is-focused .carousel-card-active.carousel-image-only {
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    translate: var(--mobile-drag-x, 0px) 0;
    pointer-events: auto !important;
    transition: translate 180ms ease !important;
  }

  .work-carousel-single .carousel-card-active.carousel-image-only,
  .work-carousel-single.is-focused .carousel-card-active.carousel-image-only {
    grid-column: 1 !important;
  }

  .work-carousel.is-mobile-dragging .carousel-card-active {
    transition: none !important;
  }

  .work-carousel .carousel-side {
    grid-row: 1 !important;
    width: 48px !important;
    min-height: 100px !important;
    transition: opacity 320ms ease, visibility 320ms;
  }

  .work-carousel.is-focused .carousel-side {
    position: relative !important;
    min-width: 0;
    max-width: 100%;
  }

  .work-gallery[data-carousel-motion] .carousel-card-active {
    animation: mobile-carousel-in 320ms ease-out both;
  }

  .mobile-reveal {
    opacity: 0 !important;
    translate: 0 12px;
    transition: opacity 320ms ease, translate 320ms ease !important;
  }

  .mobile-reveal.is-mobile-visible,
  .mobile-reveal:focus-within {
    opacity: 1 !important;
    translate: 0 0;
  }

}

@keyframes mobile-carousel-in {
  from { opacity: .4; }
  to { opacity: 1; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mobile-reveal {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }

  .work-carousel,
  .work-carousel * {
    animation: none !important;
    transition: none !important;
  }
}