/* Viewport adaptation only. Tokens, radii, colors, and type scale stay in
   modernist.css / home.css. Breakpoints: 1024 tablet, 768 phone. */

@media (max-width: 1024px) {
  :root {
    --sj-header-h: 72px;
    --sj-header-h-condensed: 60px;
  }

  body.sj-nav-open {
    overflow: hidden;
  }

  .sj-container {
    padding: 0 24px;
  }

  .sj-container--nav {
    padding: 0 20px;
  }

  .sj-topbar__inner {
    height: auto;
    min-height: 40px;
    padding: 8px 0;
    gap: 12px;
  }

  .sj-topbar__left,
  .sj-topbar__right {
    gap: 14px;
  }

  .sj-topbar__left span:first-child {
    display: none;
  }

  .sj-nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    flex: none;
    align-self: center;
    background: transparent;
    border: 1px solid var(--color-divider);
    color: var(--color-text);
    cursor: pointer;
  }

  .sj-nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .sj-header.is-open .sj-nav-toggle {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .sj-header.is-open .sj-nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .sj-header.is-open .sj-nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .sj-header.is-open .sj-nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .sj-header__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 70;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--sj-header-h) - 40px);
    overflow-y: auto;
    padding: 8px 20px 28px;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-divider);
  }

  .sj-header.is-open .sj-header__panel {
    display: flex;
  }

  .sj-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .sj-nav__item {
    flex-direction: column;
    align-items: stretch;
  }

  .sj-nav__item > a {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .sj-nav__item > a:hover,
  .sj-nav__item.is-active > a,
  .sj-nav a.is-active {
    border-bottom-color: var(--color-accent);
  }

  .sj-nav__item--has-dropdown:hover .sj-nav__dropdown,
  .sj-nav__item--has-dropdown:focus-within .sj-nav__dropdown {
    opacity: 0;
    visibility: hidden;
    transform: none;
    display: none;
  }

  .sj-nav__dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 8px 16px;
    border: 0;
    box-shadow: none;
    background: transparent;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .sj-nav__item.is-open > a .sj-nav__caret {
    transform: rotate(180deg);
    opacity: 1;
  }

  .sj-nav__item.is-open .sj-nav__dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .sj-nav__dropdown a {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .sj-header__actions {
    flex-wrap: wrap;
    padding-top: 16px;
  }

  .sj-search {
    flex: 1;
    min-width: 0;
  }

  .sj-search input {
    width: 100%;
    flex: 1;
  }

  .sj-hero,
  .sj-hero__slide img {
    height: 520px;
  }

  .sj-hero__title {
    font-size: 44px;
  }

  .sj-hero__body {
    font-size: 16px;
    margin-bottom: 28px;
  }

  .sj-hero__accent {
    height: 48px;
    margin-bottom: 20px;
  }

  .sj-section__inner {
    padding: 64px 0;
  }

  .sj-section__title {
    font-size: 32px;
  }

  .sj-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }

  .sj-stats__grid,
  .sj-about__features,
  .sj-products__grid,
  .sj-products__grid--3,
  .sj-strength__grid,
  .sj-feature-grid,
  .sj-team-grid,
  .sj-honor-grid,
  .sj-service-grid,
  .sj-scene-grid,
  .sj-gallery,
  .sj-sitemap,
  .sj-culture__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sj-about__grid,
  .sj-certs,
  .sj-cases__grid,
  .sj-contact__grid,
  .sj-split,
  .sj-culture__vision,
  .sj-about-page__intro,
  .sj-job-detail {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sj-partners__grid,
  .sj-about-page__stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .sj-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 56px 0 32px;
  }

  .sj-org__level,
  .sj-org__details {
    grid-template-columns: repeat(2, 1fr);
  }

  .sj-stats__item,
  .sj-stats__item:first-child,
  .sj-stats__item:last-child {
    padding: 32px 24px;
    border-right: 1px solid #1e3550;
  }

  .sj-about__feature,
  .sj-about__feature:first-child,
  .sj-about__feature:last-child {
    padding: 24px 20px 20px;
    border-right: 1px solid var(--color-divider);
  }

  .sj-about__figure img,
  .sj-case-card img,
  .sj-gallery--factory img,
  .sj-video img,
  .sj-video video,
  .sj-map {
    height: 320px;
  }

  .sj-page-hero {
    height: 280px;
  }

  .sj-page-hero__title {
    font-size: 36px;
  }

  .sj-page-hero__accent {
    height: 36px;
    margin-bottom: 16px;
  }

  .sj-page-nav__list {
    -webkit-overflow-scrolling: touch;
  }

  .sj-page-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 56px 0;
    gap: 24px;
  }

  .sj-page-cta h2 {
    font-size: 26px;
  }

  .sj-contact__form {
    padding: 28px;
  }

  .sj-timeline__item {
    grid-template-columns: 88px 1fr;
    gap: 24px;
    padding-left: 28px;
  }

  .sj-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .sj-spec {
    min-width: 560px;
  }

  .sj-404 {
    padding: 80px 0 64px;
  }

  .sj-404__code {
    font-size: 64px;
  }
}

