/* Loaded after page styles. Keep editorial images uncropped at every breakpoint.
   Page scopes isolate frames whose original class names overlap between pages. */
body[data-page] img.content-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 680px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}
body[data-page] picture:has(> .content-image) { display: block; }

/* Home: separate the three pictures so neither thumbnails nor labels cover them. */
[data-page="home"] .hero-visual {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 14px;
  height: auto;
  align-items: center;
}
[data-page="home"] .hero-main-shot,
[data-page="home"] .hero-side-shot {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  transform: none;
  border-radius: 20px;
  border-width: 5px;
}
[data-page="home"] .hero-main-shot { grid-column: 1; grid-row: 1 / 3; }
[data-page="home"] .hero-side-shot { grid-column: 2; }
[data-page="home"] .hero-visual-label {
  position: static;
  grid-column: 1 / -1;
  max-width: 100%;
  width: fit-content;
  justify-self: center;
}
[data-page="home"] .hero-art-spark { display: none; }
[data-page="home"] .hero-main-shot::after { content: none; }
[data-page="home"] .service-photo {
  display: grid;
  align-items: center;
  background: #edf6f8;
}
[data-page="home"] .service-card:hover .service-photo img { transform: none; }
[data-page="home"] .service-card--wide { grid-template-columns: minmax(0, 1fr); }
[data-page="home"] .service-card--wide .service-photo { aspect-ratio: 660 / 470; }
[data-page="home"] .steps-media { border-radius: 24px; }

/* Hero badges take their own row below the photo, including on narrow screens. */
[data-page="washing-machine"] .hero-media,
[data-page="air-conditioner"] .hero-media,
[data-page="boiler"] .hero-visual,
[data-page="refrigerator"] .hero-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: auto;
}
[data-page="washing-machine"] .hero-image,
[data-page="air-conditioner"] .hero-photo-wrap,
[data-page="boiler"] .hero-photo,
[data-page="refrigerator"] .photo-frame {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 24px;
  transform: none;
}
[data-page="washing-machine"] .hero-image::after,
[data-page="boiler"] .hero-photo::after { content: none; }
[data-page="washing-machine"] .hero-floating,
[data-page="air-conditioner"] .hero-corner,
[data-page="air-conditioner"] .hero-token,
[data-page="boiler"] .hero-float,
[data-page="refrigerator"] .visual-badge {
  position: static;
  inset: auto;
  max-width: 100%;
  transform: none;
  animation: none;
  margin: 0;
}
[data-page="boiler"] .hero-meter { display: none; }
[data-page="air-conditioner"] .hero-grid { z-index: 1; }
[data-page="air-conditioner"] .hero::before,
[data-page="air-conditioner"] .hero::after { pointer-events: none; }

/* Content frames grow with their photos; a height cap on the image uses contain. */
[data-page="washing-machine"] .aside-image,
[data-page="boiler"] .faults-photo {
  display: block;
  min-height: 0;
  height: auto;
  align-self: start;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
[data-page="washing-machine"] .aside-image::after { content: none; }
[data-page="washing-machine"] .aside-image figcaption,
[data-page="boiler"] .faults-photo figcaption {
  position: static;
  margin: 0;
  border-radius: 0;
  padding: 20px;
  background: #0b3453;
  color: #fff;
}
[data-page="washing-machine"] .why-photo,
[data-page="air-conditioner"] .photo-inner,
[data-page="air-conditioner"] .care-layout figure,
[data-page="boiler"] .editorial-media,
[data-page="boiler"] .install-media,
[data-page="boiler"] .trust-media,
[data-page="refrigerator"] .home-picture {
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 24px;
  background: #edf6f8;
}
[data-page="boiler"] .season-photo,
[data-page="refrigerator"] .models-feature figure {
  display: grid;
  place-items: center;
  height: auto;
  max-height: none;
  background: #edf6f8;
}
[data-page="refrigerator"] .models-feature figure {
  display: block;
  align-self: center;
  min-width: 0;
}

/* Captions remain readable without obscuring faces, tools, or appliance parts. */
[data-page="home"] .media-note,
[data-page="washing-machine"] .image-label,
[data-page="air-conditioner"] .visual-card figcaption,
[data-page="air-conditioner"] .install-badge,
[data-page="air-conditioner"] .care-layout figcaption,
[data-page="boiler"] .media-stamp,
[data-page="boiler"] .install-badge,
[data-page="refrigerator"] .stack-caption,
[data-page="refrigerator"] .case-stamp {
  position: static;
  inset: auto;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  transform: none;
}
[data-page="refrigerator"] .case-stamp { display: block; }
[data-page="boiler"] .media-stamp,
[data-page="boiler"] .install-badge,
[data-page="air-conditioner"] .care-layout figcaption { margin: 0; width: 100%; border-radius: 0; }
[data-page="boiler"] .map-label { position: static; margin: 12px; }

/* Dishwasher: give the photo its intrinsic ratio and place chips underneath. */
[data-page="dishwasher"] .hero-scene {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  aspect-ratio: auto;
  height: auto;
  padding-block: 12px 28px;
}
[data-page="dishwasher"] .hero-photo {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  border-radius: 24px;
  background: #eaf5f7;
}
[data-page="dishwasher"] .hero-photo picture { height: auto; }
[data-page="dishwasher"] .hero-photo::after { content: none; }
[data-page="dishwasher"] .hero-scene-chip {
  position: static;
  inset: auto;
  max-width: 100%;
}

@media (max-width: 600px) {
  [data-page="home"] .hero-visual { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [data-page="home"] .hero-main-shot { grid-column: 1 / -1; grid-row: auto; }
  [data-page="home"] .hero-side-shot { grid-column: auto; max-width: 112px; justify-self: center; }
  [data-page="home"] .hero-visual-label { font-size: 12px; }
  [data-page="home"] .hero-visual-label b { font-size: 12px; }
  [data-page="home"] .hero-visual-label small { font-size: 10px; }
}