/* Shootpacked · sort-holiday-photos. Builds on v2.css (same tokens, cubes, prints and type).
   Its own piece: the trip, laid out as a route of day albums on the blush quilt. Phone first. */

.hol .hero { padding-bottom: 0; }
.hol .hero h1 { max-width: 12ch; }

/* ------------------------------------------------------------- the trip */
.trip {
  position: relative; isolation: isolate; margin: 30px calc(var(--gut) * -1) 0; padding: 26px var(--gut) 30px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background:
    radial-gradient(70% 50% at 20% 0%, rgba(255, 255, 255, .75), transparent 70%),
    radial-gradient(60% 60% at 100% 100%, rgba(222, 74, 104, .16), transparent 70%),
    linear-gradient(170deg, #FBDCE1, #F6C4CE 55%, #F0B2C0);
}
.trip::before { /* the quilt's stitching, as on the home page */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, transparent 0 26px, rgba(255, 255, 255, .55) 26px 27px, rgba(160, 60, 90, .10) 27px 28px),
    repeating-linear-gradient(-45deg, transparent 0 26px, rgba(255, 255, 255, .55) 26px 27px, rgba(160, 60, 90, .10) 27px 28px);
}
.route { display: none; }

/* two loose prints still wearing their camera names */
.loose { position: relative; height: 230px; }
.lp { position: absolute; margin: 0; width: 46%; max-width: 210px; padding: 7px 7px 0; background: var(--surface); border-radius: 4px; box-shadow: var(--shadow-print); }
.lp img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 2px; }
.lp .tag { margin: 8px -12px 10px 16px; font-size: 12.5px; }
.lp1 { left: 0; top: 0; rotate: -5deg; z-index: 2; }
.lp2 { right: 0; top: 26px; rotate: 4deg; z-index: 1; }

/* the days: cubes in order, joined by a dashed path */
.days { list-style: none; margin: 18px 0 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 22px; }
.days::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 30px; border-left: 2.5px dashed rgba(169, 35, 63, .45); }
.day { padding: 28px 18px 18px; min-height: 112px; padding-right: 47%; }
.day::before { /* the pin where the route touches the day */
  content: ""; position: absolute; left: -26px; top: 26px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cherry); box-shadow: 0 0 0 4px var(--surface), 0 6px 10px -4px rgba(80, 20, 40, .6);
}
.day b { display: block; font-size: 22px; text-wrap: balance; }
.fan { position: absolute; right: 10px; top: -14px; width: 42%; height: 104px; }
.fan img { position: absolute; top: 0; width: 58%; aspect-ratio: 4 / 5; object-fit: cover; border: 4px solid #fff; border-radius: 4px; box-shadow: 0 10px 18px -10px rgba(80, 20, 40, .65); }
.fan img:nth-child(1) { left: 0; rotate: -9deg; top: 12px; }
.fan img:nth-child(2) { left: 22%; rotate: 2deg; z-index: 1; }
.fan img:nth-child(3) { left: 44%; rotate: 10deg; top: 14px; z-index: 2; }
.trip-note { margin-top: 18px; font-size: 13px; color: var(--ink-2); }

/* the opening moment: tags rename themselves, the days settle onto the route */
.js .trip:not(.shown) .day { opacity: 0; translate: 0 18px; }
.trip .day { transition: opacity .6s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--d) * 140ms + 150ms); }
.trip .fan img { transition: rotate .7s var(--ease), translate .7s var(--ease); }
.js .trip:not(.shown) .fan img { rotate: 0deg; translate: 0 10px; }

/* ------------------------------------------------------------- sections */
.hol .ways { padding-top: 96px; }
.sorter-note { padding: 0 16px 16px; font-size: 13.5px; color: var(--ink-2); }
.names-sec .finder { margin-top: 22px; }
.hol-finder .new { font-size: 15px; }
.hol-needs h2 { margin-bottom: 18px; }
.hol-needs li { align-items: flex-start; }
.hol .close .also { margin-top: 22px; text-align: center; font-size: 15px; color: var(--ink-2); }
.hol .close .also a { color: var(--cherry-lo); font-weight: 650; text-underline-offset: 3px; }
.hol .close-card h2 { max-width: 13ch; }
.hol-finder[data-state="after"] .old { opacity: 1; color: var(--ink-2); }

