/* ============================================================================
   Landing-page sections: hero, trust strip, stats, feature grid, process steps,
   destination mosaic and the closing call to action.

   Shared by the homepage and every product landing page, which is why the hero
   takes its image from a CSS variable set inline per page rather than having a
   class per product.
   ========================================================================== */

/* ---------------------------------------------------------------- hero --- */

.pt-hero {
    position: relative;
    /* Pulled up under the transparent header rather than sitting below it, so
       the photograph runs to the very top of the page. */
    margin-top: calc(-1 * var(--pt-header-h) - 38px);
    padding-top: calc(var(--pt-header-h) + 38px);
    min-height: clamp(560px, 82vh, 820px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--pt-ink-800);
}

.pt-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.pt-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A very slow drift gives the hero life without the jarring feel of a
       Ken Burns pan. Disabled wholesale by the reduced-motion block. */
    animation: pt-hero-drift 28s ease-in-out infinite alternate;
}

@keyframes pt-hero-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

/* Two scrims, not one: a vertical gradient anchors the headline against the
   bottom of the frame, and a left-weighted one keeps the copy legible when the
   photograph happens to be bright on that side. */
.pt-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(5, 12, 24, .90) 0%, rgba(5, 12, 24, .62) 42%, rgba(5, 12, 24, .28) 72%, rgba(5, 12, 24, .45) 100%),
        linear-gradient(180deg, rgba(5, 12, 24, .55) 0%, transparent 32%, rgba(5, 12, 24, .55) 100%);
}

/* A soft chartreuse bloom behind the copy — the one place the accent gets any
   real area, and only at 12% opacity. */
.pt-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 18%;
    left: -6%;
    width: 46vw;
    height: 46vw;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 214, 62, .14), transparent 68%);
    pointer-events: none;
}

.pt-hero__inner {
    position: relative;
    width: 100%;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.pt-hero__copy { max-width: 42rem; color: #fff; }

.pt-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .95rem .4rem .5rem;
    margin-bottom: 1.15rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--pt-radius-pill);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: var(--pt-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pt-hero__eyebrow svg { width: 15px; height: 15px; color: var(--pt-lime-500); }

.pt-hero h1 {
    color: #fff;
    margin-bottom: 1rem;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(5, 12, 24, .35);
}

/* The serif italic on one word is the signature move — it is what makes the
   headline look art-directed rather than typed into a template. */
.pt-hero h1 em {
    font-family: var(--pt-font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--pt-lime-500);
    letter-spacing: -0.01em;
}

.pt-hero__lede {
    font-size: clamp(1rem, .5vw + .95rem, 1.2rem);
    color: rgba(255, 255, 255, .84);
    max-width: 34rem;
    margin-bottom: 1.75rem;
    text-wrap: pretty;
}

.pt-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -- trust strip under the hero copy -------------------------------------- */

.pt-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.pt-hero__trust-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, .82);
    font-size: var(--pt-text-sm);
}

.pt-hero__trust-item svg { width: 18px; height: 18px; color: var(--pt-lime-500); flex: none; }
.pt-hero__trust-item strong { display: block; color: #fff; font-family: var(--pt-font-display); font-size: var(--pt-text-base); }

/* -- compact hero for interior landing pages ------------------------------ */

.pt-hero--compact { min-height: clamp(400px, 54vh, 540px); }
.pt-hero--compact .pt-hero__copy { max-width: 46rem; }

/* The product landing pages float a search card up over the bottom of the hero
   (see .flight-search-card / .pt-searchcard, both of which use a negative top
   margin). On the taller homepage hero there is room to spare; on the compact
   one the card landed straight on top of the trust strip, hiding the figures and
   clipping the last line of the lede. This reserves the space the card takes. */
.pt-hero--compact .pt-hero__inner { padding-bottom: clamp(5rem, 8vw, 7rem); }

/* --------------------------------------------------------- search card --- */

/* Floats over the seam between the hero and the next section. */
.pt-searchcard {
    position: relative;
    z-index: 5;
    margin-top: clamp(-4rem, -5vw, -3rem);
    margin-bottom: var(--pt-gap-xl);
    padding: clamp(1.1rem, 2vw, 1.6rem);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--pt-radius-xl);
    box-shadow: var(--pt-shadow-xl);
}

