/* ==========================================================
   NUMBERED ARROW CARDS (.olcards)
   ----------------------------------------------------------
   An ordered list where each item is an arrow-shaped card
   carrying its own colour in --cardColor. The numbers come
   from a CSS counter, so the markup holds none.

   Shared by Past Projects and Banning Corporal Punishment, so
   every page using it pushes this file in @push('styles')
   alongside its own.
   ========================================================== */


/* ----------------------------------------------------------
   IMPACT: numbered arrow cards
   ----------------------------------------------------------
   Each card carries its own colour in --cardColor and is
   numbered by a counter, so the markup holds no numbers.
   ---------------------------------------------------------- */
.olcards,
.olcards * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.olcards {
    list-style: none;
    counter-reset: cardCount;
    display: flex;
    flex-direction: column;
    --cardsGap: 1rem;
    gap: var(--cardsGap);
    padding-bottom: var(--cardsGap);
}

.olcards li {
    counter-increment: cardCount;
    display: flex;
    color: white;
    --labelOffset: 1rem;
    --arrowClipSize: 1.5rem;
    margin-top: var(--labelOffset);
}

/* The number block, sitting proud of the card's top-left corner */
.olcards li:before {
    content: counter(cardCount, decimal-leading-zero);
    background: white;
    color: var(--cardColor);
    font-size: 2em;
    font-weight: 700;
    transform: translateY(calc(-1 * var(--labelOffset)));
    margin-right: calc(-1 * var(--labelOffset));
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 0.5em;
}

/* clip-path turns the right edge into an arrow head */
.olcards li .content {
    background-color: var(--cardColor);
    --inlinePadding: 1em;
    --boxPadding: 0.5em;
    display: grid;
    padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize))
             var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
    grid-template-areas:
        "icon title"
        "icon text";
    gap: 0.25em 1em;
    position: relative;
    clip-path: polygon(
        0 0,
        calc(100% - var(--arrowClipSize)) 0,
        100% 50%,
        calc(100% - var(--arrowClipSize)) 100%,
        calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
        0 calc(100% + var(--cardsGap))
    );
}

/* the little folded corner under the number */
.olcards li .content:before {
    content: "";
    position: absolute;
    width: var(--labelOffset);
    height: var(--labelOffset);
    background: var(--cardColor);
    left: 0;
    bottom: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    filter: brightness(0.75);
}

/* and the shadow it casts onto the card below */
.olcards li .content:after {
    content: "";
    position: absolute;
    height: var(--cardsGap);
    width: var(--cardsGap);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
    left: 0;
    top: 100%;
}

.olcards li .icon {
    grid-area: icon;
    align-self: center;
    font-size: 2em;
}

.olcards li .content .title {
    grid-area: title;
    font-size: 1.25em;
}

.olcards li .content .text {
    grid-area: text;
}