/**
 * Full Width Image Component
 *
 * Contained at site max-width, matching other components.
 * Supports a background-image rendering mode (when a height is set or
 * background-attachment is fixed) with preset heights and parallax.
 */

.doghouse-full-width-image {
  margin: var(--site-space-xl) auto;
  max-width: var(--site-container-max-width);
  padding: 0 var(--site-container-padding);
}

.doghouse-full-width-image__media,
.doghouse-full-width-image__media > *,
.doghouse-full-width-image__media img {
  display: block;
  width: 100%;
  height: auto;
}

.doghouse-full-width-image__media img {
  border-radius: var(--site-radius-lg);
}

/* Background-image rendering mode */
.doghouse-full-width-image--bg .doghouse-full-width-image__media {
  position: relative;
  width: 100%;
  border-radius: var(--site-radius-lg);
  background-position: center center;
  background-repeat: no-repeat;
}

/* Background fit variants */
.doghouse-full-width-image--fit-cover .doghouse-full-width-image__media {
  background-size: cover;
}

.doghouse-full-width-image--fit-contain .doghouse-full-width-image__media {
  background-size: contain;
}

/* Rendered image inside bg mode — kept in DOM for SEO/preload, hidden visually.
 * In auto-height mode it lets the natural aspect ratio drive container size;
 * when an explicit height is set, it's pulled out of flow so it doesn't push. */
.doghouse-full-width-image--bg .doghouse-full-width-image__media > * {
  visibility: hidden;
}

/* Height variants — only applied in background-image mode */
.doghouse-full-width-image--height-small .doghouse-full-width-image__media {
  height: 300px;
}

.doghouse-full-width-image--height-large .doghouse-full-width-image__media {
  height: 700px;
}

.doghouse-full-width-image--height-full .doghouse-full-width-image__media {
  height: 100vh;
}

/* Fixed background attachment (parallax). Disabled on touch devices and at
 * narrow widths — iOS/Safari handles background-attachment: fixed poorly and
 * the effect is jarring on small screens. */
@media (min-width: 1024px) and (hover: hover) {
  .doghouse-full-width-image--height-medium .doghouse-full-width-image__media {
    height: 500px;
  }

  .doghouse-full-width-image--fixed .doghouse-full-width-image__media {
    background-attachment: fixed;
  }
}

/* Reduced motion: never use parallax. */
@media (prefers-reduced-motion: reduce) {
  .doghouse-full-width-image--fixed .doghouse-full-width-image__media {
    background-attachment: scroll;
  }
}