.pt-searchcard__tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: var(--pt-gap);
    overflow-x: auto;
    scrollbar-width: none;
}

.pt-searchcard__tabs::-webkit-scrollbar { display: none; }

.pt-searchcard__tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border: 0;
    border-radius: var(--pt-radius-pill);
    background: transparent;
    color: var(--pt-slate-600);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s var(--pt-ease), color .2s var(--pt-ease);
}

.pt-searchcard__tab svg { width: 16px; height: 16px; }
.pt-searchcard__tab:hover { background: var(--pt-blue-050); color: var(--pt-blue-700); }

.pt-searchcard__tab.is-active {
    background: var(--pt-ink-800);
    color: #fff;
}

.pt-searchform {
    display: grid;
    gap: .6rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .pt-searchform {
        grid-template-columns: 1.6fr 1fr 1fr 1.1fr auto;
        align-items: end;
    }
}

.pt-searchfield {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .85rem;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    background: var(--pt-paper);
    transition: border-color .2s var(--pt-ease), box-shadow .2s var(--pt-ease);
    min-height: 62px;
    justify-content: center;
}

.pt-searchfield:focus-within { border-color: var(--pt-blue-500); box-shadow: var(--pt-ring); }

.pt-searchfield__label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.pt-searchfield__label svg { width: 13px; height: 13px; color: var(--pt-blue-600); }

.pt-searchfield input,
.pt-searchfield select,
.pt-searchfield button.pt-searchfield__value {
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    color: var(--pt-heading);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-md);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pt-searchfield input { cursor: text; }
.pt-searchfield input:focus,
.pt-searchfield select:focus { outline: none; }
.pt-searchfield input::placeholder { color: var(--pt-slate-400); font-weight: 500; }

/* Stacked on a phone, the submit is the last row and should read as the end of
   the form rather than a button floating at half width. */
.pt-searchform__submit { align-self: stretch; }
.pt-searchform__submit .pt-btn { width: 100%; }

@media (min-width: 720px) {
    .pt-searchform__submit .pt-btn { width: auto; }
}

.pt-searchform__submit .pt-btn {
    height: 100%;
    min-height: 62px;
    padding-inline: 1.75rem;
    border-radius: var(--pt-radius);
}

/* -- typeahead ------------------------------------------------------------ */

.pt-typeahead {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 340px;
    overflow-y: auto;
    padding: .35rem;
    background: var(--pt-paper);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-xl);
    display: none;
}

.pt-typeahead.is-open { display: block; }

.pt-typeahead__item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .6rem;
    border: 0;
    border-radius: var(--pt-radius-sm);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s var(--pt-ease);
}

.pt-typeahead__item:hover,
.pt-typeahead__item.is-active { background: var(--pt-blue-050); }

.pt-typeahead__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--pt-sand-deep);
    color: var(--pt-blue-600);
}

.pt-typeahead__icon svg { width: 15px; height: 15px; }

.pt-typeahead__text { min-width: 0; }
.pt-typeahead__text strong { display: block; font-size: var(--pt-text-base); color: var(--pt-heading); font-weight: 600; }
.pt-typeahead__text small { display: block; font-size: var(--pt-text-xs); color: var(--pt-text-faint); }
.pt-typeahead__count { margin-left: auto; font-size: var(--pt-text-xs); color: var(--pt-text-faint); flex: none; }
.pt-typeahead__empty { padding: 1rem; text-align: center; color: var(--pt-text-faint); font-size: var(--pt-text-sm); }

/* -- guest stepper popover ------------------------------------------------ */

.pt-guests { position: relative; }

.pt-guests__panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 40;
    width: min(300px, 88vw);
    padding: .85rem;
    background: var(--pt-paper);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-xl);
    display: none;
}

.pt-guests__panel.is-open { display: block; }

.pt-guests__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
}

