/* =========================================================
   STUDY & CHILL — TRIP SCENES
   ========================================================= */

/* Prevent padding and borders from pushing trip elements
   beyond their available width */
.trip-wrap,
.trip-wrap *,
.trip-wrap *::before,
.trip-wrap *::after {
  box-sizing: border-box;
}

.trip-wrap {
  max-width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------
   BASE SCENE
   --------------------------------------------------------- */

.trip-scene {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: start;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  min-height: 340px;

  padding: clamp(20px, 5vw, 45px);

  overflow: hidden;
  isolation: isolate;

  border-radius: 18px;

  color: #fff;
  background: var(--scene-bg);
}

/* Original decorative gradient */

.trip-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;

  opacity: 0.42;

  background:
    radial-gradient(
      circle at 80% 18%,
      #ffffff99 0 8%,
      transparent 8.4%
    ),
    radial-gradient(
      circle at 66% 60%,
      #ffffff33 0 12%,
      transparent 12.4%
    ),
    linear-gradient(
      145deg,
      transparent 5%,
      #00000050 100%
    );
}

/* Original bottom gradient */

.trip-scene::after {
  content: "";
  position: absolute;
  z-index: -1;

  left: 0;
  right: 0;
  bottom: 0;

  height: 52%;

  background: linear-gradient(
    transparent,
    #0007
  );
}

/* Scene text */

.trip-scene strong {
  display: block;

  max-width: 100%;

  font-size: clamp(1.45rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;

  overflow-wrap: break-word;
}

.trip-scene small {
  display: block;

  max-width: 100%;

  margin-bottom: 6px;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  font-size: 0.75rem;
  font-weight: 700;

  overflow-wrap: break-word;
}


/* =========================================================
   HERO SCENE
   ========================================================= */

.trip-scene.hero-scene {
  position: relative;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  min-height: 400px;

  border-radius: 0;

  overflow: hidden;
  isolation: isolate;
}

/* Hero title */

.trip-scene.hero-scene strong {
  font-size: clamp(1.8rem, 5vw, 3rem);
}


/* ---------------------------------------------------------
   REAL HERO PHOTOGRAPH
   --------------------------------------------------------- */

.trip-scene.hero-scene > img {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  z-index: 0;
}

/* Dark gradient over the photograph */

.trip-scene.hero-scene::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  opacity: 1;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.05)
  );

  pointer-events: none;
}

/* The original scene gradient is not needed
   when a real hero photograph is present */

.trip-scene.hero-scene::after {
  display: none;
}

/* Hero text above the photograph */

.trip-scene.hero-scene > div {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-wrap: break-word;
}


/* =========================================================
   SCENE COLOURS
   ========================================================= */

.trip-scene.warm {
  --scene-bg: linear-gradient(
    130deg,
    #254950,
    #669483 48%,
    #d7ae77
  );
}

.trip-scene.blue {
  --scene-bg: linear-gradient(
    130deg,
    #142d50,
    #4b79a1 54%,
    #cc9f7f
  );
}

.trip-scene.violet {
  --scene-bg: linear-gradient(
    130deg,
    #272d59,
    #7b5d8f 53%,
    #e1a779
  );
}

.trip-scene.brick {
  --scene-bg: linear-gradient(
    130deg,
    #513747,
    #a36b70 55%,
    #d3a47b
  );
}

.trip-scene.olive {
  --scene-bg: linear-gradient(
    130deg,
    #30464d,
    #678279 50%,
    #d7b37a
  );
}

.trip-scene.gold {
  --scene-bg: linear-gradient(
    130deg,
    #343454,
    #7b6684 50%,
    #e5b26f
  );
}

.trip-scene.paris {
  --scene-bg: linear-gradient(
    130deg,
    #172543,
    #635985 48%,
    #efab79
  );
}

.trip-scene.liege {
  --scene-bg: linear-gradient(
    130deg,
    #2b4554,
    #6a7d88 49%,
    #b6a589
  );
}

.trip-scene.street {
  --scene-bg: linear-gradient(
    130deg,
    #24364f,
    #616e94 45%,
    #d3aa84
  );
}


/* =========================================================
   PHOTO GALLERY
   ========================================================= */

.trip-photo-gallery {
  display: grid;

  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  );

  gap: 12px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 16px 0 22px;
}

/* Gallery scenes */

.trip-photo-gallery .trip-scene {
  min-width: 0;
  max-width: 100%;

  min-height: 230px;

  padding: 18px;

  border-radius: 14px;
}

.trip-photo-gallery .trip-scene strong {
  font-size: clamp(
    1.05rem,
    2.4vw,
    1.6rem
  );
}

.trip-wrap .trip-photo-gallery .trip-scene {
  box-sizing: border-box;
}


/* =========================================================
   NOTES & ITINERARY
   ========================================================= */

.trip-note {
  font-size: 0.95rem;
  opacity: 0.88;
}

.trip-itinerary {
  list-style: none;

  padding-left: 0;

  max-width: 100%;
  min-width: 0;
}

.trip-itinerary li {
  padding: 10px 0;

  border-bottom: 1px solid #8883;

  overflow-wrap: break-word;
}

.trip-itinerary time {
  font-weight: 700;

  margin-right: 0.35em;
}

.trip-pending {
  opacity: 0.8;
  font-size: 0.88rem;
}


/* =========================================================
   ADDITIONAL OVERFLOW PROTECTION
   ========================================================= */

.trip-wrap .trip-hero {
  max-width: 100%;
  min-width: 0;
}

.trip-wrap img:not(.trip-scene.hero-scene > img),
.trip-wrap iframe {
  max-width: 100%;
}

.trip-wrap .tags {
  max-width: 100%;
  min-width: 0;

  flex-wrap: wrap;
}

.trip-wrap p,
.trip-wrap li {
  overflow-wrap: break-word;
}


/* =========================================================
   MOBILE — 680px AND BELOW
   ========================================================= */

@media (max-width: 680px) {

  /* Hero */

  .trip-scene.hero-scene {
    min-height: 320px;

    padding: 20px;
  }

  .trip-scene.hero-scene strong {
    font-size: clamp(
      1.6rem,
      7vw,
      2.3rem
    );
  }

  /* Gallery becomes a single column */

  .trip-photo-gallery {
    grid-template-columns: minmax(0, 1fr);

    gap: 12px;
  }

  .trip-photo-gallery .trip-scene {
    min-height: 180px;

    padding: 18px;
  }

}


/* =========================================================
   SMALL MOBILE — 380px AND BELOW
   Including 340 × 650 screens
   ========================================================= */

@media (max-width: 380px) {

  .trip-scene.hero-scene {
    min-height: 300px;

    padding: 16px;
  }

  .trip-scene.hero-scene strong {
    font-size: 1.65rem;

    line-height: 1.1;
  }

  .trip-scene small {
    font-size: 0.68rem;

    letter-spacing: 0.08em;
  }

  .trip-photo-gallery .trip-scene {
    min-height: 170px;

    padding: 16px;
  }

}