/**
 * Timeline widget.
 *
 * One markup, two directions. Wide: each milestone is a three-row grid - image,
 * rail, text - and the rails of neighbouring milestones line up into a single
 * horizontal line. Narrow: the same grid becomes two columns, rail on the side,
 * and the line runs vertically through the whole list.
 *
 * The switch is a container query, not a media query, so the timeline reacts to
 * the width it actually gets (a narrow column stacks too) and the threshold
 * survives a change of Elementor's breakpoints.
 *
 * Every value an editor can set arrives as a custom property from the panel;
 * the fallbacks below are the design defaults.
 */

.am-kit-timeline {
    --am-tl-columns: 3;
    --am-tl-column-gap: 32px;
    --am-tl-row-gap: 40px;
    --am-tl-item-gap: 16px;
    --am-tl-text-align: center;
    --am-tl-media-max-width: 300px;
    --am-tl-media-height: 176px;
    --am-tl-line-width: 1px;
    --am-tl-line-color: #b9ab93;
    --am-tl-marker-size: 40px;
    --am-tl-marker-gap: 12px;
    --am-tl-marker-color: #4a3931;
    --am-tl-title-spacing: 12px;

    /*
     * Ring of the marker. Not exposed in the panel - the design asks for one
     * hairline ring and three controls (colour, gap, width) are enough to drive
     * the marker, so this stays a constant of the look.
     */
    --am-tl-marker-ring-width: 2px;

    /* Breathing room between the end of a line segment and the marker ring. */
    --am-tl-line-gap: 8px;

    /*
     * The outer element is only the query container - a container query styles
     * the descendants of its container, never the container itself, so the grid
     * has to live one level down in .am-kit-timeline__list.
     */
    container-type: inline-size;
    container-name: am-timeline;
}

.am-kit-timeline__list {
    display: grid;
    grid-template-columns: repeat(var(--am-tl-columns), minmax(0, 1fr));
    /*
     * No column gap on purpose: the rail row has to reach the neighbouring
     * milestone for the line to read as one, so the horizontal spacing is
     * carried by the padding of the image and text cells instead.
     */
    column-gap: 0;
    row-gap: var(--am-tl-row-gap);
}

.am-kit-timeline__item {
    display: grid;
    grid-template-areas:
        "media"
        "rail"
        "body";
    /*
     * Items of a row are stretched to the tallest one, and a grid spreads that
     * extra height over its auto rows - so a milestone with a shorter text
     * would push its rail down and break the line. Packing the rows at the top
     * keeps the rail at image height + gap on every milestone, whatever the
     * text length.
     */
    align-content: start;
    row-gap: var(--am-tl-item-gap);
    min-width: 0;
}

.am-kit-timeline__media,
.am-kit-timeline__body {
    padding-inline: calc(var(--am-tl-column-gap) / 2);
    min-width: 0;
}

/* Image and text follow the same alignment control. */
.am-kit-timeline__media {
    grid-area: media;
    margin: 0;
    min-height: var(--am-tl-media-height);
    text-align: var(--am-tl-text-align);
}

/*
 * The image is served at its original size and only held back by max-width, so
 * a 300px slot still gets a sharp picture on a high-density screen.
 */
.am-kit-timeline__media img {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: var(--am-tl-media-max-width);
    height: var(--am-tl-media-height);
    object-fit: cover;
}

.am-kit-timeline__rail {
    grid-area: rail;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--am-tl-marker-size);
}

/*
 * Two segments, not one line behind the marker: the gap inside the marker is
 * transparent, so a line crossing it would show through the ring.
 * ::before runs up to the marker, ::after leaves it.
 */
.am-kit-timeline__rail::before,
.am-kit-timeline__rail::after {
    content: "";
    position: absolute;
    top: 50%;
    height: var(--am-tl-line-width);
    background-color: var(--am-tl-line-color);
    transform: translateY(-50%);
}

.am-kit-timeline__rail::before {
    inset-inline-start: 0;
    inset-inline-end: calc(50% + var(--am-tl-marker-size) / 2 + var(--am-tl-line-gap));
}

.am-kit-timeline__rail::after {
    inset-inline-start: calc(50% + var(--am-tl-marker-size) / 2 + var(--am-tl-line-gap));
    inset-inline-end: 0;
}

