/* Hallmark · redesign (in-place, audited/kept — already on-system) ·
 * pre-emit critique: P5 H4 E5 S5 R5 V4
 * Destination page — generalized from nha-trang.css.
 * Data-driven: used by category-public.ejs for every category.
 * Scoped to .dst so it never overrides the shared nav/footer palette
 * (those keep --ink / --cream / --ochre from landing.css). Own ocean/teal
 * palette (--dst-*) is a deliberate thematic variant of the site's cool
 * blue-ochre signature + --sun orange accent — audited and left as-is,
 * no rework needed.
 */

.dst {
  /* Ocean → shore palette */
  --dst-deep:    #08415C;
  --dst-blue:    #1C6E8C;
  --dst-teal:    #2FB6AE;
  --dst-aqua:    #6FD7CE;
  --dst-sand:    #8FD1E8;
  --dst-sun:     #EF7B45;
  --dst-shell:   #F4FAFD;
  --dst-shell-2: #E3EEF5;
  --dst-ink:     #123642;
  --dst-muted:   #5C7680;
  --dst-line:    rgba(18, 54, 66, 0.12);
  /* Confirmed-loaded Inter static weight (see GoogleFontsLink.tsx) — do not
     raise this above 700 (the heaviest weight actually fetched), which
     falls back to synthetic/approximated bolding in the browser. 700 was
     chosen over 600 after user feedback that 600 didn't read as clearly
     bold against the deliberately thin (300) body text. */
  --content-bold-weight: 700;

  --dst-shadow:  0 18px 40px -22px rgba(8, 65, 92, 0.55);
  --dst-radius:  14px;

  background: var(--dst-shell);
  color: var(--dst-ink);
  font-family: var(--font-body);
  /* No overflow-x here on purpose: setting overflow-x without overflow-y (or
     even pairing it with an explicit overflow-y:visible) makes the browser
     force BOTH axes to a non-visible value — per CSS2.1 §11.1.1, "visible"
     paired with a non-visible sibling axis computes to "auto", even when
     "visible" is stated explicitly. That silently turned .dst into its own
     scroll container next to the page's real scrollbar (the "2 scrollbars"
     bug). body already has overflow-x:hidden site-wide (landing.css) as the
     horizontal-clip safety net, so .dst doesn't need its own. */
}

.dst *,
.dst *::before,
.dst *::after { box-sizing: border-box; }

.dst-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

/* Reusable photo container with a designed CSS fallback (ocean gradient).
   Shows even before a real photo exists; the <img> covers it once loaded,
   and hides itself on error so the fallback stays visible. */
