/* ==========================================================
   TIMELINE
   ----------------------------------------------------------
   A vertical rule with a year marker per entry, each entry a
   <details> panel that opens on click.

   Shared by our-story, Child Protection through LSBE and
   Banning Corporal Punishment, so every page using it pushes
   this file in @push('styles') alongside its own.
   ========================================================== */


/* ----------------------------------------------------------
   TIMELINE
   ----------------------------------------------------------
   A single vertical rule with a year marker per entry. Below
   576px every entry sits to the right of the rule; above it,
   entries alternate left and right.
   ---------------------------------------------------------- */
.timeline {
    list-style: none;
    padding: 20px 0;
    position: relative;
}

/* The vertical rule itself */
.timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 3px;
    margin-left: -1.5px;
    background-color: #d9d9d9;
}

.timeline > li {
    margin-bottom: 20px;
    position: relative;
    padding-left: 55px;
}

.timeline > li:after {
    content: "";
    display: table;
    clear: both;
}

/* The year marker */
.timeline > li > .icon {
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 1.2em;
    text-align: center;
    position: absolute;
    left: 20px;
    margin-left: -25px;
    color: #ff6015;
    background-color: #fafafa;
    border-radius: 50%;
    z-index: 999;
}

/* ----------------------------------------------------------
   TIMELINE PANELS
   ----------------------------------------------------------
   Each entry is a <details>: the <summary> is the headline and
   stays visible, the image and body open on click.

   This block has to come BEFORE the min-width media query
   below. Both set .panel's width at the same specificity, so
   whichever is written last wins — put it after and every entry
   stays full width instead of alternating.
   ---------------------------------------------------------- */
.timeline > li .panel {
    width: 100%;
    float: left;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 1px 2px 80px 0 rgba(0, 0, 0, 0.1);
}

.timeline > li .panel summary {
    display: block;
    user-select: none;
    outline: none;
    padding: 20px;
    margin-bottom: 0;
    font-weight: 600;
    cursor: pointer;
    transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-property: margin, background;
}

.timeline > li .panel summary::-webkit-details-marker {
    display: none;
}

.timeline > li .panel summary:hover {
    background: rgba(0, 0, 0, 0.1);
}

.timeline > li .panel[open] summary {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.timeline > li .panel p {
    padding: 0 20px 10px;
}

/* One picture band for every entry. The artwork runs from 547x295 to
   1600x917 — ratios of 1.40 to 2.78 — so at natural size each panel opened
   to a different height. object-fit crops to the band instead of stretching. */
.timeline > li .panel img,
.timeline > li .panel iframe {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border: 0;
}


/* ----------------------------------------------------------
   TIMELINE: two columns
   ----------------------------------------------------------
   Above 576px the rule moves to the middle of the page and the
   entries alternate either side of it. Below that they all sit
   to the right of a rule near the left edge.
   ---------------------------------------------------------- */
@media (min-width: 576px) {
    .timeline:before,
    .timeline > li > .icon {
        left: 50%;
    }

    .timeline > li {
        padding-left: 0;
    }

    .timeline > li .panel {
        width: 50%;
    }

    /* Odd entries to the left of the rule, even entries to the right */
    .timeline > li:not(:nth-child(even)) {
        padding-right: 90px;
    }

    .timeline > li:nth-child(even) {
        padding-left: 90px;
    }

    .timeline > li:nth-child(even) > :nth-child(even) {
        float: right;
    }
}


/* ----------------------------------------------------------
   PANEL BORDER
   ----------------------------------------------------------
   A two-colour border painted with a conic gradient. Where the
   browser supports Houdini custom properties it rotates; where
   it does not, it stays still, which is why --angle and
   --opacity are declared here as well as in @property.
   ---------------------------------------------------------- */
:root {
    --angle: 45deg;
    --opacity: 0.5;
}

.rainbow {
    --border-size: 0.1rem;
    border: var(--border-size) solid transparent;
    border-radius: 10px;
    margin: auto;
    text-align: center;
    border-image: conic-gradient(
            from var(--angle),
            #ff6015 0deg 90deg,
            #ff6015 90deg 180deg,
            #393369 180deg 270deg,
            #393369 270deg 360deg
        ) 1 stretch;
    background: rgb(255 255 255 / var(--opacity));
}

@supports (background: paint(houdini)) {
    @property --opacity {
        syntax: "<number>";
        initial-value: 0.5;
        inherits: false;
    }

    @property --angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }

    @keyframes opacityChange {
        to {
            --opacity: 1;
        }
    }

    @keyframes rotate {
        to {
            --angle: 360deg;
        }
    }

    .rainbow {
        animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
    }
}