/**
 * CADMasters Frontend Phase 3 — Visual Polish & Design Consistency
 * Additive layer loaded after frontend-v2.css. Visual/CSS only — no markup changes.
 */

:root {
    /* Phase 3 polish tokens — extend frontend-v2 without replacing canonical tokens */
    --polish-section-spacing: clamp(4rem, 6.5vw, 6.5rem);
    --polish-section-spacing-compact: clamp(2.5rem, 4.5vw, 3.5rem);
    --polish-container-gutter: clamp(1.125rem, 3.2vw, 1.625rem);
    --polish-content-max: 68ch;
    --polish-lead-max: 42rem;
    --polish-card-radius: var(--frontend-v2-card-radius-lg, 1rem);
    --polish-card-shadow: var(--frontend-v2-shadow-sm, 0 2px 16px rgba(11, 42, 74, 0.06));
    --polish-card-shadow-hover: var(--frontend-v2-shadow-md, 0 16px 48px rgba(15, 23, 42, 0.1));
    --polish-btn-radius: 0.5rem;
    --polish-btn-min-height: 2.75rem;
    --polish-ease: var(--frontend-v2-ease, cubic-bezier(0.22, 1, 0.36, 1));
    --polish-stat-value-size: clamp(1.875rem, 3.5vw, 2.5rem);
    --polish-footer-gap: clamp(2rem, 4vw, 3rem);
}

/* ── 1. Global spacing — section rhythm & containers ─────────────────── */

.cm-engineering-ui .section-block,
.cm-engineering-ui .cm-page-section:not(:has(.hero-image-slider)):not(:has(.cms-hero)):not(:has(.hero-section)):not(:has(.hero-split-video)) {
    --section-spacing: var(--polish-section-spacing);
    padding-block: var(--section-spacing);
}

.cm-engineering-ui .section-block.section-block--compact,
.cm-engineering-ui .cm-section-spacing--compact {
    --section-spacing: var(--polish-section-spacing-compact);
}

.cm-engineering-ui .container,
.cm-engineering-ui .container-lg,
.cm-engineering-ui .container-xl {
    padding-inline: var(--polish-container-gutter);
}

.cm-engineering-ui .section-block > .container > .row:last-child,
.cm-engineering-ui .cm-page-section > .container > .row:last-child {
    margin-bottom: 0;
}

.cm-engineering-ui .section-block + .section-block,
.cm-engineering-ui .cm-page-section + .cm-page-section {
    margin-top: 0;
}

/* Remove double-padding on nested section wrappers */
.cm-engineering-ui .section-block .section-block,
.cm-engineering-ui .cm-page-section .cm-page-section {
    padding-block: 0;
}

/* ── 2. Typography — hierarchy, paragraph rhythm, line length ────────── */

.cm-engineering-ui h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; }
.cm-engineering-ui h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.15; }
.cm-engineering-ui h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.25; }
.cm-engineering-ui h4 { font-size: 1.125rem; line-height: 1.3; }

.cm-engineering-ui p,
.cm-engineering-ui .card-text,
.cm-engineering-ui .content-prose p {
    max-width: var(--polish-content-max);
}

.cm-engineering-ui .section-header__description,
.cm-engineering-ui .lead {
    max-width: var(--polish-lead-max);
}

.cm-engineering-ui .section-header--center .section-header__description,
.cm-engineering-ui .section-header--center .lead {
    margin-inline: auto;
}

.cm-engineering-ui .section-header--start .section-header__description,
.cm-engineering-ui .section-header--start .lead {
    margin-inline: 0;
}

.cm-engineering-ui p + p,
.cm-engineering-ui .content-prose p + p {
    margin-top: 1rem;
}

.cm-engineering-ui .section-header__title + .section-header__description {
    margin-top: 0.75rem;
}

/* ── 3. Buttons — primary / secondary / outline consistency ────────── */