.dst-photo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 12%, rgba(111, 215, 206, 0.55), transparent 55%),
    radial-gradient(140% 120% at 12% 105%, rgba(239, 123, 69, 0.28), transparent 50%),
    linear-gradient(155deg, var(--dst-blue) 0%, var(--dst-deep) 62%, #05303f 100%);
}
.dst-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* =========================== HERO =========================== */
.dst-hero {
  /* Clear the fixed nav (68px) with breathing room so the title never
     collides with it. */
  margin-top: calc(68px + 1.5rem);
  position: relative;
  min-height: min(84vh, 760px);
  display: flex;
  align-items: flex-end;
  padding: clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  isolation: isolate;
}
.dst-hero .dst-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.dst-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(4, 32, 43, 0.35);
}
.dst-hero-inner { max-width: 780px; }
.dst-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dst-aqua);
  margin-bottom: 1.1rem;
  opacity: 0;
  animation: dst-fade 0.7s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dst-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--dst-aqua);
}
.dst-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 400;
  margin-bottom: 1rem;
  opacity: 0;
  animation: dst-fade 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dst-breadcrumb a {
  color: rgba(248, 243, 234, 0.68);
  text-decoration: none;
  transition: color 0.2s;
}
.dst-breadcrumb a:hover { color: #F8F3EA; }
.dst-breadcrumb-sep { color: rgba(248, 243, 234, 0.35); }
.dst-breadcrumb-current { color: #F8F3EA; }
.dst-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 6.2vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
  margin: 0 0 1.3rem;
}
.dst-hero-title .dst-line { display: block; overflow: hidden; }
.dst-hero-title .dst-line > span {
  display: block;
  transform: translateY(105%);
  animation: dst-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dst-hero-title .dst-line:nth-child(1) > span { animation-delay: 0.28s; }
.dst-hero-title .dst-line:nth-child(2) > span { animation-delay: 0.4s; }
.dst-hero-title em { font-weight: 500; letter-spacing: 0.01em; color: var(--dst-sand); }
.dst-hero-sub {
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 2rem;
  opacity: 0;
  animation: dst-fade 0.8s 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dst-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  opacity: 0;
  animation: dst-fade 0.8s 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dst-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  background: var(--dst-sun);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(239, 123, 69, 0.7);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s, background 0.25s;
}
.dst-cta:hover {
  transform: translateY(-3px);
  background: #f2884f;
  box-shadow: 0 20px 38px -12px rgba(239, 123, 69, 0.75);
}
.dst-cta svg { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.dst-cta:hover svg { transform: translateX(4px); }
.dst-cta:focus-visible,
.dst-textlink:focus-visible {
  outline: 3px solid var(--dst-aqua);
  outline-offset: 3px;
}
.dst-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}
.dst-textlink:hover { color: var(--dst-sand); border-color: var(--dst-sand); }

.dst-hero-meta {
  position: absolute;
  top: clamp(2rem, 5vw, 3.5rem);
  right: clamp(1.5rem, 7vw, 6.5rem);
  text-align: right;
  color: #fff;
  opacity: 0;
  animation: dst-fade 0.8s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dst-hero-meta .dst-days {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.dst-hero-meta .dst-days-label {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dst-aqua);
  margin-top: 0.4rem;
}

/* ===================== MAIN TWO-COLUMN ===================== */
.dst-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 6vw, 5rem) clamp(4.5rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* ---- Left: itinerary timeline ---- */
.dst-day {
  position: relative;
  padding: 0 2.6rem 2.4rem 2.6rem;
  border-left: 2px solid var(--dst-line);
}
.dst-day:last-child { border-left-color: transparent; padding-bottom: 0; }
.dst-day-marker {
  position: absolute;
  left: -19px;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--dst-shell);
  border: 2px solid var(--dst-teal);
  color: var(--dst-blue);
  box-shadow: 0 0 0 5px var(--dst-shell);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.dst-day-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}
.dst-day-num {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dst-sun);
}
/* Meal-plan badge (e.g. "Ăn 3 bữa") */
.dst-day-meal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(58, 123, 122, 0.1);
  border: 1px solid rgba(58, 123, 122, 0.25);
  color: var(--dst-teal-dark, #2f6b6a);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.dst-day-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--dst-ink);
  line-height: 1.15;
  margin: 0 0 0.7rem;
}
/* Structured Sáng / Chiều / Tối sessions */
.dst-day-sessions { display: flex; flex-direction: column; gap: 0.9rem; }
.dst-day-session {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  border-left: 2px solid var(--dst-line);
  padding-left: 0.85rem;
}
.dst-day-session-main {
  flex: 1 1 auto;
  min-width: 0;
}
.dst-day-session-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dst-teal);
  margin-bottom: 0.3rem;
}
.dst-day-session-body {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
  /* Matches the admin editor's default text color (public/css/admin.css
     .rich-editable) so itinerary content reads the same shade of black on
     the public page as it did while being written — was --dst-muted grey. */
  color: #000000;
}
.dst-day-session-body p { margin: 0 0 0.6rem; }
.dst-day-session-body > :last-child { margin-bottom: 0; }
/* At this block's thin 300 base, the browser's default "bolder" keyword for
   <strong>/<b> only steps up to ~400 — barely different from the
   surrounding text, so bold written in the admin editor didn't read as bold
   here. Same fix as .dst-description strong above. */
/* Teal, not dark ink: a bold word should pop off the paragraph at a glance,
   not just read slightly heavier in the same color as the rest of the
   text — see 2026-09-16 bold-hierarchy follow-up. Distinct hue from the
   .dst-time-marker blue so the two bold treatments don't visually merge. */
