/* ==========================================================================
   Product and solution detail pages - image balance
   The template styles these images with `margin-top` and a border radius only.
   With no width they render at their intrinsic pixel size, so any source
   narrower than the container leaves dead space beside it; and the image
   column does not stretch to match the height of the text column next to it.
   ========================================================================== */

@media (min-width: 992px) {

    /* Let the two-up thumbnail grid fill the height of the copy beside it,
       so both columns finish on the same line instead of the images stopping
       short and leaving a gap underneath. */
    .project-details-items .thumb-grid {
        height: 100%;
    }

    .project-details-items .thumb-grid img {
        width: 100%;
        height: 100%;
        min-height: 320px;
        max-height: 520px;
        object-fit: cover;
    }
}

/* Full-bleed image below a numbered section: span the container rather than
   sitting at the source image's own width. Capped so a squarer source does
   not turn into an 800px-tall band. */
.item-grid-container > .single-grid > img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
}

/* Image inside the right-hand column of a numbered section. */
.item-grid-colum .right-info > img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .item-grid-container > .single-grid > img,
    .item-grid-colum .right-info > img {
        max-height: 340px;
    }
}

/* ==========================================================================
   Solution detail pages
   Same root cause: `.services-details-items img` sets a radius and nothing
   else, so any source narrower than the content column renders at its own
   size and leaves dead space beside it.
   ========================================================================== */

.services-details-items .thumb img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .services-details-items .thumb img {
        max-height: 320px;
    }
}

/* ==========================================================================
   Long-form body copy
   Used by blog posts and event descriptions, both of which are authored as
   HTML in the admin and need sane defaults for headings, lists and quotes.
   ========================================================================== */

.post-body {
    font-size: 16px;
    line-height: 30px;
    color: var(--color-paragraph);
}

.post-body > * + * { margin-top: 20px; }

.post-body h2 { font-size: 30px; line-height: 42px; margin-top: 40px; font-weight: 600; color: var(--color-heading); }
.post-body h3 { font-size: 24px; line-height: 34px; margin-top: 34px; font-weight: 600; color: var(--color-heading); }
.post-body h4 { font-size: 19px; line-height: 30px; margin-top: 28px; font-weight: 600; color: var(--color-heading); }

.post-body ul,
.post-body ol { padding-left: 22px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-top: 0; }
.post-body li + li { margin-top: 8px; }

.post-body a { color: var(--color-primary); text-decoration: underline; }

.post-body img { max-width: 100%; height: auto; border-radius: 10px; }

.post-body blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: 22px;
    font-size: 19px;
    line-height: 33px;
    color: var(--color-heading);
    margin-left: 0;
}

.post-body pre {
    background: #0b0d3a;
    color: #e7e9ff;
    padding: 20px 24px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 24px;
}

.post-body code { font-size: 14px; }

.post-body table { width: 100%; border-collapse: collapse; }
.post-body th,
.post-body td { border: 1px solid rgba(0, 6, 98, .1); padding: 10px 14px; text-align: left; }

/* ==========================================================================
   Cross-page usability baseline
   ========================================================================== */

h1,
h2,
h3,
.title {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(116, 118, 255, 0.4);
    outline-offset: 3px;
}

.contact-form-card .field-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    color: var(--color-heading);
    font-size: 14px;
    font-weight: 600;
}

.contact-form-card .field-label span {
    color: var(--color-paragraph);
    font-size: 12px;
    font-weight: 400;
}

.quick-contact-widget h4 a {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Roadmap
   ========================================================================== */

.roadmap-intro {
    max-width: 820px;
}

.roadmap-intro > p:last-child {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.75;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 54px;
}

.roadmap-card {
    display: flex;
    min-height: 285px;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid #e1e2ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 45px rgba(0, 6, 98, 0.05);
}

.roadmap-status {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: #eeeefe;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.roadmap-card h3 {
    margin: 24px 0 12px;
    font-size: 28px;
}

.roadmap-card p {
    margin-bottom: 26px;
}

.roadmap-card > a {
    margin-top: auto;
    color: var(--color-heading);
    font-weight: 700;
}

.roadmap-card > a:hover {
    color: var(--color-primary);
}

.roadmap-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 30px;
    margin-top: 54px;
    padding: 34px 38px;
    border-radius: 14px;
    background: #f1f1fa;
}

.roadmap-note h3,
.roadmap-note p {
    margin: 0;
}

@media (max-width: 991px) {
    .roadmap-note {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

@media (max-width: 767px) {
    .roadmap-grid {
        grid-template-columns: 1fr;
        margin-top: 36px;
    }

    .roadmap-card {
        min-height: 0;
    }

    .roadmap-note {
        margin-top: 36px;
        padding: 28px 24px;
    }
}

@media (max-width: 767px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}