/* PassTracks Trip Planning Presentation Cleanup V1
   Shared article-context presentation only. Reviews, hubs and research pages
   do not load this stylesheet. */

:root {
  --trip-planning-hero-credit-overlay: rgba(10, 29, 44, 0.9);
}

/* Lead-photo credits: one shared frame with composition-aware corner modifiers. */
.trip-planning-hero-credit-frame {
  position: relative !important;
  overflow: hidden;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}

.trip-planning-hero-credit-frame > figcaption,
.trip-planning-hero-credit-frame > .trip-planning-hero-credit {
  position: absolute !important;
  z-index: 4;
  right: 14px !important;
  bottom: 14px !important;
  left: auto !important;
  width: auto !important;
  max-width: calc(100% - 28px);
  height: auto !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 2px;
  background: var(--trip-planning-hero-credit-overlay) !important;
  color: #fff !important;
  font: 600 0.75rem/1.32 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

.trip-planning-hero-credit-frame.trip-planning-hero-credit--left > figcaption,
.trip-planning-hero-credit-frame.trip-planning-hero-credit--left > .trip-planning-hero-credit {
  right: auto !important;
  left: 14px !important;
}

/* Frisco's earlier photography layer reserved a 30px caption strip inside
   the hero. Remove that allocation while preserving the approved displayed
   image height (660px desktop / 410px mobile). */
.fds-v2 .fds-hero-photo.trip-planning-hero-credit-frame {
  height: calc(clamp(520px, 55vw, 690px) - 30px) !important;
}

.fds-v2 .fds-hero-photo.trip-planning-hero-credit-frame > img {
  height: 100% !important;
}

.fds-v2 .fds-hero-photo.trip-planning-hero-credit-frame::after {
  bottom: 0 !important;
}

/* Trip Planning authors are article sign-offs, not alert-banner content. */
.author-byline-band--trip-signoff {
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  background: transparent !important;
}

.author-byline-band--trip-signoff .author-byline {
  padding: 1rem 0 0.75rem;
  border-top: 1px solid rgba(24, 50, 74, 0.24);
  border-bottom: 0;
  background: transparent !important;
}

/* Compact canonical alert density for long-form Trip Planning articles. */
.global-email-alerts-banner-section--trip-compact {
  padding: 48px 0 40px !important;
}

.global-email-alerts-banner-section--trip-compact .global-email-alerts-banner {
  padding: 24px 32px !important;
}

.global-email-alerts-banner-section--trip-compact .global-email-alerts-banner__copy h2 {
  max-width: none !important;
  margin: 4px 0 7px !important;
  color: #17324a !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

.global-email-alerts-banner-section--trip-compact .global-email-alerts-banner__eyebrow {
  margin: 0 !important;
  font: 800 0.76rem/1.3 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.15em !important;
}

.global-email-alerts-banner-section--trip-compact .global-email-alerts-banner__supporting {
  margin: 0 !important;
  font: 400 1rem/1.5 Arial, Helvetica, sans-serif !important;
}

.global-email-alerts-banner-section--trip-compact .global-email-alerts-banner__cta {
  min-height: 50px !important;
  padding: 13px 22px !important;
  font: 800 0.95rem/1.1 Arial, Helvetica, sans-serif !important;
}

/* Shared modern first-prose treatment, currently used by Denver's gateway
   decision guide. The copy and section hierarchy remain unchanged. */
.trip-planning-prose-opening {
  min-height: 0 !important;
  padding: 48px 0 46px !important;
}

.trip-planning-prose-opening .trip-planning-prose {
  max-width: 790px;
}

.trip-planning-prose-opening .trip-planning-prose p {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
}

.trip-planning-prose-opening .trip-planning-prose .trip-planning-prose__emphasis {
  margin: 24px 0 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.35rem, 2vw, 1.6rem) !important;
  font-weight: 700 !important;
  line-height: 1.34 !important;
}

@media (max-width: 800px) {
  /* Legacy field-guide HEROes place the mobile image, deck and caption in one
     figure. Their local CSS supplies the image-edge `top`; release the shared
     desktop `bottom` anchor so the compact credit cannot stretch through the
     deck below the photograph. */
  .vt-hero .trip-planning-hero-credit-frame > figcaption,
  .cb-hero .trip-planning-hero-credit-frame > figcaption {
    bottom: auto !important;
    height: auto !important;
  }

  /* Mobile Visual QA V3: human-selected Denver D2 TITLE ABOVE treatment.
     Desktop remains the established image-overlay HERO. */
  .pt-denver-shuttle .ds-hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    background: #f4efe5 !important;
    overflow: visible !important;
  }

  .pt-denver-shuttle .ds-hero-copy {
    position: static !important;
    order: 1;
    width: 100% !important;
    padding: 28px 20px 24px !important;
    transform: none !important;
    background: #f4efe5 !important;
  }

  .pt-denver-shuttle .ds-hero h1 {
    margin: 0 !important;
    color: #102d42 !important;
    text-shadow: none !important;
  }

  .pt-denver-shuttle .ds-hero .ds-kicker {
    color: #b45f35 !important;
  }

  .pt-denver-shuttle .ds-hero-media {
    order: 2;
    min-height: 0 !important;
    width: 100% !important;
  }

  .pt-denver-shuttle .ds-hero-media img {
    height: auto !important;
  }

  .pt-denver-shuttle .ds-hero-media::after {
    display: none !important;
  }

  .pt-denver-shuttle .ds-hero-media.trip-planning-hero-credit-frame > .trip-planning-hero-credit {
    top: auto !important;
    bottom: 10px !important;
    height: auto !important;
  }
}

