/* ==========================================================================
   tours.css — page styles for tours.html
   --------------------------------------------------------------------------
   Only this page's sections live here. Shared pieces (buttons, cards, media,
   tick lists, chips, accordions, section rhythm) come from components.css and
   layout.css. Every value below references a token from tokens.css.

   Contents
     1. Anchor offset
     2. Page intro (section 1)
     3. The tour list (sections 2-7) — one row design, used six times
     4. Section chrome for the six list sections
     5. What every tour package includes (section 8)
     6. Guarantees and flexible booking (section 9)
     7. Request your free custom itinerary (section 10)
   ========================================================================== */


/* ==========================================================================
   1. Anchor offset
   The header is sticky, so jump links must stop short of it.
   ========================================================================== */

.tour-section {
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}


/* ==========================================================================
   2. Page intro (section 1)
   Full-bleed photograph with a scrim. Centred stack, matching the home hero:
   headline on the full 1200px measure, body copy held to a shorter line.
   ========================================================================== */

.page-intro {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: var(--space-5xl) var(--space-4xl);
  background-color: var(--color-surface-inverse);
  overflow: hidden;
}

.page-intro__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.page-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-intro__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}

.page-intro__inner {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
}

.page-intro__content {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
  color: var(--color-text-inverse);
}

.page-intro__title {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  color: var(--color-text-inverse);
}

.page-intro__title em {
  font-style: normal;
  color: var(--palette-gold-400);
}

.page-intro__text {
  max-width: 56.25rem; /* 900px, same measure as the home hero paragraph */
  margin-inline: auto;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
}

.page-intro__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.page-intro__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
}

.page-intro__note .icon {
  color: var(--palette-gold-400);
}

/* Jump links. A long list page deserves a way in other than scrolling. */
.page-intro__jump {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-inverse);
}

.page-intro__jump-label {
  margin-bottom: var(--space-sm);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--palette-gold-400);
}

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

.page-intro__jump-list .chip {
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.page-intro__jump-list .chip:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: var(--palette-gold-400);
  color: var(--color-text-inverse);
}


/* ==========================================================================
   3. The tour list (sections 2-7)
   One row design, repeated identically in all six sections. Media on the
   left, copy on the right, numbered continuously 01-11 down the page so the
   six sections read as one list rather than six unrelated blocks.
   ========================================================================== */

.tour-list {
  display: grid;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tour-row {
  display: grid;
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.tour-row:hover {
  transform: translateY(-2px);
  border-color: var(--palette-forest-200);
  box-shadow: var(--shadow-md);
}

/* --- media ------------------------------------------------------------- */

.tour-row__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-muted);
}

.tour-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.tour-row:hover .tour-row__media img {
  transform: scale(1.04);
}

.tour-row__index {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-surface-inverse);
  border-end-end-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--palette-gold-400);
}

/* --- body -------------------------------------------------------------- */

.tour-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
}

.tour-row__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
}

.tour-row__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.tour-row__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.tour-row__points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-row__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* The row CTA is a text link rather than a filled button: eleven solid
   buttons down one page would read as pressure, not as an invitation. */
.tour-row__cta .icon {
  color: inherit;
}

/* --- two columns from tablet up ---------------------------------------- */

@media (min-width: 48rem) {
  .tour-row {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: stretch;
  }

  .tour-row__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 17.5rem;
  }

  .tour-row__body {
    padding: var(--space-2xl);
  }
}

@media (min-width: 62rem) {
  .tour-row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}


/* ==========================================================================
   4. Section chrome for the six list sections
   The rows never change. Variety comes from the frame around them: the
   alternating surfaces, the split headings, and one dark breakout band.
   ========================================================================== */

.tour-section__head {
  display: grid;
  gap: var(--space-lg) var(--space-3xl);
  margin-bottom: var(--space-2xl);
  align-items: end;
}

