/* ============================================================
   Mobile hero (all pages EXCEPT Home):
   - Show: breadcrumb + heading + paragraph
   - Hide: eyebrow/tag/label, byline, buttons, meta
   - Content pinned to bottom
   - Hero image height = About Us mobile (460px)
   - Light ~10% black overlay (so text is readable, image still clear)
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Uniform hero size (match About Us mobile) ---- */
  body:not(.home):not(.front-page) .ao-blog-hero,
  body:not(.home):not(.front-page) .phil-hero,
  body:not(.home):not(.front-page) .ao2-hero-new,
  body:not(.home):not(.front-page) .ao-about-hero,
  body:not(.home):not(.front-page) .ao-about-hero-overlay,
  body:not(.home):not(.front-page) .trip-hero,
  body:not(.home):not(.front-page) .diff-hero,
  body:not(.home):not(.front-page) .legal-hero,
  body:not(.home):not(.front-page) .cs_page_heading_2 {
    position: relative !important;
    min-height: 460px !important;
    height: 460px !important;
    max-height: 460px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 6% 28px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body:not(.home):not(.front-page) .ao-about-hero-bg,
  body:not(.home):not(.front-page) .ao2-hero-new-bg,
  body:not(.home):not(.front-page) .phil-hero img,
  body:not(.home):not(.front-page) .trip-hero {
    object-fit: cover !important;
  }

  /* ---- Hide: eyebrow / tag / label / byline / meta (NOT trip buttons) ---- */
  body:not(.home):not(.front-page) .ao-blog-hero .pst-meta,
  body:not(.home):not(.front-page) .cs_page_heading_2 .pst-meta,
  body:not(.home):not(.front-page) .phil-hero .label,
  body:not(.home):not(.front-page) .phil-hero .label.on-dark,
  body:not(.home):not(.front-page) .label.on-dark,
  body:not(.home):not(.front-page) .ao2-hero-new-left .tag,
  body:not(.home):not(.front-page) .ao2-hero-new-content .tag,
  body:not(.home):not(.front-page) .ao-about-hero-copy .ao-eyebrow,
  body:not(.home):not(.front-page) .ao-about-hero .ao-eyebrow,
  body:not(.home):not(.front-page) .diff-hero .diff-label,
  body:not(.home):not(.front-page) .diff-hero-content .diff-label,
  body:not(.home):not(.front-page) .phil-hero .eyebrow,
  body:not(.home):not(.front-page) .ao2-hero .eyebrow,
  body:not(.home):not(.front-page) .cs_page_heading_2 .ao-eyebrow,
  body:not(.home):not(.front-page) .trip-hero .hero-meta,
  body:not(.home):not(.front-page) .hero-inner .hero-meta {
    display: none !important;
  }

  /* ---- SHOW paragraph / subcopy (do not hide) — NOT on trip pages ---- */
  body:not(.home):not(.front-page) .phil-hero .phil-hero-sub,
  body:not(.home):not(.front-page) .ao2-hero-new-left > p,
  body:not(.home):not(.front-page) .ao-about-hero-copy .ao-hero-lede,
  body:not(.home):not(.front-page) .ao-about-hero-copy .ao-body-text,
  body:not(.home):not(.front-page) .ao-blog-hero .excerpts,
  body:not(.home):not(.front-page) .cs_page_heading_2 .excerpts {
    display: block !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.92) !important;
  }

  /* ============================================================
     Destination / Trip pages ONLY (.trip-hero / .trip-page):
     - Hide paragraph (hero-description)
     - SHOW hero buttons (Plan Your Journey + Speak to a Travel Designer)
     - Taller hero + no clip so title + buttons both fit
     ============================================================ */
  body:not(.home):not(.front-page) .trip-hero {
    min-height: 520px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 6% 32px !important;
  }

  .trip-page .trip-hero .hero-description,
  .trip-hero .hero-description,
  .trip-page .hero-inner .hero-description {
    display: none !important;
  }

  .trip-page .trip-hero .hero-buttons,
  .trip-hero .hero-buttons,
  .trip-page .hero-inner .hero-buttons,
  .trip-hero .hero-inner .hero-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .trip-page .trip-hero .btn-hero-primary,
  .trip-hero .btn-hero-primary,
  .trip-page .trip-hero .btn-hero-secondary,
  .trip-hero .btn-hero-secondary {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .trip-hero .hero-inner {
    position: relative !important;
    z-index: 3 !important;
  }

  /* Heading spacing */
  body:not(.home):not(.front-page) .ao-blog-hero .pst-t,
  body:not(.home):not(.front-page) .phil-hero h1,
  body:not(.home):not(.front-page) .ao2-hero-new h1,
  body:not(.home):not(.front-page) .ao-about-hero h1,
  body:not(.home):not(.front-page) .cs_page_heading_2 h1 {
    margin-bottom: 0 !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  /* Trip title: small gap above buttons */
  body:not(.home):not(.front-page) .trip-hero .hero-title {
    margin-bottom: 0 !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  body:not(.home):not(.front-page) .ao-bc-in-hero {
    margin-bottom: 8px !important;
  }

  /* ---- Light ~10% shadow overlay so text is readable (NOT full dark shade) ---- */
  /* Keep image mostly clear, just enough darkening for white text */
  body:not(.home):not(.front-page) .phil-hero::after,
  body:not(.home):not(.front-page) .ao2-hero-new-bg::after,
  body:not(.home):not(.front-page) .ao2-hero-new::after,
  body:not(.home):not(.front-page) .diff-hero::after,
  body:not(.home):not(.front-page) .legal-hero::after,
  body:not(.home):not(.front-page) .trip-hero::after,
  body:not(.home):not(.front-page) .ao-blog-hero::after,
  body:not(.home):not(.front-page) .cs_page_heading_2::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.10) !important; /* ~10% light shadow */
    opacity: 1 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* About Us uses dedicated shade element – make it light 10% instead of heavy gradient */
  body:not(.home):not(.front-page) .ao-about-hero-shade {
    display: block !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.10) !important;
    background-image: none !important;
  }

  /* Hide heavy blur / extra overlays that were making image too dark */
  body:not(.home):not(.front-page) .ao-about-hero-blur,
  body:not(.home):not(.front-page) .ao-hero-shade,
  body:not(.home):not(.front-page) .ao-hero-overlay {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
  }

  body:not(.home):not(.front-page) .ao2-hero-new-bg {
    opacity: 1 !important;
  }
}