.dst-day-session-body strong, .dst-day-session-body b { font-weight: var(--content-bold-weight); color: var(--dst-teal); }
.dst-day-session-photos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 0 0 auto;
  align-self: flex-start;
  position: sticky;
  top: 5.5rem;
}
.dst-day-session-photo {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 16px -10px rgba(8, 65, 92, 0.45);
}
.dst-day-session-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dst-day-desc {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.5;
  /* Matches the admin editor's default text color — was --dst-muted grey. */
  color: #000000;
  margin: 0;
}
/* Legacy plain-text markup keeps pre-line; rich HTML from the editor renders
   its own block structure. */
.dst-day-desc--rich { white-space: normal; }
/* Structured description (paragraphs + bullets) */
.dst-day-desc p { margin: 0 0 0.75rem; }
.dst-day-desc > :last-child { margin-bottom: 0; }
.dst-day-desc strong, .dst-day-desc b { font-weight: var(--content-bold-weight); color: var(--dst-teal); }
/* ...except pasted/WYSIWYG content (--rich): "keep formatting" paste
   (tour-editor-paste.js) means a PDF's bold-but-uncolored word should stay
   the same color as the rest of the sentence, just heavier — the teal
   accent above is only for the admin's manually-typed **bold** markup. A
   word that *was* colored in the source keeps that color regardless, via
   its own inline style (always wins over this class rule). */
.dst-day-desc--rich strong, .dst-day-desc--rich b { color: inherit; }
/* The global *,*::before,*::after reset (main.css) zeroes <ul>/<ol> padding,
   so raw WYSIWYG list markup (no class of its own, unlike .dst-day-list)
   would otherwise render its bullet flush against the day's own left edge —
   sitting on top of .dst-day-session's border-left when nested inside a
   Sáng/Chiều/Tối session. Restore the indent so the marker clears it. */
.dst-day-desc--rich ul,
.dst-day-desc--rich ol {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
}
.dst-day-desc--rich li { margin-bottom: 0.35rem; }
.dst-day-desc--rich li::marker { color: var(--dst-teal); }

/* ── Freeform rich description (descriptionHtml) ────────────
   Authored in the admin WYSIWYG editor; replaces the day-by-day
   itinerary on the tour detail page when present. */
.dst-description {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  /* Matches the admin editor's default text color — was --dst-muted grey. */
  color: #000000;
}
.dst-description p { margin: 0 0 1rem; }
.dst-description > :last-child { margin-bottom: 0; }
.dst-description h1,
.dst-description h2,
.dst-description h3,
.dst-description h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--dst-ink);
  line-height: 1.2;
  margin: 1.6rem 0 0.6rem;
}
.dst-description h1:first-child,
.dst-description h2:first-child,
.dst-description h3:first-child,
.dst-description h4:first-child { margin-top: 0; }
.dst-description ul,
.dst-description ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}
.dst-description li { margin-bottom: 0.35rem; }
.dst-description li::marker { color: var(--dst-teal); }
.dst-description blockquote {
  margin: 0 0 1rem;
  padding: 0.4rem 0 0.4rem 1.1rem;
  border-left: 3px solid var(--dst-teal);
  color: var(--dst-blue);
  font-style: italic;
}
/* Always pasted/WYSIWYG content (descriptionHtml has no plain-text path,
   unlike .dst-day-desc) — same "keep formatting" reasoning as
   .dst-day-desc--rich above: weight only, no forced color. */
.dst-description strong, .dst-description b { font-weight: var(--content-bold-weight); }
.dst-description a { color: var(--dst-teal); text-decoration: underline; }
.dst-description table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}
.dst-description th,
.dst-description td {
  border: 1px solid var(--dst-line, #EDE5D5);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.dst-description th {
  background: rgba(58, 123, 122, 0.08);
  font-weight: 600;
  color: var(--dst-ink);
}

/* Images inserted inline by the editor (uploaded via /admin/tours/:id/images) */
.dst-description .editor-img-wrap,
.dst-description img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 1rem 0;
  box-shadow: var(--dst-shadow);
}
.dst-day-list {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
}
.dst-day-list li { margin-bottom: 0.35rem; }
.dst-day-list li::marker { color: var(--dst-teal); }
.dst-day-time-header {
  margin: 0.9rem 0 0.4rem !important;
}
.dst-day-time-header:first-child { margin-top: 0 !important; }
/* Auto-detected time markers (see TourItinerary.tsx's boldTimeMarkerSegments)
   get a distinct color from manual bold, so "08h00:" reads as a deliberate
   marker rather than a random bolded word — while staying the same weight
   as other bold text, not a bigger/heavier treatment. Shares the rule with
   the whole-line **Sáng:**-style header for visual consistency between the
   two time-marker presentations. */
