/* Shared responsive shell for mobile, laptop, desktop, 2K and ultrawide screens */
:root {
  --home-content-width: 1320px;
  --home-content-gutter: max(20px, calc((100% - var(--home-content-width)) / 2));
  --responsive-content-gutter: max(clamp(20px, 8.3vw, 128px), calc((100vw - 1320px) / 2));
  --responsive-catalog-gutter: max(clamp(20px, 8.3vw, 128px), calc((100vw - 1220px) / 2));
  --responsive-header-gutter: max(clamp(20px, 4.2vw, 64px), calc((100vw - 1440px) / 2));
}

html, body { max-width: 100%; overflow-x: clip; }
.store-link, .cart-button { text-decoration: none; }
.hero-stage { width: 100%; background: #e8f2fb; }

@media (min-width: 801px) {
  .hero-stage .hero-school { width: 100%; max-width: none; min-height: 0; aspect-ratio: 8 / 3; margin: 0; }
  .hero-stage .hero-copy { height: 100%; min-height: 0; }
}

@media (min-width: 801px) {
  .site-header { padding-left: var(--responsive-header-gutter); padding-right: var(--responsive-header-gutter); }

  .custom-section,
  .proof-section,
  .capability-section,
  .solutions-section { padding-left: var(--responsive-content-gutter); padding-right: var(--responsive-content-gutter); }

  .ai-inside { grid-template-columns: 1fr 1fr; padding-left: var(--responsive-content-gutter); padding-right: var(--responsive-content-gutter); }
  .ai-copy { padding-left: clamp(45px, 5vw, 82px); padding-right: clamp(30px, 4vw, 68px); }

  footer { padding-left: var(--responsive-content-gutter); padding-right: var(--responsive-content-gutter); }

  .secondary-page .inner-hero,
  .secondary-page .inner-content { padding-left: var(--responsive-catalog-gutter); padding-right: var(--responsive-catalog-gutter); }

  .secondary-page .secondary-grid,
  .secondary-page .honor-grid,
  .secondary-page .honors-block,
  .secondary-page .solution-detail-grid,
  .secondary-page .process-line { width: 100%; }
}

@media (min-width: 1600px) {
  .hero-stage .hero-school { width: 100%; max-width: none; min-height: 0; aspect-ratio: 8 / 3; margin: 0; }
  .hero-stage .hero-copy { height: 100%; min-height: 0; padding: 142px 70px 70px clamp(125px, 10vw, 170px); }
}

@media (min-width: 1920px) {
  .hero-stage .hero-copy { padding-top: 166px; }
  .hero-school .hero-title { font-size: 58px; }
  .hero-school .hero-description { font-size: 14px; line-height: 1.75; }

  .category-section { padding-top: 62px; padding-bottom: 92px; }
  .series-tabs { margin-bottom: 48px; }

  .ai-inside, .ai-visual { min-height: 610px; }
  .custom-section, .capability-section { padding-top: 128px; padding-bottom: 128px; }
  .solutions-section { padding-top: 124px; padding-bottom: 132px; }
}

@media (min-width: 801px) and (max-width: 1180px) {
  .site-header { padding-left: 28px; padding-right: 28px; }
  .desktop-nav { gap: 15px; margin-left: 20px; }
  .store-link, .account-button { display: none; }
  .header-actions { gap: 13px; }

  .custom-section, .capability-section { gap: 42px; }
  .solutions-grid { gap: 10px; }
  .solution-card { min-height: 300px; }
}

@media (min-width: 801px) and (max-width: 980px) {
  .desktop-nav { gap: 12px; margin-left: 16px; }
  .desktop-nav a { font-size: 9px; }
  .series-grid { gap: 14px; }
  .series-product-image { height: 330px; }
  .secondary-grid .series-product-image { height: 300px; }
  .ai-copy { padding-left: 38px; padding-right: 28px; }
}

@media (max-width: 800px) {
  :root { --responsive-content-gutter: 20px; --responsive-catalog-gutter: 20px; --responsive-header-gutter: 20px; }
  .site-header { padding-left: 20px; padding-right: 20px; }
}

/* Keep the desktop banner artwork proportional on tablets and phones. */
@media (max-width: 999px) {
  .hero-stage .hero-school { min-height: clamp(620px, 112vw, 760px); aspect-ratio: auto; background: #eef5fb; }
  .hero-stage .hero-copy { height: auto; min-height: 0; padding: 54px 25px 240px; }
  .hero-stage .hero-slide {
    background-color: #eef5fb;
    background-image:
      linear-gradient(180deg, #eef5fb 0%, #eef5fb 46%, rgba(238, 245, 251, .96) 57%, rgba(238, 245, 251, .18) 78%, rgba(238, 245, 251, 0) 100%),
      var(--hero-mobile-image, var(--hero-image));
    background-position: center, center bottom;
    background-size: 100% 100%, 120% auto;
    background-repeat: no-repeat;
  }
  .hero-stage .hero-actions { flex-wrap: wrap; gap: 14px 20px; }
}

@media (max-width: 430px) {
  .site-header { padding-left: 15px; padding-right: 15px; }
}

/* Homepage content frame: backgrounds can remain full-bleed while all content shares one axis. */
@media (min-width: 801px) {
  .home-page .site-header,
  .home-page .hero-stage .hero-copy,
  .home-page .category-section,
  .home-page .ai-inside,
  .home-page .custom-section,
  .home-page .proof-section,
  .home-page .why-section,
  .home-page .capability-section,
  .home-page .solutions-section,
  .home-page footer {
    padding-left: var(--home-content-gutter);
    padding-right: var(--home-content-gutter);
  }
}