/*
  Shared Dress Story editing system
  ---------------------------------
  Every completed dress page uses these readable structural classes.
  Page-specific values belong in aurora.css, blue-mirage.css, cosmic.css,
  or the clearly labelled page sections in dress-stories.css.
*/

.dress-story-template {
  --hero-text-x: 6vw;
  --hero-text-y: 8vh;
  --section-gap: clamp(64px, 8vh, 104px);
  --media-gap: clamp(14px, 2vw, 30px);
  --section-size: 72svh;
  --media-height: 64vh;
  --image-scale: 1;
  --image-position-x: 50%;
  --image-position-y: 50%;
  --video-position-x: 50%;
  --video-position-y: 50%;
  --text-max-width: none;
  --text-margin-left: 0px;
  --text-margin-top: 0px;
}

/* Reusable page sequence: Hero → Section → Section → Gallery */
.dress-story-hero,
.dress-story-section,
.dress-story-gallery {
  position: relative;
}

.dress-story-text-block {
  max-width: var(--text-max-width);
  margin-left: var(--text-margin-left);
  margin-top: var(--text-margin-top);
}

.dress-story-media {
  --media-fit: cover;
  --media-position-x: var(--image-position-x);
  --media-position-y: var(--image-position-y);
  --media-scale: var(--image-scale);
  overflow: hidden;
  position: relative;
}

.dress-story-media--video {
  --media-position-x: var(--video-position-x);
  --media-position-y: var(--video-position-y);
}

.dress-story-image,
.dress-story-video {
  height: 100%;
  object-fit: var(--media-fit);
  object-position: var(--media-position-x) var(--media-position-y);
  transform: scale(var(--media-scale));
  width: 100%;
}

/* A class hook for paired left/right media without changing existing layouts. */
.story-image-left,
.story-image-right,
.story-video-left,
.story-video-right {
  min-width: 0;
}

@media (max-width: 780px) {
  .dress-story-template {
    --hero-text-x: 24px;
    --hero-text-y: 48px;
    --section-gap: 72px;
    --media-gap: 14px;
    --text-margin-left: 0px;
    --text-margin-top: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dress-story-image,
  .dress-story-video {
    transform: none;
    transition: none;
  }
}