/*==========================================================
    SHARED COMPONENTS
    Built only from tokens.css. Loaded after style.css so these
    namespaced classes are not overridden by legacy rules.
    Components:.ui-container,.ui-section, section header, button,
   .ui-chip,.ui-card, stat tile,.ui-breadcrumb, CTA band, sticky mobile CTA,
    filter.ui-chips, empty state.
==========================================================*/

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--space-7);
    scroll-margin-top: var(--header-offset);
    font-family: var(--font-sans);
    color: var(--color-text);
    letter-spacing: normal;
}

.ui-section--muted {
    background: var(--color-surface-muted);
}

@media (min-width: 768px) {
    .section {
        padding-block: var(--space-8);
    }
}

/* ---------- Section header: one eyebrow + one H2 ---------- */
.section-header {
    max-width: 720px;
    margin-bottom: var(--space-6);
}

.ui-section-header--center {
    margin-inline: auto;
    text-align: center;
}

.ui-section-header__eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-primary-strong);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.ui-section-header__title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

    .ui-section-header__title span {
        color: var(--color-primary);
    }

.ui-section-header__intro {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

@media (min-width: 768px) {
    .ui-section-header__title {
        font-size: var(--fs-2xl);
    }

    .ui-section-header__intro {
        font-size: var(--fs-md);
    }
}

/* ---------- Buttons: primary / secondary / ghost, one height ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-5);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: normal;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.ui-btn--primary {
    background: var(--color-primary-strong);
    color: var(--color-on-primary);
}

    .ui-btn--primary:hover {
        background: var(--color-primary-hover);
        color: var(--color-on-primary);
    }

.ui-btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-neutral-300);
    color: var(--color-text);
}

    .ui-btn--secondary:hover {
        border-color: var(--color-neutral-900);
        color: var(--color-text);
    }

.ui-btn--ghost {
    padding-inline: var(--space-2);
    background: transparent;
    color: var(--color-primary-strong);
}

    .ui-btn--ghost:hover {
        color: var(--color-primary-hover);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.ui-btn--block {
    width: 100%;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ---------- Chip ---------- */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px var(--space-3);
    border: 1px solid var(--color-primary-soft-border);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    text-decoration: none;
}

.ui-chip--neutral {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-neutral-700);
}

a.ui-chip:hover {
    border-color: var(--color-primary-strong);
}

/* ---------- Card ---------- */
.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.ui-card--interactive {
    transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

    .ui-card--interactive:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.ui-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-neutral-100);
}

    .ui-card__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center; /* project screenshots: keep the page header, not the middle */
    }

.ui-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}

.ui-card__meta {
    margin: 0;
    color: var(--color-text-subtle);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.ui-card__title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

    .ui-card__title a {
        color: inherit;
        text-decoration: none;
    }

        /* whole card is clickable via the title link */
        .ui-card__title a::after {
            content: "";
            position: absolute;
            inset: 0;
        }

.ui-card--linked {
    position: relative;
}

    .ui-card--linked:focus-within {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: 2px;
    }

        .ui-card--linked:focus-within .ui-card__title a:focus-visible {
            outline: none !important;
        }

.ui-card__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.ui-card__footer {
    margin-top: auto;
    padding-top: var(--space-3);
}

/* ---------- Stat tile ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
}

@media (min-width: 768px) {
    .stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat-tile {
    display: flex;
    flex-direction: column-reverse; /* value visually first, label first for screen readers */
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.ui-stat-tile__value {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

.ui-stat-tile__label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    font-size: var(--fs-sm);
}

    .breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .breadcrumb li {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-text-muted);
    }

        .breadcrumb li + li::before {
            content: "/";
            color: var(--color-neutral-400);
        }

    .breadcrumb a {
        color: var(--color-text-muted);
        text-decoration: none;
    }

        .breadcrumb a:hover {
            color: var(--color-primary-strong);
            text-decoration: underline;
        }

    .breadcrumb [aria-current="page"] {
        color: var(--color-text);
        font-weight: var(--fw-medium);
    }

/* ---------- CTA band ---------- */
.cta-band {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-900);
    color: var(--color-text-inverse);
}

.ui-cta-band__title {
    margin: 0;
    color: var(--color-text-inverse);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.ui-cta-band__text {
    margin: var(--space-1) 0 0;
    color: var(--color-neutral-300);
    font-size: var(--fs-base);
}

@media (min-width: 768px) {
    .cta-band {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-6) var(--space-7);
    }
}

/* ---------- Filter.ui-chips (toggle buttons) ---------- */
.filter.ui-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.filter-chip {
    min-height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-neutral-700);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
}

    .filter.ui-chip:hover {
        border-color: var(--color-neutral-900);
    }

    .filter.ui-chip[aria-pressed="true"] {
        border-color: var(--color-neutral-900);
        background: var(--color-neutral-900);
        color: var(--color-text-inverse);
    }

/* ---------- Empty state ---------- */
.empty-state {
    padding: var(--space-6);
    border: 1px dashed var(--color-neutral-300);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    text-align: center;
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
    transform: translateY(110%);
    transition: transform var(--duration-base) var(--ease-standard);
}

    .ui-sticky-cta.is-visible {
        transform: none;
    }

    .sticky-cta .btn {
        flex: 1;
        padding-inline: var(--space-3);
    }

@media (min-width: 768px) {
    .sticky-cta {
        display: none;
    }
}

/* ---------- Utilities ---------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Heading highlight words ("real business problems", "I Work With", "Best", ...)
   use the same light-to-deep orange gradient as the hero photo bubble.
   text-fill-color wins over the older `color` rules in style.css and the partials. */
.ab-h2 span,
.rs-h2 span,
.sv-h2 span,
.pf-h2 span,
.ts-h2 span,
.gi-h2 span,
.bl-h2 span,
.bx-h1 span,
.bx-h2 span,
.fq-h2 span,
.hb-heading span,
.services-heading h2 span,
.portfolio-left h2 span,
.resume-left h2 span,
.blog-left h2 span,
.section-seventh-wrapper-FAQ h3 span,
.testimonial-heading h2 span,
.contact-heading h2 .orange-text {
    background-image: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary); /* fallback where background-clip:text is unsupported */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone; /* each wrapped line gets the full gradient */
}

/* Microsoft Teams glyph (Font Awesome 6.4 has none): a rounded square with a "T" cut out, drawn in currentColor
   so it follows each icon row's colour and hover state. Usage: <i class="ic-teams" aria-hidden="true"></i> */
.ic-teams {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm1.5 3.5v2H7V12h2V6.5h2.5v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm1.5 3.5v2H7V12h2V6.5h2.5v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}