/* ------------------------------------------------------------- tablet */
@media (min-width: 720px) {
  .trip { margin: 40px 0 0; padding: 30px 30px 32px; }
  .loose { height: 250px; max-width: 520px; }
  .days { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 70px 0 0; }
  .days::before { left: 6%; right: 6%; top: 18px; bottom: auto; border-left: 0; border-top: 2.5px dashed rgba(169, 35, 63, .45); }
  .day { padding: 96px 18px 18px; min-height: 0; }
  .day::before { left: 50%; top: -60px; margin-left: -8px; }
  .fan { left: 14px; right: 14px; top: -42px; width: auto; height: 126px; }
  .fan img { width: 46%; }
  .fan img:nth-child(2) { left: 27%; } .fan img:nth-child(3) { left: 54%; }
}

/* ------------------------------------------------------------- desktop: the route crosses the quilt */
@media (min-width: 1100px) {
  .hol .hero h1 { max-width: 11ch; font-size: clamp(72px, 6.6vw, 96px); }
  .trip { height: 480px; margin-top: 44px; padding: 0; border-radius: 40px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -30px 60px -40px rgba(140, 30, 60, .35), 0 50px 90px -60px rgba(80, 20, 40, .6); }
  .route { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .route path { fill: none; stroke: rgba(169, 35, 63, .55); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .loose { position: absolute; left: 3%; top: 40px; width: 300px; height: 330px; max-width: none; }
  .lp { width: 200px; }
  .lp1 { left: 0; top: 10px; }
  .lp2 { left: 104px; right: auto; top: 128px; }
  .days { position: absolute; inset: 0; display: block; margin: 0; padding: 0; }
  .days::before { display: none; }
  /* widths in % and a fixed height, so each pin lands exactly on the drawn route (see the path in the HTML) */
  .day { position: absolute; width: 21.5%; height: 190px; padding: 112px 20px 20px; }
  .day::before { left: 50%; top: calc(100% + 18px); margin-left: -8px; }
  .day:nth-child(1) { left: 31%; top: 206px; }
  .day:nth-child(2) { left: 52.5%; top: 92px; }
  .day:nth-child(3) { left: 74%; top: 190px; }
  .day .fan { rotate: -1.5deg; } .day:nth-child(2) .fan { rotate: 2deg; }
  .day b { font-size: 27px; }
  .fan { left: 18px; right: 18px; top: -54px; height: 150px; }
  .trip-note { position: absolute; left: 3%; bottom: 22px; margin: 0; }

  .names-sec { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
  .names-sec .finder { margin-top: 0; }
  .hol-finder .new { font-size: 17px; }
  .hol-needs { padding-top: 120px; }
  .hol-needs h2 { font-size: 64px; margin-bottom: 26px; }
}

@media (hover: hover) and (min-width: 1100px) {
  .day { transition: translate .45s var(--ease), box-shadow .45s var(--ease), opacity .6s var(--ease); }
  .trip.shown .day:hover { translate: 0 -6px; transition-delay: 0s; }
  .trip.shown .day:hover .fan img:nth-child(1) { rotate: -15deg; translate: -10px -6px; }
  .trip.shown .day:hover .fan img:nth-child(3) { rotate: 16deg; translate: 10px -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .trip:not(.shown) .day, .js .trip:not(.shown) .fan img { opacity: 1; translate: none; }
}
@media (forced-colors: active) { .day, .lp { border: 1px solid CanvasText; } }

/* the closing cube: three prints tucked in behind its zip, peeking over the top edge */
.close-fan { position: absolute; left: 50%; top: -58px; width: 210px; height: 120px; margin-left: -105px; z-index: -1; pointer-events: none; }
.close-fan img { position: absolute; top: 0; width: 86px; aspect-ratio: 4 / 5; object-fit: cover; border: 5px solid #fff; border-radius: 4px; box-shadow: 0 14px 22px -12px rgba(80, 20, 40, .6); }
.close-fan img:nth-child(1) { left: 0; rotate: -12deg; top: 14px; }
.close-fan img:nth-child(2) { left: 62px; rotate: 1deg; }
.close-fan img:nth-child(3) { left: 124px; rotate: 13deg; top: 16px; }
.hol .close { padding-top: 140px; }
@media (min-width: 1100px) { .close-fan { width: 280px; margin-left: -140px; top: -80px; } .close-fan img { width: 112px; } .close-fan img:nth-child(2) { left: 84px; } .close-fan img:nth-child(3) { left: 168px; } .hol .close { padding-top: 180px; } }
@media (min-width: 1100px) and (max-width: 1279px) { /* narrower desktops: the loose prints step back from Day 1 */
  .loose { left: 2.5%; } .lp { width: 168px; } .lp2 { left: 70px; top: 150px; }
}
/* secondary text stays at 4.5:1 down to the darkest end of the pink and butter cubes */
.hol .cube-pink { --ink-2: #5A3341; }
.hol .close-card .send { color: var(--ink); }