/*
 * The line spans marker to marker, so it does not stick out past the outer
 * milestones. Dropped on the first and last milestone only, which is what the
 * design asks for on a single row; a wrapped second row keeps the full width.
 */
.am-kit-timeline__item:first-child .am-kit-timeline__rail::before,
.am-kit-timeline__item:last-child .am-kit-timeline__rail::after {
    content: none;
}

/* Ring, transparent gap, centre dot - the gap is the untouched background. */
.am-kit-timeline__marker {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--am-tl-marker-size);
    height: var(--am-tl-marker-size);
    border: var(--am-tl-marker-ring-width) solid var(--am-tl-marker-color);
    border-radius: 50%;
    background-color: transparent;
}

/*
 * The gap is measured from the outer edge inwards, so the dot is what is left:
 * a 40px marker with a 12px gap leaves a 16px dot, as in the design.
 */
.am-kit-timeline__marker::before {
    content: "";
    width: calc(var(--am-tl-marker-size) - 2 * var(--am-tl-marker-gap));
    height: calc(var(--am-tl-marker-size) - 2 * var(--am-tl-marker-gap));
    border-radius: 50%;
    background-color: var(--am-tl-marker-color);
}

.am-kit-timeline__body {
    grid-area: body;
    text-align: var(--am-tl-text-align);
}

.am-kit-timeline__title {
    margin: 0 0 var(--am-tl-title-spacing);
}

.am-kit-timeline__text > p:first-child {
    margin-top: 0;
}

.am-kit-timeline__text > p:last-child {
    margin-bottom: 0;
}

/* Stacked: rail moves to the side and runs vertically through the list. */
@container am-timeline (max-width: 768px) {

    .am-kit-timeline__list {
        grid-template-columns: minmax(0, 1fr);
        /* The vertical line must not be cut between milestones, so the row
           spacing moves into the text cell. */
        row-gap: 0;
    }

    .am-kit-timeline__item {
        grid-template-areas:
            "rail media"
            "rail body";
        grid-template-columns: var(--am-tl-marker-size) minmax(0, 1fr);
        gap: var(--am-tl-item-gap);

        /* Distance that centres the marker on the image beside it. */
        --am-tl-marker-offset: calc((var(--am-tl-media-height) - var(--am-tl-marker-size)) / 2);
    }

    /* No image to centre on: the marker lines up with the title instead. */
    .am-kit-timeline__item:has(> .am-kit-timeline__media:empty) {
        --am-tl-marker-offset: 0px;
    }

    .am-kit-timeline__media,
    .am-kit-timeline__body {
        padding-inline: 0;
    }

    /* Nothing to keep level once stacked, so a milestone without an image
       drops the empty cell instead of leaving a hole. */
    .am-kit-timeline__media:empty {
        display: none;
    }

    .am-kit-timeline__item:not(:last-child) .am-kit-timeline__body {
        padding-block-end: var(--am-tl-row-gap);
    }

    .am-kit-timeline__rail {
        align-items: flex-start;
        padding-block-start: var(--am-tl-marker-offset);
    }

    /*
     * Same two segments as the horizontal rail, turned a quarter: ::before
     * runs from the top of the cell down to the marker, ::after from the
     * marker to the bottom of the cell, where the next milestone's ::before
     * takes over. The first and last milestone drop their outer segment
     * through the rule shared with the horizontal layout.
     */
    .am-kit-timeline__rail::before,
    .am-kit-timeline__rail::after {
        inset-inline: 50%;
        width: var(--am-tl-line-width);
        height: auto;
        transform: translateX(-50%);
    }

    .am-kit-timeline__rail::before {
        top: 0;
        bottom: calc(100% - var(--am-tl-marker-offset) + var(--am-tl-line-gap));
    }

    .am-kit-timeline__rail::after {
        top: calc(var(--am-tl-marker-offset) + var(--am-tl-marker-size) + var(--am-tl-line-gap));
        bottom: 0;
    }

    /* A next marker at the very top of its cell leaves no room for the gap on
       its own side, so this segment keeps it instead. */
    .am-kit-timeline__item:has(+ .am-kit-timeline__item > .am-kit-timeline__media:empty) .am-kit-timeline__rail::after {
        bottom: var(--am-tl-line-gap);
    }
}