/* ==========================================================================
   Connect With Us — 50/50 navy module. A photo on one side meets a navy
   content panel via layered angled overlays (lighter-blue accent wedge +
   navy wedge), recreated entirely with CSS clip-path. Sides are swappable.
   ========================================================================== */

.section.connectwithus {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* ---- Card --------------------------------------------------------------- */
.cwu-card {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 480px;
    background: var(--color-card-navy);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.connectwithus--image-right .cwu-card { flex-direction: row-reverse; }

/* ---- Media side --------------------------------------------------------- */
.cwu-media {
    position: relative;
    flex: 0 0 48%;
    align-self: stretch;
    overflow: hidden;
}
.cwu-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Angled wedges frame the photo as a "/" parallelogram: a navy triangle on
   the top-left end and the bottom-right end, each backed by a lighter-blue
   accent sliver. The navy matches the card so it blends into the panel. */
.cwu-edge {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.cwu-edge::before,
.cwu-edge::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ::after = solid navy corner (matches the card, clips the photo edge).
   ::before = a translucent navy band [rgba(0,32,91,.6)] running just inside
   that edge — a uniform-width parallelogram so both ends read identically. */

/* End (seam) — bottom-right */
.cwu-edge--end::before {
    background: color-mix(in srgb, var(--color-navy) 60%, transparent);
    clip-path: polygon(96% 0, 100% 0, 82% 100%, 78% 100%);
}
.cwu-edge--end::after {
    background: var(--color-card-navy);
    clip-path: polygon(100% 0, 100% 100%, 82% 100%);
}

/* Start (left end) — top-left, parallel to the seam */
.cwu-edge--start::before {
    background: color-mix(in srgb, var(--color-navy) 60%, transparent);
    clip-path: polygon(18% 0, 22% 0, 4% 100%, 0 100%);
}
.cwu-edge--start::after {
    background: var(--color-card-navy);
    clip-path: polygon(0 0, 18% 0, 0 100%);
}

/* Mirror the wedges for the image-on-right layout */
.connectwithus--image-right .cwu-edge { transform: scaleX(1); }

/* ---- Content side ------------------------------------------------------- */
.cwu-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 110px clamp(32px, 5vw, 72px) 110px clamp(48px, 6vw, 96px);
}
.connectwithus--image-right .cwu-content {
    padding: 110px clamp(48px, 6vw, 96px) 110px clamp(32px, 5vw, 72px);
}

.cwu-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 468px;
}

.cwu-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-label-xs);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-background);
    background: var(--color-brand-gray);
    padding: 7px 14px 6px;
    clip-path: polygon(1.8% 0, 100% 0, 98.2% 100%, 0% 100%);
}

.cwu-headline {
    margin: 0;
    color: var(--color-background);
}
.cwu-subcopy {
    margin: 0;
    color: var(--color-background);
}

/* ---- Buttons ------------------------------------------------------------ */
.cwu-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}
/* Buttons use the global .btn .btn-secondary / .btn-accent — no local styling. */

/* ==========================================================================
   Responsive — stack the photo above the content. The angled edge wedges
   carry over to the full-width photo; the buttons stack and left-align.
   ========================================================================== */
@media (max-width: 991px) {
    /* Full-bleed navy card — drop the section + container padding and radius */
    .section.connectwithus { padding-top: 0; padding-bottom: 0; }
    .section.connectwithus .container { padding-left: 0; padding-right: 0; }
    .cwu-card { border-radius: 0; }

    .cwu-card,
    .connectwithus--image-right .cwu-card { flex-direction: column; }

    .cwu-media {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .cwu-content,
    .connectwithus--image-right .cwu-content {
        padding: 32px clamp(24px, 6vw, 40px) 40px;
    }

    .cwu-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}