.dst-day-session-body .dst-time-marker,
.dst-day-desc .dst-time-marker,
.dst-description .dst-time-marker,
.dst-day-time-header strong {
  font-weight: var(--content-bold-weight);
  color: var(--dst-blue);
}

/* ---- Day row: this day's own text + its own photo, side by side ---- */
.dst-day-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
/* 6/4 allocation: itinerary text ~60%, photos ~40% — text stays compact
   (smaller type, fewer wide lines) while the photos become the dominant,
   right-aligned visual element. */
.dst-day-text { flex: 1 1 60%; min-width: 0; }

/* ---- Right column: every photo for this day, uniform size, stacked ---- */
.dst-day-photos {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex: 0 1 40%;
  /* Push the image column to the far right of the expanded text area. */
  margin-left: auto;
}

/* ---- Per-day photo card (polaroid-consistent) — all photos in a day share the same size ---- */
.dst-day-photo {
  position: relative;
  margin: 0;
  width: 100%;
  /* Doubled photo footprint — now the visual anchor of each day row. */
  max-width: 520px;
  background: #fff;
  padding: 10px 10px 0;
  border-radius: 5px;
  box-shadow: var(--dst-shadow);
  transform: rotate(-1.2deg);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s;
  will-change: transform;
}
.dst-day-photos .dst-day-photo:nth-child(even) { transform: rotate(1.4deg); }
.dst-day-photo::after {
  content: "";
  display: block;
  height: 8px;
}
.dst-day-photo img {
  display: block;
  width: 100%;
  /* Strict 4:3 frame with object-cover — images scale down uniformly and
     never distort or break the layout, whatever the source dimensions. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}
.dst-day-photo:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 24px 48px -22px rgba(8, 65, 92, 0.6);
}

@media (max-width: 640px) {
  .dst-day-row { flex-direction: column; }
  .dst-day-text { flex: 1 1 auto; }
  .dst-day-photos { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; margin-left: 0; }
  .dst-day-session { flex-direction: column; gap: 0.85rem; }
  .dst-day-session-photos { position: static; flex-direction: row; flex-wrap: wrap; width: 100%; }
  .dst-day-photo,
  .dst-day-photos .dst-day-photo:nth-child(even) { transform: rotate(0deg); width: 100%; max-width: 220px; }
  .dst-day { padding: 0 0 2.4rem 2.6rem; }
}

/* ---- Right: staggered polaroid gallery ---- */
.dst-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.7rem);
}
.dst-card {
  background: #fff;
  padding: 12px 12px 0;
  border-radius: 6px;
  box-shadow: var(--dst-shadow);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s;
  will-change: transform;
}
.dst-card:nth-child(6n+1) { transform: rotate(-1.6deg); }
.dst-card:nth-child(6n+2) { transform: rotate(1.2deg); margin-top: 2.2rem; }
.dst-card:nth-child(6n+3) { transform: rotate(1.4deg); }
.dst-card:nth-child(6n+4) { transform: rotate(-1.1deg); margin-top: -0.8rem; }
.dst-card:nth-child(6n+5) { transform: rotate(-1.3deg); margin-top: 1.6rem; }
.dst-card:nth-child(6n+6) { transform: rotate(1.5deg); }
.dst-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.02);
  box-shadow: 0 28px 55px -24px rgba(8, 65, 92, 0.6);
  z-index: 2;
}
.dst-card .dst-photo {
  border-radius: 3px;
  aspect-ratio: 4 / 5;
}
.dst-card:nth-child(6n+2) .dst-photo,
.dst-card:nth-child(6n+5) .dst-photo { aspect-ratio: 1 / 1; }
.dst-card-caption { padding: 0.85rem 0.4rem 0.9rem; }
.dst-card-caption h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dst-ink);
  margin: 0 0 0.25rem;
}
.dst-card-caption p {
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--dst-muted);
  margin: 0;
}

