/* KelliGreggTravel - frontend foundation stylesheet.
   No brand palette, decorative effects, or animation yet. */

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

:root {
  --color-fg: #1a1a1a;
  --color-bg: #ffffff;
  --color-border: #d0d0d0;
  --content-max-width: 72rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --page-padding-inline: var(--space-md);
  --color-brand-purple: #6d2a72;
  --color-brand-purple-dark: #4a1d4e;
  --color-brand-teal: #0089a0;
  --color-brand-teal-dark: #046c80;
  --color-brand-green: #6b8f2f;
  --color-brand-orange: #e07d10;
  --color-error: #b3261e;
  --color-surface-muted: #f7f5f8;
  --color-surface-warm: #faf5ee;
  --color-surface-sand: #f4eadf;
  --color-surface-purple: #f5f0f7;
  /* Derived solely for the Calendar's 6-way Trip palette (wwwroot/css/site.css
     .trips-calendar__trip--palette-5/6) - the brand palette has no blue or sand hue of its own,
     so these mix existing brand tokens rather than introducing arbitrary unrelated colors. */
  --color-calendar-blue-base: color-mix(in srgb, var(--color-brand-teal-dark) 55%, var(--color-brand-purple) 45%);
  --color-calendar-sand-base: color-mix(in srgb, var(--color-brand-orange) 35%, var(--color-surface-warm) 65%);
  --content-prose-width: 48rem;
  --space-2xl: 4rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(26, 10, 30, 0.08), 0 1px 2px rgba(26, 10, 30, 0.05);
  --shadow-md: 0 8px 24px rgba(26, 10, 30, 0.1), 0 2px 6px rgba(26, 10, 30, 0.05);
  --shadow-lg: 0 16px 40px rgba(26, 10, 30, 0.14);
  --font-display: Rockwell, "Roboto Slab", Georgia, serif;
  --font-editorial-serif: Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  color-scheme: light;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--color-fg);
  background-color: var(--color-bg);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--color-brand-purple);
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -3rem;
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
}

.skip-link:focus {
  top: var(--space-sm);
}

header,
footer {
  border-color: var(--color-border);
  padding-block: var(--space-md);
  padding-inline: var(--page-padding-inline);
}

header {
  border-bottom: 1px solid var(--color-border);
}

footer {
  border-top: 1px solid var(--color-border);
}

main {
  flex: 1 0 auto;
  padding-block: var(--space-lg);
  padding-inline: var(--page-padding-inline);
}

.page-shell {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header */

.site-header {
  padding-block: 1rem;
  background: #fffdf9;
  border-bottom-color: #e7dfd7;
}

.site-header__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: bold;
  text-decoration: none;
}

.site-header__logo {
  display: block;
  height: 3.25rem;
  width: auto;
}

.site-header__menu-toggle {
  grid-column: 3;
  min-width: 4.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #e1d6cc;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-brand-purple-dark);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.site-header__menu-toggle:hover,
.site-header__menu-toggle:focus-visible {
  border-color: var(--color-brand-teal);
  color: var(--color-brand-teal-dark);
}

.site-header__menu-icon {
  width: 1.1rem;
  display: grid;
  gap: 0.22rem;
}

.site-header__menu-icon span {
  display: block;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.site-header__nav {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid #e7dfd7;
}

.site-header__nav[hidden] {
  display: none;
}

.site-nav {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

.site-nav > li + li {
  border-top: 1px solid color-mix(in srgb, #e7dfd7 72%, transparent 28%);
}

.site-nav__link {
  min-height: 2.75rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-inline: 0.25rem;
  color: var(--color-brand-purple-dark);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-brand-teal);
}

.site-nav__link[aria-current="page"] {
  color: var(--color-brand-teal-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

@media (min-width: 48rem) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
  }

  .site-header__logo {
    height: 3.8rem;
  }

  .site-header__menu-toggle {
    display: none;
  }

  .site-header__nav,
  .site-header__nav[hidden] {
    grid-column: 2;
    display: block;
    justify-self: end;
    border-top: 0;
  }

  .site-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(1rem, 2vw, 1.75rem);
  }

  .site-nav__link {
    justify-content: flex-start;
    padding-inline: 0;
  }

  .site-nav > li + li {
    border-top: 0;
  }
}

/* Footer */

.site-footer {
  background-color: var(--color-brand-purple-dark);
  color: #ffffff;
  padding-block: clamp(3rem, 6vw, 5rem) 1.5rem;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #8ccad4;
}

.site-footer__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.site-footer__main {
  display: grid;
  gap: 2rem;
}

.site-footer__about {
  min-width: 0;
  max-width: 31rem;
}

.site-footer__brand {
  font-weight: bold;
  margin: 0;
}

.site-footer__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 4.5rem;
  object-fit: contain;
}

.site-footer__text,
.site-footer__copyright {
  margin: 0;
}

.site-footer__text {
  margin-block-start: 1rem;
  color: rgba(255, 253, 249, 0.82);
  line-height: 1.7;
}

.site-footer__region {
  min-width: 0;
}

.site-footer__label {
  margin: 0 0 0.9rem;
  color: #8ccad4;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__contact p {
  margin: 0;
}

.site-footer__contact a,
.site-footer__address {
  overflow-wrap: anywhere;
  word-break: normal;
}

.site-footer__address {
  white-space: pre-line;
}

.site-footer__links {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.site-footer__links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: #fffdf9;
  text-decoration: none;
}

.site-footer__links--social a {
  min-height: 2.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(140, 202, 212, 0.48);
  border-radius: var(--radius-pill);
}

.site-footer__bottom {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: 1.25rem;
  border-top: 1px solid rgba(255, 253, 249, 0.2);
}

.site-footer__copyright {
  color: rgba(255, 253, 249, 0.68);
  font-size: 0.9rem;
}

@media (min-width: 64rem) {
  .site-footer__main {
    grid-template-columns: minmax(18rem, 2fr) repeat(auto-fit, minmax(10rem, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* Home: hero */

.home-hero {
  background-color: var(--color-surface-muted);
  padding-block: var(--space-xl);
  margin-block-end: var(--space-lg);
}

.home-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.home-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.home-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.home-hero__heading {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.home-hero__text {
  margin: 0;
  max-width: var(--content-prose-width);
}

.home-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-brand-purple);
  color: #ffffff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 700;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
}

.home-hero__secondary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-brand-purple);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.standard-page__arrow,
.trip-page__arrow {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-right: 3px solid var(--color-brand-teal);
  border-bottom: 3px solid var(--color-brand-teal);
  transform: rotate(-45deg);
}

/* Home: company story and journey choices */

.home-why,
.home-founders,
.home-ways,
.home-journal {
  margin-block: var(--space-xl);
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--color-border);
}

.home-why,
.home-ways {
  padding-inline: var(--space-lg);
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-md);
}

.home-section-header {
  max-width: var(--content-prose-width);
  margin-block-end: var(--space-lg);
}

.home-section-heading {
  margin: 0 0 var(--space-sm);
  color: var(--color-brand-purple);
}

.home-section-introduction,
.home-section-introduction :first-child,
.home-section-introduction :last-child {
  margin-block: 0;
}

.home-trust-grid,
.home-ways-grid,
.home-journal-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
}

.home-trust-pillar {
  padding-block-start: var(--space-md);
  border-block-start: 3px solid var(--color-brand-teal);
}

.home-trust-pillar__heading {
  margin: 0 0 var(--space-xs);
  color: var(--color-brand-purple);
  font-size: 1.25rem;
}

.home-trust-pillar__text {
  margin: 0;
}

.home-founders__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.home-founders__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.home-founders__content {
  max-width: var(--content-prose-width);
}

.home-founders__body :first-child,
.home-founders__body :last-child {
  margin-block: 0;
}

.home-founders__body + .home-editorial-link {
  margin-block-start: var(--space-md);
}

.home-editorial-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-brand-teal-dark);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.home-editorial-link:hover,
.home-editorial-link:focus-visible {
  color: var(--color-brand-purple);
}

.home-journey-card {
  min-width: 0;
}

.home-journey-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: inherit;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.home-journey-card__link:hover,
.home-journey-card__link:focus-visible {
  border-color: var(--color-brand-teal);
}

.home-journey-card__media {
  display: block;
}

.home-journey-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-journey-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.home-journey-card__heading {
  margin: 0;
  color: var(--color-brand-purple);
}

.home-journey-card__description {
  flex: 1 1 auto;
}

.home-journey-card__action {
  color: var(--color-brand-teal-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-journal__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: none;
  gap: var(--space-md);
}

/* Featured trips */

.featured-trips {
  margin-block: var(--space-xl);
}

.featured-trips__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  margin-block-end: var(--space-lg);
}

.featured-trips__header-text {
  flex: 1 1 auto;
}

.featured-trips__heading {
  margin: 0 0 var(--space-sm);
}

.featured-trips__introduction {
  max-width: var(--content-prose-width);
  margin: 0;
}

.featured-trips__list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-sm);
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-lg);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.featured-trips__list::-webkit-scrollbar {
  display: none;
}

.featured-trips__list:focus-visible {
  outline: 2px solid var(--color-brand-teal-dark);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.featured-trips__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-shrink: 0;
}

.featured-trips__link {
  display: inline-block;
  flex: 0 0 auto;
  font-weight: bold;
  color: var(--color-brand-teal-dark);
}

.featured-trips__link:hover,
.featured-trips__link:focus-visible {
  color: var(--color-brand-purple-dark);
  text-decoration: underline;
}

.trip-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.trip-card__media {
  display: block;
  position: relative;
}

.trip-card__media:focus-visible {
  outline: 3px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

.trip-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.trip-card__status {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  z-index: 1;
  box-shadow: 0 0.2rem 0.65rem rgba(0, 0, 0, 0.32);
}

.trip-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.trip-card__title {
  margin: 0;
}

.trip-card__title a {
  color: var(--color-brand-purple);
  text-decoration: none;
}

.trip-card__title a:hover,
.trip-card__title a:focus-visible {
  color: var(--color-brand-teal);
}

.trip-card__subtitle {
  margin: 0;
  color: var(--color-brand-teal-dark);
  font-weight: bold;
}

.trip-card__summary {
  margin: 0;
}

.trip-card__meta {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.trip-card__brand,
.trip-card__type {
  color: var(--color-fg);
}

.trip-card__price {
  font-weight: bold;
}

.trip-card__eyebrow {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand-teal-dark);
}

.trip-card__cta {
  align-self: flex-start;
  display: inline-block;
  margin-top: auto;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-teal-dark);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.trip-card__cta:hover,
.trip-card__cta:focus-visible {
  background-color: var(--color-brand-purple-dark);
}

/* Trip Card catalog variant (Trips landing page only — see trips-list__grid). Home's
   Trip Cards never receive this modifier and are unaffected by anything below. */

.trip-card--catalog {
  height: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.trip-card--catalog .trip-card__content {
  flex: 1 1 auto;
}

.trip-card--catalog .trip-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.trip-card--catalog .trip-card__subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trip-card--catalog .trip-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Trip Card featured variant (Home page Featured Trips only — see featured-trips__list).
   Trips landing page's catalog cards and the unmodified default cards elsewhere are
   unaffected by anything below. */

.trip-card--featured {
  display: flex;
  flex-direction: column;
  flex: 0 0 min(82vw, 18.5rem);
  min-width: 0;
  width: 100%;
  scroll-snap-align: start;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.home-page .trip-card--featured,
.home-page .trip-card__status {
  box-shadow: none;
}

.trip-card--featured .trip-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-xs);
}

.trip-card--featured .trip-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trip-card--featured .trip-card__subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trip-card--featured .trip-card__meta {
  flex-direction: column;
  gap: var(--space-xs);
}

/* Home: reviews */

.reviews {
  margin-block: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-surface-warm);
  border-radius: var(--radius-md);
}

