/*
 * #Pads4Paps — My Journey visual romance layer
 * Reintroduces the atmospheric 2026 background, framed photography,
 * Women’s Month badge and three-dot image animation without changing
 * the patient-centred voice or underlying booking workflow.
 */

.journey-hero {
  background:
    radial-gradient(circle at 18% 22%, rgba(239,122,168,.22), transparent 30%),
    radial-gradient(circle at 76% 10%, rgba(77,194,201,.24), transparent 33%),
    linear-gradient(180deg,#fff8fb 0%,#fdf1f7 23%,#eaf9f9 72%,#fff 100%);
  padding: clamp(68px,8vw,112px) 0 62px;
  position: relative;
}
.journey-hero::before,
.journey-hero::after {
  border-radius: 50%;
  content: '';
  pointer-events: none;
  position: absolute;
}
.journey-hero::before {
  border: 34px solid rgba(239,122,168,.13);
  bottom: 50px;
  height: 360px;
  left: -190px;
  width: 360px;
}
.journey-hero::after {
  border: 42px solid rgba(77,194,201,.14);
  height: 620px;
  right: -270px;
  top: -330px;
  width: 620px;
}
.journey-hero > .journey-shell { position: relative; z-index: 2; }
.journey-hero__grid { gap: clamp(44px,6vw,82px); }
.journey-hero__visual { min-height: 590px; position: relative; }
.journey-hero__photo {
  background: var(--journey-teal-soft);
  border: 10px solid rgba(255,255,255,.9);
  border-radius: 36px;
  bottom: 48px;
  box-shadow: 0 28px 70px rgba(11,79,87,.18);
  height: auto;
  left: 28px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  right: 8px;
  top: 0;
  transform: rotate(2deg);
}
.journey-hero__photo::after {
  background: linear-gradient(to top,rgba(5,55,61,.84),transparent 58%);
  content: '';
  inset: 0;
  position: absolute;
  z-index: 1;
}
.journey-hero__photo img {
  filter: saturate(.84) contrast(1.04);
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.journey-hero__caption {
  bottom: 30px;
  left: 31px;
  right: 31px;
  z-index: 5;
}
.journey-hero__caption small {
  color: #ffc7db;
  letter-spacing: .15em;
}
.journey-hero__caption strong {
  font-family: Inter,Arial,sans-serif;
  font-size: clamp(1.42rem,2.4vw,2.05rem);
  font-weight: 900;
  letter-spacing: -.025em;
}
.journey-year-badge {
  align-content: center;
  aspect-ratio: 1;
  background: linear-gradient(145deg,var(--journey-rose),#ef5e56);
  border: 8px solid #fff;
  border-radius: 50%;
  box-shadow: 0 18px 38px rgba(200,79,134,.3);
  color: #fff;
  display: grid;
  justify-items: center;
  padding: 17px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -22px;
  transform: rotate(7deg);
  width: 150px;
  z-index: 7;
}
.journey-year-badge small {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.15;
  text-transform: uppercase;
}
.journey-year-badge strong { font-size: 2.2rem; line-height: 1; }
.journey-hero__quote {
  align-items: flex-start;
  background: linear-gradient(135deg,#fff,var(--journey-rose-soft));
  border: 1px solid rgba(239,122,168,.3);
  border-radius: 20px;
  bottom: 0;
  box-shadow: 0 14px 34px rgba(11,79,87,.12);
  display: flex;
  gap: 11px;
  left: 0;
  max-width: 330px;
  padding: 17px 19px;
  position: absolute;
  width: 70%;
  z-index: 7;
}
.journey-hero__quote > span {
  color: var(--journey-rose);
  font-family: Georgia,serif;
  font-size: 2.25rem;
  line-height: .9;
}
.journey-hero__quote p {
  color: #50666a;
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.52;
  margin: 0;
}
.journey-hero__quote strong { color: var(--journey-teal-dark); }
.journey-hero__note {
  background: rgba(255,255,255,.96);
  border-color: rgba(17,110,120,.18);
  left: -12px;
  max-width: 215px;
  top: 92px;
  z-index: 7;
}

/* The original three-dot image moment, now shared by the main story photos. */
.journey-photo-hover {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
.journey-photo-hover::before {
  background:
    radial-gradient(circle,#fff 0 6px,transparent 6.5px) calc(50% - 20px) 50%/12px 12px no-repeat,
    radial-gradient(circle,#fff 0 6px,transparent 6.5px) 50% 50%/12px 12px no-repeat,
    radial-gradient(circle,#fff 0 6px,transparent 6.5px) calc(50% + 20px) 50%/12px 12px no-repeat,
    rgba(5,55,61,.4);
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity .25s ease;
  z-index: 4;
}
.journey-photo-hover img {
  transition: filter .7s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.journey-photo-hover.is-dot-preview::before { opacity: 1; animation: journey-photo-dot-wave .9s ease-in-out infinite; }

@media (any-hover:hover) {
  .journey-photo-hover:hover::before { opacity: 1; animation: journey-photo-dot-wave .9s ease-in-out infinite; }
  .journey-photo-hover:hover img { filter: saturate(.92) contrast(1.04); transform: scale(1.025); }
}

@keyframes journey-photo-dot-wave {
  0%,66.666%,100% {
    background-position: calc(50% - 20px) 50%,50% 50%,calc(50% + 20px) 50%,0 0;
  }
  16.666% {
    background-position: calc(50% - 20px) calc(50% - 10px),50% 50%,calc(50% + 20px) 50%,0 0;
  }
  33.333% {
    background-position: calc(50% - 20px) 50%,50% calc(50% - 10px),calc(50% + 20px) 50%,0 0;
  }
  50% {
    background-position: calc(50% - 20px) 50%,50% 50%,calc(50% + 20px) calc(50% - 10px),0 0;
  }
}

/* Framed editorial photography and richer section atmosphere. */
.journey-photo {
  background: #fff;
  border: 9px solid rgba(255,255,255,.94);
  border-radius: 31px;
  box-shadow: 0 24px 60px rgba(11,79,87,.16);
  transform: rotate(-1.25deg);
}
.journey-photo img { filter: saturate(.88) contrast(1.03); }
.journey-letter {
  border-top: 5px solid rgba(239,122,168,.65);
  box-shadow: 0 26px 72px rgba(11,79,87,.14);
}
.journey-letter__photo img { filter: saturate(.86) contrast(1.03); }

.journey-section--soft {
  background:
    radial-gradient(circle at 90% 5%,rgba(239,122,168,.15),transparent 28%),
    radial-gradient(circle at 8% 92%,rgba(77,194,201,.14),transparent 30%),
    linear-gradient(180deg,#fff8fb 0%,#fdf1f7 28%,#edf9f9 100%);
  overflow: hidden;
}
.journey-section--soft::before {
  border: 28px solid rgba(239,122,168,.09);
  border-radius: 50%;
  content: '';
  height: 300px;
  pointer-events: none;
  position: absolute;
  right: -180px;
  top: -150px;
  width: 300px;
}
.journey-section--soft > .journey-shell,
.journey-section--rose > .journey-shell { position: relative; z-index: 1; }
.journey-section--rose {
  background:
    radial-gradient(circle at 15% 18%,rgba(77,194,201,.13),transparent 25%),
    radial-gradient(circle at 88% 80%,rgba(239,122,168,.17),transparent 30%),
    linear-gradient(145deg,#fff7fb,#fff0f6 48%,#edf9f9);
  overflow: hidden;
}
.journey-section--teal {
  background: linear-gradient(145deg,#082f35,#0b4f57 67%,#4d2740);
}
.journey-card:nth-child(even) {
  background: linear-gradient(180deg,#fff,#fff0f6);
  border-color: #f2cadb;
}
.journey-cta {
  background: linear-gradient(135deg,var(--journey-rose-dark),var(--journey-rose) 64%,#ef5e56);
  box-shadow: 0 24px 60px rgba(148,52,95,.2);
  overflow: hidden;
  position: relative;
}
.journey-cta::after {
  border: 42px solid rgba(255,255,255,.09);
  border-radius: 50%;
  content: '';
  height: 260px;
  pointer-events: none;
  position: absolute;
  right: -120px;
  top: -150px;
  width: 260px;
}
.journey-cta > * { position: relative; z-index: 1; }

@media (max-width: 960px) {
  .journey-hero__visual { min-height: 600px; }
  .journey-hero__photo { left: 38px; right: 20px; }
  .journey-hero__note { left: 8px; }
  .journey-year-badge { right: 2px; }
}

@media (max-width: 760px) {
  .journey-hero { padding: 58px 0 52px; }
  .journey-hero::before { bottom: 100px; left: -250px; }
  .journey-hero::after { right: -390px; top: -380px; }
  .journey-hero__visual { min-height: 535px; }
  .journey-hero__photo {
    border-width: 8px;
    bottom: 70px;
    left: 12px;
    right: 10px;
    top: 12px;
    transform: rotate(1deg);
  }
  .journey-year-badge {
    border-width: 6px;
    right: 0;
    top: -2px;
    width: 118px;
  }
  .journey-year-badge strong { font-size: 1.65rem; }
  .journey-year-badge small { font-size: .57rem; }
  .journey-hero__note { left: 0; max-width: 180px; top: 84px; }
  .journey-hero__quote { left: 0; max-width: 330px; width: calc(100% - 48px); }
  .journey-photo { transform: rotate(-.6deg); }
}

@media (max-width: 480px) {
  .journey-hero__visual { min-height: 485px; }
  .journey-hero__photo { bottom: 76px; }
  .journey-hero__caption { bottom: 24px; left: 22px; right: 22px; }
  .journey-hero__caption strong { font-size: 1.32rem; }
  .journey-year-badge { width: 106px; }
  .journey-hero__note { max-width: 162px; padding: 13px; top: 76px; }
  .journey-hero__note strong { font-size: 1rem; }
  .journey-hero__note span { font-size: .76rem; }
  .journey-hero__quote { padding: 14px 16px; width: calc(100% - 28px); }
  .journey-hero__quote p { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-photo-hover::before { transition: none; }
  .journey-photo-hover.is-dot-preview::before,
  .journey-photo-hover:hover::before { animation: none; }
  .journey-photo-hover img { transition: none; }
}