/**
 * How to Book Template — Stepper Card Styles
 *
 * LH design parity: bordered step cards with colour progression
 * from dark-blue through purple to magenta, numbered circles
 * overlapping card borders, connecting line between steps.
 *
 * @version 1.0.0
 */

/* ── Hero Banner — Centered ─────────────────────────────────── */

.uksr-htb-hero {
    background: linear-gradient(
        135deg,
        rgba(41, 35, 92, 0.95) 0%,
        rgba(41, 35, 92, 0.80) 100%
    );
    background-color: var(--uksr-dark-blue);
    text-align: center;
    padding: 56px 24px;
}

.uksr-htb-hero__inner {
    max-width: var(--uksr-container-max);
    margin: 0 auto;
}

.uksr-htb-hero__title {
    font-size: 42px;
    font-weight: var(--uksr-font-weight-bold);
    color: var(--uksr-white);
    margin: 0 0 12px;
    line-height: var(--uksr-line-height-tight);
}

.uksr-htb-hero__subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 auto;
    max-width: 540px;
}

/* ── Off-White Body ─────────────────────────────────────────── */

.uksr-htb-body {
    background: #f6f8ee;
    padding: 48px 0;
}

.uksr-htb-layout {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.uksr-htb-article {
    min-width: 0;
}

/* ── Intro Card (content before first step) ──────────────────── */

.uksr-htb-intro {
    background: var(--uksr-white);
    border-radius: var(--uksr-radius-lg);
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid rgba(41, 35, 92, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Stepper Container ──────────────────────────────────────── */

.uksr-htb-stepper {
    position: relative;
    padding-left: 40px;
}

/* Vertical connecting line — spans from first circle center to last.
   JS sets --line-top and --line-bottom via custom properties.
   Gradient matches the step disc colour progression. */
.uksr-htb-stepper::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--line-top, 0);
    bottom: var(--line-bottom, 0);
    width: 4px;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        #29235C 0%,
        #362D6E 12.5%,
        #443880 25%,
        #574290 37.5%,
        #6E4C9E 50%,
        #8B4A9A 62.5%,
        #A93D8E 75%,
        #C82486 87.5%,
        #E6007E 100%
    );
    z-index: 0;
    border-radius: 2px;
}

/* ── Step Cards ─────────────────────────────────────────────── */

