/* ==========================================================================
   Motomarine v3 — Section foundations
   Breadcrumb base, title divider, divider lines, section headings, spacing.
   (Hero / banner / CTA modules will be added as they are rebuilt for v3.)
   ========================================================================== */

/* ---------- Breadcrumb (base) ---------- */
.cs-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
}
.cs-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--body);
}
.cs-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--body);
}
.cs-breadcrumb a:hover {
    color: var(--primary);
}
.cs-breadcrumb li[aria-current] {
    color: var(--heading);
    font-weight: 700;
}
.cs-breadcrumb .sep {
    color: var(--light);
    font-size: 10px;
}

/* Dark variant — for navy / image banners */
.cs-breadcrumb--dark li {
    color: rgba(255, 255, 255, .7);
}
.cs-breadcrumb--dark a {
    color: rgba(255, 255, 255, .7);
}
.cs-breadcrumb--dark a:hover {
    color: var(--white);
}
.cs-breadcrumb--dark li[aria-current] {
    color: var(--white);
}
.cs-breadcrumb--dark .sep {
    color: rgba(255, 255, 255, .35);
}

/* ---------- Divider heading — centered title with a rule on each side ---------- */
.cs-title-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    margin-bottom: 36px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--heading);
}
.cs-title-divider::before,
.cs-title-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-strong);
    max-width: 160px;
}

/* ---------- Horizontal divider lines ---------- */
.cs-divider {
    border: 0;
    width: 100%;
    height: 1px;
    margin: 0;
}
.cs-divider--full {
    background: var(--border);
}
.cs-divider--gradient-center {
    height: 1px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(90deg, transparent 0%, var(--border-strong) 50%, transparent 100%);
}

/* ---------- Standard section spacing utilities ---------- */
.section {
    padding: 60px 0;
}
.section-top {
    padding-top: 60px;
}
.section-bottom {
    padding-bottom: 60px;
}

/* ---------- Section headings (reusable) ---------- */
.cs-sechead {
    margin-bottom: 48px;
}
.cs-sechead .head-label {
    margin-bottom: 7px;
}
.cs-sechead h2 {
    margin-bottom: 12px;
}
.cs-sechead h2:last-child {
    margin-bottom: 0;
}
.cs-sechead p {
    margin: 0;
    max-width: 600px;
}
.cs-sechead p + p {
    margin-top: 12px;
}

.cs-sechead h2 + p {
    margin-top: 8px;
}

/* Full-width centered */
.cs-sechead--center {
    text-align: center;
}
.cs-sechead--center .head-label {
    justify-content: center;
}
.cs-sechead--center h2 {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}
.cs-sechead--center h2::after {
    margin-left: auto;
    margin-right: auto;
}
.cs-sechead--center p {
    margin-left: auto;
    margin-right: auto;
}

/* Small: h2 at the h3 size, tighter bottom space (sub sections inside a page) */
.cs-sechead--sm {
    margin-bottom: 32px;
}
.cs-sechead--sm h2 {
    font-size: var(--h3);
}

/* Side / split — heading left, copy or action right (Bootstrap grid) */
.cs-sechead--split p {
    max-width: none;
    margin-top: 0;
}
.cs-sechead--split .row {
    row-gap: 20px;
}
.cs-sechead__action {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
}

/* Split with a rule underneath — heading + action sit on one line above it */
.cs-sechead--line {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}


@media (max-width: 991px) {
    .cs-sechead {
        margin-bottom: 36px;
    }
    .cs-sechead--split {
        text-align: center;
    }
    .cs-sechead--split .head-label {
        justify-content: center;
    }
    .cs-sechead--split h2::after {
        margin-left: auto;
        margin-right: auto;
    }
    .cs-sechead--split p {
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
    }
    .cs-sechead__action {
        justify-content: center;
        margin-top: 0;
    }
}

/* ---------- Mobile spacing ---------- */
@media (max-width: 767px) {
    .section {
        padding: 50px 0;
    }
    .section-top {
        padding-top: 50px;
    }
    .section-bottom {
        padding-bottom: 50px;
    }
}
@media (max-width: 575px) {
    /* Crumbs sit on one line on a phone, so they need tighter tracking */
    .cs-breadcrumb,
    .cs-breadcrumb li {
        gap: 3px;
    }
    .cs-breadcrumb {
        font-size: 12px;
    }

        }

/* Soft gradient surface: white at the top easing into the light grey */
.cs-section--gradient {
    background: linear-gradient(180deg, var(--white) 0%, var(--bg-light) 100%);
}
.cs-section--gradient-up {
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--white) 100%);
}


/* ==========================================================================
   v5 · Section heading eyebrow
   Plain text eyebrow, no rules before or after the label.
   ========================================================================== */
.cs-sechead .head-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* --- Same plain eyebrow everywhere a label sits over a heading --- */
.head-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.cs-cta-image--modern .head-label::before,
.cs-cta-image--modern .head-label::after {
    content: none;
}