/* Tour card variant: clickable polaroid */
.dst-card--tour { cursor: pointer; display: block; color: inherit; text-decoration: none; }
.dst-card--tour:focus-visible { outline: 2px solid var(--dst-blue); outline-offset: 4px; }

/* ===================== GALLERY-ONLY LAYOUT ===================== */
/* When a category has no itinerary yet: full-width picturesque wall. */
.dst-picturesque {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 6vw, 5rem) clamp(4.5rem, 8vw, 7rem);
}
.dst-picturesque .dst-section-head { margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.dst-gallery--full {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 780px) {
  .dst-gallery--full { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== EMPTY STATE ===================== */
.dst-empty {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--dst-muted);
}
.dst-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.dst-empty p {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
}
.dst-empty span { font-size: 0.85rem; opacity: 0.7; }

/* ===================== TOPIC TABS ===================== */
.dst-topic-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.dst-topic-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.3rem;
  border: 1px solid var(--dst-line);
  border-radius: 999px;
  background: var(--dst-shell-2);
  color: var(--dst-muted);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.dst-topic-tab:hover {
  background: #fff;
  color: var(--dst-ink);
  border-color: var(--dst-teal);
}
.dst-topic-tab:focus-visible {
  outline: 3px solid var(--dst-teal);
  outline-offset: 2px;
}
.dst-topic-tab.is-active,
.dst-topic-tab[aria-selected="true"] {
  background: var(--dst-deep);
  color: #fff;
  border-color: var(--dst-deep);
  box-shadow: 0 4px 14px rgba(8, 65, 92, 0.35);
}
.dst-topic-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}
.dst-topic-tab.is-active .dst-topic-count,
.dst-topic-tab[aria-selected="true"] .dst-topic-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
/* Panel carries the section's bottom spacing while the tours section
   is hidden (the topics section itself has padding-bottom: 0). */
.dst-topic-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4.5rem, 8vw, 7rem);
}
.dst-topic-panel[hidden] { display: none; }
.dst-topic-panel .dst-gallery {
  animation: dst-fade 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Topic cards read like travel-journal polaroids: sentence-case
   italic captions, unlike the uppercase product names on tour cards. */
.dst-card--topic .dst-card-caption p {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dst-ink);
}

@media (max-width: 560px) {
  .dst-topic-tabs { gap: 0.35rem; }
  .dst-topic-tab { padding: 0.55rem 1rem; font-size: 0.85rem; }
}

/* Topics section sits tight above the tours/panel content */
.dst-picturesque--topics {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 0;
}
.dst-picturesque--topics .dst-section-head { margin-bottom: 0; }
.dst-picturesque--tours {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  scroll-margin-top: 84px; /* clear the fixed nav when scrolled into view */
}

/* ---- Tour card affordances: duration chip + action hint ---- */
.dst-card-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgba(4, 32, 43, 0.72);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
}
/* ---- Departure stamp — ngày khởi hành for international tours ---- */
.dst-depart {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  padding: 0.42rem 0.6rem 0.48rem;
  background: rgba(251, 246, 238, 0.94);
  border-radius: 8px;
  box-shadow: 0 8px 20px -10px rgba(8, 65, 92, 0.5);
  text-align: center;
  color: var(--dst-ink);
}
.dst-depart-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dst-sun);
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  border-bottom: 2px dotted rgba(239, 123, 69, 0.5);
  white-space: nowrap;
}
.dst-depart-day {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}
.dst-depart-my {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dst-muted);
  margin-top: 0.22rem;
  white-space: nowrap;
}
.dst-depart--past { filter: grayscale(1); opacity: 0.8; }

/* ── Ticket strip — the single-tour page's own boarding-pass ─────────
   Same travel-document signature as the homepage tour-sale cards
   (dashed perforation + punched notches), rebuilt as a horizontal
   strip since a detail page holds one tour, not a grid of them. */