.reviews__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.reviews__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  min-width: 0;
}

.reviews__header-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--content-prose-width);
}

.reviews__heading {
  margin: 0 0 var(--space-sm);
}

.reviews__introduction {
  margin: 0;
}

.reviews__nav {
  flex-shrink: 0;
  align-self: flex-end;
  gap: var(--space-sm);
}

.reviews__nav:not([hidden]) {
  display: flex;
}

.reviews__nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-brand-purple);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.reviews__nav-button:hover:not(:disabled) {
  border-color: var(--color-brand-teal);
  color: var(--color-brand-teal-dark);
}

.reviews__nav-button:focus-visible {
  outline: 2px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

.reviews__nav-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.reviews-grid {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-sm);
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-lg);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.reviews-grid::-webkit-scrollbar {
  display: none;
}

.reviews-grid:focus-visible {
  outline: 2px solid var(--color-brand-teal-dark);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.reviews-grid__item {
  display: flex;
  flex: 0 0 clamp(17rem, 30vw, 19rem);
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 40rem) {
  .reviews__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-brand-teal);
  border-radius: var(--radius-md);
}

.review-card__rating {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0 0 var(--space-sm);
}

.review-card__star {
  font-size: 1rem;
  line-height: 1;
}

.review-card__star--filled {
  color: var(--color-brand-purple);
}

.review-card__star--empty {
  color: var(--color-border);
}

.review-card__quote {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  padding-inline-start: 1.75rem;
}

.review-card__quote::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -0.5rem;
  inset-inline-start: -0.25rem;
  font-size: 3rem;
  line-height: 1;
  font-weight: bold;
  color: var(--color-brand-purple);
  pointer-events: none;
}

.review-card__quote p {
  margin: 0;
}

.review-card__attribution {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.review-card__photo {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.review-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.review-card__name {
  font-weight: bold;
  color: var(--color-brand-purple);
}

.review-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--color-fg);
}

.review-card__meta-separator {
  color: var(--color-border);
}

.review-card__read-more {
  align-self: flex-start;
  margin-block-start: var(--space-sm);
  padding: 0.375rem 0;
  background: none;
  border: none;
  color: var(--color-brand-teal-dark);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.review-card__read-more:hover {
  color: var(--color-brand-purple-dark);
}

.review-card__read-more:focus-visible {
  outline: 2px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

/* Review dialog */

html.review-dialog-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.review-dialog {
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  width: min(48rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  background-color: var(--color-bg);
}

.review-dialog::backdrop {
  background-color: rgba(36, 14, 43, 0.6);
}

.review-dialog__surface {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100dvh - 2rem);
}

.review-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  flex-shrink: 0;
  border-block-end: 1px solid var(--color-border);
  border-block-start: 3px solid var(--color-brand-teal);
}

.review-dialog__eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand-teal-dark);
}

.review-dialog__heading {
  margin: 0;
  color: var(--color-brand-purple);
}

.review-dialog__close {
  flex-shrink: 0;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-brand-purple);
  font-weight: 600;
  cursor: pointer;
}

.review-dialog__close:hover {
  border-color: var(--color-brand-teal);
  color: var(--color-brand-teal-dark);
}

.review-dialog__close:focus-visible {
  outline: 2px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

.review-dialog__scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.review-dialog__summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}

.review-dialog__photo {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.review-dialog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--color-fg);
}

.review-dialog__rating {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0 0 var(--space-md);
}

.review-dialog__body {
  overflow-wrap: break-word;
  word-break: break-word;
}

.review-dialog__body a:focus-visible {
  outline: 2px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

/* Planning CTA */

.planning-cta {
  margin-block: var(--space-xl);
  padding: var(--space-xl) var(--space-md);
  background-color: var(--color-brand-purple-dark);
  color: #ffffff;
}

.planning-cta__inner {
  max-width: var(--content-prose-width);
  margin-inline: auto;
  text-align: center;
}

.planning-cta__heading {
  margin-block-end: var(--space-sm);
  color: #ffffff;
}

.planning-cta__text {
  margin-block-end: var(--space-md);
}

.planning-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}

.planning-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-lg);
  background-color: #ffffff;
  color: var(--color-brand-purple-dark);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: bold;
}

.planning-cta__link:hover {
  color: var(--color-brand-purple);
  text-decoration: underline;
}

.planning-cta__link:focus-visible {
  outline-color: #ffffff;
  outline-offset: 4px;
}

.planning-cta__secondary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: #ffffff;
  font-weight: 700;
  text-underline-offset: 0.2em;
}

@media (min-width: 40rem) {
  .home-trust-grid,
  .home-ways-grid,
  .home-journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .home-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-ways-grid,
  .home-journal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 64rem) {
  .trip-card--featured {
    flex-basis: calc((100% - (2 * var(--space-lg))) / 3);
  }
}

@media (min-width: 48rem) {
  .home-hero--with-image {
    padding-block: 0;
    background-color: transparent;
  }

  .home-hero--with-image .home-hero__inner {
    position: relative;
    display: grid;
    height: clamp(30rem, 42vw, 38rem);
    overflow: hidden;
    border-radius: var(--radius-md);
    isolation: isolate;
  }

  .home-hero--with-image .home-hero__inner::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
      linear-gradient(
        90deg,
        rgba(36, 14, 43, 0.88) 0%,
        rgba(36, 14, 43, 0.72) 30%,
        rgba(36, 14, 43, 0.32) 52%,
        rgba(36, 14, 43, 0) 74%
      );
    pointer-events: none;
  }

  .home-hero--with-image .home-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
  }

  .home-hero--with-image .home-hero__content {
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 42rem;
    padding: clamp(2rem, 5vw, 5rem);
    color: #ffffff;
  }

  .home-hero--with-image .home-hero__heading {
    max-width: 14ch;
    color: #ffffff;
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    line-height: 1.05;
  }

  .home-hero--with-image .home-hero__text {
    max-width: 38rem;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
  }

  .home-hero--with-image .home-hero__cta {
    background-color: #ffffff;
    color: var(--color-brand-purple-dark);
  }

  .home-hero--with-image .home-hero__cta:focus-visible {
    outline-color: #ffffff;
    outline-offset: 4px;
  }

  .home-hero--with-image .home-hero__secondary {
    color: #ffffff;
  }

  .home-founders__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }

  .home-journal__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .featured-trips__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
  }


  .trips-landing__header--with-image .trips-landing__header-inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
  }

  .trips-landing__header--with-image .trips-landing__content {
    flex: 1 1 50%;
  }

  .trips-landing__header--with-image .trips-landing__image {
    flex: 1 1 50%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .standard-page__header--with-image .standard-page__header-inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
  }

  .standard-page__header--with-image .standard-page__content {
    flex: 1 1 50%;
  }

  .standard-page__header--with-image .standard-page__image {
    flex: 1 1 50%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .trip-page__header--with-image {
    padding-block: 0;
    background-color: transparent;
  }

  .trip-page__header--with-image .trip-page__header-inner {
    position: relative;
    display: grid;
    min-height: clamp(30rem, 42vw, 38rem);
    overflow: hidden;
    border-radius: var(--radius-md);
    isolation: isolate;
  }

  .trip-page__header--with-image .trip-page__header-inner::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
      linear-gradient(
        90deg,
        rgba(36, 14, 43, 0.88) 0%,
        rgba(36, 14, 43, 0.72) 30%,
        rgba(36, 14, 43, 0.32) 52%,
        rgba(36, 14, 43, 0) 74%
      );
    pointer-events: none;
  }

  .trip-page__header--with-image .trip-page__hero-media {
    position: absolute;
    inset: 0;
  }

  .trip-page__header--with-image .trip-page__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
  }

  .trip-page__header--with-image .trip-page__content {
    position: relative;
    z-index: 2;
    align-self: stretch;
    justify-content: center;
    max-width: 42rem;
    padding: clamp(2rem, 5vw, 5rem);
    color: #ffffff;
  }

  .trip-page__header--with-image .trip-page__content h1 {
    max-width: 20ch;
    color: #ffffff;
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    line-height: 1.05;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    text-wrap: balance;
  }

  .trip-page__header--with-image .trip-page__subtitle,
  .trip-page__header--with-image .trip-page__summary {
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  }

  .trip-page__header--with-image .trip-page__brand-logo {
    height: 2.75rem;
    max-width: 13rem;
    margin-block-end: var(--space-sm);
  }

  .trip-page__header--with-image .trip-page__cta {
    margin-block-start: var(--space-sm);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.24);
  }

  .trip-page__header--with-image .trip-page__cta:focus-visible {
    outline-color: #ffffff;
    outline-offset: 4px;
  }

  .trip-page__header--with-image .trip-page__arrow {
    display: none;
  }
}

/* Trips landing page */

.trips-landing__header {
  background-color: var(--color-surface-warm);
  border-block: 1px solid color-mix(in srgb, var(--color-brand-orange) 18%, var(--color-border));
  padding-block: var(--space-xl);
  margin-block-end: var(--space-lg);
}

/* More compact than the with-image header; keeps the same pale background. */
.trips-landing__header--without-image {
  padding-block: var(--space-lg);
}

.trips-landing__header-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.trips-landing__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.trips-landing__content h1 {
  margin: 0;
  font-family: var(--font-editorial-serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  font-weight: 400;
}

.trips-landing__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.trips-landing__header-inner picture {
  display: contents;
}

.trips-landing__introduction {
  max-width: var(--content-prose-width);
  color: var(--color-fg);
}

.trips-landing__introduction :first-child {
  margin-block-start: 0;
}

.trips-landing__introduction :last-child {
  margin-block-end: 0;
}

.trips-landing__introduction a:hover,
.trips-landing__introduction a:focus-visible {
  color: var(--color-brand-teal);
}

.trips-list {
  margin-block: var(--space-xl);
}

.trips-list__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.trips-list__empty {
  max-width: var(--content-prose-width);
  margin: 0;
}

/* Compact filter toolbar (replaces the former boxed filter panel). Holds the filter
   form (when shown) and the result summary in one row, summary pushed to the far
   right on desktop via justify-content: space-between. */
.trips-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-lg);
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
}

.trips-filter {
  width: 100%;
}

.trips-filter__prompt {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand-teal-dark);
}

.trips-filter__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
}

@media (min-width: 40rem) {
  .trips-filter__fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 72rem) {
  .trips-filter__fields {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trips-filter__field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
}

.trips-filter__label {
  font-weight: 600;
}

.trips-filter__select {
  width: 100%;
  min-width: 0;
  font: inherit;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-fg);
}

.trips-filter__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.trips-filter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.trips-filter__submit {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-brand-teal-dark);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  font: inherit;
  cursor: pointer;
}