.pt-guests__row + .pt-guests__row { border-top: 1px solid var(--pt-line-soft); }
.pt-guests__row strong { display: block; font-size: var(--pt-text-base); color: var(--pt-heading); }
.pt-guests__row small { color: var(--pt-text-faint); font-size: var(--pt-text-xs); }

.pt-stepper { display: flex; align-items: center; gap: .5rem; }

.pt-stepper button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pt-line);
    border-radius: 50%;
    background: var(--pt-paper);
    color: var(--pt-blue-600);
    cursor: pointer;
    transition: border-color .18s var(--pt-ease), background .18s var(--pt-ease);
}

.pt-stepper button:hover:not(:disabled) { border-color: var(--pt-blue-500); background: var(--pt-blue-050); }
.pt-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.pt-stepper button svg { width: 14px; height: 14px; }
.pt-stepper output { min-width: 1.5rem; text-align: center; font-family: var(--pt-font-display); font-weight: 700; }

/* --------------------------------------------------------------- stats --- */

.pt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--pt-gap-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--pt-radius-xl);
    background: linear-gradient(135deg, var(--pt-ink-800), var(--pt-ink-600));
    color: #fff;
    box-shadow: var(--pt-shadow-lg);
    position: relative;
    overflow: hidden;
}

/* Faint chartreuse rule along the top edge — the same accent motif as the
   eyebrow, applied at architecture scale. */
.pt-stats::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--pt-lime-500), var(--pt-blue-500) 55%, transparent);
}

.pt-stat { text-align: center; }

.pt-stat__value {
    display: block;
    font-family: var(--pt-font-display);
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
}

.pt-stat__label {
    display: block;
    margin-top: .35rem;
    font-size: var(--pt-text-sm);
    color: rgba(255, 255, 255, .66);
}

/* ------------------------------------------------------------ features --- */

.pt-features { display: grid; gap: var(--pt-gap-lg); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.pt-feature {
    position: relative;
    padding: var(--pt-gap-lg);
    background: var(--pt-paper);
    border: 1px solid var(--pt-line-soft);
    border-radius: var(--pt-radius-lg);
    transition: transform .3s var(--pt-ease-out), box-shadow .3s var(--pt-ease-out), border-color .3s var(--pt-ease);
    overflow: hidden;
}

.pt-feature::after {
    content: "";
    position: absolute;
    left: var(--pt-gap-lg);
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--pt-lime-500), var(--pt-blue-500));
    transition: width .4s var(--pt-ease-out);
}

.pt-feature:hover {
    transform: translateY(-5px);
    border-color: var(--pt-blue-200);
    box-shadow: var(--pt-shadow-lg);
}

.pt-feature:hover::after { width: 44px; }

.pt-feature__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--pt-gap);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pt-blue-100), var(--pt-lime-100));
    color: var(--pt-blue-700);
}

.pt-feature__icon svg { width: 22px; height: 22px; }

.pt-feature h3 { font-size: var(--pt-text-lg); margin-bottom: .3rem; }
.pt-feature p { margin: 0; color: var(--pt-text-muted); font-size: var(--pt-text-base); }

/* --------------------------------------------------------------- steps --- */

.pt-steps {
    display: grid;
    gap: var(--pt-gap-xl);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    counter-reset: pt-step;
    position: relative;
}

.pt-step { position: relative; counter-increment: pt-step; padding-top: .5rem; }

.pt-step__num {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--pt-gap);
    border-radius: 50%;
    border: 1px dashed var(--pt-blue-200);
    background: var(--pt-paper);
    font-family: var(--pt-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pt-blue-600);
}

.pt-step__num::before { content: "0" counter(pt-step); }

.pt-step h3 { font-size: var(--pt-text-lg); }
.pt-step p { color: var(--pt-text-muted); margin: 0; }

/* Connecting dashes between the steps, desktop only — on a stacked mobile
   layout a horizontal rule would point nowhere. */
@media (min-width: 860px) {
    .pt-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 26px;
        left: 64px;
        right: -1.5rem;
        border-top: 1px dashed var(--pt-line);
    }
}

/* ------------------------------------------------------------- mosaic ---- */

/* Destination grid where the first tile is double-height — breaks the
   monotony of an even grid without needing bespoke markup per page. */