.dst-ticket-strip {
  display: flex; align-items: stretch;
  background: var(--dst-shell-2);
  border: 1px solid var(--dst-line);
  border-radius: var(--dst-radius);
  /* Now the first element in the timeline (the page title was removed) —
     lead with breathing room instead of a tight top margin. */
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 1.6rem;
  overflow: hidden;
}
.dst-ticket-main {
  display: flex; align-items: center; gap: 0.85rem;
  flex: 1 1 auto; min-width: 0;
  padding: 0.9rem 1.1rem;
}
.dst-ticket-duration {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: var(--dst-ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
}
.dst-ticket-route {
  display: flex; align-items: center; gap: 0.4rem;
  min-width: 0; color: var(--dst-muted);
}
.dst-ticket-origin, .dst-ticket-dest {
  font-family: var(--font-body);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.dst-ticket-dest {
  color: var(--dst-ink); overflow: hidden; text-overflow: ellipsis;
}
.dst-ticket-route svg { flex-shrink: 0; color: var(--dst-blue); }

@media (max-width: 600px) {
  .dst-ticket-strip { flex-direction: column; }
}

.dst-card-caption .dst-card-hint {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--dst-blue);
  transition: color 0.25s;
}
.dst-card--tour:hover .dst-card-hint,
.dst-card--tour:focus-visible .dst-card-hint { color: var(--dst-sun); }

/* ---- Skeleton polaroids while tours load ---- */
.dst-card--skeleton { pointer-events: none; }
.dst-card--skeleton .dst-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: dst-shimmer 1.4s infinite;
}
@keyframes dst-shimmer {
  to { transform: translateX(100%); }
}

/* ---- Back to tour list ---- */
.dst-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--dst-line);
  border-radius: 999px;
  background: #fff;
  color: var(--dst-blue);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, transform 0.25s;
}
.dst-back:hover {
  border-color: var(--dst-teal);
  color: var(--dst-ink);
  transform: translateX(-2px);
}
.dst-back:focus-visible {
  outline: 3px solid var(--dst-teal);
  outline-offset: 2px;
}

/* ---- In-app PDF itinerary viewer ----
   Embeds the tour's itinerary PDF directly on the page (native browser PDF
   scrolling + zoom inside a fixed-height frame) so users stay on-site instead
   of being sent to an external viewer. */
.dst-pdf-viewer {
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--dst-line);
  border-radius: var(--dst-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--dst-shadow);
}
.dst-pdf-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--dst-line);
  background: var(--dst-shell);
}
.dst-pdf-viewer-label {
  font-family: var(--font-info);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dst-muted);
}
.dst-pdf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--dst-blue);
  background: #fff;
  border: 1px solid var(--dst-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.dst-pdf-toggle:hover {
  color: var(--dst-teal);
  border-color: var(--dst-teal);
  background: rgba(0, 0, 0, 0.02);
}
.dst-pdf-toggle .dst-pdf-toggle-icon {
  flex-shrink: 0;
}
.dst-pdf-toggle[aria-expanded='true'] .dst-pdf-toggle-icon {
  transform: rotate(180deg);
}
/* Fixed-height frame (~80vh): the browser's native PDF viewer inside provides
   scrolling and zoom, so the page itself never grows by document height. */
.dst-pdf-frame-wrap[hidden] { display: none; }
.dst-pdf-frame {
  display: block;
  width: 100%;
  height: 80vh;
  border: 0;
  background: #525659; /* neutral reader backdrop while the PDF loads */
}
/* On touch devices the toggle script sets iframe.hidden = true (the mobile
   canvas viewer replaces it) — without this, the class selector above ties
   in specificity with the UA's [hidden] rule and wins (author beats
   user-agent on a tie), leaving an 80vh blank iframe visible above the
   actual PDF content. */
.dst-pdf-frame[hidden] { display: none; }
@media (max-width: 640px) {
  .dst-pdf-frame { height: 70vh; }
}

/* ---- Mobile PDF viewer (pdf-mobile-viewer.js) ----
   Renders PDF.js canvas pages inline inside the same toggleable frame the
   desktop iframe uses (.dst-pdf-frame-wrap), stacked and scrollable —
   no full-screen overlay, no page-at-a-time nav. See TourItinerary.tsx's
   inline script for the shared open/close toggle. */
.dst-pdf-mobile-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem;
  background: #525659;
}
.dst-pdf-mobile-scroll[hidden] { display: none; }
@media (max-width: 640px) {
  .dst-pdf-mobile-scroll { height: 70vh; }
}
.dst-pdf-mobile-page-canvas {
  max-width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.dst-pdf-mobile-status {
  margin: auto;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  padding: 0 1rem;
}
.dst-pdf-mobile-open-tab {
  margin: 0.5rem auto auto;
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: var(--dst-teal);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Tour layout: itinerary + sticky booking sidebar ---- */
.dst-tour-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 960px) {
  .dst-tour-layout {
    /* 7:3 split — content takes ~70%, booking sidebar ~30% */
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  }
  .dst-tour-sidebar {
    position: sticky;
    /* Clears the fixed nav (68px) plus generous breathing room — the box
       follows the reader down long itineraries without feeling pinned. */
    top: calc(68px + 2rem);
  }
}
/* No sibling to space against inside the sidebar — margin here would
   collapse through .dst-tour-sidebar and throw off the sticky offset. */
.dst-tour-sidebar .dst-booking { margin: 0; }

/* ---- Booking box ---- */
.dst-booking {
  margin: clamp(1.5rem, 3vw, 2.2rem) 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: #fff;
  border: 1px solid var(--dst-line);
  border-radius: var(--dst-radius);
  box-shadow: var(--dst-shadow);
}
.dst-booking-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--dst-deep);
  margin: 0 0 1rem;
}
.dst-booking-fld { margin-bottom: 1rem; }
.dst-booking-fld label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dst-muted);
  margin-bottom: 0.4rem;
}
.dst-booking-fld select,
.dst-booking-fld input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--dst-line);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--dst-shell);
  color: var(--dst-ink);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.dst-booking-fld select:focus,