.trips-filter__submit:hover {
  background-color: var(--color-brand-purple-dark);
}

.trips-filter__clear {
  color: var(--color-brand-purple);
}

.trips-toolbar .trips-list__summary {
  margin: 0;
  font-weight: bold;
  white-space: nowrap;
}

.trips-list__filtered-empty {
  max-width: var(--content-prose-width);
  margin: 0;
}

/* Trips-specific catalog grid: 1 column below ~40rem, 2 at tablet widths, 3 at ~64rem+.
   align-items: stretch (the grid default) plus .trip-card--catalog's height: 100% keeps
   every card in a row equal height regardless of content length. */
.trips-list__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-lg);
}

@media (min-width: 40rem) {
  .trips-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .trips-list__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 40rem) {
  .trips-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }

  .trips-filter__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .trips-toolbar .trips-list__summary {
    white-space: normal;
  }
}

/* Trips: List / Calendar view toggle (Views/tripsLandingPage.cshtml, inside .trips-toolbar).
   Pill-grouped links, styled like the existing filter submit pill, with the active view marked
   both visually and via aria-current="page" (mirrors .site-nav__link[aria-current="page"]). */
.trips-view-toggle {
  display: inline-flex;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-pill);
}

.trips-view-toggle__link {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  color: var(--color-brand-purple);
  font-weight: 600;
  text-decoration: none;
}

.trips-view-toggle__link:hover {
  color: var(--color-brand-teal-dark);
}

.trips-view-toggle__link[aria-current="page"] {
  background-color: var(--color-brand-teal-dark);
  color: #ffffff;
}

/* Desktop-only Month/Continuous display-mode toggle (Views/tripsLandingPage.cshtml, shown only
   in Calendar view) - reuses .trips-view-toggle/.trips-view-toggle__link for identical pill
   styling and hidden below 48rem, since mobile is always the continuous multi-month layout. */
@media (max-width: 48rem) {
  .trips-calendar-mode-toggle {
    display: none;
  }
}

/* Trips: Calendar view (Views/Partials/trip/tripsCalendar.cshtml). Semantic lists throughout -
   no table markup. One shared month-rendering markup path is always used at every breakpoint and
   in both desktop display modes - CSS below (not Razor) decides which month section(s) are
   visible and how compact each Trip marker is; the mobile block near the end of this section
   never converts the grid into a Trip-days-only list, it only makes the same 7-column grid more
   compact and always continuous (see MOBILE IOS-LIKE PRESENTATION). */
.trips-calendar {
  margin-block-start: var(--space-md);
  /* Previous/Next month links append #trips-calendar (Views/tripsLandingPage.cshtml) so month
     navigation lands back here instead of the page top; this keeps the section clear of the
     viewport edge once the browser scrolls it into view. */
  scroll-margin-top: var(--space-lg);
}

/* Previous/Next only ever page a single selected month, so they only make sense in desktop
   Month mode - hidden in desktop Continuous mode below, and always hidden on mobile (which is
   always continuous) in the mobile block near the end of this section. */
.trips-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}

@media (min-width: 48rem) {
  .trips-calendar--continuous .trips-calendar__nav {
    display: none;
  }
}

.trips-calendar__nav-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-brand-purple);
  text-decoration: none;
}

.trips-calendar__nav-link:hover {
  border-color: var(--color-brand-teal);
  color: var(--color-brand-teal-dark);
}

/* Each rendered month is its own section with its own heading (see MARKUP) - spaced clearly
   apart so the continuous/mobile sequence reads as distinct months while scrolling. */
.trips-calendar__month {
  margin-block-end: var(--space-xl);
}

.trips-calendar__month:last-child {
  margin-block-end: 0;
}

/* Desktop Month mode (the default): only the selected month's section is shown - the same full
   sequence used by Continuous mode and mobile is always rendered (Continuous can now include
   months earlier than the selected one - see CHANGE 1 - so the selected month is no longer
   reliably the first rendered section), this just hides every other one via the
   .trips-calendar__month--selected marker class set in the partial. */
@media (min-width: 48rem) {
  .trips-calendar--month .trips-calendar__month {
    display: none;
  }

  .trips-calendar--month .trips-calendar__month--selected {
    display: block;
  }
}

.trips-calendar__heading {
  margin: 0 0 var(--space-md);
  text-align: center;
}

.trips-calendar__empty {
  max-width: var(--content-prose-width);
  margin: 0 0 var(--space-md);
}

.trips-calendar__weekdays {
  list-style: none;
  margin: 0 0 var(--space-xs);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-xs);
}

.trips-calendar__weekday {
  min-width: 0;
  padding-block: var(--space-xs);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand-teal-dark);
}

.trips-calendar__weekday-label--short {
  display: none;
}

/* Week rows (Views/Partials/trip/tripsCalendar.cshtml) - one list item per calendar week. */
.trips-calendar__weeks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Each week is its own 7-column grid layering three kinds of items in one grid, placed entirely
   via inline grid-column/grid-row set in the partial (never JavaScript, never fixed-height
   measurement): (1) seven day-cell backgrounds spanning grid-row: 1 / -1, painted first so they
   always stay visible beneath everything else; (2) the row-1 day number/full-date pair per
   in-month column, painted next; (3) one Trip band per Trip/week segment for whichever variant is
   currently visible (see TRIP BANDS and VARIANT CLASSES below), placed at grid-row 2+ by its
   assigned lane. Row 1 is for day numbers and the final minmax(--space-md, 1fr) row is the bottom
   spacer; "-1" only resolves against the *explicit* grid, so both lane counts are exposed here as
   integer custom properties (set inline per week in the partial) and consumed by repeat() below -
   var() substitution happens before repeat()'s <integer> argument is parsed, so this works in
   every browser that already supports the color-mix()/@container features used elsewhere in this
   file. --continuous-lanes is used everywhere by default (including every mobile width, which is
   always the continuous layout); desktop Month mode overrides to --month-lanes only for the
   selected month's own week rows (see WEEK ROW SIZING). grid-auto-rows below is only a defensive
   fallback for any row outside this explicit template. */
.trips-calendar__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(var(--continuous-lanes), min-content) minmax(var(--space-md), 1fr);
  grid-auto-rows: auto;
  column-gap: var(--space-xs);
  row-gap: 0.15rem;
}

@media (min-width: 48rem) {
  .trips-calendar--month .trips-calendar__week {
    grid-template-rows: auto repeat(var(--month-lanes), min-content) minmax(var(--space-md), 1fr);
  }
}

.trips-calendar__day {
  grid-row: 1 / -1;
  min-height: 6rem;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
}

.trips-calendar__day--placeholder {
  border-color: transparent;
  /* Pale teal-green, restrained enough to stay clearly secondary and distinct from the
     saturated Trip-range palette backgrounds below (palette-1 in particular, which is a
     pale purple that this placeholder background used to be visually confused with). */
  background-color: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

/* Today: a subtle distinction only - never implies a Trip starts today unless
   .trips-calendar__day--has-trips is also present (set independently in the partial). */
.trips-calendar__day--today {
  border-color: var(--color-brand-teal);
  background-color: var(--color-surface-purple);
}

.trips-calendar__day--has-trips {
  border-color: var(--color-brand-purple);
}

/* The day number and its screen-reader-only full-date companion are separate grid items (row 1
   only, same column as their .trips-calendar__day background) rather than children of the
   background div - this reserves row 1's height for the date itself regardless of how many Trip
   band lanes a week grows into below it. */
.trips-calendar__day-number {
  grid-row: 1;
  padding: var(--space-xs);
  font-weight: 700;
}

/* Trip bands (Views/Partials/trip/tripsCalendar.cshtml): one real link per Trip per week,
   clipped and lane-placed via inline grid-column/grid-row - never one element per active date.
   align-self: start keeps the band pinned to the top of its (possibly taller, see
   .trips-calendar__week's flexible spacer row) lane row instead of stretching to fill it.
   margin-inline insets only the band's own left/right edges - i.e. only the start and end of the
   complete weekly segment, never per day, since the band is one element spanning every column it
   covers. container-type: inline-size turns the band into its own container so the Status pill
   below can be shown/hidden purely by the band's own rendered width. */
.trips-calendar__trip-band {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: start;
  min-width: 0;
  gap: var(--space-xs);
  margin-inline: 0.2rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-muted);
  color: var(--color-fg);
  text-decoration: none;
  overflow: hidden;
}

/* Palette color carries the interactive cue on hover/focus (a saturation boost) rather than a
   single hardcoded hover color, so every Trip keeps its own assigned palette identity. */
.trips-calendar__trip-band:hover,
.trips-calendar__trip-band:focus-visible {
  filter: saturate(1.4);
}

/* Two segment variants exist in the DOM for every Trip/week intersection (see the partial's
   RenderTripBand calls) but only one is ever visible at a time. Continuous-only bands (always
   month-clipped, never cross a placeholder date) are shown by default - inheriting display: flex
   from .trips-calendar__trip-band above - everywhere except desktop Month mode; Month-only bands
   (clipped only to the Trip and the visible week, so they may cross this single visible month's
   placeholder dates) are hidden by default and shown only in desktop Month mode. The hidden
   variant always uses display: none, which removes it from the accessibility tree and keyboard
   order entirely (see ACCESSIBILITY) - never visibility: hidden or opacity, which would not. */
.trips-calendar__trip-band--month-only {
  display: none;
}

@media (min-width: 48rem) {
  .trips-calendar--month .trips-calendar__trip-band--continuous-only {
    display: none;
  }

  .trips-calendar--month .trips-calendar__trip-band--month-only {
    display: flex;
  }
}

/* The segment containing the Trip's actual Start Date is slightly more prominent (bolder title,
   room for a compact status badge); every later week's continuation segment for the same Trip is
   otherwise identical in size/placement - same band, same palette, no "Continues" text repeated
   and no status badge or date range repeated (see TRIP BANDS). */
.trips-calendar__trip-band--start .trips-calendar__trip-title {
  font-weight: 700;
}

.trips-calendar__trip-band--continuation .trips-calendar__trip-title {
  font-weight: 600;
}

/* Six-way complementary palette, cycled deterministically by Start Date then Trip title (see
   Views/Partials/trip/tripsCalendar.cshtml) so Trips beginning near one another are normally
   visually distinct; the same Trip keeps the same palette class on every week and every month of
   its range. Derived from existing brand tokens via color-mix() rather than arbitrary colors -
   palette-5/6 use the --color-calendar-blue-base/--color-calendar-sand-base tokens defined in
   :root above, since the brand palette has no blue or sand hue of its own. */
.trips-calendar__trip-band.trips-calendar__trip--palette-1 {
  background-color: color-mix(in srgb, var(--color-brand-purple) 14%, white);
  border-color: color-mix(in srgb, var(--color-brand-purple) 45%, white);
  color: var(--color-brand-purple-dark);
}

.trips-calendar__trip-band.trips-calendar__trip--palette-2 {
  background-color: color-mix(in srgb, var(--color-brand-teal) 14%, white);
  border-color: color-mix(in srgb, var(--color-brand-teal) 45%, white);
  color: var(--color-brand-teal-dark);
}

