/* ============================================
   PELICAD - /demo landing page (paid traffic)
   ============================================
   Only the parts of /demo that differ from the home page live here. Everything the two pages
   share — hero, marquee, before/after slider, gallery, features, FAQ, CTA banner — keeps
   using css/pages/home.css, so a change to the home page's look carries over automatically.

   What is page-specific:
     .demo-nav        stripped-down header (no menu, no login, one CTA)
     .demo-sticky-cta phone-only bottom bar, so the CTA is always one tap away
     .demo-book       the booking section built around Yannic's photo
     .demo-footer     legal links and awards only
   ============================================ */

/* ---- Limited nav ----
   Unlike .nav on the rest of the site this one scrolls away with the page instead of being
   fixed. On a landing page the sticky CTA below covers the "always reachable" job on phones,
   and on desktop the page is short enough that a fixed bar only costs vertical space. */
.demo-nav {
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid rgba(20, 36, 52, .09);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 50;
}

.demo-nav__inner {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 72px;
}

.demo-nav__logo img {
  height: 42px;
  width: auto;
}

/* Clickable: it reads as a promise about the demo, so it books one. */
.demo-nav__message {
  align-items: center;
  background: rgba(174, 247, 183, .22);
  border: 1px solid rgba(20, 36, 52, .08);
  border-radius: var(--radius);
  display: inline-flex;
  gap: 10px;
  justify-self: center;
  max-width: min(620px, 100%);
  padding: 8px 14px;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}

.demo-nav__message:hover,
.demo-nav__message:focus-visible {
  background: rgba(174, 247, 183, .42);
  border-color: rgba(20, 36, 52, .18);
}

