/* ==========================================================================
   Questor hero carousel — updated for mobile.
   Drop this file into wwwroot/css/ and reference it from your layout, e.g.:
     <link rel="stylesheet" href="~/css/hero-carousel.css" />
   These CSS custom properties duplicate the palette already used elsewhere
   on the live site (logo/footer teal, and the five vehicle-card colours).
   If your site already declares a :root palette, merge these into it rather
   than keeping two separate colour sources — just make sure the variable
   names below resolve to the same hex values your Bootstrap theme uses.

   CHANGES FROM THE PREVIOUS VERSION (see chat for the full explanation):
   1. The @media (max-width:860px) block already stacked the hero properly —
      it just wasn't reachable, because the HTML hid the whole <section>
      below Bootstrap's sm breakpoint (576px). That HTML fix is in the
      partial, not here. Nothing in this file needed to change to make the
      existing stacked layout show up on phones once that's fixed.
   2. Restored a min-height on h1/p within the stacked layout, sized for the
      30px mobile heading. Mobile still swaps slides via the same carousel
      JS, and without a min-height the box reflows/jumps every time a
      shorter or longer headline swaps in.
   3. Added a second, narrower media query for true small phones (~480px
      and under) — full-width stacked CTA buttons instead of two buttons
      trying to sit side by side, and slightly smaller heading/pill sizing.
   ========================================================================== */
:root {
    --teal-deep: #00667D; /* existing: logo / footer / "Car" card */
    --teal-mid: #19988B; /* existing: "Van" card */
    --teal-sky: #008EAA; /* existing: "Motorhome" card */
    --blue: #00629B; /* existing: "Minibus" card */
    --purple: #56007D; /* existing: "Private Car" card */
    --maroon: #7D1700; /* existing: "Young Drivers" card */
    --green: #277D00; /* existing: "Motorcycle" card */
    --amber: #B36A00; /* new: "Travel Insurance" card */
}
/* ---------- hero / carousel shell ---------- */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px,560px) 1fr;
    min-height: 520px;
    overflow: hidden;
    border-radius: 10px;
}

.slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(320px,560px) 1fr;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
    pointer-events: none;
}

    .slide.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
/* Per-vehicle colour, as classes rather than inline styles.
   Add the matching class alongside .slide, e.g.:
     <div class="slide active slide-car" data-index="0">
   --fade-from is the same colour at 55% alpha, used by the photo's
   left-edge gradient in .hero-media::after further down. */
.slide-car {
    --accent: var(--teal-deep);
    --accent-deep: #00404F;
    --accent-light: #8fe0d3;
    --fade-from: rgba(0,102,125,.55);
}

.slide-van {
    --accent: var(--teal-mid);
    --accent-deep: #0F6459;
    --accent-light: #a7ecd8;
    --fade-from: rgba(25,152,139,.55);
}

.slide-motorhome {
    --accent: var(--teal-sky);
    --accent-deep: #005C6F;
    --accent-light: #8fe3f5;
    --fade-from: rgba(0,142,170,.55);
}

.slide-minibus {
    --accent: var(--blue);
    --accent-deep: #003F63;
    --accent-light: #9dcdf5;
    --fade-from: rgba(0,98,155,.55);
}

.slide-travel {
    --accent: var(--amber);
    --accent-deep: #7B4900;
    --accent-light: #EACB9E;
    --fade-from: rgba(179,106,0,.55);
}

.slide-privatecar {
    --accent: var(--purple);
    --accent-deep: #2F0045;
    --accent-light: #D39EEA;
    --fade-from: rgba(86,0,125,.55);
}

.slide-young {
    --accent: var(--maroon);
    --accent-deep: #450D00;
    --accent-light: #EAAC9E;
    --fade-from: rgba(125,23,0,.55);
}

.slide-moto {
    --accent: var(--green);
    --accent-deep: #154500;
    --accent-light: #B6EA9E;
    --fade-from: rgba(39,125,0,.55);
}

.hero-copy {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
    transition: background .6s ease;
    /* the slide's own --accent/--accent-deep decide colour here — see above */
    background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
}

.eyebrow {
    color: #d9f3ee;
    font-weight: 700;
    letter-spacing: 2.5px;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.hero-copy h1 {
    color: #fff;
    font-size: 42px;
    line-height: 1.14;
    margin: 0 0 18px;
    font-weight: 800;
    max-width: 460px;
    min-height: 112px;
}

    .hero-copy h1 em {
        font-style: normal;
        color: var(--accent-light);
    }

.hero-copy p {
    color: rgba(255,255,255,.88);
    font-size: 16.5px;
    line-height: 1.55;
    max-width: 420px;
    margin: 0 0 30px;
    min-height: 78px;
}

.cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15.5px;
    text-decoration: none;
    /*transition: transform .15s ease, box-shadow .15s ease;*/
}

    .btn:hover {
        transform: translateY(-1px);
    }