.trips-calendar__trip-band.trips-calendar__trip--palette-3 {
  background-color: color-mix(in srgb, var(--color-brand-green) 14%, white);
  border-color: color-mix(in srgb, var(--color-brand-green) 45%, white);
  color: color-mix(in srgb, var(--color-brand-green) 60%, black);
}

.trips-calendar__trip-band.trips-calendar__trip--palette-4 {
  background-color: color-mix(in srgb, var(--color-brand-orange) 14%, white);
  border-color: color-mix(in srgb, var(--color-brand-orange) 45%, white);
  color: color-mix(in srgb, var(--color-brand-orange) 60%, black);
}

.trips-calendar__trip-band.trips-calendar__trip--palette-5 {
  background-color: color-mix(in srgb, var(--color-calendar-blue-base) 16%, white);
  border-color: color-mix(in srgb, var(--color-calendar-blue-base) 45%, white);
  color: color-mix(in srgb, var(--color-calendar-blue-base) 65%, black);
}

.trips-calendar__trip-band.trips-calendar__trip--palette-6 {
  background-color: color-mix(in srgb, var(--color-calendar-sand-base) 40%, white);
  border-color: color-mix(in srgb, var(--color-calendar-sand-base) 70%, white);
  color: color-mix(in srgb, var(--color-calendar-sand-base) 70%, black);
}

/* Single-line title, truncated safely rather than wrapping or overflowing the band - min-width: 0
   on both the flex item and its flex-container band above is required for text-overflow: ellipsis
   to take effect inside a flex row. flex: 1 1 auto lets the title claim the Status pill's space
   back on continuation bands and on narrow start bands where the pill stays hidden below. */
.trips-calendar__trip-title {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.85rem;
  line-height: 1.2;
}

/* Start Date bands render both a Full Title span and a Short Title span (see the partial);
   Short is shown by default and Full only appears once the band is wide enough (see the
   @container rule below) - continuation bands render only a single plain .trips-calendar__trip-
   title span (no --full/--short modifier) and are entirely unaffected by these two rules. */
.trips-calendar__trip-title--full {
  display: none;
}

.trips-calendar__trip-title--short {
  display: block;
}

/* Hidden by default and revealed only once the individual Start Date band (each band is its own
   inline-size container - see .trips-calendar__trip-band) is wide enough to show it without
   crowding or hiding the title; continuation bands never render this element at all (see the
   partial), so they can never show a pill regardless of width. flex: 0 0 auto keeps the pill from
   ever shrinking once shown, so the title is always the one that ellipsizes. */
.trips-calendar__trip-status.trip-status {
  display: none;
  flex: 0 0 auto;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
}

@container (min-width: 18rem) {
  .trips-calendar__trip-band--start .trips-calendar__trip-status {
    display: inline-flex;
  }
}

/* Full Trip Title needs room for the longest realistic titles plus the optional Status pill,
   band padding, and the title/pill gap - 26rem (within the ~24-28rem starting range) comfortably
   fits a long title such as "4th Annual Mediterranean Reunion: Athens to Nice" alongside a
   typical-length pill (e.g. "Limited Availability") without crowding either, while still leaving
   1-3 day start bands (which rarely reach this width) showing the Short Title. */
@container (min-width: 26rem) {
  .trips-calendar__trip-band--start .trips-calendar__trip-title--full {
    display: block;
  }

  .trips-calendar__trip-band--start .trips-calendar__trip-title--short {
    display: none;
  }
}

/* Mobile (iOS-Calendar-like): the exact same week-row markup as desktop - full 7-column grid,
   every placeholder/empty date still visible, every generated month rendered one after another in
   one continuous vertical scroll, and the same weekly Trip bands (never collapsed into unlabeled
   bars or a Trip-days-only list) - only cell/band sizing changes. .trips-calendar__day-fulldate
   stays screen-reader-only (.visually-hidden, set on the element in the partial) at every
   breakpoint - the visible, aria-hidden day number is enough for sighted users once cells are
   this compact. */
@media (max-width: 48rem) {
  .trips-calendar__nav {
    display: none;
  }

  .trips-calendar__heading {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-block: var(--space-xs);
    background-color: var(--color-bg);
  }

  .trips-calendar__weekdays {
    gap: 0.15rem;
    margin-block-end: 0.15rem;
  }

  .trips-calendar__weekday {
    padding-block: 0.15rem;
    font-size: 0.65rem;
  }

  .trips-calendar__weekday-label--full {
    display: none;
  }

  .trips-calendar__weekday-label--short {
    display: inline;
  }

  .trips-calendar__weeks {
    gap: 0.15rem;
  }

  .trips-calendar__week {
    column-gap: 0.15rem;
    row-gap: 0.1rem;
  }

  .trips-calendar__day {
    min-height: 3rem;
  }

  .trips-calendar__day-number {
    padding: 0.15rem;
    font-size: 0.7rem;
  }

  .trips-calendar__trip-band {
    padding: 0.05rem 0.25rem;
    gap: 0.15rem;
  }

  .trips-calendar__trip-title {
    font-size: 0.6rem;
  }

  /* The status badge is the first thing to go at mobile band sizes, since the (still-visible,
     still full-band-width, still truncating) title remains the essential identifier - see TRIP
     BANDS: "may retain a compact status badge only when it remains readable". */
  .trips-calendar__trip-status.trip-status {
    display: none;
  }
}

/* Standard page */

.standard-page__header {
  background-color: var(--color-surface-muted);
  padding-block: var(--space-xl);
  margin-block-end: var(--space-lg);
}

.standard-page__header-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.standard-page__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.standard-page__content h1 {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.standard-page__summary {
  max-width: var(--content-prose-width);
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 500;
}

.standard-page__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.standard-page__header-inner picture {
  display: contents;
}

.standard-page__body {
  max-width: var(--content-prose-width);
  margin-inline: auto;
  margin-block-start: var(--space-xl);
}

.standard-page__body-inner {
  border-top: 2px solid var(--color-brand-teal);
  padding-top: var(--space-md);
}

.standard-page__body-inner > :first-child {
  margin-block-start: 0;
}

.standard-page__body-inner > :last-child {
  margin-block-end: 0;
}

.standard-page__body-inner > * + * {
  margin-block-start: var(--space-md);
}

.standard-page__body-inner a {
  color: var(--color-brand-purple);
}

.standard-page__body-inner a:hover,
.standard-page__body-inner a:focus-visible {
  color: var(--color-brand-teal);
}

.standard-page__body img {
  max-width: 100%;
  height: auto;
}

.standard-page__body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.standard-page__body th,
.standard-page__body td {
  border: 1px solid var(--color-border);
  padding: var(--space-sm);
  text-align: left;
}

.standard-page__body blockquote {
  margin: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-border);
}

/* About page */

.about-page__hero {
  margin-block-end: var(--space-lg);
}

.about-page__hero-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.about-page__hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  background-color: var(--color-surface-sand);
  color: var(--color-fg);
  padding: var(--space-xl) var(--space-lg);
}

.about-page__title {
  margin: 0;
  color: var(--color-brand-purple-dark);
  font-family: var(--font-editorial-serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  font-weight: 400;
}

.about-page__summary {
  margin: 0;
  max-width: var(--content-prose-width);
  color: var(--color-fg);
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 500;
}

.about-page__hero-media {
  display: block;
}

.about-page__hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.about-page__hero-media picture {
  display: contents;
}

@media (min-width: 48rem) {
  .about-page__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    min-height: clamp(22rem, 30vw, 32rem);
  }

  .about-page__hero--without-image .about-page__hero-inner {
    grid-template-columns: 1fr;
  }

  .about-page__hero-content {
    padding: clamp(2rem, 5vw, 5rem);
  }

  .about-page__title {
    font-size: clamp(2.5rem, 1.75rem + 1.5vw, 3rem);
  }

  .about-page__hero-media {
    height: 100%;
  }

  .about-page__hero-image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

.about-page__body {
  max-width: var(--content-prose-width);
  margin-inline: auto;
  margin-block-start: var(--space-xl);
}

.about-page__body-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.about-page__body-inner > * {
  grid-column: 1 / -1;
  margin: 0;
}

.about-page__body-inner > * + h2 {
  margin-block-start: var(--space-md);
}

.about-page__body-inner > h2 {
  color: var(--color-brand-purple);
  font-family: var(--font-editorial-serif);
  font-weight: 400;
  border-block-end: 2px solid var(--color-brand-teal);
  padding-block-end: var(--space-xs);
}

.about-page__body-inner h3 {
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.about-page__body-inner a {
  color: var(--color-brand-purple);
}

.about-page__body-inner a:hover,
.about-page__body-inner a:focus-visible {
  color: var(--color-brand-teal);
}

.about-page__body-inner ul,
.about-page__body-inner ol {
  padding-inline-start: var(--space-lg);
}

.about-page__body-inner img {
  max-width: 100%;
  height: auto;
}

.about-page__body-inner table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.about-page__body-inner th,
.about-page__body-inner td {
  border: 1px solid var(--color-border);
  padding: var(--space-sm);
  text-align: left;
}

.about-page__body-inner blockquote {
  margin: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-border);
}

@media (min-width: 48rem) {
  .about-page__body {
    max-width: var(--content-max-width);
  }

  .about-page__body-inner {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-2xl);
    row-gap: var(--space-lg);
  }

  .about-page__body-inner > h2 + p {
    grid-column: 1;
  }

  .about-page__body-inner > h2 + p + p {
    grid-column: 2;
  }
}

/* Personal Travel page */

.personal-travel-page__hero {
  margin-block-end: var(--space-lg);
}

.personal-travel-page__hero-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.personal-travel-page__hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  background-color: var(--color-surface-sand);
  color: var(--color-fg);
  padding: var(--space-xl) var(--space-lg);
}

.personal-travel-page__title {
  margin: 0;
  color: var(--color-brand-purple-dark);
  font-family: var(--font-editorial-serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  font-weight: 400;
}

.personal-travel-page__summary {
  margin: 0;
  max-width: var(--content-prose-width);
  color: var(--color-fg);
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 500;
}

.personal-travel-page__hero-media {
  display: block;
}

.personal-travel-page__hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.personal-travel-page__hero-media picture {
  display: contents;
}

@media (min-width: 48rem) {
  .personal-travel-page__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    min-height: clamp(22rem, 30vw, 32rem);
  }

  .personal-travel-page__hero--without-image .personal-travel-page__hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .personal-travel-page__hero-content {
    padding: clamp(2rem, 5vw, 5rem);
  }

  .personal-travel-page__title {
    font-size: clamp(2.25rem, 1.75rem + 1.5vw, 2.75rem);
  }

  .personal-travel-page__hero--without-image .personal-travel-page__hero-content {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
  }

  .personal-travel-page__hero--without-image .personal-travel-page__title {
    max-width: var(--content-prose-width);
  }

  .personal-travel-page__hero-media {
    height: 100%;
  }

  .personal-travel-page__hero-image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

.personal-travel-page__introduction {
  margin-block: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-surface-warm);
  border-block-start: 1px solid var(--color-brand-teal-dark);
  border-radius: var(--radius-md);
}

