/* =========================================================
   PHOTO-MOMENT.CSS
   감성 사진 한 장 섹션
========================================================= */


/* =========================================================
   1. Section
========================================================= */

.photo-moment {
  position: relative;

  width: 100%;

  overflow: hidden;

  background:
    var(--color-paper);
}


/* =========================================================
   2. Photo
========================================================= */

.photo-moment__image {
  position: relative;

  width: 100%;

  min-height:
    clamp(560px, 150vw, 680px);

  overflow: hidden;

  background-color:
    #d9d4d0;

  background-position:
    center;

  background-repeat:
    no-repeat;

  background-size:
    cover;
}


/* =========================================================
   3. Soft Overlay
========================================================= */

.photo-moment__shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(30, 25, 24, 0.04) 0%,
      rgba(30, 25, 24, 0.03) 42%,
      rgba(30, 25, 24, 0.38) 100%
    );

  pointer-events: none;
}


/* =========================================================
   4. Content
========================================================= */

.photo-moment__content {
  position: absolute;

  right: 0;
  bottom:
    clamp(42px, 12vw, 62px);
  left: 0;

  z-index: 1;

  padding:
    0
    clamp(24px, 7vw, 32px);

  text-align: center;
}


/* =========================================================
   5. Small English
========================================================= */

.photo-moment__small {
  margin:
    0 0
    clamp(12px, 3vw, 16px);

  color:
    rgba(255, 255, 255, 0.78);

  font-family:
    "Sometimestimes",
    serif;

  font-size:
    clamp(15px, 2.8vw, 18px);

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    0.18em;
}


/* =========================================================
   6. Message
========================================================= */

.photo-moment__message {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.96);

  font-family:
    "SUIT-ExtraLight",
    sans-serif;

  font-size:
    clamp(15px, 4vw, 18px);

  font-weight: 600;

  line-height:
    1.8;

  letter-spacing:
    -0.015em;

  word-break:
    keep-all;
}


/* =========================================================
   7. Small Mobile
========================================================= */

@media (max-width: 360px) {

  .photo-moment__image {
    min-height:
      540px;
  }

}


/* =========================================================
   8. Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .photo-moment__content {
    opacity: 1;

    transform: none;
  }

}