@media (max-width: 760px) {
  .fds-v2 .fds-hero-photo.trip-planning-hero-credit-frame {
    height: 410px !important;
  }

  /* Mobile Visual QA V2: approved Frisco TITLE ABOVE pilot. Desktop remains
     the established image-overlay HERO. On phones the thesis precedes the
     complete photograph, whose credit remains attached to the image. */
  .fds-v2 .fds-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    background: #f7f2e9;
  }

  .fds-v2 .fds-hero-copy {
    display: contents !important;
  }

  .fds-v2 .fds-hero-title {
    position: static !important;
    order: 1 !important;
    align-self: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 16px 24px !important;
    background: #f7f2e9 !important;
    pointer-events: auto !important;
  }

  .fds-v2 .fds-hero-title .fds-kicker {
    color: #b45f35 !important;
  }

  .fds-v2 .fds-hero-title h1 {
    max-width: none !important;
    margin: 0 !important;
    color: #102d42 !important;
    text-shadow: none !important;
  }

  .fds-v2 .fds-hero-photo.trip-planning-hero-credit-frame {
    order: 2 !important;
    grid-area: auto !important;
    width: 100% !important;
  }

  .fds-v2 .fds-hero-photo.trip-planning-hero-credit-frame::after {
    display: none !important;
  }

  .fds-v2 .fds-hero-bridge {
    order: 3 !important;
    width: calc(100% - 32px) !important;
    margin: auto !important;
    padding-top: 25px !important;
  }

  /* Salt Lake's deck intentionally leaves the image frame on mobile. */
  .sg-hero .trip-planning-hero-credit-frame {
    overflow: visible;
  }

  /* The two Cottonwoods image-led HEROes are CSS grids: image/title occupy
     row one and the deck follows. Give the credit its own compact safe row
     between those layers so it cannot collide with a long mobile headline. */
  .slc-hero-stage.trip-planning-hero-credit-frame > figcaption {
    position: relative !important;
    grid-area: 2 / 1 !important;
    align-self: auto;
    justify-self: stretch;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    max-width: none;
    height: auto !important;
    padding: 9px 18px 0 !important;
    background: transparent !important;
    color: #677482 !important;
    text-shadow: none;
  }

  .trip-planning-hero-credit-frame.trip-planning-hero-credit--above-mobile-deck > figcaption,
  .trip-planning-hero-credit-frame.trip-planning-hero-credit--above-mobile-deck > .trip-planning-hero-credit {
    bottom: 88px !important;
  }
}

@media (max-width: 620px) {
  .trip-planning-hero-credit-frame > figcaption,
  .trip-planning-hero-credit-frame > .trip-planning-hero-credit {
    right: 10px !important;
    bottom: 10px !important;
    max-width: calc(100% - 20px);
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
  }

  .trip-planning-hero-credit-frame.trip-planning-hero-credit--left > figcaption,
  .trip-planning-hero-credit-frame.trip-planning-hero-credit--left > .trip-planning-hero-credit {
    right: auto !important;
    left: 10px !important;
  }

  .author-byline-band--trip-signoff {
    padding-top: 1.5rem;
  }

  .author-byline-band--trip-signoff .author-byline {
    padding: 0.875rem 0 0.625rem;
  }

  .global-email-alerts-banner-section--trip-compact {
    padding: 36px 0 30px !important;
  }

  .global-email-alerts-banner-section--trip-compact .global-email-alerts-banner {
    padding: 21px 18px !important;
  }

  .global-email-alerts-banner-section--trip-compact .global-email-alerts-banner__copy h2 {
    margin: 4px 0 7px !important;
    font-size: 31px !important;
    line-height: 1.1 !important;
  }

  .global-email-alerts-banner-section--trip-compact .global-email-alerts-banner__cta {
    min-height: 48px !important;
  }

  .trip-planning-prose-opening {
    padding: 38px 0 40px !important;
  }

  .trip-planning-prose-opening .trip-planning-prose p {
    font-size: 1rem !important;
    line-height: 1.66 !important;
  }

  .trip-planning-prose-opening .trip-planning-prose .trip-planning-prose__emphasis {
    margin-top: 20px !important;
    font-size: 1.3rem !important;
  }
}