.cm-engineering-ui .btn {
    border-radius: var(--polish-btn-radius);
    min-height: var(--polish-btn-min-height);
    padding: 0.625rem 1.375rem;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition:
        transform 0.22s var(--polish-ease),
        box-shadow 0.22s var(--polish-ease),
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.cm-engineering-ui .btn-sm {
    min-height: 2.25rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.cm-engineering-ui .btn-lg {
    min-height: 3.125rem;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
}

.cm-engineering-ui .btn-primary,
.cm-engineering-ui .btn-cta {
    border: none;
    box-shadow: 0 4px 14px rgba(11, 61, 145, 0.2);
}

.cm-engineering-ui .btn-primary:hover,
.cm-engineering-ui .btn-cta:hover,
.cm-engineering-ui .btn-primary:focus-visible,
.cm-engineering-ui .btn-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11, 61, 145, 0.26);
}

.cm-engineering-ui .btn-secondary {
    background: var(--frontend-v2-surface-muted, #eef2f7);
    border-color: var(--frontend-v2-border, rgba(15, 23, 42, 0.08));
    color: var(--frontend-v2-text, #0f172a);
}

.cm-engineering-ui .btn-secondary:hover,
.cm-engineering-ui .btn-secondary:focus-visible {
    background: var(--frontend-v2-surface-alt, #f4f7fb);
    border-color: var(--frontend-v2-border-strong, rgba(15, 23, 42, 0.12));
    transform: translateY(-1px);
}

.cm-engineering-ui .btn-outline-primary,
.cm-engineering-ui .btn-outline-steel {
    border-width: 1.5px;
    background: transparent;
}

.cm-engineering-ui .btn-outline-primary:hover,
.cm-engineering-ui .btn-outline-steel:hover,
.cm-engineering-ui .btn-outline-primary:focus-visible,
.cm-engineering-ui .btn-outline-steel:focus-visible {
    transform: translateY(-1px);
}

.cm-engineering-ui .btn-outline-light {
    border-width: 1.5px;
}

.cm-engineering-ui .btn:focus-visible {
    outline: 2px solid var(--frontend-v2-accent, #00aeef);
    outline-offset: 2px;
}

/* ── 4. Cards — equal heights, shadows, radius, hover ────────────────── */

.cm-engineering-ui .row > [class*="col-"] > .cm-card,
.cm-engineering-ui .row > [class*="col-"] > .card:not(.card-flat),
.cm-engineering-ui .row > [class*="col-"] > a > .cm-card,
.cm-engineering-ui .row > [class*="col-"] > a > .card:not(.card-flat) {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cm-engineering-ui .cm-card .card-body,
.cm-engineering-ui .card:not(.card-flat) .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.cm-engineering-ui .cm-card .card-link,
.cm-engineering-ui .card:not(.card-flat) .card-link {
    margin-top: auto;
    padding-top: 0.75rem;
}

.cm-engineering-ui .cm-card,
.cm-engineering-ui .card:not(.card-flat),
.cm-engineering-ui .cm-interactive-card,
.cm-engineering-ui .stat-card {
    border-radius: var(--polish-card-radius);
    box-shadow: var(--polish-card-shadow);
    border: 1px solid var(--frontend-v2-border, rgba(15, 23, 42, 0.08));
    transition:
        transform 0.28s var(--polish-ease),
        box-shadow 0.28s var(--polish-ease),
        border-color 0.28s var(--polish-ease);
}

.cm-engineering-ui .cm-card:hover,
.cm-engineering-ui .card:not(.card-flat):hover,
.cm-engineering-ui .cm-interactive-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--polish-card-shadow-hover);
    border-color: rgba(11, 61, 145, 0.12);
}

/* ── 5. Hero sections — heights, alignment, breadcrumbs, CTAs ───────── */

.cm-engineering-ui .cms-page-header.page-header,
.cm-engineering-ui .page-header.cms-page-header {
    padding-block: calc(var(--site-header-height, 126px) + 2rem) clamp(2.25rem, 5vw, 3.25rem);
}

.cm-engineering-ui .hero-section.cms-hero.hero-section--full,
.cm-main > .hero-section:first-child,
.cm-main > .cms-hero:first-child {
    min-height: clamp(22rem, 58vh, 36rem);
}

.hero-image-slider__frame,
.cm-main > .hero-image-slider:first-child .hero-image-slider__frame {
    min-height: clamp(22rem, 68vh, 40rem);
}

.hero-image-slider__content,
.cm-engineering-ui .hero-section .container,
.cm-engineering-ui .cms-hero .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cm-engineering-ui .breadcrumb {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    --bs-breadcrumb-divider: '›';
}

.cm-engineering-ui .page-header .breadcrumb,
.cm-engineering-ui .cms-page-header .breadcrumb {
    margin-bottom: 1.25rem;
}

.cm-engineering-ui .breadcrumb-item + .breadcrumb-item::before {
    opacity: 0.55;
}

.cm-engineering-ui .hero-actions {
    gap: 0.75rem 1rem;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Standalone detail breadcrumbs on light backgrounds */
.cm-engineering-ui .section-block--entity-content .breadcrumb,
.cm-engineering-ui .content-prose + .breadcrumb {
    --bs-breadcrumb-divider-color: var(--frontend-v2-text-muted, #5b6577);
}

.cm-engineering-ui .section-block--entity-content .breadcrumb-item a {
    color: var(--frontend-v2-brand, #0b3d91);
    text-decoration: none;
}

.cm-engineering-ui .section-block--entity-content .breadcrumb-item a:hover {
    color: var(--frontend-v2-accent, #00aeef);
}

/* ── 6. Statistics — icon alignment, numbers, labels, grid ───────────── */

.cm-engineering-ui .cm-stat-card,
.cm-engineering-ui .stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem);
    height: 100%;
    border-radius: var(--polish-card-radius);
}

.cm-engineering-ui .cm-stat-card__icon,
.cm-engineering-ui .stat-card .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.cm-engineering-ui .cm-stat-card__value,
.cm-engineering-ui .stat-card .stat-value,
.cm-engineering-ui .cm-stats-strip__value,
.cm-engineering-ui .cm-entity-stat__value {
    font-size: var(--polish-stat-value-size);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: var(--frontend-v2-display-track, -0.035em);
    color: var(--frontend-v2-brand, #0b3d91);
}

.cm-engineering-ui .cm-stat-card__label,
.cm-engineering-ui .stat-card .stat-label,
.cm-engineering-ui .cm-stats-strip__label,
.cm-engineering-ui .cm-entity-stat__label {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--frontend-v2-text-muted, #5b6577);
}

.cm-engineering-ui .cm-stats-strip {
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: stretch;
}

.cm-engineering-ui .cm-stats-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 2vw, 1.75rem) 1rem;
    height: 100%;
    border-radius: var(--polish-card-radius);
    box-shadow: var(--polish-card-shadow);
}

.cm-engineering-ui .row > [class*="col-"] > .cm-stat-card,
.cm-engineering-ui .row > [class*="col-"] > .stat-card {
    height: 100%;
}

/* ── 7. Timeline — spacing, readability, mobile ──────────────────────── */

.cm-engineering-ui .cm-timeline,
.cm-timeline {
    max-width: 44rem;
    padding-left: clamp(1.5rem, 3vw, 2rem);
    margin-inline: auto;
}

.cm-engineering-ui .cm-timeline__item,
.cm-timeline__item {
    padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

.cm-engineering-ui .cm-timeline__item:last-child,
.cm-timeline__item:last-child {
    padding-bottom: 0;
}

.cm-engineering-ui .cm-timeline__title,
.cm-timeline__title {
    font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
    line-height: 1.3;
    margin-bottom: 0.375rem;
}

.cm-engineering-ui .cm-timeline__text,
.cm-timeline__text {
    font-size: 0.9375rem;
    line-height: 1.65;
    max-width: 52ch;
}

.cm-engineering-ui .cm-timeline__year,
.cm-timeline__year {
    margin-bottom: 0.375rem;
}

.cm-engineering-ui .cm-timeline__marker,
.cm-timeline__marker {
    top: 0.4rem;
}

/* ── 8. CTA sections — padding, emphasis, buttons ────────────────────── */

.cm-engineering-ui .cta-band,
.cm-page-section.cta-band,
.section-block.cta-band {
    padding-block: clamp(3.5rem, 6.5vw, 5.5rem);
    text-align: center;
}

.cm-engineering-ui .cta-band .container {
    max-width: min(52rem, calc(100vw - 2rem));
}

.cm-engineering-ui .cta-band .section-header {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    margin-inline: auto;
}

.cm-engineering-ui .cta-band h2,
.cm-engineering-ui .cta-band .section-header__title {
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);
    max-width: none;
    margin-inline: auto;
}

.cm-engineering-ui .cta-band p,
.cm-engineering-ui .cta-band .section-header__description {
    max-width: 36rem;
    margin-inline: auto;
    opacity: 0.92;
}

.cm-engineering-ui .cta-band .hero-actions,
.cm-engineering-ui .cta-band .d-flex.gap-3,
.cm-engineering-ui .cta-band .btn-group-actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.cm-engineering-ui .cta-band .btn-primary,
.cm-engineering-ui .cta-band .btn-cta {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* ── 9. Footer — spacing, columns, typography, social icons ──────────── */

.cm-engineering-ui .site-footer--minimal-corporate {
    padding-top: var(--polish-footer-gap);
    padding-bottom: calc(var(--polish-footer-gap) * 0.45);
}

.cm-engineering-ui .site-footer__grid {
    row-gap: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.cm-engineering-ui .site-footer--minimal-corporate .site-footer__heading,
.cm-engineering-ui .site-footer--minimal-corporate h5 {
    margin-bottom: 0.875rem;
    line-height: 1.3;
}

.cm-engineering-ui .site-footer--minimal-corporate .site-footer__links li + li {
    margin-top: 0.5rem;
}

.cm-engineering-ui .site-footer--minimal-corporate .site-footer__description {
    max-width: 22rem;
    line-height: 1.65;
}

.cm-engineering-ui .site-footer__bottom {
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.cm-engineering-ui .site-footer__social-bar {
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.cm-engineering-ui .site-footer__social-link {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    font-size: 1.0625rem;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.2s var(--polish-ease);
}

.cm-engineering-ui .site-footer__social-bar--anim-none .site-footer__social-link:hover,
.cm-engineering-ui .site-footer__social-bar--anim-none .site-footer__social-link:focus-visible,
.cm-engineering-ui.cm-animations-disabled .site-footer__social-bar[class*="--anim-"] .site-footer__social-link:hover,
.cm-engineering-ui.cm-animations-disabled .site-footer__social-bar[class*="--anim-"] .site-footer__social-link:focus-visible {
    transform: none;
}

.cm-engineering-ui .site-footer__copyright {
    font-size: 0.8125rem;
    line-height: 1.5;
    gap: 0.5rem 1rem;
}

/* ── 10. Responsive — tablet/mobile padding, overflow, images ─────────── */

@media (max-width: 991.98px) {
    :root {
        --polish-section-spacing: clamp(3rem, 5.5vw, 4.5rem);
    }

    .cm-engineering-ui .section-header {
        margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    }

    .cm-engineering-ui .cm-timeline,
    .cm-timeline {
        padding-left: 1.375rem;
    }

    .cm-engineering-ui .cm-timeline__marker,
    .cm-timeline__marker {
        left: -1.5rem;
    }
}

@media (max-width: 767.98px) {
    :root {
        --polish-container-gutter: 1.125rem;
    }

    .cm-engineering-ui .cm-stats-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cm-engineering-ui .site-footer__grid .col-md-6 {
        margin-bottom: 0;
    }

    .cm-engineering-ui .cta-band .hero-actions .btn,
    .cm-engineering-ui .cta-band .btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    :root {
        --polish-container-gutter: 1rem;
    }

    .cm-engineering-ui .cm-stats-strip {
        grid-template-columns: 1fr;
    }

    .cm-engineering-ui .breadcrumb {
        font-size: 0.8125rem;
        flex-wrap: wrap;
    }

    .cm-engineering-ui .breadcrumb-item.active {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .cm-engineering-ui .card-img-top,
    .cm-engineering-ui .cm-card__media img,
    .cm-engineering-ui .cm-media__img {
        max-width: 100%;
        height: auto;
    }

    .cm-engineering-ui .hero-image-slider__title {
        font-size: clamp(1.625rem, 7vw, 2.125rem);
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .cm-engineering-ui .btn,
    .cm-engineering-ui .cm-card,
    .cm-engineering-ui .card:not(.card-flat),
    .cm-engineering-ui .cm-stat-card,
    .cm-engineering-ui .site-footer__social-link {
        transition: none;
    }

    .cm-engineering-ui .cm-card:hover,
    .cm-engineering-ui .card:not(.card-flat):hover,
    .cm-engineering-ui .btn-primary:hover,
    .cm-engineering-ui .btn-cta:hover {
        transform: none;
    }
}