/*
 * Two Column Process block (blocks/two-column-process.php).
 *
 * Kept out of the Tailwind build on purpose: assets/css/styles.css on live was
 * compiled from a newer source than the theme files, so rebuilding it would drop
 * styles other pages use. Every value here is a theme variable from that file
 * (@theme in dev/styles.css + Tailwind defaults), except the navy gradient
 * below; breakpoints match Tailwind's
 * lg (64rem) / sm (40rem) used across the theme.
 */

/*
 * Navy gradient for the dark column. The theme has no navy, so these two values are
 * sampled from the approved reference design (top-left -> bottom-right). Swap them
 * for the brand navy if Accelerated Materials supply one.
 */
.two-column-process {
    --tcp-navy-from: #071B2F;
    --tcp-navy-to: #0E3453;
}

.two-column-process__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--spacing) * 6);
    max-width: var(--container-7xl);
    margin: 0 auto;
    padding: calc(var(--spacing) * 20) calc(var(--spacing) * 4);
}

@media (width >= 40rem) {
    .two-column-process__inner {
        padding-left: calc(var(--spacing) * 8);
        padding-right: calc(var(--spacing) * 8);
    }
}

@media (width >= 64rem) {
    .two-column-process__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Columns: one dark, one light, set by the "Dark column" field. */
.two-column-process__column {
    --tcp-text: var(--color-black);
    --tcp-circle-bg: var(--color-white);
    --tcp-circle-border: var(--color-neutral-200);
    --tcp-icon-filter: brightness(0);

    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 6);
    border-radius: var(--radius-2xl);
    background: var(--color-stone-50);
    border: 1px solid var(--color-neutral-200);
    color: var(--tcp-text);
    font-family: var(--font-sans);
}

.two-column-process__column--dark {
    --tcp-text: var(--color-white);
    --tcp-circle-bg: transparent;
    --tcp-circle-border: var(--color-cyan-500);
    --tcp-icon-filter: brightness(0) invert(1);

    background: linear-gradient(135deg, var(--tcp-navy-from) 0%, var(--tcp-navy-to) 100%);
    border-color: transparent;
}

@media (width >= 40rem) {
    .two-column-process__column {
        padding: calc(var(--spacing) * 10);
    }
}

@media (width >= 64rem) and (width < 80rem) {
    .two-column-process__column {
        padding: calc(var(--spacing) * 8) calc(var(--spacing) * 6);
    }
}

/* Eyebrow: same as the theme's "highlight" (text-cyan-500 text-sm mb-4). */
.two-column-process__highlight {
    margin-bottom: calc(var(--spacing) * 4);
    color: var(--color-cyan-500);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

/* Heading: same as the theme's section h2 (text-3xl font-normal mb-8). */
.two-column-process__heading {
    margin: 0 0 calc(var(--spacing) * 8);
    color: var(--tcp-text);
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: var(--font-weight-normal);
}

.two-column-process__heading strong,
.two-column-process__heading b {
    font-weight: var(--font-weight-bold);
}

.two-column-process__heading a {
    color: inherit;
    text-decoration: underline;
}

/* Circles row: always horizontal. Circles share the width evenly; the arrows sit in
   the gaps between them. On narrow screens the row scrolls sideways instead of stacking. */
.two-column-process__steps {
    --tcp-circle: calc(var(--spacing) * 14);
    --tcp-arrow: calc(var(--spacing) * 6);

    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--tcp-arrow);
    margin: auto 0 0;
    padding: 0 0 calc(var(--spacing) * 1);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Single column (sm–lg): full-size circles. Two narrower columns (lg–xl): a size
   down so four circles still fit. Wide screens (xl+): full size again. */
@media (width >= 40rem) {
    .two-column-process__steps {
        --tcp-circle: calc(var(--spacing) * 20);
        --tcp-arrow: calc(var(--spacing) * 8);
    }
}

@media (width >= 64rem) and (width < 80rem) {
    .two-column-process__steps {
        --tcp-circle: calc(var(--spacing) * 16);
        --tcp-arrow: calc(var(--spacing) * 6);
    }
}

.two-column-process__item {
    position: relative;
    flex: 1 1 0;
    min-width: min-content; /* never narrower than the circle or the longest word */
    max-width: calc(var(--spacing) * 36);
}

.two-column-process__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.two-column-process__circle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--tcp-circle);
    height: var(--tcp-circle);
    border-radius: 9999px;
    background: var(--tcp-circle-bg);
    border: 1px solid var(--tcp-circle-border);
}

.two-column-process__icon {
    width: 40%;
    height: 40%;
    object-fit: contain;
    filter: var(--tcp-icon-filter);
}

.two-column-process__label {
    margin-top: calc(var(--spacing) * 3);
    color: var(--tcp-text);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

/* Arrows sit in the gap after each circle, level with the circle centre. */
.two-column-process__arrow {
    position: absolute;
    top: 0;
    left: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tcp-arrow);
    height: var(--tcp-circle);
    color: var(--color-cyan-500);
}

.two-column-process__arrow svg {
    width: 100%;
    height: auto;
}