/* ============================================================
   ALL pages: hero headings — full text, natural wrap, no ellipsis
   ============================================================ */
.trip-hero .hero-title,
.ao-blog-hero .pst-t,
.ao-blog-hero h1,
.cs_page_heading_2 h1,
.cs_page_heading_2 .pst-t,
.phil-hero h1,
.ao2-hero-new h1,
.ao2-hero-new-left h1,
.ao-about-hero h1,
.ao-about-hero-copy h1,
.diff-hero h1,
.diff-hero-content h1,
.legal-hero h1,
.legal-hero-inner h1,
.hero-inner .hero-title,
.ao-page-intro .ao-page-title,
h1.hero-title,
h1.pst-t {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  max-width: min(720px, 100%);
  line-height: 1.2 !important;
}
.trip-hero .hero-title br,
.hero-inner .hero-title br,
.ao2-hero-new h1 br,
.phil-hero h1 br {
  display: none !important; /* no forced mid-title breaks */
}
@media (max-width: 767.98px) {
  .trip-hero .hero-title,
  .ao-blog-hero .pst-t,
  .cs_page_heading_2 h1,
  .phil-hero h1,
  .ao2-hero-new h1,
  .ao-about-hero h1,
  .diff-hero h1,
  .legal-hero h1 {
    max-width: 100% !important;
    overflow-wrap: break-word !important; /* only if one word is extremely long */
    word-break: normal !important;
  }
}