/* ==========================================================================
   SECTION 04 — PATIENT JOURNEY (approved)
   Desktop (>= 1280px): 2 large + 3 small horizontal cards, photo on the left
                        with a diagonal edge into the content.
   1024–1279px:         2 large horizontal cards + 3 small vertical cards.
   Tablets (600–1023):  5 stacked horizontal cards.
   Phones (< 600px):    5 stacked vertical cards, numbered in journey order.
   ========================================================================== */

.journey {
  position: relative;
  padding-block: 4rem 4.5rem;
  overflow: hidden;
  background-color: var(--color-ivory);
}

/* ---------- Decorative Tijuana backdrop (upper right) ---------- */
.journey__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  width: 75%;                        /* phones: right side only, clear of the eyebrow */
  height: 15rem;
  pointer-events: none;
  opacity: 0.28;
  --fade-from: 15%;                  /* where the left fade begins/ends */
  --fade-to: 70%;
  -webkit-mask-image:
    linear-gradient(to left, #000 var(--fade-from), transparent var(--fade-to)),
    linear-gradient(to bottom, #000 40%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 var(--fade-from), transparent var(--fade-to)),
    linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-composite: intersect;
}

.journey__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Thin bronze arc sweeping down from the top-right corner.
   Shown only on wide screens (>= 1280px), where it can't cross the heading. */
.journey__arc {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 14rem;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: rgba(167, 131, 92, 0.55);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.journey__arc path { vector-effect: non-scaling-stroke; }

.journey__inner { position: relative; }

/* ---------- Heading ---------- */
.journey__title {
  max-width: 17em;
  margin-top: 1.25rem;
  font-size: clamp(2.125rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: wrap;
  color: var(--color-charcoal);
}

.journey__intro {
  max-width: 46rem;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--color-text-body);
}

/* "Expert care / closer to home" — desktop only */
.journey__tagline { display: none; }

/* ---------- Cards ---------- */
.journey__steps {
  display: grid;
  gap: 1rem;
  margin-top: 2.25rem;
}

.journey-card {
  /* layout knobs (overridden per breakpoint / size) */
  --media-w: 100%;
  --slant: 3rem;

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(167, 131, 92, 0.2);
  border-radius: 0.5rem;
  background-color: #FBF8F3;
}

/* Photo with a diagonal bottom edge (phones) */
.journey-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-card);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

.journey-card__media img {
  position: absolute;               /* the box sets the size; the photo fills it */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 22%);
}

.journey-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.75rem 1.5rem 1.75rem;
}

/* Bronze step number with a short rule */
.journey-card__step {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums;  /* "01", not old-style figures */
  font-feature-settings: "lnum" 1;
  color: var(--color-bronze);
}

.journey-card__step::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background-color: var(--color-bronze);
}

.journey-card__title {
  margin-top: 0.85rem;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--color-charcoal);
}

.journey-card__kicker {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-bronze-ink);
}

.journey-card__text {
  max-width: 22rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

/* Small line icon in a thin bronze circle */
.journey-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: 1.1rem;
  border: 1px solid var(--color-bronze);
  border-radius: 50%;
}

.journey-card__icon svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: var(--color-bronze-ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Per-photo framing */
.journey-card--ivanna       { --pos: 50% 18%; }
.journey-card--mauricio     { --pos: 50% 18%; }
.journey-card--medical-team { --pos: 50% 20%; }
.journey-card--recovery     { --pos: 40% 60%; }
.journey-card--home         { --pos: 50% 45%; }

/* ---------- Footer: note + CTA ---------- */
.journey__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(167, 131, 92, 0.3);
}

.journey__note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

.journey__note-icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--color-bronze);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

/* ==========================================================================
   TABLETS (600–1023px): stacked horizontal cards
   ========================================================================== */
@media (min-width: 37.5em) {
  .journey { padding-block: 5rem 5.5rem; }

  .journey__backdrop { --fade-from: 25%; --fade-to: 95%; width: 70%; height: 20rem; opacity: 0.4; }


  .journey__steps { margin-top: 2.75rem; }

  .journey-card {
    --media-w: 44%;
    --slant: 3.5rem;

    flex-direction: row;
    min-height: 17rem;
  }

  .journey-card__media {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--media-w);
    aspect-ratio: auto;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  }

  .journey-card__body {
    justify-content: center;
    width: 100%;
    margin-left: var(--media-w);
    padding: 1.75rem 2rem 1.75rem 1.5rem;
  }

  .journey__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .journey__footer .btn { flex: none; }
}

