/**
 * Manufacturing capability section.
 *
 * Structure follows the Trafford Rubber reference — a heading, a short intro and a
 * horizontal run of numbered cards — but every token is Decca's own, taken from the live
 * theme: Archivo (inherited, never declared), navy #002675 for type and furniture,
 * #e10e21 for the heading accent and the arrow hover, 10px on cards to match the theme's
 * rounded columns, 4px on buttons to match .btn, and the 1170px container the rest of the
 * page lines up to.
 *
 * The track is a native scroll container. There is deliberately no scroll-behavior here:
 * the arrows animate the scroll themselves, and with both running the mandatory snap
 * cancelled the in-flight animation, which swallowed every second arrow click.
 */

.decca-capability {
    --decca-navy: var(--color-primary, #002675);
    --decca-red: #e10e21;
    --decca-gap: 24px;

    /* Two cards across the container, the rest running off the right of the screen. */
    --decca-card-w: min(558px, calc((100vw - 30px - var(--decca-gap)) / 2));

    padding: 90px 0;
    background: #fff;
    color: var(--decca-navy);
    overflow: hidden;   /* contains the track's bleed so the page cannot scroll sideways */
}

.decca-capability__inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---- head ---- */

.decca-capability__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.decca-capability__head-text {
    min-width: 0;
}

.decca-capability__heading {
    margin: 0 0 18px;
    color: var(--decca-navy);
    font-size: 46px;
    line-height: 56px;
    font-weight: 700;
}

/* The theme's heading convention: a light-weight opening, then the emphasis in red.
   Matches "Precision-built GRP tanks, made to last." on the same page. */
.decca-capability__heading-light {
    font-weight: 400;
    color: var(--decca-navy);
}

.decca-capability__heading-bold {
    font-weight: 700;
    color: var(--decca-red);
}

.decca-capability__intro {
    max-width: 620px;
    color: var(--decca-navy);
    font-size: 16px;
    line-height: 26px;
}

.decca-capability__intro p { margin: 0 0 12px; }
.decca-capability__intro p:last-child { margin-bottom: 0; }

/* ---- arrows ---- */

.decca-capability__nav {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    padding-bottom: 4px;
}

.decca-capability__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    padding: 0;

    border: 0;
    border-radius: 4px;

    background: var(--decca-navy);
    color: #fff;

    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.decca-capability__arrow:hover:not(:disabled),
.decca-capability__arrow:focus-visible:not(:disabled) {
    background: var(--decca-red);
}

.decca-capability__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ---- track ---- */

.decca-capability__track {
    display: flex;
    gap: var(--decca-gap);
    overflow-x: auto;
    /* No snapping on a pointer device. The arrows already scroll to an exact card
       position, and the snap engine kept re-correcting that scroll as it finished,
       dropping clicks and leaving the track on odd offsets. Snapping only earns its
       keep for a finger swipe, so it is limited to touch below. */
    scroll-snap-type: none;
    padding-bottom: 8px;
    scrollbar-width: none;

    /* Run the scrollport out to the right edge of the window so the cards beyond the
       second one stay visible, flowing off the screen rather than stopping at the
       container. 50% resolves against the track's own width, so this is exactly the
       distance from the container's right edge to the edge of the viewport. */
    margin-right: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
}

.decca-capability__track::-webkit-scrollbar { display: none; }

/* ---- card ---- */

.decca-capability__card {
    display: flex;
    flex-direction: column;

    flex: 0 0 var(--decca-card-w);

    scroll-snap-align: start;
    border-radius: 10px;
    background: var(--decca-navy);
    overflow: hidden;
}

/* image fills the top only */
.decca-capability__media {
    position: relative;
    flex: 0 0 auto;
    height: 260px;
    background: #d9deea center/cover no-repeat;
}

.decca-capability__label {
    position: absolute;
    top: 20px;
    left: 20px;

    padding: 9px 16px;
    border-radius: 4px;

    background: #fff;
    color: var(--decca-navy);

    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}

/* solid block of colour under it, carrying the copy */
.decca-capability__body {
    flex: 1 1 auto;
    padding: 28px;
    background: var(--decca-navy);
    color: #fff;
}

.decca-capability__title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.decca-capability__text {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 26px;
}

.decca-capability__text strong {
    color: #fff;
    font-weight: 700;
}

/* Touch devices have no arrows to drive the track, so snapping helps a swipe land on a
   card there. Nothing scripted competes with it on those devices. */
@media (hover: none) and (pointer: coarse) {
    .decca-capability__track { scroll-snap-type: x mandatory; }
}

/* ---- responsive ---- */

@media (max-width: 1024px) {
    .decca-capability { padding: 70px 0; }
    .decca-capability__heading { font-size: 38px; line-height: 46px; }
    .decca-capability__media { height: 220px; }
}

@media (max-width: 782px) {
    .decca-capability__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}

@media (max-width: 680px) {
    /* one card at a time, with the next peeking in */
    .decca-capability { --decca-card-w: 85%; padding: 56px 0; }
    .decca-capability__heading { font-size: 30px; line-height: 38px; }
    .decca-capability__media { height: 200px; }
    .decca-capability__body { padding: 22px; }
    .decca-capability__arrow { width: 46px; height: 46px; }
}

/* About Us carries the history section on a light grey band rather than white. */
.page-id-223 .decca-capability {
    background: #f7f7f7;
}