/*
 * Designbyklein funnel components.
 * Shared styles for the reusable sales-funnel Blade components:
 * x-cta-band, x-service-card, x-case-study-card, x-related-work,
 * x-case-study-intro and x-tech-details.
 *
 * Layout/spacing is handled by Bootstrap 5 utilities; this file is theme only.
 */

:root {
    --dbk-funnel-surface: #1f2937;
    --dbk-funnel-surface-2: #374151;
    --dbk-funnel-border: rgba(255, 255, 255, 0.10);
    --dbk-funnel-text: #f9fafb;
    --dbk-funnel-text-muted: #d1d5db;
    --dbk-funnel-text-meta: #9ca3af;
    --dbk-funnel-accent: #fe8d00;
}

/* ---------------------------------------------------------------- Hero */

.funnel-hero {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.92) 0%, rgba(31, 41, 55, 0.92) 100%);
    border: 1px solid var(--dbk-funnel-border);
    border-left: 4px solid var(--dbk-funnel-accent);
    border-radius: 12px;
}

.funnel-hero__title {
    color: var(--dbk-funnel-text);
    line-height: 1.15;
}

.funnel-hero__lead {
    color: var(--dbk-funnel-text-muted);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 62ch;
}

.funnel-hero__support {
    color: var(--dbk-funnel-text-muted);
    max-width: 68ch;
}

/* ------------------------------------------------------------ Section headings */

.funnel-section__intro {
    color: var(--dbk-funnel-text-muted);
    max-width: 72ch;
}

/* ------------------------------------------------------------- Service cards */

.service-card-dbk__points {
    color: var(--dbk-funnel-text-muted);
}

/* ---------------------------------------------------------- Case study cards */