.uksr-step-card {
    position: relative;
    margin-bottom: 40px;
    padding: 24px 28px;
    background: var(--uksr-white);
    border: 2px solid var(--uksr-dark-blue);
    border-radius: var(--uksr-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.uksr-step-card:last-child {
    margin-bottom: 0;
}

/* ── Numbered Circle ────────────────────────────────────────── */

.uksr-step-card::before {
    content: attr(data-step);
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--uksr-dark-blue);
    color: var(--uksr-white);
    font-size: 18px;
    font-weight: var(--uksr-font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(41, 35, 92, 0.25);
}

/* Connecting line is now on .uksr-htb-stepper::before (continuous) */

/* ── Step Heading Reset ─────────────────────────────────────── */

.uksr-step-card .white-heading {
    position: relative;
    padding-left: 0 !important;
    margin: 0 0 8px !important;
    background: none !important;
    border: none !important;
}

.uksr-step-card .white-heading::before {
    display: none; /* Hide CSS counter — we use data-step circle */
}

.uksr-step-card .white-heading h3 {
    font-size: 18px;
    font-weight: var(--uksr-font-weight-bold);
    color: var(--uksr-dark-blue) !important;
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.uksr-step-card .white-heading h3::after {
    display: none;
}

/* Step description paragraphs */
.uksr-step-card p {
    padding-left: 0;
    position: relative;
    margin-top: 4px;
    padding-bottom: 0;
}

.uksr-step-card p::before {
    display: none; /* Hide the connecting line from page-single.css */
}

/* Step images */
.uksr-step-card img {
    max-width: 100%;
    height: auto;
    border-radius: var(--uksr-radius-md);
    margin-top: 12px;
}

/* ── Colour Progression: Dark-Blue → Magenta ────────────────── */
/* 9 steps transitioning through purple shades */

/* Steps 1-3: Dark blue shades */
.uksr-step-card[data-step="1"] { border-color: #29235C; }
.uksr-step-card[data-step="1"]::before { background: #29235C; }
.uksr-step-card[data-step="1"]::after { background: linear-gradient(to bottom, #29235C, #362D6E); }

.uksr-step-card[data-step="2"] { border-color: #362D6E; }
.uksr-step-card[data-step="2"]::before { background: #362D6E; }
.uksr-step-card[data-step="2"]::after { background: linear-gradient(to bottom, #362D6E, #443880); }

.uksr-step-card[data-step="3"] { border-color: #443880; }
.uksr-step-card[data-step="3"]::before { background: #443880; }
.uksr-step-card[data-step="3"]::after { background: linear-gradient(to bottom, #443880, #574290); }

/* Steps 4-6: Transitional purple shades */
.uksr-step-card[data-step="4"] { border-color: #574290; }
.uksr-step-card[data-step="4"]::before { background: #574290; }
.uksr-step-card[data-step="4"]::after { background: linear-gradient(to bottom, #574290, #6E4C9E); }

.uksr-step-card[data-step="5"] { border-color: #6E4C9E; }
.uksr-step-card[data-step="5"]::before { background: #6E4C9E; }
.uksr-step-card[data-step="5"]::after { background: linear-gradient(to bottom, #6E4C9E, #8B4A9A); }

.uksr-step-card[data-step="6"] { border-color: #8B4A9A; }
.uksr-step-card[data-step="6"]::before { background: #8B4A9A; }
.uksr-step-card[data-step="6"]::after { background: linear-gradient(to bottom, #8B4A9A, #A93D8E); }

/* Steps 7-9: Magenta shades */
.uksr-step-card[data-step="7"] { border-color: #A93D8E; }
.uksr-step-card[data-step="7"]::before { background: #A93D8E; }
.uksr-step-card[data-step="7"]::after { background: linear-gradient(to bottom, #A93D8E, #C82486); }

.uksr-step-card[data-step="8"] { border-color: #C82486; }
.uksr-step-card[data-step="8"]::before { background: #C82486; }
.uksr-step-card[data-step="8"]::after { background: linear-gradient(to bottom, #C82486, #E6007E); }

.uksr-step-card[data-step="9"] { border-color: #E6007E; }
.uksr-step-card[data-step="9"]::before { background: #E6007E; }

/* ── Parent Override Resets ───────────────────────────────────── */

.uksr-htb-article .article-header,
.uksr-htb-article .entry-content,
.uksr-htb-article .article-footer {
    all: unset;
    display: block;
}

.uksr-htb-layout .home_title {
    display: none;
}

.uksr-htb-hero + .wrap,
.uksr-htb-hero + #content {
    display: none;
}

/* Reset page-single.css stepper (counter, padding-left, connecting line) */
.uksr-htb-content {
    counter-reset: none;
}

.uksr-htb-content .white-heading + p::before {
    display: none;
}

/* ── Responsive — Tablet (<=960px) ───────────────────────────── */

@media (max-width: 960px) {
    .uksr-htb-hero__title {
        font-size: 34px;
    }
}

/* ── Responsive — Mobile (<=768px) ───────────────────────────── */

@media (max-width: 768px) {
    .uksr-htb-hero {
        padding: 36px 16px;
    }

    .uksr-htb-hero__title {
        font-size: 28px;
    }

    .uksr-htb-body {
        padding: 24px 0;
    }

    .uksr-htb-layout {
        padding: 0 16px;
    }

    .uksr-htb-stepper {
        padding-left: 32px;
    }

    .uksr-step-card {
        padding: 20px;
        margin-bottom: 32px;
    }

    .uksr-step-card::before {
        width: 40px;
        height: 40px;
        font-size: 15px;
        left: -32px;
    }

    .uksr-htb-stepper::before {
        /* left: 0 still aligns with circle centers on mobile */
    }

    .uksr-step-card .white-heading h3 {
        font-size: 16px;
    }

    .uksr-htb-intro {
        padding: 24px 20px;
    }
}