.personal-travel-page__introduction-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.personal-travel-page__introduction-heading {
  margin: 0;
  color: var(--color-brand-purple);
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.personal-travel-page__introduction-body {
  max-width: var(--content-prose-width);
}

.personal-travel-page__introduction-body > :first-child {
  margin-block-start: 0;
}

.personal-travel-page__introduction-body > :last-child {
  margin-block-end: 0;
}

.personal-travel-page__section {
  margin-block: var(--space-xl);
}

.personal-travel-page__section-header {
  max-width: var(--content-prose-width);
  margin-block-end: var(--space-lg);
}

.personal-travel-page__section-heading {
  margin: 0 0 var(--space-sm);
  color: var(--color-brand-purple);
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.personal-travel-page__section-introduction {
  margin: 0;
}

.personal-travel-page__feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 40rem) {
  .personal-travel-page__feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .personal-travel-page__feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .personal-travel-page__feature-grid--expertise {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Feature Icon card: native styling for Personal Travel's Why Use / Areas of Expertise blocks
   (Views/Partials/blocklist/Components/featureIcon.cshtml). Unlike Trip Highlight, these blocks
   hold small icons rather than photographs, so the icon area uses a fixed, contained box instead
   of a full-width photo crop. Does not reuse or modify .highlight-card/.highlight-card__image. */

.feature-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-brand-teal);
  border-radius: var(--radius-md);
}

.feature-icon__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 7rem;
  padding: var(--space-sm);
}

.feature-icon__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 9rem;
  max-height: 100%;
  object-fit: contain;
}

.feature-icon__title {
  margin: 0;
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.feature-icon__description {
  margin: 0;
}

@media (min-width: 40rem) {
  .feature-icon__media {
    height: 8rem;
  }
}

.personal-travel-page__partner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 40rem) {
  .personal-travel-page__partner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .personal-travel-page__partner-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.partner-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-brand-teal);
  border-radius: var(--radius-md);
  text-align: center;
}

.partner-benefit__logo {
  display: block;
  max-width: 10rem;
  max-height: 4rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner-benefit__name {
  color: var(--color-brand-purple);
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.partner-benefit__text {
  margin: 0;
  color: var(--color-fg);
}

.personal-travel-page__inquiry {
  margin-block: var(--space-xl);
  padding: var(--space-xl);
  background: linear-gradient(180deg, var(--color-surface-purple), var(--color-bg) 65%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--color-fg);
}

.personal-travel-page__inquiry-inner {
  max-width: var(--content-prose-width);
  margin-inline: auto;
  text-align: center;
}

.personal-travel-page__inquiry-heading {
  margin: 0 0 var(--space-sm);
  color: var(--color-brand-purple);
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.personal-travel-page__inquiry-text {
  margin: 0 0 var(--space-md);
}

.personal-travel-page__cta {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-brand-teal-dark);
  color: #ffffff;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: bold;
}

.personal-travel-page__cta:hover {
  background-color: var(--color-brand-teal);
}

.personal-travel-page__cta:focus-visible {
  outline-color: #ffffff;
  outline-offset: 4px;
}

/* Personal Travel inquiry form: reuses the existing .trip-inquiry__* classes and structure
   (Views/Partials/trip/tripInquiryForm.cshtml) unchanged; only the overrides below are scoped
   under .personal-travel-page__inquiry. Trip inquiry styling remains unaffected. */

.personal-travel-page__inquiry .trip-inquiry__form {
  text-align: left;
}

.personal-travel-page__inquiry .trip-inquiry__optional {
  color: var(--color-fg);
}

.personal-travel-page__inquiry .trip-inquiry__field-error {
  color: var(--color-error);
  font-weight: bold;
}

.personal-travel-page__inquiry .trip-inquiry__field select {
  width: 100%;
  font: inherit;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-fg);
}

.personal-travel-page__inquiry .trip-inquiry__field select:focus-visible {
  outline: 3px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

.personal-travel-page__inquiry-text,
.personal-travel-page__inquiry .trip-inquiry__field label,
.personal-travel-page__inquiry .trip-inquiry__optional,
.personal-travel-page__inquiry .trip-inquiry__field input,
.personal-travel-page__inquiry .trip-inquiry__field select,
.personal-travel-page__inquiry .trip-inquiry__field textarea,
.personal-travel-page__inquiry .trip-inquiry__success,
.personal-travel-page__inquiry .trip-inquiry__error,
.personal-travel-page__inquiry .trip-inquiry__field-error,
.personal-travel-page__inquiry .trip-inquiry__submit {
  font-family: var(--font-body);
}

.personal-travel-page__inquiry .trip-inquiry__submit:hover {
  background-color: var(--color-brand-teal);
}

.personal-travel-page__inquiry .trip-inquiry__submit:focus-visible {
  outline-color: var(--color-brand-purple-dark);
}

.personal-travel-page__inquiry-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 40rem) {
  .personal-travel-page__inquiry-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Trip page */

.trip-page__header {
  background-color: var(--color-surface-muted);
  padding-block: var(--space-xl);
}

.trip-page__header-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.trip-page__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.trip-page__brand-logo {
  display: block;
  height: 2.25rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  margin-block-end: var(--space-xs);
}

.trip-page__content h1 {
  margin: 0;
  font-family: var(--font-editorial-serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  font-weight: 400;
}

.trip-page__subtitle {
  max-width: var(--content-prose-width);
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-brand-teal-dark);
}

.trip-page__summary {
  max-width: var(--content-prose-width);
  margin: 0;
}

.trip-page__hero-media {
  position: relative;
}

.trip-page__hero-status {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  z-index: 3;
  box-shadow: 0 0.2rem 0.65rem rgba(0, 0, 0, 0.32);
}

.trip-page__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Decorative only (aria-hidden, no href/behavior) - hidden at all sizes. */
.trip-page__arrow {
  display: none;
}

.trip-page__meta,
.itinerary-day__meta {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Trip status badges (Views/Partials/trip/tripCard.cshtml, Views/tripPage.cshtml Trip at a
   Glance). Compact pill, never a diagonal banner - text is always the status label itself, so
   the badge never relies on color alone. Reuses the same pill treatment as the CTAs elsewhere
   on the page (border-radius: pill, bold, colored) rather than introducing a new shape. */
.trip-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.3rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.trip-status--just-announced {
  background-color: #ffb02e;
  border-color: #d99518;
  color: var(--color-brand-purple-dark);
}

.trip-status--limited-availability {
  background-color: var(--color-brand-teal-dark);
  border-color: #035466;
  color: #ffffff;
}

.trip-status--waitlist-only {
  background-color: var(--color-brand-purple-dark);
  border-color: #38163b;
  color: #ffffff;
}

.trip-status--sold-out {
  background-color: var(--color-error);
  border-color: #8c1e17;
  color: #ffffff;
}

.trip-status--departing-soon {
  background-color: #a85c0c;
  border-color: #8a4b0a;
  color: #ffffff;
}

.trip-status--in-progress {
  background-color: #4a611c;
  border-color: #3a4c16;
  color: #ffffff;
}

.trip-status--completed {
  background-color: #3f3f3f;
  border-color: #2e2e2e;
  color: #ffffff;
}

.trip-page__price {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--color-brand-teal-dark);
}

.trip-page__cta {
  display: inline-block;
  align-self: start;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-brand-teal-dark);
  color: #ffffff;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.trip-page__cta:hover {
  background-color: var(--color-brand-purple-dark);
}

.home-hero__cta:focus-visible,
.trip-page__cta:focus-visible {
  outline-color: var(--color-brand-purple-dark);
}

/* Essentials strip */

.trip-essentials {
  background-color: var(--color-surface-warm);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-md);
}

.trip-essentials__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: var(--page-padding-inline);
}

.trip-essentials__list {
  list-style: none;
  flex: 1 1 42rem;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
}

.trip-essentials__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.trip-essentials__label {
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand-purple);
}

.trip-essentials__value {
  font-weight: 500;
}

/* Explore this trip navigation */

.trip-explore {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
  padding-block-start: var(--space-md);
}

.trip-explore__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  padding-block-end: var(--space-md);
}

.trip-explore__link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-brand-purple);
  text-decoration: none;
}

.trip-explore__link:hover,
.trip-explore__link:focus-visible {
  color: var(--color-brand-teal-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Previous / Next trip navigation (rendered twice per Trip page, once above the Hero
   and once at the end of the page — see Views/Partials/trip/tripPreviousNextNavigation.cshtml).
   Compact page-to-page control, not a content section: restrained spacing, inline
   "Label: Title" text, no card-like padding/shadow at rest. Two equal columns on
   desktop/tablet; the present link keeps its own column even when the other is
   absent (no auto-flow shifting), and stacks to one column at narrow widths. */

.trip-sequence {
  max-width: var(--content-max-width);
  margin-block: var(--space-sm);
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
}

.trip-sequence__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.trip-sequence__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.trip-sequence__link:hover {
  border-color: var(--color-brand-teal);
  background-color: var(--color-surface-muted);
}

.trip-sequence__link:focus-visible {
  outline: 3px solid var(--color-brand-purple-dark);
  outline-offset: 2px;
}

.trip-sequence__link--previous {
  grid-column: 1;
}

.trip-sequence__link--next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}

.trip-sequence__arrow {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-brand-teal-dark);
}

/* Row + wrap (not a column stack): label and title read as one inline sentence when
   there's room, and wrap naturally — never truncated — when the title is long or the
   viewport is narrow. */
.trip-sequence__body {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  column-gap: var(--space-xs);
  row-gap: 0;
  min-width: 0;
}

.trip-sequence__label {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-brand-teal-dark);
}

.trip-sequence__title {
  font-weight: 600;
  color: var(--color-brand-purple);
}

@media (max-width: 40rem) {
  .trip-sequence__grid {
    grid-template-columns: 1fr;
  }

  .trip-sequence__link--previous,
  .trip-sequence__link--next {
    grid-column: 1;
  }

  .trip-sequence__link--next {
    justify-content: flex-end;
    text-align: right;
  }
}

/* Editorial layout: main column + booking rail */

.trip-layout {
  max-width: var(--content-max-width);
  margin: var(--space-lg) auto 0;
  padding-inline: var(--page-padding-inline);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* Source order is rail-then-main so the "Trip at a Glance" card appears before
   the editorial content below the desktop-only breakpoint (no CSS reordering
   needed there). At desktop, `order` swaps the visual position without
   touching markup, so the wide grid track goes to the main column and the
   narrow track to the rail (see the min-width: 64rem block below). */
.trip-layout__main {
  min-width: 0;
}

/* Full-width content: everything from Highlights through Booking. Sits below
   .trip-layout as a separate sibling (not a grid item of it), so it always
   spans the full page-content width regardless of the desktop two-column
   split above — and the sticky rail's containing block ends with .trip-layout,
   so it naturally stops sticking once this wrapper begins. */
.trip-content-full {
  max-width: var(--content-max-width);
  margin-inline: auto;
  margin-block-start: var(--space-lg);
  padding-inline: var(--page-padding-inline);
  min-width: 0;
}

.trip-page__section {
  margin-block: var(--space-xl);
  scroll-margin-top: var(--space-lg);
}

.trip-layout__main > .trip-page__section:first-child,
.trip-content-full > .trip-page__section:first-child {
  margin-block-start: 0;
}

.trip-page__section > h2 {
  display: inline-block;
  margin-block-end: var(--space-md);
  padding-bottom: var(--space-xs);
  font-family: var(--font-editorial-serif);
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.9rem);
  font-weight: 400;
  border-bottom: 2px solid var(--color-brand-teal);
}

