/**
 * CTA Orchestrator — Stack layout and animation styles
 *
 * Animation modes: none, fade, cascade, slide-up
 * Respects prefers-reduced-motion for accessibility.
 * Uses opacity + transform only (GPU composited, no layout shift).
 *
 * Armor-only isolation sheet (ckit#258, scripts/css-manifest.js): the build
 * boosts every selector to (2,x,0), which outranks homerunner-core's
 * `.uk-scope` UIkit rules and host-theme overrides — the job the sheet's
 * former `!important`s did. No `!important` may return here: the tools whose
 * markup lives inside the stack (rate-comparison above all) drive show/hide
 * through inline style toggles at runtime, and an author `!important` beats
 * inline styles while armored specificity deliberately cannot. Same-sheet
 * overrides resolve by source order — the armor boosts every selector
 * equally, so relative order within this file is preserved.
 */

/* Stack Container */
.hrck-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

/* Reset tool-specific margins/padding inside the stack — explicit margin handles spacing */
.hrck-cta-item > div,
.hrck-cta-item .hrck-desktop-badge,
.hrck-cta-item .hrck-pa-cta-container {
    margin-top: 0;
    margin-bottom: 0;
}

/* Explicit spacing between stack items — armor outranks theme overrides */
.hrck-cta-stack.hrck-cta-stack--desktop > .hrck-cta-item[data-hrck-cta],
.hrck-cta-stack.hrck-cta-stack--mobile > .hrck-cta-item[data-hrck-cta] {
    margin: 0 0 8px 0;
    padding: 0;
}
.hrck-cta-stack.hrck-cta-stack--desktop > .hrck-cta-item[data-hrck-cta]:last-child,
.hrck-cta-stack.hrck-cta-stack--mobile > .hrck-cta-item[data-hrck-cta]:last-child {
    margin-bottom: 0;
}

/* Individual CTA Wrapper — fully collapsed until JS adds .hrck-cta-visible */
.hrck-cta-item {
    display: none;
    opacity: 0;
}

/* Visible state — applied by JS after relocation */
.hrck-cta-item.hrck-cta-visible {
    display: block;
    opacity: 1;
    position: relative;
    transform: none;
}

/* Animation Modes (motion-safe only, opacity-only to avoid transform layout side-effects) */
@media (prefers-reduced-motion: no-preference) {
    .hrck-cta-stack[data-animation="fade"] .hrck-cta-item.hrck-cta-visible,
    .hrck-cta-stack[data-animation="cascade"] .hrck-cta-item.hrck-cta-visible,
    .hrck-cta-stack[data-animation="slide-up"] .hrck-cta-item.hrck-cta-visible {
        animation: hrck-fade-in 0.4s ease both;
    }
}

@keyframes hrck-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hrck-cascade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hrck-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* No animation — instant display */
.hrck-cta-stack[data-animation="none"] .hrck-cta-item.hrck-cta-visible {
    animation: none;
}

/* Reduced Motion Fallback — wins over the base .hrck-cta-item rule above by
   source order (same specificity, both armored). */
@media (prefers-reduced-motion: reduce) {
    .hrck-cta-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Override tool-specific display:none / positioning when the tool's markup
   renders inside an orchestrator stack item — the .hrck-cta-item wrapper is
   the visibility gate there, not the tool's own container rules. */
/* Rate Comparison — the armored declarations outrank the tool sheet's
   `.hrck-rate-comparison-wrapper { display: none }`, but NOT the inline
   `style="display:none"` its JS toggles: rate-comparison.js show()/hide()
   own the wrapper's runtime visibility, as designed. */
.hrck-cta-item .hrck-rate-comparison-wrapper {
    display: flex;
    margin: 0;
}

/* Price Alerts */
.hrck-cta-item .hrck-pa-cta-container {
    display: block;
    margin: 0;
}

/* Split Cost — the tool's own CSS sets .hrck-split-cost-trigger--mobile to
   position: absolute; bottom: 100% (designed to perch on top of the sticky
   booking widget like a tab on a shelf). When the orchestrator places Split
   Cost inside the mobile stack with context="mobile", that legacy positioning
   yanks it out of flow and overlays it onto the item above (root cause of the
   "Price Alerts + Split Cost merged into one red box" bug). Reset to static. */
.hrck-cta-item .hrck-split-cost-trigger {
    display: block;
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
    margin: 0;
}

/* Contact Form */
.hrck-cta-item .hrck-contact-trigger {
    display: block;
    margin: 0;
}

/* Booking Reminder */
.hrck-cta-item .hrck-br-trigger {
    display: block;
    margin: 0;
}

/* Desktop / Mobile Stack Visibility — armor outranks .uk-scope specificity */
.hrck-cta-stack--mobile {
    display: none;
}

@media (max-width: 959px) {
    .hrck-cta-stack--desktop {
        display: none;
    }

    .hrck-cta-stack--mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
    }
}

/* Mid-mobile breakpoint: lay out CTAs in 2 columns so the 4 tool buttons
   form a 2x2 grid instead of a tall single column. Below 446px the stack
   collapses back to a single column for phone screens. Rate Comparison
   (checkout only) spans both columns so the savings badge stays full-width.
   Wins over the max-959 flex rule above by source order. */
@media (min-width: 446px) and (max-width: 945px) {
    .hrck-cta-stack--mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
        row-gap: 8px;
        margin-top: 12px;
    }

    /* Neutralize the per-item bottom margin from the generic spacing rule
       above — grid gap handles spacing in this breakpoint. */
    .hrck-cta-stack.hrck-cta-stack--mobile > .hrck-cta-item[data-hrck-cta] {
        margin: 0;
    }

    /* Rate Comparison: full-width savings row on checkout */
    .hrck-cta-stack--mobile > .hrck-cta-item[data-hrck-cta="rate_comparison"] {
        grid-column: 1 / -1;
    }
}