/**
 * TT Process Step Styles - Style 1
 * Elegant process step with stroke numbers
 *
 * @package TT_Elementor_Flux
 * @since 1.0.0
 */

/* Import Google Fonts - matching demo */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab&display=swap');

/* Process Step Wrapper */
.tt-flux-tt-process-step {
    width: 100%;
    box-sizing: border-box;
}

.tt-flux-tt-process-step *,
.tt-flux-tt-process-step *::before,
.tt-flux-tt-process-step *::after {
    box-sizing: border-box;
}

/* Process Steps Container - matching demo padding */
.tt-flux-tt-process-step .tt-process-steps {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    box-sizing: border-box;
}

/* Style 1 Specific Styles - Grid layout for all screen sizes */
.tt-flux-tt-process-step .tt-process-style-1 {
    display: grid;
    width: 100%;
    /* Default 2 columns, overridden by data-columns attribute */
    grid-template-columns: repeat(2, 1fr);
}

/* Individual Step Item */
.tt-flux-tt-process-step .tt-process__item {
    user-select: none;
    text-align: center;
    position: relative;
    padding: 15px 35px;
    transition: 0.4s ease-in-out;
    width: 100%;
    min-width: 0; /* Prevent grid overflow */
}

.tt-flux-tt-process-step .tt-process__item:hover {
    background: #f2f2f2;
}

.tt-flux-tt-process-step .tt-process__item:hover .tt-process__number {
    transform: translateY(5px);
    color: var(--tt-process-primary-color, #003c71);
}

/* Link Wrapper */
.tt-flux-tt-process-step .tt-process__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Step Number - Stroke Style - line-height removed to match demo */
.tt-flux-tt-process-step .tt-process__number {
    font-size: 90px;
    -webkit-text-stroke: 1px var(--tt-process-primary-color, #003c71);
    display: block;
    color: transparent;
    font-family: "Roboto Condensed";
    font-weight: 700;
    transition: 0.4s ease-in-out;
}

/* Step Title - line-height removed to match demo */
.tt-flux-tt-process-step .tt-process__title {
    display: block;
    font-family: "Roboto Condensed";
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 35px;
    color: var(--tt-process-primary-color, #003c71);
    text-transform: uppercase;
    margin-top: 30px;
}

/* Step Subtitle */
.tt-flux-tt-process-step .tt-process__subtitle {
    display: block;
    font-family: "Josefin Slab";
    font-size: 20px;
    color: var(--tt-process-text-color, #8c8c8c);
    margin-top: 30px;
    line-height: 1.5;
}

/* Column-based grid layouts - applied to all screen sizes */
.tt-flux-tt-process-step .tt-process-style-1[data-columns="1"] {
    grid-template-columns: repeat(1, 1fr);
}
.tt-flux-tt-process-step .tt-process-style-1[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}
.tt-flux-tt-process-step .tt-process-style-1[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}
.tt-flux-tt-process-step .tt-process-style-1[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}
.tt-flux-tt-process-step .tt-process-style-1[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}
.tt-flux-tt-process-step .tt-process-style-1[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
}

/* Divider lines - show on all items except last */
.tt-flux-tt-process-step .tt-process__item::after {
    content: "";
    width: 1px;
    height: 75%;
    background: var(--tt-process-divider-color, #8c8c8c);
    opacity: 0.2;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Hide divider for last item */
.tt-flux-tt-process-step .tt-process__item--last::after {
    display: none;
}

/* Mobile Responsive - Adjust font sizes only, keep grid layout */
@media (max-width: 767px) {
    .tt-flux-tt-process-step .tt-process__item {
        padding: 20px;
    }

    .tt-flux-tt-process-step .tt-process__number {
        font-size: 60px;
    }

    .tt-flux-tt-process-step .tt-process__title {
        font-size: 24px;
        margin-top: 20px;
    }

    .tt-flux-tt-process-step .tt-process__subtitle {
        font-size: 16px;
        margin-top: 15px;
    }
}

/* Small Mobile - Further reduce font sizes */
@media (max-width: 480px) {
    .tt-flux-tt-process-step .tt-process__number {
        font-size: 48px;
    }

    .tt-flux-tt-process-step .tt-process__title {
        font-size: 20px;
    }

    .tt-flux-tt-process-step .tt-process__subtitle {
        font-size: 14px;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .tt-flux-tt-process-step .tt-process__item,
    .tt-flux-tt-process-step .tt-process__number {
        transition: none;
    }

    .tt-flux-tt-process-step .tt-process__item:hover .tt-process__number {
        transform: none;
    }
}

/* RTL Support */
[dir="rtl"] .tt-flux-tt-process-step .tt-process__item:not(.tt-process__item--last)::after {
    right: auto;
    left: 0;
}