/* Approved warm composition: fluid sections, bounded text, unchanged assets.
   One DOM order on every width. Catalogue density is independent of home. */
body[data-route-id="page:home"] .approved-home .wrap,
body[data-route-id="page:home"] .site-header,
body[data-route-id="page:home"] .mobile-menu {
  width: min(2560px, calc(100% - var(--space) * 2));
}

.approved-home .approved-directions {
  container-type: inline-size;
  container-name: home-directions;
}

.approved-home .services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.approved-home .service-card {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
  min-height: 160px;
}

.approved-home .service-card > .card-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  align-self: stretch;
  object-fit: cover;
  object-position: center;
}

.approved-home .service-card > div {
  min-width: 0;
  padding: 20px 44px 20px 24px;
}

.approved-home .home-hero {
  min-height: clamp(470px, 28vw, 512px);
}

.approved-home .hero-copy {
  width: 63%;
  max-width: 860px;
}

.approved-home .hero-photo-stage {
  width: min(64%, 768px);
  height: auto;
  aspect-ratio: 3 / 2;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
}

.approved-home .hero-photo-stage > img:not(.hero-scene-mark) {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}

.approved-home .hero-actions .button {
  width: 288px;
  max-width: 100%;
  min-height: 60px;
  font-size: 20px;
  padding: 14px 24px;
}

/* Balance the copy within the left part of an ultrawide banner. The approved
   photograph stays at its useful pixel size; the extra width becomes an
   intentional composition instead of one empty gap between copy and image. */
@media (min-width: 2200px) {
  .approved-home .hero-copy {
    margin-inline-start: max(0px, calc((100% - 768px - 860px) / 2));
  }
}

@container home-directions (min-width: 1536px) {
  .approved-home .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 24px;
  }
  .approved-home .service-card {
    min-height: 184px;
  }
}

@media (max-width: 759px) {
  .approved-home .services-grid,
  [data-composition="clear"] .approved-home .services-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .approved-home .service-card,
  [data-composition="clear"] .approved-home .service-card {
    grid-template-columns: clamp(84px, 28vw, 160px) minmax(0, 1fr);
    min-height: 124px;
  }
  .approved-home .service-card > div {
    padding: 16px 42px 16px 16px;
  }
  .approved-home .home-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    isolation: auto;
  }
  .approved-home .hero-copy {
    order: 1;
    width: 100%;
    max-width: 100%;
    padding: 10px 0 0;
  }
  .approved-home .hero-copy h1 {
    font-size: clamp(36px, 7.5vw, 54px);
    line-height: 1.04;
    margin: 16px 0;
  }
  .approved-home .hero-image {
    position: relative;
    inset: auto;
    order: 2;
    z-index: auto;
    aspect-ratio: 1.4;
    min-height: 0;
    overflow: hidden;
    border-radius: 8px;
    margin-top: 14px;
  }
  .approved-home .hero-photo-stage {
    /* Keep the approved close-up on phones, but never stretch the 1536 px
       source beyond its useful 768 CSS px at DPR 2 on wider mobile windows. */
    width: min(170%, 768px);
    height: auto;
    left: auto;
    right: 0;
  }
  .approved-home .hero-image::after {
    display: none;
  }
  .approved-home .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}

/* Catalogue consumes the available window; text and forms retain their caps. */
body[data-route-id^="catalog:"] .catalog-page,
body[data-route-id^="catalog:"] .site-header,
body[data-route-id^="catalog:"] .mobile-menu {
  width: calc(100% - var(--space) * 2);
}

#energia-catalog-client .eb-product-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

#energia-catalog-client .eb-product-grid .eb-product {
  min-width: 0;
  width: 100%;
}

#energia-catalog-client .eb-product-copy,
#energia-catalog-client .eb-product-copy h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#energia-catalog-client .eb-quick-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

#energia-catalog-client .eb-detail-photo,
#energia-catalog-client .eb-preview-photo {
  max-width: 460px;
  margin-inline: auto;
}

@media (max-width: 800px) {
  #energia-catalog-client .eb-product-grid,
  #energia-catalog-client .eb-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 360px) {
  #energia-catalog-client .eb-product-grid,
  #energia-catalog-client .eb-quick-grid {
    gap: 9px;
  }
}