/* ARCHIMETRICA 487: clean hero, a two-column tablet gallery and seamless navigation. */

/* The first frame must show the architectural film/poster, never the legacy
   surveying pattern exposed by the old 1.1-second reveal delay. */
body[data-page="home"] .creative-hero,
body[data-page="home"] .intro-noise {
  background-image: none !important;
}

body[data-page="home"] .creative-hero {
  background-color: #050505 !important;
}

body[data-page="home"] .creative-hero .hero-frame {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}

@media (min-width: 600px) and (max-width: 1180px) {
  /* The default tablet view keeps two full project cards and their captions.
     The explicit compact toggle remains available as a separate user choice. */
  body[data-page="home"] #projects > [data-home-projects-grid]:not(.is-compact) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  body[data-page="home"] #projects > [data-home-projects-grid]:not(.is-compact) > .project-card {
    width: auto !important;
    min-width: 0 !important;
    grid-column: auto !important;
    margin: 0 !important;
  }

  /* Keep the overlay outside the blended header: Safari otherwise clips the
     navigation background into a darker horizontal band at the top. */
  body[data-page="home"].menu-open::after {
    position: fixed !important;
    inset: 0 !important;
    z-index: 998 !important;
    display: block !important;
    width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    content: "" !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.54) !important;
  }

  body[data-page="home"].menu-open .creative-hero,
  body[data-page="home"].menu-open .site-header {
    background-color: transparent !important;
  }

  body[data-page="home"].menu-open .site-header {
    z-index: 1001 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Keep the opening film edge-to-edge instead of exposing a black top strip. */
  body[data-page="home"].menu-open .creative-hero .hero-frame {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    clip-path: none !important;
    animation: none !important;
    opacity: 1 !important;
    z-index: 0 !important;
  }

  body[data-page="home"].menu-open .creative-hero .hero-frame .hero-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
  }

  body[data-page="home"].menu-open .creative-hero .hero-shade {
    z-index: 1 !important;
  }

  body[data-page="home"].menu-open .site-header .site-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1002 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: clamp(3px, 0.75svh, 9px) !important;
    min-height: 0 !important;
    padding:
      calc(clamp(118px, 13svh, 154px) + env(safe-area-inset-top))
      max(32px, 4vw, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(32px, 4vw, env(safe-area-inset-left)) !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body[data-page="home"].menu-open .site-header .site-nav::before,
  body[data-page="home"].menu-open .site-header .site-nav::after {
    display: none !important;
    content: none !important;
  }

  body[data-page="home"].menu-open .site-header .site-nav > a {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(5px, 0.8svh, 10px) 0 !important;
    font-size: clamp(40px, 6.5vw, 62px) !important;
    font-weight: 200 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body[data-page="home"].menu-open .site-header .site-nav > .language--menu {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    min-height: 28px !important;
    margin: clamp(10px, 1.65svh, 18px) 0 0 !important;
    padding: 0 !important;
    gap: 0.42em !important;
    font-size: clamp(14px, 1.7vw, 18px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body[data-page="home"].menu-open .site-header .site-nav > .language--menu button,
  body[data-page="home"].menu-open .site-header .site-nav > .language--menu b,
  body[data-page="home"].menu-open .site-header .site-nav > .language--menu span,
  body[data-page="home"].menu-open .site-header .site-nav > .language--menu i {
    position: static !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    transform: none !important;
  }

  body[data-page="home"].menu-open .site-header .menu-toggle {
    position: relative !important;
    z-index: 1004 !important;
  }

  /* Make room below UA / RU / EN without changing the closed first screen. */
  body[data-page="home"].menu-open .creative-hero .hero-content {
    position: relative !important;
    z-index: 2 !important;
    transform: translate3d(0, clamp(70px, 9svh, 108px), 0) !important;
  }
}

@media (min-width: 600px) and (max-width: 760px) {
  body[data-page="home"].menu-open .site-header .site-nav {
    padding-top: calc(clamp(104px, 12svh, 136px) + env(safe-area-inset-top)) !important;
  }

  body[data-page="home"].menu-open .site-header .site-nav > a {
    font-size: clamp(38px, 7vw, 53px) !important;
  }

  body[data-page="home"].menu-open .creative-hero .hero-content {
    transform: translate3d(0, clamp(58px, 8svh, 88px), 0) !important;
  }
}