/* blocklist/default.cshtml wraps every block list in a plain div; without this,
   that wrapper (not the individual cards) becomes the sole grid/flex item. */
.umb-block-list {
  display: contents;
}

/* Booking rail ("Trip at a Glance") */

.trip-rail__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-surface-purple);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.trip-rail__heading {
  margin: 0;
  font-family: var(--font-editorial-serif);
  font-size: 1.35rem;
  font-weight: 400;
}

.trip-rail__availability {
  margin: 0;
  align-self: flex-start;
}

.trip-rail__availability.trip-status {
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
}

.trip-rail__price {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-brand-teal-dark);
}

.trip-rail__price-note {
  margin: calc(-1 * var(--space-xs)) 0 0;
  font-size: 0.9rem;
}

.trip-rail__dates {
  margin: 0;
  font-weight: 500;
}

.trip-rail__cta {
  width: 100%;
  text-align: center;
}

.trip-rail__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block-start: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.trip-rail__subheading {
  margin: 0;
  color: var(--color-brand-teal-dark);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Higher specificity than the global .key-details rule (including its
   @media (min-width: 48rem) variant, which switches to a 4-column
   repeat(2, auto 1fr) layout) so the rail keeps a single label/value
   column pair at every viewport width instead of inheriting that
   multi-column layout inside the fixed 22rem rail. */
.trip-rail__group .key-details {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-sm);
  row-gap: var(--space-sm);
  align-items: start;
  padding: 0;
  background-color: transparent;
}

.trip-rail__group .key-detail__label {
  text-align: right;
  justify-self: end;
  white-space: nowrap;
}

.trip-rail__group .key-detail__value {
  min-width: 0;
  text-align: left;
  justify-self: start;
}

.trip-rail__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.trip-rail__tags li {
  padding: 0.15rem var(--space-sm);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.trip-rail__hosts {
  margin: 0;
}

.trip-rail__partner-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: inherit;
  text-decoration: none;
}

.trip-rail__partner-logo {
  display: block;
  max-height: 2.5rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.trip-rail__partner-name {
  font-weight: 600;
}

/* Hosts */

.host-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.host-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.host-card--with-image {
  display: grid;
  grid-template-columns: clamp(8rem, 24%, 11rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-lg);
}

.host-card--without-image {
  display: block;
}

.host-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.host-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.host-card__name {
  margin: 0;
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.host-card__bio {
  margin: 0;
}

.host-card__bio > :first-child {
  margin-block-start: 0;
}

.host-card__bio > :last-child {
  margin-block-end: 0;
}

.host-card__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  overflow-wrap: anywhere;
}

.trip-rich-text {
  max-width: var(--content-prose-width);
}

.trip-rich-text h2,
.trip-rich-text h3 {
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.trip-rich-text > :first-child {
  margin-block-start: 0;
}

.trip-rich-text > :last-child {
  margin-block-end: 0;
}

.trip-rich-text img {
  max-width: 100%;
  height: auto;
}

.personal-travel-page__introduction-body img,
.faq-item__answer img,
.inclusion-group__items img {
  max-width: 100%;
  height: auto;
}

.trip-rich-text table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

/* Key details */

.key-details {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  margin: 0;
  padding: var(--space-md);
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-md);
}

.key-detail__label {
  font-weight: bold;
}

.key-detail__value {
  margin: 0;
}

/* Pricing tables */

.pricing-tables {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pricing-table {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.pricing-table__heading {
  margin-block: 0 var(--space-sm);
  font-size: 1.3rem;
}

.pricing-table__introduction {
  margin-block: 0 var(--space-md);
}

.pricing-table__scroll {
  overflow-x: auto;
}

.pricing-table__table {
  width: 100%;
  border-collapse: collapse;
}

.pricing-table__table th,
.pricing-table__table td {
  border: 1px solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  vertical-align: top;
}

.pricing-table__table thead th {
  background-color: var(--color-brand-purple);
  color: #ffffff;
  font-weight: 600;
  border-color: var(--color-brand-purple);
}

.pricing-table__table td.pricing-table__cell--numeric {
  text-align: right;
  white-space: nowrap;
}

.pricing-table__table td:empty::after {
  content: "—";
  color: var(--color-border);
}

.pricing-table__description-cell {
  min-width: 11rem;
  overflow-wrap: anywhere;
}

.pricing-table__photos-heading,
.pricing-table__photos-cell {
  width: 6.5rem;
}

.pricing-table__photos-cell {
  padding: var(--space-xs);
}

.pricing-table__table td.pricing-table__photos-cell:empty::after {
  content: none;
}

.pricing-table__media-trigger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 5.5rem;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-brand-teal-dark);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: zoom-in;
}

.pricing-table__media-trigger:hover {
  color: var(--color-brand-purple);
}

.pricing-table__media-trigger:focus-visible,
.deck-layout__trigger:focus-visible,
.pricing-gallery button:focus-visible {
  outline: 3px solid var(--color-brand-teal-dark);
  outline-offset: 3px;
}

.pricing-table__thumbnail {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.pricing-table__photo-action {
  display: none;
}

.pricing-table__notes {
  margin-block-start: var(--space-md);
}

.deck-layout {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.deck-layout__heading {
  margin-block: 0 var(--space-md);
  font-size: 1.15rem;
}

.deck-layout__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deck-layout__grid--single {
  grid-template-columns: minmax(0, 54rem);
}

.deck-layout__trigger {
  display: block;
  width: 100%;
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  cursor: zoom-in;
}

.deck-layout__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 42rem;
  object-fit: contain;
}

html.pricing-gallery-open {
  overflow: hidden;
}

.pricing-gallery {
  width: min(72rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-fg);
  box-shadow: var(--shadow-lg);
}

.pricing-gallery::backdrop {
  background: rgb(16 18 22 / 78%);
}

.pricing-gallery__surface {
  display: flex;
  max-height: calc(100dvh - 2rem);
  flex-direction: column;
  padding: var(--space-md);
}

.pricing-gallery__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block-end: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.pricing-gallery__heading {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.65rem);
}

.pricing-gallery__close,
.pricing-gallery__previous,
.pricing-gallery__next {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-brand-teal-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.pricing-gallery__close {
  padding-inline: var(--space-sm);
}

.pricing-gallery__stage {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding-block-start: var(--space-md);
}

.pricing-gallery__figure {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.pricing-gallery__image {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 12rem);
  object-fit: contain;
}

.pricing-gallery__caption {
  margin-block-start: var(--space-sm);
  text-align: center;
}

.pricing-gallery__position {
  min-height: 1.5em;
  margin: var(--space-xs) 0 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@media (max-width: 48rem) {
  .pricing-table {
    min-width: 0;
    padding: var(--space-md);
  }

  .pricing-table__scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
  }

  .pricing-table__table,
  .pricing-table__table tbody,
  .pricing-table__table tr,
  .pricing-table__table td {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .pricing-table__table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .pricing-table__table tbody {
    display: grid;
    gap: var(--space-md);
  }

  .pricing-table__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .pricing-table__table tr {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
  }

  .pricing-table__table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-bottom: 1px solid var(--color-border);
    text-align: right;
    overflow-wrap: anywhere;
  }

  .pricing-table__table td:last-child {
    border-bottom: none;
  }

  .pricing-table__table td.pricing-table__category-cell {
    background-color: var(--color-surface-purple);
    color: var(--color-brand-purple);
    font-weight: 700;
    padding-block: var(--space-md);
    border-top: 3px solid var(--color-brand-purple);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .pricing-table__table td::before {
    content: attr(data-label);
    min-width: 0;
    flex: 1 1 auto;
    font-weight: bold;
    text-align: left;
    white-space: normal;
  }

  .pricing-table__table td.pricing-table__cell--numeric {
    white-space: nowrap;
  }

  .pricing-table__description-cell,
  .pricing-table__photos-cell {
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal;
  }

  .pricing-table__table td.pricing-table__photos-cell:empty {
    display: none;
  }

  .pricing-table__row--without-category .pricing-table__description-cell {
    border-top: 3px solid var(--color-brand-purple);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .pricing-table__description-cell::before,
  .pricing-table__photos-cell::before {
    display: block;
    margin-block-end: var(--space-xs);
    color: var(--color-brand-purple);
  }

  .pricing-table__media-trigger {
    align-items: flex-start;
    width: min(10rem, 100%);
    text-align: left;
  }

  .pricing-table__photo-count {
    display: none;
  }

  .pricing-table__photo-action {
    display: block;
  }

  .pricing-table__thumbnail {
    width: min(10rem, 100%);
  }

  .deck-layout__grid,
  .deck-layout__grid--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .deck-layout__trigger {
    max-width: 100%;
    padding: 0.2rem;
  }

  .deck-layout__image {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }

  .pricing-gallery {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .pricing-gallery__surface {
    max-height: calc(100dvh - 1rem);
    padding: var(--space-sm);
  }

  .pricing-gallery__stage {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-gallery__figure {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .pricing-gallery__previous,
  .pricing-gallery__next {
    width: 100%;
    grid-row: 2;
  }

  .pricing-gallery__image {
    max-height: calc(100dvh - 15rem);
  }
}

/* Pricing row cards (standalone Trip Pricing Row fallback rendering; see
   tripPricingRow.cshtml) */

.pricing-row-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.pricing-row-card__description {
  margin: 0 0 var(--space-sm);
  font-weight: bold;
}

.pricing-row-card__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  margin: 0;
}

.pricing-row-card__facts dt {
  font-weight: bold;
}

.pricing-row-card__facts dd {
  margin: 0;
}

.pricing-row-card__note {
  margin: var(--space-sm) 0 0;
  font-size: 0.9rem;
}

/* Highlights: image-led cards, edge-to-edge images */

.highlights-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-lg);
}

.highlight-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.highlight-card:hover {
  box-shadow: var(--shadow-md);
}

.highlight-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.highlight-card > *:not(.highlight-card__image) {
  padding-inline: var(--space-md);
}

.highlight-card__title {
  margin-block: var(--space-md) 0;
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.highlight-card__description {
  margin-block: var(--space-xs) 0;
}

.highlight-card > *:last-child:not(.highlight-card__image) {
  padding-block-end: var(--space-md);
}

/* Itinerary: vertical journey timeline on desktop */

.itinerary-map {
  margin-block: var(--space-lg);
  padding: var(--space-sm);
  background-color: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.itinerary-map__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.itinerary-map--full .itinerary-map__image {
  aspect-ratio: auto;
  object-fit: contain;
}

.itinerary-map--wide .itinerary-map__image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.itinerary-map--landscape .itinerary-map__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.itinerary-map__link {
  display: block;
  cursor: zoom-in;
}

.itinerary-map__link:focus-visible {
  outline: 3px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

.itinerary-map__caption {
  margin-block-start: var(--space-sm);
  margin-block-end: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-fg);
}

.itinerary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.itinerary-day {
  position: relative;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.itinerary-day--with-image {
  display: grid;
  grid-template-columns: 1fr minmax(16rem, 20rem);
  align-items: start;
  gap: var(--space-md);
}

.itinerary-day__content {
  min-width: 0;
}

.itinerary-day__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-block-end: 0;
}

.itinerary-day__label {
  margin: 0;
  font-weight: bold;
  color: var(--color-brand-teal-dark);
}

.itinerary-day__title {
  margin-block: var(--space-xs) var(--space-sm);
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.itinerary-day__description > :first-child {
  margin-block-start: 0;
}

.itinerary-day__description > :last-child {
  margin-block-end: 0;
}

@media (max-width: 48rem) {
  .itinerary-day--with-image {
    grid-template-columns: 1fr;
  }

  .itinerary-day--with-image .itinerary-day__image {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 48rem) {
  .itinerary-list {
    position: relative;
    padding-inline-start: 2rem;
  }

  .itinerary-list::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.4rem;
    width: 2px;
    background-color: var(--color-border);
  }

  .itinerary-day::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: -2rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--color-bg);
    border: 3px solid var(--color-brand-purple);
  }
}

/* Inclusions: calm, lightly tinted grouped panels */

.inclusion-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-lg);
}

.inclusion-group {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-warm);
}

.inclusion-group:nth-child(even) {
  background-color: var(--color-surface-purple);
}

.inclusion-group__title {
  margin-block: 0 var(--space-sm);
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.inclusion-group__items > :last-child {
  margin-block-end: 0;
}

/* FAQs: expandable rows with dividers */

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-md);
}

.faq-item__question {
  font-weight: 600;
  cursor: pointer;
  color: var(--color-brand-purple);
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::marker {
  content: "";
}

.faq-item__question::before {
  content: "+";
  display: inline-block;
  width: 1.25em;
  font-weight: bold;
  color: var(--color-brand-teal-dark);
}

.faq-item[open] > .faq-item__question::before {
  content: "\2212";
}

.faq-item__question:hover,
.faq-item__question:focus-visible {
  color: var(--color-brand-teal);
}

.faq-item__answer {
  margin-block-start: var(--space-sm);
  padding-inline-start: 1.25em;
}

.faq-item__answer > :first-child {
  margin-block-start: 0;
}

.faq-item__answer > :last-child {
  margin-block-end: 0;
}

/* Gallery */

.trip-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-md);
}

