/* ==========================================================================
   Real Deal: Saint Lucia From the Sea
   Design tokens and components. Values mirror the active Novamira design.
   ========================================================================== */

:root {
  /* Colour roles. Sampled from the client logo and photography. */
  --rdbt-bg: #FFFFFF;
  --rdbt-surface: #F1F6F7;
  --rdbt-deep: #002A4E;
  --rdbt-ink: #0B1E2D;
  --rdbt-ink-muted: #4A6373;
  --rdbt-line: #D5E1E6;
  --rdbt-accent: #007175;
  --rdbt-accent-ink: #00585B;
  --rdbt-cta: #BE0D0C;
  --rdbt-cta-hover: #9A0A09;
  --rdbt-sun: #D89B2C;
  --rdbt-overlay: linear-gradient(180deg, rgba(0,42,78,0) 0%, rgba(0,42,78,0.28) 45%, rgba(0,42,78,0.72) 100%);

  /* Type */
  --rdbt-font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --rdbt-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rdbt-display-lh: 1.08;
  --rdbt-display-ls: -0.01em;
  --rdbt-body-lh: 1.65;
  --rdbt-label-ls: 0.08em;

  /* Fluid type scale */
  --rdbt-step-hero: clamp(2.5rem, 5.4vw, 4.5rem);
  --rdbt-step-h2: clamp(1.9rem, 3.2vw, 2.9rem);
  --rdbt-step-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --rdbt-step-body: clamp(1rem, 1.05vw, 1.0625rem);
  --rdbt-step-label: 0.75rem;

  /* Spacing */
  --rdbt-xs: 8px;
  --rdbt-sm: 16px;
  --rdbt-md: 24px;
  --rdbt-lg: 48px;
  --rdbt-xl: 80px;
  --rdbt-section: clamp(64px, 8vw, 128px);

  /* Shape. One radius everywhere. */
  --rdbt-radius: 4px;
  --rdbt-shadow-navy: 0 18px 40px -24px rgba(0, 42, 78, 0.35);

  /* Layout */
  --rdbt-content: 1240px;
  --rdbt-measure: 68ch;

  /* Motion */
  --rdbt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rdbt-fast: 180ms;
  --rdbt-slow: 620ms;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

body {
  font-family: var(--rdbt-font-body);
  font-size: var(--rdbt-step-body);
  line-height: var(--rdbt-body-lh);
  color: var(--rdbt-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, .rdbt-display {
  font-family: var(--rdbt-font-display);
  font-weight: 400;
  line-height: var(--rdbt-display-lh);
  letter-spacing: var(--rdbt-display-ls);
  color: var(--rdbt-ink);
}

h3, h4, h5, h6 {
  font-family: var(--rdbt-font-body);
  font-weight: 700;
  line-height: 1.25;
  color: var(--rdbt-ink);
}

h1 { font-size: var(--rdbt-step-hero); }
h2 { font-size: var(--rdbt-step-h2); }
h3 { font-size: var(--rdbt-step-h3); }

.rdbt-measure p, p.rdbt-measure { max-width: var(--rdbt-measure); }

.rdbt-label {
  font-family: var(--rdbt-font-body);
  font-weight: 700;
  font-size: var(--rdbt-step-label);
  letter-spacing: var(--rdbt-label-ls);
  text-transform: uppercase;
  color: var(--rdbt-accent);
}

.rdbt-rule::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: var(--rdbt-md);
  background: var(--rdbt-accent);
}

/* Text sitting on deep navy or photography */
.rdbt-on-deep,
.rdbt-on-deep h1,
.rdbt-on-deep h2,
.rdbt-on-deep h3,
.rdbt-on-deep p { color: #FFFFFF; }
.rdbt-on-deep .rdbt-label { color: #8FD3D6; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.rdbt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rdbt-xs);
  min-height: 48px;
  padding: 18px 32px;
  border-radius: var(--rdbt-radius);
  font-family: var(--rdbt-font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--rdbt-fast) var(--rdbt-ease),
              color var(--rdbt-fast) var(--rdbt-ease),
              border-color var(--rdbt-fast) var(--rdbt-ease),
              transform var(--rdbt-fast) var(--rdbt-ease);
}

/* Booking actions only. */
.rdbt-btn--book {
  background: var(--rdbt-cta);
  color: #FFFFFF;
}
.rdbt-btn--book:hover,
.rdbt-btn--book:focus-visible {
  background: var(--rdbt-cta-hover);
  color: #FFFFFF;
}
.rdbt-btn--book:active { transform: translateY(1px); }

/* Secondary on light grounds. */
.rdbt-btn--line {
  background: transparent;
  color: var(--rdbt-accent-ink);
  border-color: var(--rdbt-accent);
}
.rdbt-btn--line:hover,
.rdbt-btn--line:focus-visible {
  background: var(--rdbt-accent);
  color: #FFFFFF;
}

/* Secondary over photography. */
.rdbt-btn--ghost {
  background: rgba(0, 42, 78, 0.18);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: none;
}
.rdbt-btn--ghost:hover,
.rdbt-btn--ghost:focus-visible {
  background: #FFFFFF;
  color: var(--rdbt-deep);
  border-color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Tour cards and fact rows
   -------------------------------------------------------------------------- */

.rdbt-card {
  display: flex;
  flex-direction: column;
  background: var(--rdbt-bg);
  border: 1px solid var(--rdbt-line);
  border-radius: var(--rdbt-radius);
  overflow: hidden;
  transition: border-color var(--rdbt-fast) var(--rdbt-ease),
              box-shadow var(--rdbt-slow) var(--rdbt-ease);
}
.rdbt-card__media { overflow: hidden; aspect-ratio: 3 / 2; }
.rdbt-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--rdbt-slow) var(--rdbt-ease);
}
.rdbt-card:hover { border-color: var(--rdbt-accent); box-shadow: var(--rdbt-shadow-navy); }
.rdbt-card:hover .rdbt-card__media img { transform: scale(1.03); }
.rdbt-card__body { padding: var(--rdbt-md); display: flex; flex-direction: column; gap: var(--rdbt-sm); flex: 1 1 auto; }
.rdbt-card__body p { max-width: none; color: var(--rdbt-ink-muted); }

.rdbt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rdbt-sm) var(--rdbt-md);
  margin: 0;
  padding: var(--rdbt-sm) 0 0;
  border-top: 1px solid var(--rdbt-line);
  list-style: none;
  font-size: 0.9375rem;
  color: var(--rdbt-ink-muted);
}
.rdbt-facts > li + li { padding-left: var(--rdbt-md); border-left: 1px solid var(--rdbt-line); }
.rdbt-facts strong { color: var(--rdbt-ink); font-weight: 700; }