.btn-primary {
    background: #fff;
    color: var(--accent);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: #ececec;
        color: var(--accent);
    }

.cta-row .btn-ghost {
    background: rgba(255,255,255,.16);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    .cta-row .btn-ghost:hover,
    .cta-row .btn-ghost:focus-visible {
        background: rgba(255,255,255,.28);
        border-color: #fff;
        color: #fff;
    }

    .cta-row .btn-ghost:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }
.trust-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 14.5px;
}

.stars {
    color: #ffce45;
    letter-spacing: 2px;
    font-size: 16px;
}

.trust-row b {
    font-weight: 800;
}

.trust-row .tp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #fff;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 6px;
    font-size: 13px;
}
/* ---------- photo panel ---------- */
.hero-media {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 1;
    background: #0a2b34;
}

    .hero-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right 55%;
    }

    .hero-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--fade-from,rgba(0,102,125,.55)) 0%, rgba(0,102,125,0) 32%);
    }
/* ---------- carousel dots ---------- */
.dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 8px;
    background: rgba(0,0,0,.18);
    padding: 8px 10px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

    .dots button {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,.45);
        padding: 0;
        cursor: pointer;
        transition: background .2s ease, transform .2s ease;
    }

        .dots button.active {
            background: #fff;
            transform: scale(1.25);
        }

        .dots button:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

/* ---------- tablet / phone: stack copy over photo ---------- */
@media (max-width:860px) {

    .hero {
        min-height: 0;
    }

    .hero, .slide {
        grid-template-columns: 1fr;
    }

    .slide {
        position: relative;
        display: none;
    }

        .slide.active {
            display: grid;
        }

    .hero-copy {
        grid-row: 1;
        clip-path: none;
        padding: 44px 24px 36px;
    }

        .hero-copy h1 {
            font-size: 30px;
            /* was 0 — restored so headline height doesn't jump between
               slides when the carousel advances (shortest headline is
               2 lines, tallest is 3 at this size/width) */
            min-height: 102px;
        }

        .hero-copy p {
            /* was 0 — same reasoning as h1 above */
            min-height: 84px;
        }

    .hero-media {
        grid-row: 2;
        min-height: 220px;
    }

    .dots {
        bottom: 12px;
    }

    .pill {
        width: 104px;
        min-height: 96px;
    }

        .pill .label {
            font-size: 12px;
        }
}

/* ---------- true phone widths: refine further ---------- */
@media (max-width:480px) {

    .hero {
        min-height: 0;
    }

    .hero-copy {
        padding: 36px 20px 28px;
    }

        .hero-copy h1 {
            font-size: 26px;
            min-height: 90px;
        }

        .hero-copy p {
            min-height: 72px;
        }

    .cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 26px;
    }

    .btn {
        justify-content: center;
        width: 100%;
    }

    .trust-row {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .hero-media {
        min-height: 180px;
    }

    .quicknav {
        padding: 24px 16px;
        gap: 10px;
    }

    .pill {
        width: 92px;
        min-height: 88px;
        padding: 12px 6px 10px;
    }

        .pill .label {
            font-size: 11.5px;
        }
}

/* ---------- quick product nav: uniform icon buttons ---------- */
.quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding: 32px 24px;
    background: #fff;
    border-bottom: 1px solid #eceff0;
}

.pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 132px;
    min-height: 106px;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
    font-family: inherit;
    padding: 16px 8px 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .pill:hover,
    .pill:focus {
        transform: translateY(-2px);
        box-shadow: 0 7px 16px rgba(0,0,0,.18);
        color: #fff;
    }

    .pill .ic {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .pill .ic svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

    .pill .label {
        font-weight: 700;
        font-size: 13px;
        line-height: 1.3;
        text-align: center;
    }

    .pill.car {
        background: var(--teal-deep);
    }

    .pill.van {
        background: var(--teal-mid);
    }

    .pill.motorhome {
        background: var(--teal-sky);
    }

    .pill.minibus {
        background: var(--blue);
    }

    .pill.privatecar {
        background: var(--purple);
    }

    .pill.young {
        background: var(--maroon);
    }

    .pill.moto {
        background: var(--green);
    }

    .pill.travel {
        background: var(--amber);
    }

    .pill[data-slide].is-current {
        box-shadow: 0 0 0 3px rgba(0,0,0,.22) inset, 0 4px 10px rgba(0,0,0,.08);
    }

        .pill[data-slide].is-current::after {
            content: "";
            display: block;
            width: 24px;
            height: 3px;
            border-radius: 2px;
            background: rgba(255,255,255,.95);
        }

.navbar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 22px;
    color: var(--teal-deep);
    letter-spacing: .3px;
}

    .navbar .logo small {
        display: block;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 2px;
        color: #333;
    }