.pt-mosaic {
    display: grid;
    gap: var(--pt-gap);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 780px) {
    /* dense packing so a set of three or five tiles closes its own gaps rather
       than leaving holes where the sixth would have gone. */
    .pt-mosaic {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 190px;
        grid-auto-flow: dense;
    }

    /* The feature tile only earns its double square when there are enough
       tiles to build a block around it. */
    .pt-mosaic > :first-child:nth-last-child(n+4) { grid-column: span 2; grid-row: span 2; }
    .pt-mosaic > :nth-child(6):nth-last-child(1) { grid-column: span 2; }
}

.pt-tile {
    position: relative;
    display: block;
    min-height: 190px;
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    background: var(--pt-ink-700);
    isolation: isolate;
}

.pt-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform .8s var(--pt-ease-out);
}

.pt-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 12, 24, .1) 30%, rgba(5, 12, 24, .82));
    transition: background .4s var(--pt-ease);
}

.pt-tile:hover img { transform: scale(1.08); }
.pt-tile:hover::after { background: linear-gradient(180deg, rgba(14, 58, 114, .25) 20%, rgba(5, 12, 24, .88)); }

.pt-tile__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: var(--pt-gap);
    color: #fff;
}

.pt-tile__body h3 { color: #fff; font-size: var(--pt-text-lg); margin: 0 0 .15rem; }
.pt-tile__body p { margin: 0; font-size: var(--pt-text-sm); color: rgba(255, 255, 255, .78); }

.pt-tile__go {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 600;
    color: var(--pt-lime-500);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s var(--pt-ease), transform .3s var(--pt-ease-out);
}

.pt-tile__go svg { width: 15px; height: 15px; }
.pt-tile:hover .pt-tile__go { opacity: 1; transform: none; }

/* ------------------------------------------------------------ cta band --- */

.pt-cta {
    position: relative;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    border-radius: var(--pt-radius-xl);
    background: linear-gradient(120deg, var(--pt-ink-900), var(--pt-blue-800) 65%, var(--pt-blue-700));
    color: #fff;
    overflow: hidden;
    text-align: center;
}

/* Concentric rings, drawn in CSS rather than shipped as an image. */
.pt-cta::before,
.pt-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    pointer-events: none;
}

.pt-cta::before { width: 420px; height: 420px; top: -180px; right: -120px; }
.pt-cta::after { width: 300px; height: 300px; bottom: -160px; left: -80px; border-color: rgba(196, 214, 62, .2); }

.pt-cta__inner { position: relative; z-index: 1; max-width: 42rem; margin-inline: auto; }
.pt-cta h2 { color: #fff; }
.pt-cta h2 em { font-family: var(--pt-font-accent); font-style: italic; font-weight: 400; color: var(--pt-lime-500); }
.pt-cta p { color: rgba(255, 255, 255, .78); font-size: var(--pt-text-lg); margin-bottom: var(--pt-gap-lg); }

.pt-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ------------------------------------------------------------- marquee --- */

/* Endless scrolling strip of destination names. Duplicated in markup so the
   translate can loop seamlessly at -50%. */
.pt-marquee {
    display: flex;
    overflow: hidden;
    gap: 0;
    padding-block: 1rem;
    border-block: 1px solid var(--pt-line);
    background: var(--pt-paper);
    /* Fades the ends so words do not pop in and out at the edges. */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.pt-marquee__track {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex: none;
    padding-right: 2.5rem;
    animation: pt-marquee 38s linear infinite;
}

.pt-marquee:hover .pt-marquee__track { animation-play-state: paused; }

@keyframes pt-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

.pt-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--pt-font-display);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-weight: 600;
    color: var(--pt-slate-500);
    white-space: nowrap;
    transition: color .2s var(--pt-ease);
}

.pt-marquee__item:hover { color: var(--pt-blue-600); }
.pt-marquee__item::before { content: "✦"; color: var(--pt-lime-500); font-size: .7em; }

@media (prefers-reduced-motion: reduce) {
    .pt-marquee__track { animation: none; }
    .pt-hero__media img { animation: none; }
}