/**
 * [application_timeline] — Learning Community application process timeline.
 *
 * Typography + icon colour are wired to Elementor global variables:
 *   Title (h3)   → "Body L Semibold"  --e-global-typography-28f115e-*
 *   Description  → "Body S Regular"   --e-global-typography-3653ff9-*
 *   Date + prefix→ "Body XS Regular"  --e-global-typography-dc1bbb2-*
 *   Date icon    → "New Primary Blue" --e-global-color-fccf815
 *
 * Non-global design tokens are exposed as local custom properties on `.fl-at`
 * below so they are easy to tweak in one place.
 */

.fl-at {
    /* --- tunable tokens (not Elementor globals) --- */
    --flt-circle: 48px;                 /* step number circle diameter          */
    --flt-circle-bg: #D9E7FF;           /* step circle background (per spec)     */
    --flt-circle-color: #1a1a1a;        /* step number colour                    */
    --flt-line: #E4E4E4;                /* vertical connector line               */
    --flt-ring-color: #E4E4E4;          /* hairline ring around the step circle  */
    --flt-date-border: #E4E4E4;         /* date pill border                      */
    --flt-icon: var(--e-global-color-fccf815); /* calendar icon = New Primary Blue */

    --flt-col-gap: 48px;                /* gap between the two columns           */
    --flt-row-gap: 28px;                /* vertical gap between steps            */
    --flt-marker-gap: 16px;             /* gap between circle and text           */
}

.fl-at,
.fl-at * {
    box-sizing: border-box;
}

/* ---------- layout ---------- */

.fl-at__cols {
    display: grid;
    grid-template-columns: repeat(var(--flt-cols, 2), minmax(0, 1fr));
    column-gap: var(--flt-col-gap);
    row-gap: var(--flt-row-gap);
}

.fl-at__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--flt-circle) 1fr;
    column-gap: var(--flt-marker-gap);
    align-items: start;
}

.fl-at__item + .fl-at__item {
    margin-top: var(--flt-row-gap);
}

/* connector line: runs from this step's circle down to the next step's circle */
.fl-at__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--flt-circle) / 2 - 1px);
    top: var(--flt-circle);
    height: calc(100% - var(--flt-circle) + var(--flt-row-gap));
    width: 2px;
    background: var(--flt-line);
    z-index: 0;
}

/* ---------- marker ---------- */

.fl-at__marker {
    position: relative;
    z-index: 1;
}

.fl-at__circle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--flt-circle);
    height: var(--flt-circle);
    border-radius: 50%;
    background: var(--flt-circle-bg);
    color: var(--flt-circle-color);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 1;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--flt-ring-color);
}

/* ---------- content ---------- */

.fl-at__content {
    min-width: 0;
}

.fl-at__title {
    display: flex;
    align-items: center;              /* vertically centre title against the circle */
    min-height: var(--flt-circle);
    margin: 0 0 8px;
    color: inherit;
    font-family: var(--e-global-typography-28f115e-font-family);
    /* !important: Elementor's H3 kit style otherwise wins the cascade */
    font-size: var(--e-global-typography-28f115e-font-size) !important;
    font-weight: var(--e-global-typography-28f115e-font-weight) !important;
    line-height: var(--e-global-typography-28f115e-line-height);
    letter-spacing: var(--e-global-typography-28f115e-letter-spacing);
    text-transform: var(--e-global-typography-28f115e-text-transform);
}

.fl-at__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 7px 12px;
    border: 1px solid var(--flt-date-border);
    border-radius: 10px;
    font-family: var(--e-global-typography-dc1bbb2-font-family);
    font-size: var(--e-global-typography-dc1bbb2-font-size);
    font-weight: var(--e-global-typography-dc1bbb2-font-weight);
    line-height: var(--e-global-typography-dc1bbb2-line-height);
    letter-spacing: var(--e-global-typography-dc1bbb2-letter-spacing);
}

.fl-at__cal {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--flt-icon);
}

.fl-at__desc {
    font-family: var(--e-global-typography-3653ff9-font-family);
    font-size: var(--e-global-typography-3653ff9-font-size);
    font-weight: var(--e-global-typography-3653ff9-font-weight);
    line-height: var(--e-global-typography-3653ff9-line-height);
    letter-spacing: var(--e-global-typography-3653ff9-letter-spacing);
}

.fl-at__desc p {
    margin: 0 0 0.6em;
}

.fl-at__desc p:last-child {
    margin-bottom: 0;
}

.fl-at__desc a {
    color: #1A5CCC !important;
    text-decoration: underline;
}

/* editor-only empty-state note */
.fl-at-empty {
    padding: 12px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    font-size: 14px;
}

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

@media (max-width: 767px) {
    .fl-at__cols {
        grid-template-columns: 1fr;
    }

    /* stacked columns: connect the last step of a column to the first of the next */
    .fl-at__col:not(:last-child) .fl-at__item:last-child::before {
        content: "";
        position: absolute;
        left: calc(var(--flt-circle) / 2 - 1px);
        top: var(--flt-circle);
        height: calc(100% - var(--flt-circle) + var(--flt-row-gap));
        width: 2px;
        background: var(--flt-line);
        z-index: 0;
    }
}