/* ==========================================================================
   Voyamore — Single-Deal Detail
   Boarding-pass ticket hero (and future deal-detail sections).

   Renders inside Oxygen's "Single Deal" template. Nav/footer come from
   Oxygen; this stylesheet only owns the deal-specific stack.

   Tokens come from voyamore-core.css (loaded as a dependency).
   ========================================================================== */

/* ==========================================================================
   [voyamore_deal_head] — page header (crumbs, meta, h1, lede, actions)
   ========================================================================== */

/* The .vym-deal-head wrapper is layout-transparent — it exists only to
   scope the BEM children and carry the data attributes the JS reads.
   The host (Oxygen section / page container) owns padding, max-width,
   and background. Drop this shortcode into any container freely. */
.vym-deal-head { position: relative; }

.vym-deal-head__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--vym-muted);
  margin-bottom: 22px;
}
.vym-deal-head__crumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--vym-ease);
}
.vym-deal-head__crumbs a:hover { color: var(--vym-text); }
.vym-deal-head__crumb-sep { opacity: 0.5; }
.vym-deal-head__crumb-current {
  color: var(--vym-text);
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 460px;
  white-space: nowrap;
}

.vym-deal-head__meta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--vym-muted);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.vym-deal-head__meta-pub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vym-deal-head__meta svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.vym-deal-head__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.vym-deal-head__title {
  font-family: var(--vym-font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  color: var(--vym-text);
}
.vym-deal-head__title em {
  font-style: italic;
  color: var(--vym-accent);
  font-weight: 400;
}
.vym-deal-head__lede {
  color: var(--vym-muted);
  font-size: 18px;
  margin: 0;
  line-height: 1.55;
}

.vym-deal-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.vym-deal-head__btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--vym-border);
  background: transparent;
  color: var(--vym-muted);
  cursor: pointer;
  transition: color 0.25s var(--vym-ease), border-color 0.25s var(--vym-ease), background 0.25s var(--vym-ease), transform 0.25s var(--vym-ease);
  padding: 0;
}
.vym-deal-head__btn:hover {
  color: var(--vym-text);
  border-color: var(--vym-text);
  transform: translateY(-1px);
}
.vym-deal-head__btn:focus-visible {
  outline: 2px solid var(--vym-accent);
  outline-offset: 2px;
}
.vym-deal-head__btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.vym-deal-head__btn.is-active {
  background: var(--vym-accent);
  color: var(--vym-pill-fg);
  border-color: var(--vym-accent);
}
.vym-deal-head__btn.is-active svg { fill: currentColor; }

@media (max-width: 720px) {
  .vym-deal-head__crumb-current { max-width: 220px; }
}

/* Hide page-head buttons + ticket CTA when printing. */
@media print {
  .vym-deal-head__actions,
  .vym-deal-ticket__cta { display: none !important; }
}

/* ==========================================================================
   [voyamore_deal_ticket] — boarding-pass hero
   The .vym-deal-ticket card is the ONLY outer element — the host (Oxygen
   container) owns max-width and padding around it.
   ========================================================================== */