.dst-booking-fld input:focus { border-color: var(--dst-teal); }
.dst-booking-fld input[aria-invalid="true"] { border-color: var(--dst-sun); }
.dst-fld-err {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--dst-sun);
}

/* ---- Departure date: custom listbox (button + popover panel) ----
   Replaces a native <select> whose single-line "date · seats · price"
   option text clipped/overflowed. Each option is a two-line row (date,
   then seats/price meta) so nothing truncates or overlaps sibling fields. */
.dst-select { position: relative; }
.dst-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--dst-line);
  border-radius: 8px;
  background: var(--dst-shell);
  color: var(--dst-ink);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.dst-select-trigger:hover { border-color: var(--dst-teal); }
.dst-select-trigger:focus-visible,
.dst-select-trigger[aria-expanded="true"] { outline: none; border-color: var(--dst-teal); }
.dst-select-trigger-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.dst-select-trigger-main {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dst-ink);
}
.dst-select-trigger-meta {
  font-size: 0.78rem;
  color: var(--dst-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dst-select-chevron { flex-shrink: 0; color: var(--dst-blue); transition: transform 0.2s; }
.dst-select-trigger[aria-expanded="true"] .dst-select-chevron { transform: rotate(180deg); }

/* In-flow, not position:absolute: an overlaid popover here would sit
   directly on top of the passenger counters immediately below it in the
   form (the next sibling field) — there's no empty space in this sidebar
   for it to float over. Opening it instead pushes those fields down, which
   the page (and the sticky sidebar within it) already scrolls to
   accommodate, so nothing gets clipped or covered. */
.dst-select-panel {
  margin: 0.5rem 0 0;
  padding: 0.4rem;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--dst-line);
  border-radius: 10px;
  /* Deliberately not var(--dst-shadow) here — that token (0 18px 40px) is
     tuned for large surface cards like .dst-booking itself; on a small
     in-flow dropdown the same blur/spread reads as an oversized blurred
     halo rather than a subtle "floating option list" elevation. */
  box-shadow: 0 4px 14px -4px rgba(8, 65, 92, 0.22);
}
.dst-select-panel[hidden] { display: none; }
.dst-select-opt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
}
.dst-select-opt + .dst-select-opt { margin-top: 2px; }
.dst-select-opt-main { font-size: 0.92rem; font-weight: 600; color: var(--dst-ink); }
.dst-select-opt-meta { font-size: 0.76rem; color: var(--dst-muted); }
.dst-select-opt:hover,
.dst-select-opt:focus { background: var(--dst-shell-2); outline: none; }
.dst-select-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--dst-teal); }
.dst-select-opt[aria-selected="true"] { background: rgba(47, 182, 174, 0.12); }
.dst-select-opt[aria-selected="true"] .dst-select-opt-main { color: var(--dst-blue); }
.dst-booking-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: var(--dst-teal);
  cursor: pointer;
  transition: background 0.2s;
}
.dst-booking-submit:hover { background: #0d6b7a; }
.dst-booking-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.dst-booking-status {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem;
  border-radius: 6px;
}
.dst-booking-status.is-success { background: rgba(47, 182, 174, 0.12); color: var(--dst-blue); }
.dst-booking-status.is-error { background: rgba(239, 123, 69, 0.12); color: var(--dst-sun); }

/* ---- Passenger counters (adult/child/infant, each with its own fare) ---- */
.dst-counter-fld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.dst-counter-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.dst-counter-label span:first-child {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dst-ink);
}
.dst-counter-fare {
  font-size: 0.7rem;
  color: var(--dst-muted);
}
.dst-counter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.dst-counter-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dst-line);
  border-radius: 999px;
  background: var(--dst-shell);
  color: var(--dst-deep);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.dst-counter-btn:hover { background: #fff; border-color: var(--dst-teal); }
.dst-counter-btn:focus-visible { outline: 2px solid var(--dst-teal); outline-offset: 2px; }
.dst-counter input {
  width: 2.25rem;
  box-sizing: border-box;
  text-align: center;
  border: none;
  background: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dst-ink);
  padding: 0;
  /* readOnly (JS-driven by the +/- buttons), not disabled — still submits with the form. */
  pointer-events: none;
  /* A bare type="number" reserves space for the browser's native up/down
     spin buttons on the right (Chrome/Edge/Safari), which pushes the digit
     off-center inside the fixed-width box even with text-align:center —
     that's the actual cause of the "0 looks left of center" look, not the
     surrounding flex layout. Hide them explicitly rather than growing the
     box to compensate. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.dst-counter input::-webkit-outer-spin-button,
.dst-counter input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Live total across adult/child/infant fares ---- */
.dst-booking-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 1.25rem 0 1rem;
  padding: 0.85rem 0.9rem;
  border-radius: 8px;
  background: var(--dst-shell-2);
  border: 1px solid var(--dst-line);
  font-size: 0.85rem;
  color: var(--dst-muted);
}
.dst-booking-total strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--dst-deep);
}

