/* --------------------------------------------
   Basic styles for Photo layout
----------------------------------------------- */

figure {
    margin: 0;
}
img { 
    width: 100%; 
    height: auto;
    display: block;
    border-radius: 1ch;
}
:root {
    view-transition-name: none;
}

/* --------------------------------------------
   Reduced-motion note for View Transitions
----------------------------------------------- */

.reduced-motion-note {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    body:has(option[value="eight"]:checked) .reduced-motion-note {
        display: block;
        position: fixed;
        bottom: 5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
        font-family: -apple-system, system-ui, sans-serif;
        font-size: 13px;
        line-height: 1.5;
        color: light-dark(#1d1d1f, #f5f5f7);
        background: light-dark(rgba(255, 255, 255, 0.75), rgba(40, 40, 40, 0.75));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.12));
        border-radius: 10px;
        padding: 0.6em 1.2em;
        margin: 0;
        max-width: min(32rem, calc(100vw - 2rem));
    }
}

/* --------------------------------------------
   Variations on the layout
----------------------------------------------- */

/* ---- Multicolumn layout ---- */
body:has(option[value="one"]:checked) main {
    columns: 12rem;
    column-gap: 1rem;
    /* bug revealed: https://bugs.webkit.org/show_bug.cgi?id=14137 */
    figure { margin-block-end: 1rem; }
}

/* ---- CSS Grid level 1 (without Masonry) ---- */
body:has(option[value="two"]:checked) main { /* before applying masonry */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    grid-template-rows: auto;
    gap: 1rem;
}
@media (max-width: 500px) {
    body:has(option[value="two"]:checked) main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Classic Masonry layout ---- */
body:has(option[value="three"]:checked) main {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}
@media (max-width: 768px) {
    body:has(option[value="three"]:checked) main {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    }
}
@media (max-width: 500px) {
    body:has(option[value="three"]:checked) main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- First & last columns fixed size ---- */
body:has(option[value="four"]:checked) main {
    display: grid-lanes;
    grid-template-columns: 10ch repeat(auto-fill, minmax(20ch, 1fr)) 10ch;
    gap: 1rem;
}
@media (max-width: 500px) {
    body:has(option[value="four"]:checked) main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Alternating narrow & wide column ---- */
body:has(option[value="five"]:checked) main {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(14rem, 2fr)) minmax(8rem, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) {
    body:has(option[value="five"]:checked) main {
        grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr) minmax(10rem, 2fr)) minmax(6rem, 1fr);
    }
}
@media (max-width: 500px) {
    body:has(option[value="five"]:checked) main {
        grid-template-columns: 1fr 2fr;
    }
}

/* ---- Fibonacci sequence ---- */
body:has(option[value="ten"]:checked) main {
    display: grid-lanes;
    grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr;
    gap: 1rem;
}
@media (max-width: 768px) {
    body:has(option[value="ten"]:checked) main {
        grid-template-columns: 1fr 1fr 2fr 3fr;
    }
}
@media (max-width: 500px) {
    body:has(option[value="ten"]:checked) main {
        grid-template-columns: 1fr 1fr 2fr;
    }
}

/* ---- Every 5th item is wider ---- */
body:has(option[value="six"]:checked) main {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(16ch, 1fr));
    gap: 1rem;
    .card:nth-child(5n) {
        grid-column: span 2;
    }
}
@media (max-width: 500px) {
    body:has(option[value="six"]:checked) main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Wide images are wider ---- */
body:has(option[value="seven"]:checked) main {
    background: color(display-p3 0.12 0.185 0.025);
    padding: 0;
    margin-block: calc(2vw + 1rem);
    margin-inline: calc(2vw + 1rem);
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(18ch, 1fr));
    figure:has(.wide) {
        grid-column: span 2;
    }
    img {
        border-radius: 0;
    }
}
@media (max-width: 500px) {
    body:has(option[value="seven"]:checked) main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Combined with View Transitions ---- */
body:has(option[value="eight"]:checked) {
    main {
        padding: 0;
        margin-block: calc(2vw + 1rem);
        margin-inline: calc(2vw + 1rem);
        display: grid-lanes;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        /* Clicking makes item enlarge + View Transition animations */
        /* idea borrowed from https://codepen.io/bramus/pen/zYmjaJq */
        .expanded {
            grid-column: 1 / -1;
            grid-row: 1;
        }
        .card {
            cursor: pointer;
            transition: transform 1s;
        }
        ::view-transition-group(*) {
            animation-duration: 0.5s; /* This is having no effect */
            overflow: hidden;
        }
        @media (prefers-reduced-motion: reduce) {
            ::view-transition-old(*),
            ::view-transition-new(*) {
                animation-duration: 0.01ms !important;
            }
        }
        ::view-transition-new(img-shrink) {
            display: none;
        }
        .card {
            view-transition-name: match-element;
        }
        img {
            border-radius: 0;
        }
    }
}
@media (max-width: 500px) {
    body:has(option[value="eight"]:checked) main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Horizontal Masonry ---- */
body:has(option[value="nine"]:checked),
body:has(option[value="twelve"]:checked),
body:has(option[value="thirteen"]:checked),
body:has(option[value="fourteen"]:checked) {
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    main {
        flex: 1;
        display: grid-lanes;
        gap: 1rem;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    img {
        width: auto;
        height: 100%;
    }
}

/* Brick — 5 rows */
body:has(option[value="nine"]:checked) main {
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

/* Brick — 3 rows */
body:has(option[value="twelve"]:checked) main {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

/* Brick — wide photos span 2 rows */
body:has(option[value="thirteen"]:checked) {
    main {
        grid-template-rows: repeat(5, minmax(0, 1fr));
    }
    figure:has(.wide) {
        grid-row: span 2;
    }
}

/* Brick — alternating row heights */
body:has(option[value="fourteen"]:checked) main {
    grid-template-rows: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
}

@media (max-width: 500px) {
    body:has(option[value="nine"]:checked) main {
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }
    body:has(option[value="twelve"]:checked) main {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }
    body:has(option[value="thirteen"]:checked) main {
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }
    body:has(option[value="fourteen"]:checked) main {
        grid-template-rows: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
    }
}


/* ---- Horizontal Flexbox ---- */
body:has(option[value="eleven"]:checked) {
    main {
        display: flex;
        flex-flow: row wrap;
        gap: 1rem;
    }
    figure {        
        flex: auto;
    }
    img {
        height: 200px;
        width: auto;
        min-width: 100%;
        object-fit: cover;
    }
}


/* --------------------------------------------
   Counters marking items (when enabled)
----------------------------------------------- */

body {
    counter-reset: item-counter 0;
}
figure {
    position: relative;
    counter-increment: item-counter;
}
body:has(input[type="checkbox"]:checked) {
    figure::before,
    figure::after {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.1em 0.5em 0.3em;
        border-radius: 0 1rch 0 0;
        min-width: 2ch;
        text-align: right;
    }
    figure::after {
        counter-increment: counter(item-counter);
        content: counter(item-counter);
        background: rgba(65, 83, 47, 0.65);
        color: white;
        font-size: 2rem;
    }
    figure::before {
        content: counter(item-counter);
        color: white;
        font-size: 2rem;
    }
}

body:has(option[value="seven"]:checked):has(input[type="checkbox"]:checked),
body:has(option[value="eight"]:checked):has(input[type="checkbox"]:checked) {
    figure::before,
    figure::after {
        border-radius: 0;
    }
}

body:has(option[value="ten"]:checked):has(input[type="checkbox"]:checked) {
    figure::after {
        font-size: 1.5rem;
    }
    figure::before {
        font-size: 1.5rem;
    } 
}