/* ==========================================================================
   DESKTOP (>= 1024px): 2 + 3 hierarchy
   ========================================================================== */
@media (min-width: 64em) {
  .journey { padding-block: 5.5rem 5rem; }

  /* Backdrop sits in the upper-right corner, beside the heading */
  .journey__backdrop {
    --fade-from: 25%;
    --fade-to: 95%;
    width: 52%;
    height: 27rem;
    opacity: 0.42;
  }


  .journey__tagline {
    position: absolute;
    top: 1.75rem;
    right: 0;
    z-index: 0;
    display: block;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-bronze);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    line-height: 1.8;
    text-transform: uppercase;
    color: var(--color-charcoal);
  }

  /* Soft ivory halo so the tagline stays readable over the photo */
  .journey__tagline::before {
    content: "";
    position: absolute;
    inset: -1.75rem -2.5rem -1.75rem -1rem;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(245, 241, 233, 0.92), rgba(245, 241, 233, 0.75) 60%, rgba(245, 241, 233, 0));
  }

  .journey__head { max-width: 62%; }

  .journey__title { margin-top: 1rem; }

  .journey__intro { max-width: 43.5rem; }

  .journey__steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 2.25rem;
  }

  .journey-card--lg {
    --media-w: 50%;
    --slant: 5rem;

    grid-column: span 3;
    min-height: 17rem;
  }

  .journey-card--lg .journey-card__body { padding: 1.5rem 1.5rem 1.5rem 0.5rem; }

  .journey-card--lg .journey-card__step { font-size: 2.75rem; }

  .journey-card--lg .journey-card__title { margin-top: 0.75rem; font-size: 1.75rem; }

  .journey-card--lg .journey-card__text { max-width: 17rem; font-size: 1rem; }

  .journey-card--lg .journey-card__icon { width: 2.75rem; height: 2.75rem; margin-top: 1rem; }

  /* Small cards are vertical between 1024 and 1279px (too narrow to split) */
  .journey-card--sm {
    grid-column: span 2;
    flex-direction: column;
  }

  .journey-card--sm .journey-card__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
  }

  .journey-card--sm .journey-card__body {
    justify-content: flex-start;
    margin-left: 0;
    padding: 0.75rem 1.5rem 1.5rem;
  }

  .journey-card--sm .journey-card__step { font-size: 2.25rem; }

  .journey-card--sm .journey-card__title { font-size: 1.5rem; }

  .journey-card--sm .journey-card__text { font-size: 0.875rem; }

  .journey-card--sm .journey-card__icon { width: 2.75rem; height: 2.75rem; margin-top: 0.9rem; }

  .journey-card--sm .journey-card__icon svg { width: 1.25rem; height: 1.25rem; }

  .journey__footer { margin-top: 2.25rem; }
}

/* ==========================================================================
   WIDE DESKTOP (>= 1280px): small cards become horizontal, as in the mockup
   ========================================================================== */
@media (min-width: 80em) {
  .journey__arc {
    display: block;
    width: 45%;
    height: 21rem;
  }

  .journey-card--sm {
    --media-w: 45%;
    --slant: 3.5rem;

    flex-direction: row;
    min-height: 15.5rem;
  }

  .journey-card--sm .journey-card__media {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--media-w);
    aspect-ratio: auto;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  }

  .journey-card--sm .journey-card__body {
    justify-content: center;
    margin-left: var(--media-w);
    padding: 1.25rem 1.25rem 1.25rem 0.75rem;
  }

  .journey-card--sm .journey-card__step { font-size: 2.25rem; }

  .journey-card--sm .journey-card__step::after { width: 2rem; }

  .journey-card--sm .journey-card__title { margin-top: 0.6rem; font-size: 1.3125rem; }

  .journey-card--sm .journey-card__kicker { font-size: 0.6875rem; letter-spacing: 0.12em; }

  .journey-card--sm .journey-card__text { margin-top: 0.5rem; }
}