.case-study-card {
    background: var(--dbk-funnel-surface);
    border: 1px solid var(--dbk-funnel-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.case-study-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(254, 141, 0, 0.45);
}

.case-study-card__title,
.case-study-card__title a {
    color: var(--dbk-funnel-text);
    text-decoration: none;
    line-height: 1.35;
}

.case-study-card__title a:hover,
.case-study-card__title a:focus {
    color: var(--dbk-funnel-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.case-study-card__outcome {
    color: var(--dbk-funnel-text-muted);
    line-height: 1.55;
}

.case-study-card__tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(254, 141, 0, 0.45);
    border-radius: 999px;
    color: var(--dbk-funnel-accent);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.case-study-card__meta {
    color: var(--dbk-funnel-text-meta);
}

.case-study-card__footer {
    border-color: var(--dbk-funnel-border) !important;
}

/* ------------------------------------------------ Secondary / "off" button state
 * The counterpart to `.btn-orange`. Outline buttons rely on the page showing through,
 * which is unreadable over the tiled background image, so the low-emphasis state is a
 * solid, opaque surface instead of a transparent one. `.is-active` promotes it to the
 * orange "on" state, which is what the case study filter bar toggles between.
 */

.btn.btn-off {
    background-color: #333e4d;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #e8eaed;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn.btn-off:hover {
    background-color: #414e60;
    border-color: rgba(254, 141, 0, 0.6);
    color: #fff;
}

.btn.btn-off:focus-visible {
    background-color: #414e60;
    border-color: var(--text-orange, #fe8d00);
    color: #fff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(254, 141, 0, 0.35);
}

.btn.btn-off.is-active,
.btn.btn-off[aria-pressed="true"] {
    background-color: var(--text-orange, #fe8d00);
    border-color: var(--text-orange, #fe8d00);
    color: #fff;
    font-weight: 600;
}

.btn.btn-off.is-active:hover,
.btn.btn-off[aria-pressed="true"]:hover {
    background-color: var(--text-red, #f04300);
    border-color: var(--text-red, #f04300);
    color: #fff;
}

.btn.btn-off:disabled,
.btn.btn-off.disabled {
    background-color: #333e4d;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(232, 234, 237, 0.45);
}

/* -------------------------------------------------------------- Filter bar */

.case-study-filters .btn {
    white-space: nowrap;
}

/* ------------------------------------------------------------ Tech details */

.tech-details {
    border-top: 1px solid var(--dbk-funnel-border);
    padding-top: 1.5rem;
}

.tech-details__header small {
    color: var(--dbk-funnel-text-meta) !important;
}

/* --------------------------------------------------------- Symptom / problem list */

.symptom-list {
    background: var(--dbk-funnel-surface);
    border: 1px solid var(--dbk-funnel-border);
    border-radius: 12px;
}

.symptom-list li {
    color: var(--dbk-funnel-text-muted);
    line-height: 1.5;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 767.98px) {
    .funnel-hero__title {
        font-size: 1.9rem;
    }

    .funnel-hero__lead {
        font-size: 1.05rem;
    }

    .case-study-card__title {
        font-size: 1.05rem;
    }

    .cta-band .card-body {
        padding: 1.25rem !important;
    }
}

@media (max-width: 575.98px) {
    .case-study-card__footer .btn,
    .cta-band .btn {
        min-height: 2.75rem;
    }
}

/* ------------------------------------------------ Brand outline button + borders
 * `.btn-outline-orange`, `.border-yellow` and `.border-red` are used across the
 * service and case study pages but Bootstrap only ships outline/border variants for
 * its own theme colours, so they are defined here to match the brand palette.
 */

.btn-outline-orange {
    --bs-btn-color: var(--text-orange, #fe8d00);
    --bs-btn-border-color: var(--text-orange, #fe8d00);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--text-orange, #fe8d00);
    --bs-btn-hover-border-color: var(--text-orange, #fe8d00);
    --bs-btn-focus-shadow-rgb: 254, 141, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--text-red, #f04300);
    --bs-btn-active-border-color: var(--text-red, #f04300);
    --bs-btn-disabled-color: var(--text-orange, #fe8d00);
    --bs-btn-disabled-border-color: var(--text-orange, #fe8d00);
    --bs-btn-bg: transparent;
    --bs-gradient: none;
    color: var(--bs-btn-color);
    border: 2px solid var(--bs-btn-border-color);
    background-color: transparent;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.border-yellow {
    border-color: var(--text-yellow, #feb300) !important;
    border-width: 2px;
}

.border-red {
    border-color: var(--text-red, #f04300) !important;
    border-width: 2px;
}

/* -------------------------------------------------- In-body link discoverability
 * The global `p a` rule renders body links white with no underline, which makes
 * them hard to spot. Brand-coloured links inside copy get an underline back.
 */

p a.text-orange,
li a.text-orange,
span a.text-orange,
.funnel-section__intro a,
.symptom-list a {
    color: var(--text-orange, #fe8d00);
    text-decoration: underline;
    text-underline-offset: 3px;
}

p a.text-orange:hover,
li a.text-orange:hover,
span a.text-orange:hover,
.funnel-section__intro a:hover,
.symptom-list a:hover {
    color: var(--text-yellow, #feb300);
}

/* ------------------------------------------------------------- Best-fit cards
 * Homepage self-qualification block (x-best-fit). Visually lighter than
 * .case-study-card so it reads as orientation rather than as proof, but shares
 * the same surface tokens.
 */

.best-fit-card {
    background: var(--dbk-funnel-surface);
    border: 1px solid var(--dbk-funnel-border);
    border-left: 3px solid var(--dbk-funnel-accent);
    border-radius: 12px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.best-fit-card:hover {
    background: var(--dbk-funnel-surface-2);
    border-color: rgba(254, 141, 0, 0.45);
    border-left-color: var(--dbk-funnel-accent);
}

.best-fit-card__body {
    color: var(--dbk-funnel-text-muted);
    line-height: 1.55;
}

.best-fit-card__link {
    color: var(--dbk-funnel-accent);
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    min-height: 2.75rem;
    line-height: 2.75rem;
}

.best-fit-card__link:hover,
.best-fit-card__link:focus {
    color: var(--text-yellow, #feb300);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.best-fit-note {
    color: var(--dbk-funnel-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--dbk-funnel-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    max-width: 80ch;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .best-fit-card__link {
        line-height: 1.5;
        padding: 0.6rem 0;
    }
}

/* ----------------------------------------------------------------- Icon boxes
 * `.icon-box` and its `.icon-performance` / `.icon-cost` / `.icon-security` /
 * `.icon-reliability` / `.icon-architecture` variants are used across the case
 * study pages but were never defined in any stylesheet. Where the markup also
 * carried `.text-dark`, that left near-black icons on a dark card (about 1.05:1)
 * — effectively invisible. Defining the box here fixes the sizing and the
 * contrast in one place. The colour override needs !important because Bootstrap's
 * text utilities are themselves !important.
 */

.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(254, 141, 0, 0.14);
    border: 1px solid rgba(254, 141, 0, 0.35);
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.icon-box.text-dark,
.icon-box.text-white {
    color: var(--text-orange, #fe8d00) !important;
}

/* --------------------------------------------------------- Before / after proof
 * Visual evidence block for case studies (x-before-after). Side by side on
 * desktop, stacked on mobile where a half-width screenshot would be unreadable.
 * BEFORE is deliberately neutral and AFTER carries the brand accent, so the two
 * states are distinguishable at a glance and without relying on colour alone
 * (each also carries a text label).
 */

.before-after__note {
    background: var(--dbk-funnel-surface);
    border: 1px solid var(--dbk-funnel-border);
    border-radius: 12px;
    color: var(--dbk-funnel-text-muted);
    line-height: 1.55;
}

.before-after__note--before {
    border-left: 3px solid var(--dbk-funnel-text-meta);
}

.before-after__note--after {
    border-left: 3px solid var(--dbk-accent, var(--dbk-funnel-accent, #fe8d00));
}

.before-after__badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.before-after__badge--before {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #e5e7eb;
}

.before-after__badge--after {
    background: rgba(255, 122, 40, 0.16);
    border: 1px solid rgba(255, 122, 40, 0.55);
    color: var(--dbk-accent, var(--dbk-funnel-accent, #fe8d00));
}

.before-after__view-label {
    color: var(--dbk-funnel-text);
    font-weight: 600;
}

.before-after__view-note,
.before-after__hint,
.before-after__caption {
    color: var(--dbk-funnel-text-meta);
    font-size: 0.85rem;
}

.before-after__figure {
    background: var(--dbk-funnel-surface);
    border: 1px solid var(--dbk-funnel-border);
    border-radius: 12px;
    overflow: hidden;
}

.before-after__figure--after {
    border-color: rgba(255, 122, 40, 0.35);
}

.before-after__figcaption {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--dbk-funnel-border);
}

/* The image itself is the control, so the button is stripped back to a frame. */
.before-after__trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #0b1220;
    cursor: zoom-in;
    line-height: 0;
}

.before-after__trigger:focus-visible {
    outline: 3px solid var(--dbk-accent, var(--dbk-funnel-accent, #fe8d00));
    outline-offset: -3px;
}

.before-after__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.before-after__trigger:hover .before-after__img {
    transform: scale(1.015);
    opacity: 0.94;
}

.before-after__caption {
    border-top: 1px solid var(--dbk-funnel-border);
    padding-top: 0.9rem;
}

/* Long full-page screenshots would otherwise dominate the modal. */
.before-after .modal-dialog-scrollable .modal-body img {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .before-after__img,
    .before-after__trigger:hover .before-after__img {
        transition: none;
        transform: none;
    }
}

/* Comparison table: at phone width three columns squeeze to a few words each, so the
 * rows stack. Each cell carries its own Before/After label in the markup (hidden from
 * md up) because the header row is not visible once the table is stacked. */

@media (max-width: 767.98px) {
    .ba-table,
    .ba-table tbody,
    .ba-table tr,
    .ba-table th,
    .ba-table td {
        display: block;
        width: 100%;
    }

    .ba-table thead {
        display: none;
    }

    .ba-table tr {
        border-bottom: 1px solid var(--dbk-funnel-border);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .ba-table tr:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .ba-table th[scope="row"] {
        color: var(--dbk-funnel-text);
        font-size: 1.05rem;
        padding-bottom: 0.5rem;
    }

    .ba-table td {
        padding-top: 0.25rem;
        padding-bottom: 0.75rem;
    }

    /* Sit the label on its own line so the copy is not indented around it. */
    .ba-table__label {
        display: block;
        width: fit-content;
        margin-bottom: 0.4rem;
    }
}

/* Marker on a case study card when the page carries real captured evidence. */
.case-study-card__proof {
    color: var(--dbk-funnel-accent);
    font-size: 0.82rem;
    font-weight: 500;
}