.demo-nav__message span {
  color: var(--blue);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.demo-nav__message strong {
  color: var(--text-mid);
  font-size: .85rem;
  font-weight: 500;
}

.demo-nav__actions {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  justify-self: end;
}

.demo-nav__cta {
  padding: 11px 20px;
}

/* ---- Sticky mobile CTA ----
   Hidden on desktop, where the nav CTA and the in-page buttons are enough. */
.demo-sticky-cta {
  display: none;
}

/* ---- Hero ----
   .hero reserves var(--nav-h) at the top for the fixed site nav. The demo nav sits in normal
   flow above the hero, so that reservation would show up as a gap here. */
.demo-hero {
  padding-top: 0;
}

/* ---- Booking section ----
   Placed directly after the trust logos. Everything above it is the promise, everything below
   it is evidence; this is the point where a visitor who is already convinced can act without
   scrolling the whole page first. */
.demo-book {
  background: var(--bg);
  padding: 88px 0;
}

/* The right-hand column (six reasons plus the CTA) is much taller than the portrait, so the
   aside is centred against it rather than top-aligned — top-aligning leaves an obvious well
   of empty space under Yannic's name. */
.demo-book__card {
  align-items: center;
  background: var(--blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  color: #fff;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  overflow: hidden;
  padding: clamp(28px, 3.6vw, 48px);
  position: relative;
}

/* Soft mint bloom behind the portrait, so the dark card does not read as a flat block. */
.demo-book__card::before {
  background: radial-gradient(circle at 0% 0%, rgba(174, 247, 183, .22), transparent 62%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.demo-book__aside,
.demo-book__main {
  position: relative;
  z-index: 1;
}

.demo-book__portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
}

.demo-book__portrait img {
  aspect-ratio: 4 / 5;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.demo-book__person {
  padding-top: 16px;
}

.demo-book__person-name {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.demo-book__person-role {
  color: rgba(255, 255, 255, .66);
  font-size: .85rem;
  padding-top: 2px;
}

.demo-book__label {
  color: var(--mint);
  margin-bottom: 14px;
}

.demo-book__title {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.demo-book__lead {
  color: rgba(255, 255, 255, .76);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 56ch;
  padding-top: 14px;
  white-space: normal;
}

/* ---- The six reasons to book ---- */
.demo-wins {
  display: grid;
  gap: 22px 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 32px 0 0;
}

.demo-win {
  display: flex;
  gap: 13px;
}

.demo-win__icon {
  align-items: center;
  background: rgba(174, 247, 183, .14);
  border: 1px solid rgba(174, 247, 183, .3);
  border-radius: var(--radius);
  color: var(--mint);
  display: inline-flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.demo-win__icon svg {
  height: 19px;
  width: 19px;
}

.demo-win strong {
  color: #fff;
  display: block;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
}

.demo-win p {
  color: rgba(255, 255, 255, .66);
  font-size: .86rem;
  line-height: 1.55;
  padding-top: 4px;
  white-space: normal;
}

.demo-book__action {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  padding-top: 34px;
}

.demo-book__note {
  color: rgba(255, 255, 255, .6);
  font-size: .84rem;
}

/* Mint button — the site's .btn--primary is dark blue, which disappears on this dark card. */
.demo-btn--mint {
  background: var(--mint);
  color: var(--blue);
  font-size: .95rem;
  padding: 14px 26px;
}

.demo-btn--mint:hover {
  background: #fff;
  box-shadow: 0 10px 28px rgba(174, 247, 183, .28);
  transform: translateY(-2px);
}

/* ---- Minimal footer ---- */
.demo-footer {
  background: var(--bg-dark);
  color: #fff;
  padding: 56px 0 0;
}

.demo-footer__inner {
  align-items: start;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Direct child only. The award badges further down are also <img> inside this block, and a
   descendant selector here would invert them to solid white along with the logo. */
.demo-footer__brand > img {
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
}

.demo-footer__brand p {
  color: rgba(255, 255, 255, .68);
  font-size: .9rem;
  max-width: 34ch;
  padding-top: 14px;
  white-space: normal;
}

.demo-footer__awards {
  padding-top: 22px;
}

/* Same treatment the main footer gives its badges: full-colour artwork on the white badge
   plate, and a caption dark enough to read against it. */
.demo-footer__awards .trust-badge img {
  height: clamp(40px, 6vw, 60px);
  filter: none;
  opacity: 1;
}

.demo-footer__awards .trust-badge__caption {
  color: rgba(20, 36, 52, .55);
}

.demo-footer__actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.demo-footer__links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: flex-end;
}

.demo-footer__links a,
.demo-footer__cookie {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .68);
  cursor: pointer;
  font-family: var(--font);
  font-size: .85rem;
  padding: 0;
  transition: color .18s;
}

.demo-footer__links a:hover,
.demo-footer__cookie:hover {
  color: var(--mint);
}

.demo-footer__bottom {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .5);
  display: flex;
  flex-wrap: wrap;
  font-size: .8rem;
  gap: 12px 24px;
  justify-content: space-between;
  margin: 44px auto 0;
  max-width: var(--max);
  padding: 20px 32px;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 900px) {
  .demo-book__card {
    gap: 26px;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Portrait and name sit side by side once the card is a single column, so the photo does
     not eat a full screen of height before the reasons to book. */
  .demo-book__aside {
    align-items: center;
    display: flex;
    gap: 18px;
  }

  .demo-book__portrait {
    flex: 0 0 96px;
    width: 96px;
  }

  .demo-book__portrait img {
    aspect-ratio: 1 / 1;
  }

  .demo-book__person {
    padding-top: 0;
  }

  .demo-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-footer__actions {
    align-items: flex-start;
  }

  /* Stacked, both halves left-aligned, so the copyright and the legal links share one edge
     instead of drifting to opposite sides of a narrow screen. */
  .demo-footer__bottom {
    justify-content: flex-start;
  }

  .demo-footer__links {
    justify-content: flex-start;
  }
}

@media (max-width: 800px) {
  .demo-wins {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  /* The promise pill is the first thing to go: on a narrow header the logo, language switch
     and the CTA all matter more than the strapline. */
  .demo-nav__message {
    display: none;
  }

  .demo-nav__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    min-height: 62px;
  }

  .demo-nav__logo img {
    height: 34px;
  }

  .demo-nav__cta {
    font-size: .85rem;
    padding: 10px 15px;
  }

  /* Logo, language switch and CTA all have to share a phone-width bar. The pill was
     previously dropped entirely below 420px, which left no way to switch language on the
     one page that has no menu to fall back on. Tightening it fits all three instead. */
  .demo-nav__actions {
    gap: 7px;
  }

  .demo-nav__lang a {
    padding: 6px 7px;
    font-size: .72rem;
  }

  .demo-book {
    padding: 56px 0;
  }

  /* Bottom bar keeps the booking action in reach at any scroll position. The page gets
     matching bottom padding so the footer's last line is never trapped underneath it. */
  .demo-sticky-cta {
    align-items: center;
    background: var(--blue);
    border-top: 1px solid rgba(174, 247, 183, .25);
    bottom: 0;
    box-shadow: 0 -6px 24px rgba(20, 36, 52, .22);
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    left: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 300;
  }

  .demo-sticky-cta__label {
    color: var(--mint);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .demo-sticky-cta__note {
    color: rgba(255, 255, 255, .62);
    font-size: .74rem;
    line-height: 1.2;
  }

  .demo-footer {
    padding-bottom: 80px;
  }
}

/* The sticky bar is a fixed overlay; anyone who has asked for less motion still gets it, but
   without the page shifting under them mid-scroll. */
@media (prefers-reduced-motion: reduce) {
  .demo-btn--mint:hover {
    transform: none;
  }
}