@media (max-width: 767px) {
  .rdbt-facts { flex-direction: column; gap: 0; }
  .rdbt-facts > li { padding: 10px 0; border-bottom: 1px solid var(--rdbt-line); }
  .rdbt-facts > li + li { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   Sections and photographic bands
   -------------------------------------------------------------------------- */

.rdbt-section { padding-block: var(--rdbt-section); }
.rdbt-ground-surface { background: var(--rdbt-surface); }
.rdbt-ground-deep { background: var(--rdbt-deep); }
.rdbt-media-overlay { position: relative; }
.rdbt-media-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rdbt-overlay);
  pointer-events: none;
}
.rdbt-media-overlay > * { position: relative; }

/* --------------------------------------------------------------------------
   Forms and focus states
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], textarea, select {
  border: 1px solid var(--rdbt-line) !important;
  border-radius: var(--rdbt-radius) !important;
  color: var(--rdbt-ink) !important;
  font-family: var(--rdbt-font-body) !important;
  min-height: 48px;
}
input::placeholder, textarea::placeholder { color: var(--rdbt-ink-muted); opacity: 1; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--rdbt-accent);
  outline-offset: 2px;
  border-radius: var(--rdbt-radius);
}

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

/* --------------------------------------------------------------------------
   Motion. Reveals only hide once the script has flagged the document.
   -------------------------------------------------------------------------- */

.rdbt-js [data-rdbt-reveal],
.rdbt-js .rdbt-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--rdbt-slow) var(--rdbt-ease), transform var(--rdbt-slow) var(--rdbt-ease);
  will-change: opacity, transform;
}
.rdbt-js [data-rdbt-reveal].rdbt-in,
.rdbt-js .rdbt-reveal.rdbt-in {
  opacity: 1;
  transform: none;
}
.rdbt-js [data-rdbt-reveal][data-rdbt-delay="1"] { transition-delay: 90ms; }
.rdbt-js [data-rdbt-reveal][data-rdbt-delay="2"] { transition-delay: 180ms; }
.rdbt-js [data-rdbt-reveal][data-rdbt-delay="3"] { transition-delay: 270ms; }
.rdbt-js .rdbt-reveal.rdbt-delay-1 { transition-delay: 90ms; }
.rdbt-js .rdbt-reveal.rdbt-delay-2 { transition-delay: 180ms; }
.rdbt-js .rdbt-reveal.rdbt-delay-3 { transition-delay: 270ms; }

[data-rdbt-parallax], .rdbt-parallax { will-change: transform; }

/* Parallax is desktop only. */
@media (max-width: 1024px) {
  [data-rdbt-parallax], .rdbt-parallax { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rdbt-js [data-rdbt-reveal],
.rdbt-js .rdbt-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-rdbt-parallax], .rdbt-parallax { transform: none !important; }
  .rdbt-card, .rdbt-card__media img, .rdbt-btn { transition: none !important; }
  html { scroll-behavior: auto !important; }
}