.trip-gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.trip-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Booking */

.trip-booking {
  background: linear-gradient(180deg, var(--color-surface-purple), var(--color-bg) 65%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.trip-booking__notes {
  max-width: var(--content-prose-width);
  white-space: pre-line;
}

.trip-booking__cta {
  margin-block-start: var(--space-md);
}

.trip-booking__external-action {
  display: inline-block;
  margin-block-start: var(--space-lg);
  color: var(--color-brand-purple-dark);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.trip-booking__external-action:hover {
  color: var(--color-brand-teal-dark);
}

.trip-booking__external-action:focus-visible {
  outline-color: var(--color-brand-purple-dark);
}

.trip-inquiry__success {
  max-width: var(--content-prose-width);
  padding: var(--space-md);
  border: 1px solid var(--color-brand-teal-dark);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-brand-teal-dark);
  font-weight: bold;
}

.trip-inquiry__error {
  max-width: var(--content-prose-width);
  padding: var(--space-md);
  margin-block-end: var(--space-md);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-error);
  font-weight: bold;
}

.trip-inquiry__error-summary p {
  margin-block: 0 var(--space-xs);
}

.trip-inquiry__error-summary ul {
  margin-block: 0;
  padding-inline-start: var(--space-lg);
}

.trip-inquiry__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--content-prose-width);
  margin-block-start: var(--space-md);
}

.trip-inquiry__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.trip-inquiry__field label {
  font-weight: bold;
}

.trip-inquiry__optional {
  font-weight: normal;
  color: var(--color-fg);
}

.trip-inquiry__field input,
.trip-inquiry__field textarea {
  width: 100%;
  font: inherit;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-fg);
}

.trip-inquiry__field textarea {
  min-height: 6rem;
  resize: vertical;
}

.trip-inquiry__field input:focus-visible,
.trip-inquiry__field textarea:focus-visible {
  outline: 3px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

.trip-inquiry__field--invalid input,
.trip-inquiry__field--invalid textarea {
  border-color: var(--color-error);
}

.trip-inquiry__field-error {
  margin: 0;
  color: var(--color-error);
  font-size: 0.9rem;
}

.trip-inquiry__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.trip-inquiry__submit {
  align-self: start;
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-brand-teal-dark);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.trip-inquiry__submit:hover {
  background-color: var(--color-brand-purple-dark);
}

.trip-inquiry__submit:focus-visible {
  outline: 3px solid var(--color-brand-purple-dark);
  outline-offset: 2px;
}

@media (max-width: 30rem) {
  .highlights-list,
  .inclusion-groups,
  .trip-gallery {
    grid-template-columns: 1fr;
  }

  .trip-page__cta {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 40rem) {
  .host-card--with-image {
    grid-template-columns: 1fr;
  }

  .host-card--with-image .host-card__image {
    max-width: 11rem;
  }
}

@media (min-width: 48rem) {
  :root {
    --page-padding-inline: var(--space-lg);
  }

  .key-details {
    grid-template-columns: repeat(2, auto 1fr);
    column-gap: var(--space-lg);
  }
}

@media (min-width: 64rem) {
  :root {
    --page-padding-inline: var(--space-xl);
  }

  .trip-layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }

  .trip-layout__main {
    order: 1;
  }

  .trip-rail {
    order: 2;
  }

  .trip-rail__card {
    position: sticky;
    top: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Blog
   Views/blogLandingPage.cshtml, Views/blogPost.cshtml, Views/Partials/blog/blogCard.cshtml,
   Views/Partials/blocklist/Components/blog*.cshtml. Reuses this stylesheet's existing tokens,
   breakpoints (40rem / 48rem / 64rem), and .page-shell/.reviews__nav/.reviews-grid__item
   conventions throughout - no new fonts, frameworks, gradients, or palette values.
   ========================================================================== */

/* Shared breadcrumb (Views/Partials/Layout/_Breadcrumbs.cshtml). */

.breadcrumb {
  margin-block-end: var(--space-md);
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-fg);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.breadcrumb__item:not(:last-child)::after {
  content: "/";
  color: var(--color-border);
}

.breadcrumb__link {
  color: var(--color-brand-purple);
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  color: var(--color-brand-teal-dark);
  text-decoration: underline;
}

.breadcrumb__item[aria-current="page"] {
  color: var(--color-fg);
  font-weight: 500;
}

/* Blog: compact landing header (Views/blogLandingPage.cshtml). */

main:has(.blog-landing) {
  background-color: var(--color-surface-warm);
}

.blog-landing__breadcrumb {
  margin-block-end: var(--space-md);
}

.blog-landing__header {
  padding-block: var(--space-md) var(--space-xl);
  margin-block-end: clamp(var(--space-xl), 5vw, var(--space-2xl));
  border-bottom: 1px solid var(--color-border);
}

.blog-landing__header--without-image {
  padding-block-start: var(--space-sm);
}

.blog-landing__header-inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

.blog-landing__content {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-landing__content h1 {
  margin: 0;
  font-size: clamp(2rem, 1.65rem + 1.5vw, 3rem);
}

.blog-landing__introduction {
  max-width: var(--content-prose-width);
}

.blog-landing__introduction :first-child {
  margin-block-start: 0;
}

.blog-landing__introduction :last-child {
  margin-block-end: 0;
}

.blog-landing__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.blog-landing__header-inner picture {
  display: block;
  max-width: 24rem;
}

@media (min-width: 48rem) {
  .blog-landing__header--with-image .blog-landing__header-inner {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    gap: var(--space-xl);
  }

  .blog-landing__header--with-image .blog-landing__header-inner picture {
    justify-self: end;
  }
}

/* Blog: Featured Story, editorial category navigation, and latest-story grid. */

.blog-featured,
.blog-categories,
.blog-feed {
  min-width: 0;
  margin-block-end: clamp(var(--space-xl), 5vw, var(--space-2xl));
}

.blog-featured__heading,
.blog-feed__heading {
  margin: 0 0 var(--space-lg);
  color: var(--color-brand-purple);
}

.blog-landing__content h1,
.blog-featured__heading,
.blog-feed__heading,
.blog-landing .blog-card--featured .blog-card__title,
.blog-landing .blog-card--landing .blog-card__title {
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.blog-featured__list,
.blog-categories__list,
.blog-feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-featured__list {
  display: grid;
}

.blog-categories {
  padding-block: var(--space-lg);
  border-block: 1px solid var(--color-border);
}

.blog-categories__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.blog-categories__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-fg);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-brand-teal);
  text-underline-offset: 0.25em;
}

.blog-categories__link:hover {
  color: var(--color-brand-purple);
}

.blog-categories__link:focus-visible {
  outline: 3px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

.blog-categories__link[aria-current="page"] {
  color: var(--color-brand-purple);
  text-decoration-thickness: 0.15em;
}

.blog-feed__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl) var(--space-lg);
}

@media (min-width: 40rem) {
  .blog-feed__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .blog-feed__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 100rem) {
  .blog-feed__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Blog: cards (Views/Partials/blog/blogCard.cshtml) - one wrapping link per card (see the
   partial's own comment for why), styled as a single unit rather than this stylesheet's older
   multi-anchor .trip-card pattern. */

.blog-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-brand-teal);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.blog-card:hover {
  border-color: var(--color-brand-teal);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.blog-card--home {
  background-color: var(--color-bg);
  transition: border-color 160ms ease;
}

.blog-card--home:hover {
  box-shadow: none;
  transform: none;
}

.blog-card__link {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.blog-card__link:hover .blog-card__title,
.blog-card__link:focus-visible .blog-card__title {
  color: var(--color-brand-teal-dark);
  text-decoration: underline;
}

.blog-card__link:focus-visible {
  outline: 3px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.blog-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--color-surface-purple);
}

.blog-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: var(--space-xs) solid var(--color-surface-purple);
  background-color: var(--color-brand-purple);
  color: #ffffff;
}

.blog-card__placeholder-mark {
  padding: var(--space-sm) var(--space-md);
  border-block: 2px solid var(--color-brand-teal);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.blog-card__eyebrow {
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand-teal-dark);
}

.blog-card__title {
  margin: 0;
  color: var(--color-brand-purple-dark);
  font-size: 1.125rem;
  /* Line-clamped rather than a separate Short Title field, per the approved schema. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__excerpt {
  margin: 0;
  color: var(--color-fg);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-fg);
  opacity: 0.72;
}

.blog-card__meta > * + *::before {
  content: "\00b7";
  margin-inline-end: var(--space-sm);
  color: var(--color-border);
}

.blog-card--landing .blog-card__media {
  aspect-ratio: 4 / 5;
}

.blog-card--landing,
.blog-card--featured {
  border-top-width: 1px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  transition: border-color 160ms ease;
}

.blog-card--landing:hover,
.blog-card--featured:hover {
  box-shadow: none;
  transform: none;
}

.blog-card--landing .blog-card__image,
.blog-card--featured .blog-card__image {
  transition: transform 180ms ease;
}

.blog-card--landing .blog-card__link:hover .blog-card__image,
.blog-card--featured .blog-card__link:hover .blog-card__image {
  transform: scale(1.025);
}

.blog-card--landing .blog-card__media,
.blog-card--featured .blog-card__media {
  aspect-ratio: 4 / 5;
}

.blog-card--landing .blog-card__content {
  padding: var(--space-md);
}

.blog-card--featured .blog-card__content {
  justify-content: center;
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
}

.blog-card--featured .blog-card__title {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  -webkit-line-clamp: 3;
}

.blog-card--featured .blog-card__excerpt {
  font-size: 1.0625rem;
  line-height: 1.55;
}

@media (min-width: 48rem) {
  .blog-card--featured .blog-card__link {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card--landing .blog-card__image,
  .blog-card--featured .blog-card__image {
    transition: none;
  }

  .blog-card--landing .blog-card__link:hover .blog-card__image,
  .blog-card--featured .blog-card__link:hover .blog-card__image {
    transform: none;
  }
}

.blog-listing__empty {
  max-width: var(--content-prose-width);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-muted);
}

/* Blog: pagination (Views/blogLandingPage.cshtml) */

.blog-pagination {
  margin-block-start: var(--space-lg);
}

.blog-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.blog-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-fg);
}

.blog-pagination__link:hover {
  border-color: var(--color-brand-teal);
  color: var(--color-brand-teal-dark);
}

.blog-pagination__link:focus-visible {
  outline: 2px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

.blog-pagination__link--current {
  border-color: var(--color-brand-teal-dark);
  background-color: var(--color-brand-teal-dark);
  color: #ffffff;
  font-weight: bold;
}

.blog-pagination__link--disabled {
  color: var(--color-border);
  cursor: not-allowed;
}

/* Travel Journal: premium single-column article experience (Views/blogPost.cshtml). */

.journal-article {
  min-width: 0;
}

main:has(.journal-article) {
  background-color: var(--color-surface-warm);
}

.journal-article .breadcrumb {
  max-width: 64rem;
  margin-inline: auto;
}

.journal-article__header {
  max-width: 42rem;
  margin: clamp(var(--space-xl), 6vw, var(--space-2xl)) auto var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
}

.journal-article__eyebrow,
.journal-article__title,
.journal-article__dek,
.journal-article__byline {
  margin: 0;
}

.journal-article__eyebrow {
  color: var(--color-brand-teal-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journal-article__title {
  overflow-wrap: anywhere;
  font-family: var(--font-editorial-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  line-height: 1.08;
}

.journal-article__dek {
  color: color-mix(in srgb, var(--color-fg) 82%, var(--color-bg));
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.55;
}

.journal-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  color: color-mix(in srgb, var(--color-fg) 72%, var(--color-bg));
  font-size: 0.875rem;
}

.journal-article__author + .journal-article__date::before {
  content: "\00b7";
  margin-inline-end: var(--space-sm);
  color: var(--color-border);
}

.journal-article__hero {
  max-width: 64rem;
  margin: 0 auto clamp(var(--space-xl), 5vw, var(--space-2xl));
}

.journal-article__hero-image {
  display: block;
  width: 100%;
  max-height: 36rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.journal-article__metadata {
  max-width: 42rem;
  margin: 0 auto clamp(var(--space-xl), 5vw, var(--space-2xl));
  padding-block: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  border-block: 1px solid var(--color-border);
}

.journal-article__metadata-item {
  min-width: 0;
}

.journal-article__metadata-label,
.journal-article__metadata-value {
  margin: 0;
}

.journal-article__metadata-label {
  color: var(--color-brand-teal-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.journal-article__metadata-value {
  margin-block-start: var(--space-xs);
  overflow-wrap: anywhere;
  color: var(--color-fg);
  line-height: 1.45;
}

/* Blog: article body width and spacing (Views/blogPost.cshtml, blog-rich-text block) */

.journal-article__body {
  max-width: 42rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.blog-rich-text > :first-child {
  margin-block-start: 0;
}

.blog-rich-text > :last-child {
  margin-block-end: 0;
}

.blog-rich-text > * + * {
  margin-block-start: 1.25em;
}

.blog-rich-text h2,
.blog-rich-text h3 {
  margin-block: 1.75em 0.65em;
}

.journal-article__body .blog-rich-text h2,
.journal-article__body .blog-rich-text h3 {
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.blog-rich-text ul,
.blog-rich-text ol {
  padding-inline-start: 1.5em;
}

.blog-rich-text li + li {
  margin-block-start: 0.45em;
}

.blog-rich-text a {
  color: var(--color-brand-purple);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.blog-rich-text a:hover,
.blog-rich-text a:focus-visible {
  color: var(--color-brand-teal-dark);
}

.blog-rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.blog-rich-text table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.blog-rich-text th,
.blog-rich-text td {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  text-align: start;
}

/* Blog: image figures and captions (blogImage.cshtml) */

.blog-figure {
  margin: 0;
}

.blog-figure__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.blog-figure__caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-block-start: var(--space-xs);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-fg) 70%, var(--color-bg));
}

.blog-figure__credit {
  color: var(--color-brand-teal-dark);
}

.blog-figure__credit::before {
  content: "\2014 ";
}

/* Blog: gallery grid (blogImageGallery.cshtml) - static responsive grid, no carousel JS. */

.blog-gallery {
  margin: 0;
}

.blog-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-sm);
}

.blog-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.blog-gallery__caption {
  margin-block-start: var(--space-sm);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-fg) 70%, var(--color-bg));
}

/* Travel Journal: purpose-built Photo Pair (blogPhotoPair.cshtml). */

.blog-photo-pair {
  margin: 0;
}

.blog-photo-pair__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.blog-photo-pair__item {
  min-width: 0;
}

.blog-photo-pair__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.blog-photo-pair__caption {
  margin: var(--space-xs) 0 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-fg) 70%, var(--color-bg));
}

.blog-photo-pair__caption--shared {
  margin-block-start: var(--space-sm);
}

@media (max-width: 37.5rem) {
  .blog-photo-pair__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Travel Journal: factual planning panel (blogTripFacts.cshtml). */

.blog-trip-facts {
  padding: clamp(var(--space-md), 4vw, var(--space-lg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-warm);
}

.blog-trip-facts__heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-brand-purple);
}

.blog-trip-facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
}

