/* Responsive page sizing system - 20260803 */
:root {
  --ts-page-gutter: clamp(18px, 3vw, 48px);
  --ts-page-shell: min(1180px, calc(100% - (var(--ts-page-gutter) * 2)));
  --ts-section-y: clamp(44px, 6vw, 86px);
  --ts-card-gap: clamp(16px, 2.2vw, 28px);
  --ts-hero-copy-max: 540px;
  --ts-hero-radius: 0px;
}

.catalog-page,
.mitra-page main,
.reseller-page main,
.garut-page main,
.about-page main {
  overflow-x: clip;
}

.catalog-content,
.mitra-container,
.mitra-desktop-container,
.reseller-container,
.garut-container,
.about-container,
.about-hero-inner,
.garut-hero-inner {
  width: var(--ts-page-shell);
  max-width: none;
}

.ts-responsive-hero,
.catalog-hero,
.reseller-hero,
.garut-hero,
.about-hero,
.mitra-desktop-showcase,
.mitra-hero {
  min-height: auto;
}

.ts-responsive-hero-picture,
.catalog-hero-picture,
.mitra-hero-picture,
.reseller-hero > picture,
.garut-hero-picture,
.about-hero-picture {
  display: block;
  overflow: hidden;
}

.ts-responsive-hero-picture img,
.catalog-hero-picture img,
.mitra-hero-picture img,
.reseller-hero > picture img,
.garut-hero-picture img,
.about-hero-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.catalog-hero.ts-responsive-hero {
  background-image: none;
  aspect-ratio: 2 / 1;
  width: 100%;
  max-height: none;
  min-height: 0;
  padding: 0;
  display: grid;
  align-items: center;
}

.catalog-hero-picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.catalog-hero-text {
  width: var(--ts-page-shell);
  margin-inline: auto;
  padding-block: clamp(42px, 7vw, 92px);
}

.catalog-content {
  padding-block: clamp(28px, 4vw, 56px) var(--ts-section-y);
}

.mitra-desktop-showcase,
.reseller-hero,
.garut-hero,
.about-hero {
  padding-block: var(--ts-section-y);
}

.mitra-desktop-paper,
.mitra-desktop-showcase {
  min-height: auto;
}

.mitra-desktop-hero,
.about-hero-inner,
.garut-hero-inner {
  min-height: 0;
}

.mitra-desktop-hero-art,
.about-hero-visual,
.garut-hero-visual {
  min-width: 0;
}

.mitra-desktop-hero-art .mitra-hero-picture,
.about-hero-picture,
.garut-hero-picture {
  aspect-ratio: 2 / 1;
  width: 100%;
  height: auto;
}

.reseller-hero {
  aspect-ratio: 2 / 1;
  height: auto;
  max-height: none;
  min-height: 0;
  display: grid;
  align-items: center;
}

.reseller-hero > picture {
  position: absolute;
  inset: 0;
}

@media (min-width: 1800px) {
  :root {
    --ts-page-gutter: max(48px, 8vw);
    --ts-page-shell: min(72vw, 4200px);
    --ts-section-y: clamp(86px, 5vw, 240px);
    --ts-card-gap: clamp(28px, 1.8vw, 88px);
  }

  .catalog-hero.ts-responsive-hero,
  .reseller-hero {
    aspect-ratio: 2 / 1;
  }

  .mitra-desktop-hero-art .mitra-hero-picture,
  .about-hero-picture,
  .garut-hero-picture {
    aspect-ratio: 2 / 1;
  }
}

@media (max-width: 1024px) {
  :root {
    --ts-page-gutter: clamp(18px, 4vw, 36px);
    --ts-page-shell: min(100% - (var(--ts-page-gutter) * 2), 920px);
    --ts-section-y: clamp(36px, 6vw, 64px);
  }

  .catalog-hero.ts-responsive-hero,
  .reseller-hero,
  .mitra-desktop-hero-art .mitra-hero-picture,
  .about-hero-picture,
  .garut-hero-picture {
    aspect-ratio: 1024 / 900;
  }
}

@media (max-width: 640px) {
  :root {
    --ts-page-gutter: 16px;
    --ts-page-shell: min(100% - 32px, 430px);
    --ts-section-y: 34px;
    --ts-card-gap: 14px;
  }

  .catalog-hero.ts-responsive-hero,
  .reseller-hero,
  .mitra-desktop-hero-art .mitra-hero-picture,
  .about-hero-picture,
  .garut-hero-picture {
    aspect-ratio: 750 / 1200;
  }

  .catalog-hero-text {
    padding-block: 28px;
    align-self: start;
  }
}
/* About desktop full banner lock - 20260815 */
@media (min-width: 1101px) {
  .about-page .about-hero-inner {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
  }

  .about-page .about-hero-visual,
  .about-page .about-hero-picture,
  .about-page .about-hero-picture img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    display: block;
  }

  .about-page .about-hero-picture img {
    object-fit: cover;
    object-position: center top;
  }
}
/* About desktop hero button room - 20260815 */
@media (min-width: 1101px) {
  .about-page .about-hero-copy {
    width: min(760px, 52vw);
    padding-top: clamp(34px, 3.8vw, 58px);
    padding-bottom: clamp(42px, 5vw, 76px);
    justify-content: center;
  }

  .about-page .about-hero-copy h1 {
    max-width: 620px;
    font-size: clamp(2.45rem, 3.2vw, 3.35rem);
    line-height: 1.1;
  }

  .about-page .about-hero-lead {
    max-width: 600px;
    margin-top: 20px;
  }

  .about-page .about-hero-actions {
    width: min(100%, 430px);
    margin-top: 24px;
    gap: 12px;
    flex-wrap: nowrap;
  }

  .about-page .about-hero-actions .about-button {
    min-width: 0;
    white-space: nowrap;
  }
}