.vym-deal-ticket {
  position: relative;
  background: var(--vym-surface);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 460px;
  filter: drop-shadow(0 30px 60px -20px rgba(60, 45, 30, 0.18));
  -webkit-mask:
    radial-gradient(circle 13px at calc(50% - 0px) 0,    transparent 99%, #000 100%),
    radial-gradient(circle 13px at calc(50% - 0px) 100%, transparent 99%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 13px at calc(50% - 0px) 0,    transparent 99%, #000 100%),
    radial-gradient(circle 13px at calc(50% - 0px) 100%, transparent 99%, #000 100%);
  mask-composite: intersect;
}
html.dark .vym-deal-ticket {
  filter: drop-shadow(0 30px 60px -20px rgba(0, 0, 0, 0.6));
}

/* ----- Image side ----- */
.vym-deal-ticket__img {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  /* fallback gradient when no featured image is set */
  background: linear-gradient(140deg, #d4a259 0%, #b06a3a 35%, #5a2818 70%, #2a1410 100%);
}
.vym-deal-ticket__img-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.vym-deal-ticket__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.vym-deal-ticket__tag {
  position: absolute;
  top: 22px;
  left: 22px;
  background: var(--vym-accent);
  color: var(--vym-pill-fg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 7px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  z-index: 2;
  font-family: var(--vym-font-ui);
}

.vym-deal-ticket__overlay {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  z-index: 2;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.vym-deal-ticket__overlay > .vym-deal-ticket__overlay-right { text-align: right; }
.vym-deal-ticket__overlay-lbl {
  opacity: 0.7;
  display: block;
  margin-bottom: 4px;
}
.vym-deal-ticket__overlay-val {
  font-family: var(--vym-font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  display: block;
  line-height: 1.1;
}

/* ----- Info side ----- */
.vym-deal-ticket__info {
  position: relative;
  padding: 36px 40px 36px 56px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vym-deal-ticket__info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background-image: linear-gradient(to bottom, var(--vym-border) 50%, transparent 50%);
  background-size: 1px 8px;
  background-repeat: repeat-y;
}

.vym-deal-ticket__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vym-muted);
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--vym-border);
  margin-bottom: 24px;
}
.vym-deal-ticket__brand-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--vym-text);
}
.vym-deal-ticket__brand-mini::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vym-accent);
}

.vym-deal-ticket__route {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.vym-deal-ticket__code {
  font-family: var(--vym-font-display);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--vym-text);
}
.vym-deal-ticket__place {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vym-muted);
  margin-top: 10px;
}
.vym-deal-ticket__route-to { text-align: right; }
.vym-deal-ticket__plane {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vym-accent);
  height: 1px;
  position: relative;
  align-self: center;
}
.vym-deal-ticket__plane::before,
.vym-deal-ticket__plane::after {
  content: "";
  position: absolute;
  top: 0;
  height: 1px;
  background: var(--vym-border);
  width: 36%;
}
.vym-deal-ticket__plane::before { left: 0; }
.vym-deal-ticket__plane::after  { right: 0; }
.vym-deal-ticket__plane svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  position: relative;
  z-index: 1;
}

.vym-deal-ticket__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
  padding-bottom: 24px;
  margin-bottom: 22px;
  border-bottom: 1px dashed var(--vym-border);
}
.vym-deal-ticket__lbl {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vym-muted);
  margin-bottom: 6px;
}
.vym-deal-ticket__val {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--vym-text);
}

.vym-deal-ticket__pricing {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.vym-deal-ticket__price {
  font-family: var(--vym-font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--vym-text);
}
.vym-deal-ticket__price small {
  font-family: var(--vym-font-ui);
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vym-muted);
}
.vym-deal-ticket__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--vym-accent);
  color: var(--vym-pill-fg);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 13px;
  text-decoration: none;
  transition: gap 0.25s var(--vym-ease), box-shadow 0.25s var(--vym-ease), transform 0.25s var(--vym-ease);
}
.vym-deal-ticket__cta:hover {
  gap: 12px;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(15, 175, 203, 0.45);
}

/* ----- Responsive ----- */
@media (max-width: 880px) {
  .vym-deal-ticket {
    grid-template-columns: 1fr;
  }
  .vym-deal-ticket__img {
    min-height: 280px;
  }
  .vym-deal-ticket__info {
    padding: 32px 28px;
  }
  .vym-deal-ticket__info::before {
    left: 28px;
    right: 28px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background-image: linear-gradient(to right, var(--vym-border) 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
  }
  .vym-deal-ticket__route {
    grid-template-columns: 1fr 60px 1fr;
  }
  .vym-deal-ticket__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .vym-deal-ticket__info { padding: 28px 22px; }
  .vym-deal-ticket__overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
    font-size: 10px;
  }
  .vym-deal-ticket__overlay-val { font-size: 22px; }
}

/* ==========================================================================
   .vym-deal-article — deal article body typography.

   Add the class `vym-deal-article` to the wrapper around your post_content
   (e.g. the Oxygen post-content widget's "Custom CSS classes" field).
   The host (Oxygen container) owns column width — typically narrower than
   the story column because Deal Detail uses a 2-column layout with the
   Quick Facts aside.

   Uses native CSS nesting throughout. Tone is practical / informational
   (no drop cap, no auto-numbered h2 counter, slightly tighter sizing
   than .story-article). Auto-numbering is parked under Step 4 — when
   that unfreezes, the counter wiring goes into the h2 rule below.
   ========================================================================== */

