/* landing.css -- public /Index marketing page.
   Self-contained styling so the landing layout doesn't get tangled
   with the agent-side site.css rules. The page lives inside _Layout's
   .container-fluid main, so we lean on its default centering and
   focus on hero / feature-grid / CTA presentation. */

/* ---------- Hero ---------- */
.landing-hero {
    padding: 56px 0 40px 0;
    text-align: center;
}
.landing-hero h1 {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: -.01em;
}
.landing-hero p.lead {
    font-size: 1.1rem;
    color: var(--bs-secondary-color);
    max-width: 720px;
    margin: 0 auto 28px auto;
    line-height: 1.55;
}
.landing-hero .landing-cta {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.landing-hero .landing-cta .btn {
    padding: 10px 20px;
    font-weight: 600;
}

/* ---------- Carousel ---------- */
.landing-carousel {
    max-width: 960px;
    margin: 16px auto 56px auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
/* Carousel item sizing applies to every slide, but the centering flex
   is scoped to states Bootstrap considers visible. Bootstrap's own
   stylesheet sets .carousel-item { display: none } and flips
   .carousel-item.active / .carousel-item-next / .carousel-item-prev
   to display:block during transitions -- if we set display:flex on
   the bare selector, our rule wins on specificity and every slide
   stacks on the active one. */
.landing-carousel .carousel-item {
    height: 360px;
    padding: 32px;
    text-align: center;
}
.landing-carousel .carousel-item.active,
.landing-carousel .carousel-item-next,
.landing-carousel .carousel-item-prev {
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing-carousel .carousel-slide {
    max-width: 720px;
}
.landing-carousel .carousel-slide h3 {
    margin: 16px 0 8px 0;
    font-weight: 600;
}
.landing-carousel .carousel-slide p {
    color: var(--bs-secondary-color);
    margin: 0;
}
.landing-carousel .carousel-slide svg {
    width: 96px;
    height: 96px;
}
/* Carousel indicators (the dots at the bottom). Wider, explicit
   gray-vs-blue split for legibility: inactive dots are a neutral
   gray that reads clearly against both the light- and dark-theme
   carousel background; the active dot is the brand primary blue so
   the "you are here" signal pops at a glance. Hover lifts the
   inactive opacity + does a small grow, matching the prev/next chip
   interaction. */
.landing-carousel .carousel-indicators {
    bottom: 12px;
    margin-bottom: 0;
}
.landing-carousel .carousel-indicators [data-bs-target] {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 0 !important;
    border-top: 0 !important;     /* Bootstrap defaults add 10px transparent top + bottom */
    border-bottom: 0 !important;  /* borders to enlarge the click target -- nuke them */
    margin: 0 7px !important;
    padding: 0 !important;
    background-color: #adb5bd !important;  /* Bootstrap "gray-500" -- contrasts on both themes */
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    opacity: .75 !important;
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}
.landing-carousel .carousel-indicators [data-bs-target]:hover {
    opacity: 1 !important;
    transform: scale(1.1);
}
.landing-carousel .carousel-indicators .active {
    background-color: var(--bs-primary) !important;
    opacity: 1 !important;
    transform: scale(1.15);
}
/* Prev/next chip styling lives at the bottom of this file (brand-color
   circle with shadow). The earlier filter:invert tweaks were leftovers
   from before that block existed -- dropped to keep things clean. */

/* ---------- Feature grid ---------- */
.landing-features {
    max-width: 1100px;
    margin: 0 auto 56px auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding: 0 12px;
}
.landing-feature {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 24px 22px;
}
.landing-feature h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 12px 0 6px 0;
}
.landing-feature p {
    color: var(--bs-secondary-color);
    font-size: .92rem;
    line-height: 1.5;
    margin: 0;
}
.landing-feature-icon {
    width: 36px;
    height: 36px;
    color: var(--bs-primary);
}
@media (max-width: 900px) {
    .landing-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .landing-carousel .carousel-item {
        /* height -> min-height so a slide with longer body copy can grow
           past the baseline instead of getting crammed against the
           indicator dots. All slides share the same min-height so the
           shorter ones still look intentional / non-collapsed. */
        height: auto;
        min-height: 360px;
        /* Padding shorthand: 20px top, 56px L/R, 48px bottom.
           Horizontal 56px clears the 44px-wide prev/next chip buttons
           pinned to left:0 / right:0 plus a ~12px breathing gap.
           Bottom 48px reserves a strip for the indicator dots (which
           sit at bottom:12px of the carousel and are ~18px tall) so the
           slide's lead-copy doesn't kiss them. Desktop is fine without
           this -- the carousel sits in a 960px column with content
           centered to 720px, and the slide is taller (360px) with more
           vertical breathing room. */
        padding: 20px 56px 48px;
    }
    .landing-hero { padding: 32px 0 24px 0; }
    .landing-hero h1 { font-size: 1.9rem; }
}

/* ---------- Bottom CTA ---------- */
.landing-cta-bottom {
    background: var(--bs-tertiary-bg);
    border-radius: 14px;
    padding: 40px 24px;
    text-align: center;
    max-width: 960px;
    margin: 0 auto 56px auto;
}
.landing-cta-bottom h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.landing-cta-bottom p {
    color: var(--bs-secondary-color);
    margin: 0 0 20px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* The pinned-footer rule for .landing-page-fitted lives in site.css
   (search `body:has(.landing-page-fitted)`), shared with the Sign-in
   page's parallel .signin-page-fitted marker. Centralising it there
   means a future tweak to the pinned-footer shape touches one place,
   not every public-page CSS file. */

/* ============================================================================
 * Carousel prev / next controls -- more prominent than Bootstrap's default
 * subtle background icons. Translucent circular chip; the chevron is the
 * Bootstrap-supplied background-image, sized larger for visibility.
 * ============================================================================ */
.landing-carousel .carousel-control-prev,
.landing-carousel .carousel-control-next {
    width: 44px;
    opacity: 1;
    z-index: 3;
}
.landing-carousel .carousel-control-prev-icon,
.landing-carousel .carousel-control-next-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* Brand-color chip works on both light and dark theme backgrounds.
       Bootstrap's default SVG chevron is white -- stays visible
       against the primary blue in either mode. */
    background-color: var(--bs-primary);
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
    filter: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transition: filter .15s ease, transform .15s ease;
}
.landing-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.landing-carousel .carousel-control-next:hover .carousel-control-next-icon {
    /* Subtle brighten + grow on hover instead of changing the base
       color, which would lose the brand association. */
    filter: brightness(1.1);
    transform: scale(1.05);
}