.blog-trip-facts__item {
  min-width: 0;
}

.blog-trip-facts__term {
  color: var(--color-brand-teal-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-trip-facts__value {
  margin: var(--space-xs) 0 0;
}

.blog-trip-facts__note {
  margin: var(--space-md) 0 0;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border);
}

@media (max-width: 40rem) {
  .blog-trip-facts__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Travel Journal: explicitly selected live Trip bridge (blogRelatedTrip.cshtml). */

.blog-related-trip {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-warm);
}

.blog-related-trip__media {
  min-width: 0;
}

.blog-related-trip__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.blog-related-trip__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-lg);
}

.blog-related-trip__heading,
.blog-related-trip__title,
.blog-related-trip__intro,
.blog-related-trip__eyebrow,
.blog-related-trip__status {
  margin: 0;
}

.blog-related-trip__heading {
  font-family: var(--font-editorial-serif);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--color-brand-purple);
}

.blog-related-trip__intro {
  color: var(--color-fg);
}

.blog-related-trip__eyebrow {
  color: var(--color-brand-teal-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blog-related-trip__title {
  font-size: 1.25rem;
  color: var(--color-fg);
}

.blog-related-trip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--color-fg) 72%, var(--color-bg));
  font-size: 0.875rem;
}

.blog-related-trip__link {
  display: inline-block;
  margin-block-start: var(--space-xs);
  color: var(--color-brand-purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  min-height: 2.75rem;
  padding: 0.65rem var(--space-md);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
}

.blog-related-trip__link:hover {
  color: var(--color-brand-teal-dark);
}

.blog-related-trip__link:focus-visible {
  outline: 2px solid var(--color-brand-purple-dark);
  outline-offset: 3px;
}

@media (max-width: 48rem) {
  .blog-related-trip {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-related-trip__image {
    height: auto;
    min-height: 0;
  }
}

/* Blog: pull quotes (blogPullQuote.cshtml) */

.blog-pull-quote {
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}

.blog-pull-quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.4;
  color: var(--color-brand-purple);
}

.blog-pull-quote__attribution {
  display: block;
  margin-block-start: var(--space-sm);
  font-style: normal;
  font-size: 0.875rem;
  color: var(--color-fg);
}

.blog-pull-quote__attribution::before {
  content: "\2014 ";
}

/* Blog: calls to action (blogCallToAction.cshtml) */

.blog-cta {
  padding: var(--space-lg);
  background-color: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

.blog-cta__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-brand-purple);
}

.blog-cta__text {
  margin: 0;
}

.blog-cta__link {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  min-height: 2.75rem;
  color: var(--color-brand-purple);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}

.blog-cta__link:hover {
  color: var(--color-brand-teal-dark);
  text-decoration: underline;
}

.blog-cta__link:focus-visible {
  outline: 3px solid var(--color-brand-teal-dark);
  outline-offset: 2px;
}

/* Travel Journal: end-of-article Continue Exploring integration. */

.continue-exploring {
  max-width: var(--content-max-width);
  margin: var(--space-2xl) auto 0;
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-warm);
}

.continue-exploring__heading {
  margin: 0 0 var(--space-xl);
  color: var(--color-brand-purple);
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.continue-exploring__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Blog: related posts (Views/blogPost.cshtml) - static grid, reuses .blog-card--related. */

.blog-related {
  max-width: var(--content-max-width);
  margin-inline: auto;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--color-border);
}

.blog-related__heading {
  margin: 0 0 var(--space-lg);
  color: var(--color-brand-purple);
  font-family: var(--font-editorial-serif);
  font-weight: 400;
}

.blog-related__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.blog-related__grid--count-1 {
  max-width: 22rem;
}

.blog-related__grid--count-2 {
  max-width: 46rem;
}

@media (min-width: 40rem) {
  .blog-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-related__grid--count-1 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 64rem) {
  .blog-related__grid--count-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .blog-related__grid--count-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Branded status page; deliberately independent of optional CMS page content. */

.not-found-page {
  display: grid;
  min-height: 55vh;
  place-items: center;
  padding-block: var(--space-2xl);
}

.not-found-page__inner {
  width: min(100%, 42rem);
  padding: clamp(var(--space-lg), 5vw, var(--space-2xl));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-warm);
  text-align: center;
}

.not-found-page__eyebrow {
  margin: 0 0 var(--space-sm);
  color: var(--color-brand-teal-dark);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.not-found-page h1 {
  margin: 0;
}

.not-found-page__message {
  max-width: 34rem;
  margin: var(--space-md) auto 0;
}

.not-found-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.not-found-page__links a {
  color: var(--color-brand-purple);
  font-weight: 700;
}

.not-found-page__links a:hover,
.not-found-page__links a:focus-visible {
  color: var(--color-brand-teal-dark);
}

.continue-exploring .blog-related {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 40rem) {
  .journal-article__header {
    text-align: start;
  }

  .journal-article__byline {
    justify-content: flex-start;
  }

  .journal-article__metadata {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .continue-exploring {
    margin-block-start: var(--space-xl);
    padding: var(--space-lg);
  }
}