/* GENERATED by scripts/build_destination_themes.js - do not edit by hand.
   Source of truth: site/data/destination_themes.json */

/* Brand defaults. A page with no data-destination looks exactly as it did before. */
:root{
  --d-accent: var(--sky);
  --d-accent-2: var(--sand-deep);
  --d-bg: var(--paper);
  --d-surface: var(--paper);
  --d-text: var(--ink);
  --d-hero: linear-gradient(160deg,#EAF2FA 0%,#C7DCF0 50%,#2E9BEF 100%);
}

/* Rome - Roman Ivory */
[data-destination="FCO"]{
  --d-accent: #B4552F;
  --d-accent-2: #7C8A5A;
  --d-bg: #FBF6EE;
  --d-surface: #FFFFFF;
  --d-text: #2A211B;
  --d-hero: linear-gradient(160deg,#F6E7D4 0%,#E7C9A8 48%,#C97F52 100%);
}

/* Athens - Aegean Chalk */
[data-destination="ATH"]{
  --d-accent: #1E6FA8;
  --d-accent-2: #C8B48A;
  --d-bg: #F7FAFC;
  --d-surface: #FFFFFF;
  --d-text: #182430;
  --d-hero: linear-gradient(160deg,#EAF4FB 0%,#BEDCF0 50%,#3E86BC 100%);
}

/* Barcelona - Gaudí Daylight */
[data-destination="BCN"]{
  --d-accent: #D2652A;
  --d-accent-2: #2F9E8F;
  --d-bg: #FFF9F1;
  --d-surface: #FFFFFF;
  --d-text: #2B2119;
  --d-hero: linear-gradient(160deg,#FFE9CE 0%,#F5B77C 45%,#2F9E8F 100%);
}

/* Paris - Parisian Cream */
[data-destination="CDG"]{
  --d-accent: #7E2438;
  --d-accent-2: #1A1A1A;
  --d-bg: #FBF8F4;
  --d-surface: #FFFFFF;
  --d-text: #161616;
  --d-hero: linear-gradient(160deg,#F3ECE3 0%,#D9CBBC 50%,#7E2438 100%);
}

/* Bangkok - Monsoon Teak */
[data-destination="BKK"]{
  --d-accent: #C2892B;
  --d-accent-2: #1F6E5E;
  --d-bg: #FBF7F0;
  --d-surface: #FFFFFF;
  --d-text: #221C13;
  --d-hero: linear-gradient(160deg,#FDF0D6 0%,#E0B96A 45%,#1F6E5E 100%);
}

/* Budapest - Danube Brass */
[data-destination="BUD"]{
  --d-accent: #9A6B2F;
  --d-accent-2: #3C5A6E;
  --d-bg: #F8F6F2;
  --d-surface: #FFFFFF;
  --d-text: #1E242A;
  --d-hero: linear-gradient(160deg,#F0E7DA 0%,#C9B08A 50%,#3C5A6E 100%);
}

/* Vienna - Imperial Slate */
[data-destination="VIE"]{
  --d-accent: #2F5C7A;
  --d-accent-2: #A88A5C;
  --d-bg: #F7F8FA;
  --d-surface: #FFFFFF;
  --d-text: #1A2129;
  --d-hero: linear-gradient(160deg,#ECF0F4 0%,#C2CEDA 50%,#2F5C7A 100%);
}

/* Prague - Bohemian Ash */
[data-destination="PRG"]{
  --d-accent: #8C4A3F;
  --d-accent-2: #4A5A62;
  --d-bg: #F8F7F5;
  --d-surface: #FFFFFF;
  --d-text: #20262A;
  --d-hero: linear-gradient(160deg,#EFEAE4 0%,#C6B7AC 50%,#4A5A62 100%);
}

/* Amsterdam - Canal Linen */
[data-destination="AMS"]{
  --d-accent: #B4442F;
  --d-accent-2: #2E6B57;
  --d-bg: #F9F9F7;
  --d-surface: #FFFFFF;
  --d-text: #1C2420;
  --d-hero: linear-gradient(160deg,#EFF2EE 0%,#BFCFC4 50%,#2E6B57 100%);
}

/* Cyprus - Levantine Salt */
[data-destination="CYP"]{
  --d-accent: #1B7F86;
  --d-accent-2: #D9A441;
  --d-bg: #F6FBFB;
  --d-surface: #FFFFFF;
  --d-text: #17262A;
  --d-hero: linear-gradient(160deg,#E6F5F5 0%,#A9DCDC 50%,#1B7F86 100%);
}

/* ---- How a theme is allowed to show up -------------------------------------
   Accents, hero wash, separators and card edges only. Logo, nav, deal cards,
   trust row, CTA hierarchy and body type stay on the brand tokens. */

[data-destination]{ background: var(--d-bg); }
[data-destination] .d-hero{ background: var(--d-hero); }
[data-destination] .d-rule{ border: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--d-accent), transparent); opacity:.55; }
[data-destination] .d-accent{ color: var(--d-accent); }
[data-destination] .d-cta{ background: var(--d-accent); color: #fff; border-color: var(--d-accent); }
[data-destination] .d-cta:hover{ filter: brightness(.93); }
[data-destination] .d-surface{ background: var(--d-surface); border: 1px solid color-mix(in srgb, var(--d-accent) 26%, transparent); }
[data-destination] ::selection{ background: color-mix(in srgb, var(--d-accent) 28%, transparent); }

/* ---- Three-zone hero -------------------------------------------------------
   Environment, Janet, offer. They share one warm wash and one baseline so the eye reads a
   single composition rather than three cards; only Janet breaks the baseline, which is what
   makes her the focal point without a border or a shadow doing the work. */
/* The old hero was a two-column grid, which put the copy in one cell and the picture in the
   next - the collage look. Block layout lets the scene run full bleed and the copy sit on it. */
.jt-hero--zones{ background: var(--d-bg); position: relative; overflow: hidden; display: block; }
.jt-hero--zones .jt-hero__figure{ display: none; }   /* Janet lives inside the scene now */

.jt-scene{
  position: relative; width: 100%;
  height: clamp(420px, 56vw, 620px);
  overflow: hidden; isolation: isolate;
  --par-x: 0; --par-y: 0;
}
.jt-scene__bg{
  position:absolute; inset:-4%; width:108%; height:108%; object-fit: cover;
  /* Pushed warm and slightly soft so the city reads as depth behind her, not as a photo
     she is standing next to. */
  /* Graded toward the theme, not left as shot. A cold blue sky under a terracotta headline is
     two different afternoons in one frame, and that mismatch is what reads as pasted. */
  filter: saturate(.62) contrast(1.05) brightness(1.06) sepia(.28) hue-rotate(-12deg) blur(1.5px);
  transform: translate3d(calc(var(--par-x) * -14px), calc(var(--par-y) * -10px), 0) scale(1.04);
  will-change: transform;
}
/* Aerial haze: distance loses contrast and picks up the sky. Without it a cutout always looks
   stuck on, however good its edge is. */
.jt-scene__haze{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--d-bg) 92%, transparent) 0%,
                            color-mix(in srgb, var(--d-bg) 34%, transparent) 26%,
                            transparent 58%),
    linear-gradient(to bottom, color-mix(in srgb, var(--d-bg) 70%, transparent) 0%,
                               transparent 34%);
}
/* The light she is standing in, behind her, so it wraps her silhouette. */
.jt-scene__glow{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode: screen;
  background: radial-gradient(46% 52% at 50% 62%,
    color-mix(in srgb, var(--d-accent) 40%, transparent) 0%, transparent 70%);
  transform: translate3d(calc(var(--par-x) * -8px), 0, 0);
}
.jt-scene__janet{
  position:absolute; inset-inline-start: 50%; bottom: 0; margin: 0;
  width: clamp(210px, 30vw, 430px);
  transform: translate3d(calc(-50% + var(--par-x) * 20px), calc(var(--par-y) * 6px), 0);
  will-change: transform;
}
.jt-scene__janet img{ width:100%; height:auto; display:block; }
/* Contact shadow. She is not standing anywhere until something touches the ground. */
.jt-scene__janet::after{
  content:""; position:absolute; inset-inline: 12%; bottom: -10px; height: 30px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(40,20,10,.5) 0%, transparent 70%);
  filter: blur(6px);
}
/* Foreground pass: something out of focus in front of her is what makes the middle ground read
   as middle ground. */
.jt-scene__fore{
  position:absolute; inset-inline:-6%; bottom:-8%; height: 30%; pointer-events:none;
  background: linear-gradient(to top, var(--d-bg) 24%,
    color-mix(in srgb, var(--d-bg) 60%, transparent) 62%, transparent 100%);
  filter: blur(10px);
  transform: translate3d(calc(var(--par-x) * 26px), 0, 0);
}
.jt-scene__tag{
  position:absolute; inset-inline-end: clamp(14px, 3vw, 34px); top: clamp(14px, 3vw, 30px);
  margin:0; display:flex; flex-direction:column; gap:2px;
  font-size:.78rem; font-weight:800; letter-spacing:.04em;
  color: #fff; text-shadow: 0 1px 10px rgba(30,14,6,.75);
}
.jt-scene__deal{ font-weight:600; opacity:.94; }

/* Janet takes the scene's light. Without a warm tint the cutout stays studio-lit and floats.
   An overlay element cannot do this: it paints her bounding box, and the box shows up as a
   pale rectangle around her. The tint has to ride on the image so it respects her alpha. */
.jt-scene__janet img{
  filter: drop-shadow(0 18px 26px rgba(40, 20, 10, .34))
          sepia(.16) saturate(1.04) brightness(1.02);
}

.jt-hero--zones .jt-hero__grid{
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 4;
  display: flex; align-items: center; pointer-events: none;
}
.jt-hero--zones .jt-hero__copy{
  max-width: 42ch; pointer-events: auto;
  padding: clamp(16px, 2.5vw, 30px) 0;
}
.jt-hero--zones .jt-hero__copy h1,
.jt-hero--zones .jt-hero__copy .hero-sub{ text-shadow: 0 1px 18px color-mix(in srgb, var(--d-bg) 88%, transparent); }
/* A readable bed under the copy, shaped so it fades into the street rather than ending on a line. */
.jt-scene__haze{
  background:
    linear-gradient(to top, color-mix(in srgb, var(--d-bg) 92%, transparent) 0%,
                            color-mix(in srgb, var(--d-bg) 34%, transparent) 26%,
                            transparent 58%),
    linear-gradient(to bottom, color-mix(in srgb, var(--d-bg) 70%, transparent) 0%,
                               transparent 34%),
    linear-gradient(to left, color-mix(in srgb, var(--d-bg) 96%, transparent) 0%,
                             color-mix(in srgb, var(--d-bg) 72%, transparent) 26%,
                             transparent 56%);
}

@media (max-width: 899px){
  .jt-hero--zones .jt-hero__grid{ position: static; padding-top: clamp(14px, 3vw, 26px); }
  .jt-hero--zones .jt-hero__copy{ max-width: none; }
}

@media (prefers-reduced-motion: reduce){
  .jt-scene__bg, .jt-scene__janet, .jt-scene__fore, .jt-scene__glow{ transition: none; }
}
@media (max-width: 720px){
  .jt-scene{ height: clamp(360px, 82vw, 460px); }
  .jt-scene__janet{ width: clamp(180px, 46vw, 260px); }
}

/* Destination pages. Setting data-destination on <body> is the whole integration; these
   rules reach the page's existing classes so no page markup has to be restyled per city. */
[data-destination] h1{ position: relative; padding-bottom: 14px; }
[data-destination] h1::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; width:74px; height:4px; border-radius:2px;
  background: linear-gradient(90deg, var(--d-accent), var(--d-accent-2));
}
[data-destination] .tp-cta{
  background: var(--d-surface);
  border-color: color-mix(in srgb, var(--d-accent) 30%, transparent);
}
/* .cta stays dark on purpose: white-on-accent is not a safe body-text contrast, and this
   block carries the affiliate button. The theme reads through the button, not a repaint. */
[data-destination] .cta .btn{ background: var(--d-accent); border-color: var(--d-accent); color:#fff; }
[data-destination] .cta .btn:hover{ filter: brightness(.93); }
/* .bar-cta is deliberately left alone. janet_ds.css pins it with !important, and the sticky
   nav CTA is brand furniture rather than destination dressing - not worth an override war. */

/* Homepage cards carry their own destination without leaving the shared card shape.
   ::after is already the readability scrim behind the white card text - the accent bar
   goes on ::before, above the scrim, so the text keeps its contrast. */
.dest[data-destination] .dest-art{ box-shadow: 0 10px 30px color-mix(in srgb, var(--d-accent) 22%, transparent); }
/* A hairline, inset from the card edge. At 5px hard against the corner radius
   it read as a stray coloured stripe rather than as the destination's accent. */
.dest[data-destination]::before{
  content:""; position:absolute; inset:auto 18px 0 18px; height:3px; z-index:3;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--d-accent), var(--d-accent-2)); opacity:.5;
  transform: scaleX(.55); transform-origin: center;
  transition: opacity .3s ease, transform .3s ease;
}
.dest[data-destination]:hover::before,
.dest[data-destination]:focus-visible::before{ opacity:.92; transform: scaleX(1); }
.dest[data-destination] .dest-meta{ color: color-mix(in srgb, var(--d-accent) 45%, #F4C77B); }
.dest[data-destination] .dest-photo{ transition: transform .5s ease; }
.dest[data-destination]:hover .dest-photo{ transform: scale(1.04); }

@media (prefers-reduced-motion: reduce){
  .dest[data-destination] .dest-photo,
  .dest[data-destination]::before{ transition: none; transform: scaleX(1); }
  .dest[data-destination]:hover .dest-photo{ transform: none; }
}