/* ========================================
   OUTDOOR PAGE - VistaFly

   Page-specific only: the flip cards and the pricing
   lead/notes layout. Hero, pricing cards, bundles,
   teaser, credentials and CTA come from components.css.
   ======================================== */

body {
    --scrim: 0.5;
}

.bg-poster {
    background-image: url('/images/herobg-poster.jpg');
    background-size: cover;
    background-position: center;
}

.spec-unit {
    font-size: 0.5em;
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-wide);
    color: var(--bone-500);
    margin-inline-start: 0.1em;
}


/* ============================================================
   HERO LAYOUT

   This is the one page where the copy sits on the right, and
   callouts fan out from the drone in every direction — so the
   cards landing on its right ran straight into the text.

   Three things pull them apart: the viewer column takes more of
   the row, the gap between columns widens, and the viewer itself
   sits at the start of its column rather than centred, reaching
   into the page gutter. That gutter is dead space anyway, and
   .hero-split already permits a 260px clip margin, so nothing
   gets cut.

   Desktop only — below 960px the hero stacks and the viewer is
   centred, where none of this applies.
   ============================================================ */
@media (min-width: 961px) {
    .hero-split--reverse {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: clamp(3rem, 7vw, 7rem);
    }

    .hero-split--reverse > .hero-visual {
        justify-self: start;

        /* Pulls the viewer — and the callouts anchored to it — out past
           the hero's own padding and into the page margin.

           4.8vw is deliberate, not arbitrary. Below 1400px the hero is
           full width, so the only space to its left is --gutter, which
           is 5vw. Pulling any harder than that puts the drone's edge
           past the viewport and it gets cut. Above 1400px the hero caps
           at --container-wide and page margin opens up, but the -8rem
           floor keeps the overhang sane on very wide screens.

           .hero-split permits a 260px clip margin, so the overhang
           paints rather than being clipped by the hero itself. */
        margin-inline-start: clamp(-8rem, -4.8vw, 0rem);
    }
}


/* ============================================================
   FLIP CARDS
   Front and back are stacked in 3D. A fixed min-height keeps
   the grid from jumping when the taller face rotates in.
   ============================================================ */
.flip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: var(--space-5);
}

.flip-card {
    position: relative;
    min-height: 340px;
    perspective: 1400px;
    cursor: pointer;
    border-radius: var(--radius-lg);
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transform-style: preserve-3d;
    transition: transform var(--dur-slow) var(--ease-in-out);
}

.flip-card:hover .flip-inner,
.flip-card.is-flipped .flip-inner {
    transform: rotateY(180deg);
}

.flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-7);
    border-radius: var(--radius-lg);
    border: 1px solid var(--edge-faint);
    box-shadow: var(--inner-top);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

/* ---- Front ---- */
.flip-front {
    align-items: flex-start;
    justify-content: center;
    background: var(--ground-300);
    transition: border-color var(--dur-mid) var(--ease-out);
}

.flip-card:hover .flip-front {
    border-color: var(--edge-bone);
}

.flip-kicker {
    font-size: var(--fs-micro);
    font-weight: var(--weight-semi);
    letter-spacing: var(--track-micro);
    text-transform: uppercase;
    color: var(--bone-500);
}

/* Affordance that there is a reverse side */
.flip-front::after {
    content: '';
    position: absolute;
    bottom: var(--space-5);
    right: var(--space-5);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--edge-bone);
    background:
        linear-gradient(to right, transparent 45%, var(--bone-400) 45%, var(--bone-400) 55%, transparent 55%);
    opacity: 0.5;
    transition: opacity var(--dur-mid) var(--ease-out);
}

.flip-card:hover .flip-front::after {
    opacity: 1;
}

/* ---- Back ---- */
.flip-back {
    justify-content: center;
    transform: rotateY(180deg);
    background: linear-gradient(160deg, rgba(228, 216, 196, 0.09) 0%, var(--ground-200) 62%);
    border-color: var(--edge-bone);
}

.flip-back .card-body {
    font-size: var(--fs-sm);
}

.flip-back .mini-list li {
    font-size: var(--fs-sm);
}

/* Focus ring belongs on the card, not the rotating inner */
.flip-card:focus-visible {
    outline: 2px solid var(--bone-300);
    outline-offset: 4px;
}

/* Flat fallback where 3D transforms are unavailable or unwanted */
@media (prefers-reduced-motion: reduce) {
    .flip-inner {
        transition: none;
    }
}

@media (max-width: 480px) {
    .flip-card {
        min-height: 380px;
    }
}


/* ============================================================
   PRICING LAYOUT
   ============================================================ */
.price-lead {
    max-width: 420px;
    margin-inline: auto;
}

/* Bundles carrying a "Popular" / "Best value" note */
.bundle--flagged {
    border-color: var(--edge-bone);
    background: var(--fill-bone);
}

.bundle-notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-7);
    max-width: var(--container);
    margin: var(--space-8) auto 0;
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--edge-faint);
}

.bundle-notes li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--text-lo);
}

.bundle-notes i {
    color: var(--bone-400);
    font-size: 0.9em;
}