/* Phase 1.2 refinement layer. The source image is a temporary local lifestyle asset. */

/* Keep the hero spacious while making ordinary content sections more efficient. */
.section { padding-block: 88px; }
.section-heading { margin-bottom: 30px; }
.principle-grid { margin-top: 40px; }

/* Stronger contrast without changing the approved hero composition. */
.hero h1 em { color: #4f6c63; }

/* TEMP_LIFESTYLE_IMAGE contract: replace this single local asset with approved photography later. */
.scene-entry,
.scene-living,
.scene-family,
.scene-kitchen,
.article-lock,
.article-sensor,
.article-basics {
  background-image:
    linear-gradient(145deg, rgba(18, 63, 56, .08), rgba(18, 63, 56, .08)),
    url('assets/hero-temporary.png');
  background-size: cover;
}
.scene-entry { background-position: 74% center; }
.scene-living { background-image: linear-gradient(145deg, rgba(18, 63, 56, .05), rgba(18, 63, 56, .05)), url('assets/scene-apartment-temporary.png'); background-position: center; }
.scene-family { background-image: linear-gradient(145deg, rgba(18, 63, 56, .05), rgba(18, 63, 56, .05)), url('assets/scene-family-temporary.png'); background-position: center; }
.scene-kitchen { background-image: linear-gradient(145deg, rgba(18, 63, 56, .05), rgba(18, 63, 56, .05)), url('assets/scene-kitchen-temporary.png'); background-position: center; }
.article-lock { background-position: 70% center; }
.article-sensor { background-image: linear-gradient(145deg, rgba(18, 63, 56, .05), rgba(18, 63, 56, .05)), url('assets/scene-apartment-temporary.png'); background-position: center; }
.article-basics { background-image: linear-gradient(145deg, rgba(18, 63, 56, .05), rgba(18, 63, 56, .05)), url('assets/scene-family-temporary.png'); background-position: center; }

/* Development-only labels are removed from the consumer view; the asset contract stays in source. */
.asset-note,
.light-note { display: none; }

/* Responsive structure: portrait tablet and mobile lead with the brand message. */
@media (max-width: 900px) {
  .hero-copy { order: 1; }
  .hero-visual { order: 2; }
  .menu-button { width: 44px; height: 44px; display: grid; place-items: center; }
  .trust-item { min-height: 58px; }
}

/* Keep the mobile page efficient without collapsing core editorial cards. */
@media (max-width: 520px) {
  .section { padding-block: 54px; }
  .intro { padding-block: 54px; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .trust-item,
  .trust-item:nth-child(2),
  .trust-item:nth-child(3),
  .trust-item:nth-child(4) { border-right: 0; border-top: 1px solid var(--yjo-border); padding: 13px 0; }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .trust-item { align-items: flex-start; }
  .trust-item .line-icon { margin-top: 2px; }
  .trust-item strong { font-size: 12px; line-height: 1.2; }
  .trust-item small { font-size: 10px; line-height: 1.25; }
  .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
  .principle-grid > div,
  .principle-grid > div:nth-child(2),
  .principle-grid > div:nth-child(3) { border-right: 0; border-top: 1px solid var(--yjo-border); padding: 20px 14px; }
  .principle-grid > div:nth-child(-n+2) { border-top: 0; }
  .principle-grid h3 { font-size: 14px; margin-top: 12px; }
  .principle-grid p { font-size: 12px; }
  .placeholder-note { display: none; }
  .hero h1 { font-size: clamp(42px, 11vw, 48px); }
}

@media (max-width: 900px) {
  .section { padding-block: 72px; }
}

@media (max-width: 520px) {
  .section { padding-block: 58px; }
  .intro { padding-block: 58px; }
}

/* Final cascade overrides: keep portrait layouts text-first and mobile grids compact. */
@media (max-width: 900px) {
  .hero-copy { order: 1; }
  .hero-visual { order: 2; }
  .menu-button { width: 44px; height: 44px; display: grid; place-items: center; }
}

@media (max-width: 520px) {
  .section { padding-block: 54px; }
  .intro { padding-block: 54px; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .trust-item,
  .trust-item:nth-child(2),
  .trust-item:nth-child(3),
  .trust-item:nth-child(4) { border-right: 0; border-top: 1px solid var(--yjo-border); padding: 13px 0; }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .trust-item strong { font-size: 12px; line-height: 1.2; }
  .trust-item small { font-size: 10px; line-height: 1.25; }
  .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
  .principle-grid > div,
  .principle-grid > div:nth-child(2),
  .principle-grid > div:nth-child(3) { border-right: 0; border-top: 1px solid var(--yjo-border); padding: 20px 14px; }
  .principle-grid > div:nth-child(-n+2) { border-top: 0; }
  .principle-grid h3 { font-size: 14px; margin-top: 12px; }
  .principle-grid p { font-size: 12px; }
  .placeholder-note { display: none; }
  .hero h1 { font-size: clamp(42px, 11vw, 48px); }
}