@media (max-width: 768px) {
  .sj-container,
  .sj-container--nav {
    padding: 0 20px;
  }

  .sj-logo__name {
    font-size: 20px;
  }

  .sj-header.is-scrolled .sj-logo__name {
    font-size: 18px;
  }

  .sj-header__panel {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sj-hero,
  .sj-hero__slide img {
    height: 420px;
  }

  .sj-hero__title {
    font-size: 32px;
  }

  .sj-hero__body {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .sj-hero__actions {
    flex-wrap: wrap;
  }

  .sj-hero__controls .sj-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
  }

  .sj-hero__dots button {
    width: 36px;
  }

  .sj-stats__grid,
  .sj-about__features,
  .sj-products__grid,
  .sj-products__grid--3,
  .sj-strength__grid,
  .sj-feature-grid,
  .sj-team-grid,
  .sj-honor-grid,
  .sj-service-grid,
  .sj-gallery,
  .sj-sitemap,
  .sj-culture__grid,
  .sj-scene-grid,
  .sj-partners__grid,
  .sj-form-grid,
  .sj-org__level,
  .sj-org__details,
  .sj-footer__grid {
    grid-template-columns: 1fr;
  }

  .sj-about-page__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .sj-news__item,
  .sj-list__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
  }

  .sj-news__tag,
  .sj-list__tag {
    text-align: left;
  }

  .sj-section__inner {
    padding: 48px 0;
  }

  .sj-section__title {
    font-size: 26px;
  }

  .sj-stats__value strong {
    font-size: 36px;
  }

  .sj-about-page__stat strong {
    font-size: 28px;
  }

  .sj-about__figure img,
  .sj-case-card img,
  .sj-gallery img,
  .sj-gallery--factory img,
  .sj-video img,
  .sj-video video,
  .sj-culture__vision img,
  .sj-map {
    height: 240px;
  }

  .sj-product-card img {
    height: 200px;
  }

  .sj-page-hero {
    height: 220px;
  }

  .sj-page-hero__title {
    font-size: 28px;
  }

  .sj-page-hero__desc {
    font-size: 14px;
  }

  .sj-page-nav__list a {
    padding: 14px 16px;
  }

  .sj-page-cta__inner {
    padding: 44px 0;
  }

  .sj-page-cta h2 {
    font-size: 22px;
  }

  .sj-page-cta__actions {
    flex-wrap: wrap;
  }

  .sj-contact__form {
    padding: 20px;
  }

  .sj-contact__phone {
    font-size: 22px;
  }

  .sj-footer__bottom .sj-container,
  .sj-pager,
  .sj-404__actions,
  .sj-map__bar,
  .sj-about__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .sj-timeline__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 0 36px 28px;
  }

  .sj-timeline__year {
    font-size: 22px;
  }

  .sj-404 {
    padding: 64px 0 48px;
  }

  .sj-404__code {
    font-size: 52px;
  }

  .sj-404 h1 {
    font-size: 26px;
  }

  .sj-news__filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}