/* An editorial mat for photography, in the studio's rose and stone palette.
   The home portrait keeps its original arch and textured composition. */
:root {
  --photo-mat: #eee8e2;
  --photo-line: rgba(118, 64, 70, 0.38);
  --photo-inner-line: rgba(118, 64, 70, 0.18);
  --photo-shadow: 0 12px 28px -18px rgba(77, 43, 45, 0.34);
  --photo-padding: clamp(10px, 1.2vw, 16px);
}

/* Frames use existing image wrappers, including the generated gallery cards. */
.service-image,
.course-feature-image,
.treatment-photo,
.course-experience-visual,
.gallery-card-image {
  position: relative;
  isolation: isolate;
  padding: var(--photo-padding);
  overflow: hidden;
  border: 1px solid var(--photo-line);
  border-radius: 24px 3px 24px 3px;
  background: linear-gradient(135deg, #f2ede7, var(--photo-mat) 58%, #e3d3cf);
  box-shadow: var(--photo-shadow);
}

.service-image::before,
.course-feature-image::before,
.treatment-photo::before,
.course-experience-visual::before,
.gallery-card-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 5px;
  border: 1px solid var(--photo-inner-line);
  border-radius: 19px 1px 19px 1px;
  pointer-events: none;
}

/* Short rose corner strokes sit on the mat, outside the photograph. */
.service-image::after,
.course-feature-image::after,
.treatment-photo::after,
.course-experience-visual::after,
.gallery-card-image::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 5px;
  border-radius: 19px 1px 19px 1px;
  background:
    linear-gradient(var(--primary-light), var(--primary-light)) right top / 24px
      1px no-repeat,
    linear-gradient(var(--primary-light), var(--primary-light)) right top / 1px
      24px no-repeat,
    linear-gradient(var(--primary-light), var(--primary-light)) left bottom /
      24px 1px no-repeat,
    linear-gradient(var(--primary-light), var(--primary-light)) left bottom /
      1px 24px no-repeat;
  pointer-events: none;
}

.service-image > img,
.course-feature-image > video,
.treatment-photo > img,
.treatment-carousel-track > img,
.course-experience-visual > img,
.gallery-card-image > img {
  border-radius: 14px 1px 14px 1px;
}

.treatment-photo.comparison-photo {
  padding: 26px var(--photo-padding) 58px;
}

.course-feature-image > .photo-label,
.treatment-photo > .photo-label {
  left: calc(var(--photo-padding) + 10px);
  bottom: calc(var(--photo-padding) + 10px);
  z-index: 3;
  max-width: calc(100% - 2 * var(--photo-padding) - 20px);
}

.course-experience-visual > .video-trigger {
  left: calc(var(--photo-padding) + 10px);
  right: calc(var(--photo-padding) + 10px);
  bottom: calc(var(--photo-padding) + 10px);
  z-index: 3;
}

/* These images have captions or arched silhouettes. Framing the image itself
   leaves captions and video controls in their original layout. */
.about-preview-image > img,
.course-hero-visual > video,
.about-hero-image > img,
.story-section figure > img,
.result-card > img {
  padding: var(--photo-padding);
  border: 1px solid var(--photo-line);
  outline: 1px solid var(--photo-inner-line);
  outline-offset: -6px;
  background: linear-gradient(135deg, #f2ede7, var(--photo-mat) 58%, #e3d3cf);
  box-shadow: var(--photo-shadow);
}

.story-section figure > img,
.result-card > img {
  border-radius: 24px 3px 24px 3px;
}

.course-hero-visual > .video-trigger {
  left: calc(var(--photo-padding) + 10px);
  right: calc(var(--photo-padding) + 10px);
  bottom: calc(var(--photo-padding) + 10px);
}

.gallery-card-image {
  --photo-padding: clamp(9px, 1vw, 13px);
  border-radius: 20px 3px 20px 3px;
}

.gallery-card-image::before,
.gallery-card-image::after {
  border-radius: 15px 1px 15px 1px;
}

.gallery-card-image > img {
  border-radius: 10px 1px 10px 1px;
}

.gallery-card-expand {
  top: calc(var(--photo-padding) + 8px);
  right: calc(var(--photo-padding) + 8px);
  z-index: 3;
}

.gallery-card-image .play-circle {
  left: calc(var(--photo-padding) + 8px);
  bottom: calc(var(--photo-padding) + 8px);
  z-index: 3;
}

/* Preserve the complete content of comparisons and messages. Their expand
   badge gets its own space on the mat instead of covering the image. */
.gallery-card.contain .gallery-card-image {
  padding-bottom: 36px;
}

.gallery-card.contain .gallery-card-expand {
  top: auto;
  right: 11px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  border-color: var(--photo-line);
  background: transparent;
  font-size: 16px;
  color: var(--primary);
}

/* Keep every hit area and photograph still. The frame alone gains a little
   depth on hover or keyboard focus, without cropping content or flicker. */
.service-preview:hover .service-image,
.gallery-card:hover .gallery-card-image {
  transform: none;
}

.service-preview:hover .service-image > img,
.gallery-card:hover .gallery-card-image > img {
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .service-image,
  .gallery-card-image,
  .result-card > img {
    transition:
      border-color 0.25s ease,
      box-shadow 0.35s ease;
  }
}

.service-preview:focus-visible .service-image,
.gallery-card:focus-visible .gallery-card-image,
.result-card:focus-visible > img {
  border-color: var(--primary);
  box-shadow: 0 16px 30px -18px rgba(77, 43, 45, 0.48);
}

@media (hover: hover) and (pointer: fine) {
  .service-preview:hover .service-image,
  .gallery-card:hover .gallery-card-image,
  .result-card:hover > img {
    border-color: var(--primary-light);
    box-shadow: 0 16px 30px -18px rgba(77, 43, 45, 0.48);
  }
}

@media (max-width: 600px) {
  .gallery-card-image {
    --photo-padding: 9px;
  }

  .gallery-card-image::before,
  .gallery-card-image::after {
    inset: 4px;
  }

  .gallery-card-expand {
    top: calc(var(--photo-padding) + 5px);
    right: calc(var(--photo-padding) + 5px);
  }

  .gallery-card-image .play-circle {
    left: calc(var(--photo-padding) + 5px);
    bottom: calc(var(--photo-padding) + 5px);
  }

  .treatment-photo.comparison-photo {
    padding-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-image,
  .gallery-card-image,
  .result-card > img {
    transition: none;
  }
}