.vym-deal-article {
  font-family: var(--vym-font-ui);
  font-size: 17px;
  line-height: 1.65;
  color: var(--vym-text);
  min-width: 0;
  counter-reset: deal-sec;

  /* ---- Vertical rhythm: every direct child gets the same gap. ---- */
  & > * + * { margin-top: 1.2em; }

  /* ---- Paragraphs ---- */
  & p {
    margin: 0;
    color: var(--vym-text);

    & strong { font-weight: 700; color: var(--vym-text); }
    & em     { font-style: italic; }
    & small  { font-size: 0.88em; color: var(--vym-muted); }
  }

  /* Drop cap on the opening paragraph. Opt out via .is-no-drop-cap. */
  & > p:first-of-type:not(.is-no-drop-cap)::first-letter {
    font-family: var(--vym-font-display);
    font-weight: 500;
    font-size: 64px;
    line-height: 0.85;
    float: left;
    margin: 6px 10px 0 0;
    color: var(--vym-text);
  }

  /* ---- Links ---- */
  & a {
    color: var(--vym-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s var(--vym-ease);

    &:hover { color: var(--vym-text); }
  }

  /* ---- Headings ---- */
  & h2 {
    font-family: var(--vym-font-display);
    font-weight: 600;
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--vym-text);
    margin: 2.4em 0 0.6em;
    scroll-margin-top: 96px;

    &:first-child { margin-top: 0; }

    /* Auto-numbered section prefix: 01, 02, 03, … */
    &::before {
      content: counter(deal-sec, decimal-leading-zero);
      counter-increment: deal-sec;
      display: block;
      margin-bottom: 10px;
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: var(--vym-accent);
    }
  }

  & h3 {
    font-family: var(--vym-font-display);
    font-weight: 600;
    font-size: clamp(20px, 1.9vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--vym-text);
    margin: 1.8em 0 0.4em;
    scroll-margin-top: 96px;
  }

  & h4 {
    font-family: var(--vym-font-ui);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--vym-muted);
    margin: 1.6em 0 0.4em;
  }

  & h5,
  & h6 {
    font-family: var(--vym-font-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    color: var(--vym-text);
    margin: 1.4em 0 0.3em;
  }

  /* ---- Lists ---- */
  & ul,
  & ol {
    margin: 0;
    padding-left: 1.2em;

    & li {
      margin-bottom: 0.4em;

      &::marker { color: var(--vym-accent); }

      &:last-child { margin-bottom: 0; }
    }

    /* Tight nested lists. */
    & ul,
    & ol {
      margin-top: 0.4em;
      margin-bottom: 0;
    }
  }

  /* ---- Horizontal rule (section break) ---- */
  & hr {
    border: 0;
    border-top: 1px dashed var(--vym-border);
    margin: 2.4em 0;
  }

  /* ---- Blockquote (plain) ---- */
  & blockquote:not(.wp-block-pullquote) {
    margin: 1.6em 0;
    padding: 4px 0 4px 1.2em;
    border-left: 3px solid var(--vym-accent);
    font-family: var(--vym-font-display);
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--vym-text);

    & p {
      margin: 0 0 0.5em;
      color: inherit;
      font: inherit;
    }
    & p:last-child { margin-bottom: 0; }

    & cite {
      display: block;
      margin-top: 10px;
      font-family: var(--font);
      font-style: normal;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--vym-muted);
    }
  }

  /* ---- Pull quote — for the rare case a deal article uses one. ---- */
  & .wp-block-pullquote,
  & .pullquote {
    margin: 2.4em 0;
    padding: 24px 28px;
    border-left: 3px solid var(--vym-accent);
    border-radius: 0;
    background: transparent;
    text-align: left;
    font-family: var(--vym-font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--vym-text);

    & p {
      margin: 0;
      color: inherit;
      font: inherit;
    }

    & cite {
      display: block;
      margin-top: 14px;
      font-family: var(--font);
      font-style: normal;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--vym-muted);
    }
  }

  /* ---- Figures & images ---- */
  & figure,
  & .wp-block-image {
    margin: 1.8em 0;

    & img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: var(--vym-radius);
      filter: drop-shadow(0 18px 36px -18px rgba(60, 45, 30, 0.18));
    }

    & figcaption {
      margin-top: 10px;
      font-family: var(--vym-font-ui);
      font-size: 13px;
      color: var(--vym-muted);
      text-align: center;
      line-height: 1.5;
    }
  }

  & img {
    max-width: 100%;
    height: auto;
    border-radius: var(--vym-radius);
  }

  /* ---- Callout aside (marker class: .vym-deal-callout) ----------------
     Editor wraps content in a Group block with class vym-deal-callout;
     the first heading inside becomes the small uppercase label. */
  & .vym-deal-callout {
    background: var(--vym-surface);
    border: 1px solid var(--vym-border);
    border-radius: var(--vym-radius);
    padding: 18px 22px;
    margin: 1.6em 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--vym-text);

    & > :first-child { margin-top: 0; }
    & > :last-child  { margin-bottom: 0; }

    & h2, & h3, & h4, & h5 {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--vym-muted);
      margin: 0 0 10px;

      &::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 1.5px solid var(--vym-accent);
        border-radius: 50%;
        background: radial-gradient(circle at center, var(--vym-accent) 0 2px, transparent 2px);
        flex-shrink: 0;
      }
    }

    & p { margin: 0 0 0.6em; }
    & p:last-child { margin-bottom: 0; }
  }

  /* ---- Code, kbd, samp ---- */
  & :where(code, kbd, samp) {
    font-family: var(--font);
    font-size: 0.92em;
    background: var(--vym-bg-soft);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--vym-text);
  }

  & pre {
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.6;
    background: var(--vym-bg-soft);
    padding: 16px 18px;
    border-radius: var(--vym-radius);
    overflow-x: auto;
    margin: 1.6em 0;
    border: 1px solid var(--vym-border);

    & code {
      background: transparent;
      padding: 0;
      border-radius: 0;
      font-size: inherit;
    }
  }

  /* ---- Tables ---- */
  & table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6em 0;
    font-size: 14px;

    & th,
    & td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--vym-border);
      text-align: left;
      vertical-align: top;
    }

    & th {
      font-family: var(--vym-font-ui);
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--vym-muted);
    }

    & tr:last-child td { border-bottom: 0; }
  }

  /* ---- Definition list — handy for deal "key facts" rows ---- */
  & dl {
    margin: 1.4em 0;

    & dt {
      font-weight: 700;
      margin-top: 12px;
    }
    & dt:first-child { margin-top: 0; }
    & dd {
      margin: 4px 0 12px 0;
      color: var(--vym-muted);
    }
  }

  /* ---- Mark (highlight) ---- */
  & mark {
    background: linear-gradient(180deg, transparent 60%, rgba(15, 175, 203, 0.25) 60%);
    color: inherit;
    padding: 0 2px;
  }

  /* ---- Gutenberg button block (handy for "Book this deal" inline CTAs) ---- */
  & .wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--vym-accent);
    color: var(--vym-pill-fg);
    font-family: var(--vym-font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: transform 0.25s var(--vym-ease), box-shadow 0.25s var(--vym-ease);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px -10px rgba(15, 175, 203, 0.45);
      color: var(--vym-pill-fg);
    }
  }

  /* ---- Responsive ---- */
  @media (max-width: 720px) {
    font-size: 16px;

    & h2 { margin-top: 2em; }

    & .wp-block-pullquote,
    & .pullquote {
      padding: 20px 22px;
    }
  }

  /* ---- Print: strip drop shadows ---- */
  @media print {
    & figure img,
    & .wp-block-image img { filter: none; }
  }
}