/* ===================== CLOSING STRIP ===================== */
.dst-closing {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 7vw, 6.5rem);
  text-align: center;
  color: #fff;
}
.dst-closing .dst-photo { position: absolute; inset: 0; z-index: -1; }
.dst-closing::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(8, 65, 92, 0.9), rgba(47, 182, 174, 0.72));
}
.dst-closing h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 auto 1rem;
  max-width: 18ch;
}
.dst-closing p {
  max-width: 52ch;
  margin: 0 auto 2rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

/* ===================== SCROLL REVEAL ===================== */
.dst .reveal-delay-7 { transition-delay: 0.9s; }
.dst .reveal-delay-8 { transition-delay: 1.05s; }

/* ===================== ANIMATIONS ===================== */
@keyframes dst-fade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dst-rise {
  to { transform: translateY(0); }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 940px) {
  .dst-main { grid-template-columns: 1fr; }
  .dst-hero-meta { position: static; text-align: left; margin-bottom: 1.6rem; }
  .dst-hero { flex-direction: column; align-items: flex-start; }
  .dst-hero-inner { margin-top: auto; }
}
@media (max-width: 560px) {
  .dst-gallery { grid-template-columns: 1fr; }
  .dst-gallery--full { grid-template-columns: 1fr; }
  .dst-card,
  .dst-card:nth-child(n) { transform: rotate(0deg); margin-top: 0; }
  .dst-card .dst-photo,
  .dst-card:nth-child(n) .dst-photo { aspect-ratio: 4 / 3; }
  .dst-hero { min-height: 78vh; }

  /* Booking form: 44x44px minimum touch targets on mobile. */
  .dst-counter-btn { width: 44px; height: 44px; font-size: 1.1rem; }
  .dst-select-trigger { padding: 0.7rem 0.9rem; }
  .dst-select-opt { padding: 0.7rem; }
}

/* ===================== A11Y — reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
  .dst *,
  .dst *::before,
  .dst *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .dst-hero-title .dst-line > span { transform: none; }
}