@media (min-width: 62rem) {
  .tour-section__head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.tour-section__title {
  margin-bottom: var(--space-md);
}

.tour-section__text {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.section--inverse .tour-section__text {
  color: var(--color-text-inverse-muted);
}

/* Count line sitting under the heading — "two itineraries in this group". */
.tour-section__count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.tour-section__count .icon {
  color: var(--color-accent-strong);
}

.section--inverse .tour-section__count {
  color: var(--color-text-inverse-muted);
}

.section--inverse .tour-section__count .icon {
  color: var(--palette-gold-400);
}

/* The row card keeps its own light surface inside the dark breakout band, so
   its heading has to opt out of the inverse heading colour it would otherwise
   inherit from .section--inverse h3. */
.section--inverse .tour-row__title {
  color: var(--color-text);
}

/* Price note under the signature section heading. */
.tour-section__price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-lg);
  background-color: var(--color-surface-tint);
  border: 1px solid var(--palette-forest-100);
  border-radius: var(--radius-sm);
}

.tour-section__price p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.tour-section__price strong {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-base);
  color: var(--color-text);
}


/* ==========================================================================
   5. What every tour package includes (section 8)
   Asymmetric: a tall photograph that sticks while the checklist scrolls.
   ========================================================================== */

.includes__layout {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 62rem) {
  .includes__layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-4xl);
    align-items: start;
  }

  .includes__media {
    position: sticky;
    top: calc(var(--header-height) + var(--space-xl));
  }
}

.includes__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.includes__media img {
  display: block;
  width: 100%;
  height: auto;
}

.includes__media-note {
  position: absolute;
  inset-inline: var(--space-md);
  inset-block-end: var(--space-md);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md);
  background-color: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--palette-forest-800);
  backdrop-filter: blur(4px);
}

.includes__media-note .icon {
  color: var(--color-accent-strong);
}

.includes__list {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .includes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

.includes__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.includes__item-title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.includes__item-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.includes__callout {
  display: grid;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  background-color: var(--color-surface-inverse);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
}

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

.includes__callout-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-lg);
  color: var(--color-text-inverse);
}

.includes__callout-price {
  color: var(--palette-gold-400);
}

.includes__callout-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
}


/* ==========================================================================
   6. Guarantees and flexible booking (section 9)
   A sticky statement on the left, the four written guarantees on the right.
   ========================================================================== */

.guarantees__layout {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 62rem) {
  .guarantees__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-4xl);
    align-items: start;
  }

  .guarantees__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-xl));
  }
}

.guarantees__aside-text {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.guarantees__list {
  display: grid;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: guarantee;
}

.guarantees__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.guarantees__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.guarantees__item::before {
  counter-increment: guarantee;
  content: counter(guarantee, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--palette-gold-200);
  border-radius: var(--radius-pill);
  background-color: var(--palette-gold-50);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--palette-gold-800);
}

.guarantees__item-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.guarantees__item-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}


/* ==========================================================================
   7. Request your free custom itinerary (section 10)
   ========================================================================== */

.request {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.request__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.request__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.request__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-band);
}

.request__inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 62rem) {
  .request__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-4xl);
    align-items: center;
  }
}

.request__title {
  margin-bottom: var(--space-md);
  color: var(--color-text-inverse);
}

.request__text {
  margin: 0 0 var(--space-xl);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
  max-width: var(--measure);
}

.request__steps {
  display: grid;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.request__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.request__step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--palette-gold-400);
}

.request__step-title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-inverse);
}

.request__step-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-inverse-muted);
}

/* Contact card */
.request__card {
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  color: var(--color-text);
}

.request__card-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-lg);
}

.request__card-text {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.request__card-actions {
  display: grid;
  gap: var(--space-sm);
}

.request__card-direct {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.request__card-direct li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.request__card-direct .icon {
  color: var(--color-accent-strong);
}

.request__card-direct a {
  color: var(--color-text);
  text-decoration: none;
}

.request__card-direct a:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

.request__card-direct address {
  font-style: normal;
}