/* ==========================================================================
   [voyamore_deal_facts] — full Quick Facts aside card.
   Card chrome + heading + facts list + actions row + share row.
   ========================================================================== */

.vym-deal-facts-card {
  background: var(--vym-surface);
  border: 1px solid var(--vym-border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vym-deal-facts-card__heading {
  font-family: var(--vym-font-display);
  font-weight: 500;
  font-size: 18px;
  margin: 0;
  color: var(--vym-text);
}

/* ---- Facts list ---- */
.vym-deal-facts {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vym-deal-facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--vym-border);
}
.vym-deal-facts__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.vym-deal-facts__label {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vym-muted);
  margin: 0;
  flex: 0 0 auto;
}
.vym-deal-facts__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--vym-text);
  margin: 0;
  text-align: right;
  word-break: break-word;
}
.vym-deal-facts__value--price {
  font-family: var(--vym-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- Pills (CTA + Save) ---- */
.vym-deal-facts-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vym-deal-facts-card__actions .vym-pill {
  width: 100%;
  justify-content: center;
}
/* .vym-pill / .vym-pill-primary / .vym-pill-ghost styles live in
   voyamore-core.css as a shared utility — both deal-detail and
   story-detail rely on them. Don't redefine here. */

/* ---- Share row ---- */
.vym-deal-facts-card__share {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vym-deal-facts-card__share-lbl {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vym-muted);
  margin-right: 4px;
}
.vym-deal-facts-card__share-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--vym-border);
  background: transparent;
  color: var(--vym-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.25s var(--vym-ease),
              border-color 0.25s var(--vym-ease),
              background 0.25s var(--vym-ease),
              transform 0.25s var(--vym-ease);
}
.vym-deal-facts-card__share-btn:hover {
  color: var(--vym-text);
  border-color: var(--vym-text);
  transform: translateY(-1px);
}
.vym-deal-facts-card__share-btn:focus-visible {
  outline: 2px solid var(--vym-accent);
  outline-offset: 2px;
}
.vym-deal-facts-card__share-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.vym-deal-facts-card__share-btn.is-active {
  background: var(--vym-accent);
  color: var(--vym-pill-fg);
  border-color: var(--vym-accent);
}

/* ==========================================================================
   .vym-deal-ticket--image-only

   Deal types with no route — cruises today — drop the boarding-pass half
   entirely. Without a departure airport, airline or stops there's nothing
   to put in it, and the perforated-ticket metaphor stops making sense.

   What's left is a single image card with the price laid over it.
   ========================================================================== */

.vym-deal-ticket--image-only {
  /* The mask exists only to punch the two perforation notches at the seam
     between the halves. With one half there's no seam, and the notches
     would just be bites out of the top and bottom edges.
     Corners stay rounded via the base overflow:hidden + border-radius. */
  -webkit-mask: none;
  mask: none;

  grid-template-columns: 1fr;
  min-height: 0;

  & .vym-deal-ticket__img {
    /* The image is the whole card now, so it needs its own height —
       previously it took it from the info column beside it. */
    min-height: clamp(320px, 42vw, 460px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Deepen the scrim: the price and CTA sit on the image, and the original
     gradient was only tuned to carry the small overlay labels. */
  & .vym-deal-ticket__img::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0) 32%,
      rgba(0, 0, 0, 0.72) 100%
    );
  }

  /* Overlay stops being absolutely placed and becomes the first of two
     stacked rows, so the pricing can sit beneath it rather than on top.

     `relative` rather than `static`: the image layer and the scrim are both
     absolutely positioned, so a static overlay would paint underneath them. */
  & .vym-deal-ticket__overlay {
    position: relative;
    inset: auto;
    order: 1;
    padding: 0 clamp(20px, 3vw, 32px);
    margin-top: auto;
  }

  & .vym-deal-ticket__pricing {
    position: relative;
    z-index: 2;
    order: 2;
    margin: 18px 0 0;
    padding: 0 clamp(20px, 3vw, 32px) clamp(20px, 3vw, 30px);
    align-items: center;
  }

  /* On the image, these need to read light regardless of the theme. */
  & .vym-deal-ticket__price,
  & .vym-deal-ticket__price small,
  & .vym-deal-ticket__lbl {
    color: #fff;
  }
  & .vym-deal-ticket__price small,
  & .vym-deal-ticket__lbl {
    opacity: 0.75;
  }
}

@media (max-width: 640px) {
  .vym-deal-ticket--image-only .vym-deal-ticket__pricing {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .vym-deal-ticket--image-only .vym-deal-ticket__cta { width: 100%; justify-content: center; }
}