/*
    Components for content pages: image strip, cards, split and background
    sections (shortcodes imgstrip, cards/card, split, bgsection).
    The slanted edges pick up the shape of the KaOs logo.
*/

/* Slanted image strip */

.kaos-strip
{
    display:        flex;
    margin:         1.5em 0 2em;
    padding:        0 1.5%;
}

.kaos-strip figure
{
    flex:           1 1 0;
    height:         220px;
    margin:         0 -0.6%;
    overflow:       hidden;
    clip-path:      polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.kaos-strip img
{
    width:          100%;
    height:         100%;
    object-fit:     cover;
    filter:         grayscale(0.35);
    transition:     filter 0.3s linear, transform 0.4s ease;
}

.kaos-strip figure:hover img
{
    filter:         none;
    transform:      scale(1.05);
}

/* Cards */

.kaos-cards
{
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.5em;
    margin:                1em 0 2em;
}

.kaos-card
{
    position:         relative;
    overflow:         hidden;
    background-color: #ffffff;
    border-bottom:    3px solid #9b1142;
}

.kaos-card-img
{
    height:              180px;
    background-size:     cover;
    background-position: center;
    clip-path:           polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

.kaos-card-body
{
    position: relative;
    padding:  0.5em 1.5em 1.25em;
}

.typography .kaos-card h2
{
    margin:      0 0 0.3em;
    line-height: 1.4;
}

.typography .kaos-card h2 a
{
    color:           inherit;
    text-decoration: none;
}

.typography .kaos-card h2 a:hover
{
    color: #9b1142;
}

.typography .kaos-card-meta
{
    margin:    -0.3em 0 0.6em;
    color:     #9b1142;
    font-size: 0.9em;
}

.kaos-card-plain .kaos-card-body
{
    padding-top: 1.25em;
}

/* Linked card: arrow button at the bottom right, cards in a row line up */

.kaos-card
{
    display:        flex;
    flex-direction: column;
}

.kaos-card-body
{
    flex:           1 1 auto;
    display:        flex;
    flex-direction: column;
}

.typography .kaos-card-more,
.typography .kaos-card-more:visited
{
    align-self:       flex-end;
    margin-top:       auto;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            2.2em;
    height:           2.2em;
    border:           1px solid #9b1142;
    border-radius:    50%;
    font-size:        1.1em;
    line-height:      1;
    text-decoration:  none;
    color:            #9b1142;
    transition:       color 0.2s linear, background-color 0.2s linear, transform 0.2s ease;
}

.typography .kaos-card-more:hover,
.kaos-card:hover .kaos-card-more
{
    background-color: #9b1142;
    color:            #ffffff;
    transform:        translateX(3px);
}

/* Three per row */

.kaos-cards-3
{
    grid-template-columns: repeat(3, 1fr);
}

.kaos-cards-3 .kaos-card-img
{
    height: 150px;
}

.kaos-cards-3 .kaos-card-body
{
    padding: 0.5em 1.25em 1em;
}

/* With two per row, an odd last card takes the full width */

.kaos-cards:not(.kaos-cards-3) > .kaos-card:last-child:nth-child(odd)
{
    grid-column: 1 / -1;
}

/* Card with a faint photo behind the text */

.kaos-card-faded::before
{
    content:             "";
    position:            absolute;
    inset:               0;
    background-image:    var(--bg);
    background-size:     cover;
    background-position: center;
    opacity:             0.08;
    filter:              grayscale(1) brightness(1.3);
}

.kaos-card-faded .kaos-card-body
{
    padding-top: 1.25em;
}

/* Text beside a photo of the same height */

.kaos-split
{
    display:          flex;
    margin:           0.5em 0 1em;
    background-color: #ffffff;
}

.kaos-split-text
{
    flex:    3 1 0;
    padding: 1em 1.5em;
}

.kaos-split-img
{
    flex:                2 1 0;
    min-height:          240px;
    background-size:     cover;
    background-position: center;
    clip-path:           polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}

/* Section with a faint background photo */

.kaos-bgsection
{
    position: relative;
    margin:   1.5em 0 1em;
    padding:  1.5em 2em;
}

.kaos-bgsection::before
{
    content:             "";
    position:            absolute;
    inset:               0;
    background-image:    linear-gradient(to right, #f7f7f7 35%, rgba(247, 247, 247, 0.75)), var(--bg);
    background-size:     cover;
    background-position: center;
    filter:              grayscale(1);
    z-index:             0;
}

.kaos-bgsection > *
{
    position: relative;
}

/* Two-column list */

.typography ul.kaos-cols
{
    columns:       2;
    column-gap:    2em;
    margin-top:    0.75em;
    margin-bottom: 1.5em;
}

.typography ul.kaos-cols li
{
    break-inside: avoid;
}

/* Publications: one white entry per paragraph, links as small buttons */

.kaos-pubs
{
    margin: 0.5em 0 1.5em;
}

.typography .kaos-pubs p
{
    margin:           0 0 0.75em;
    padding:          0.75em 1.25em;
    background-color: #ffffff;
    border-left:      3px solid #9b1142;
}

.typography .kaos-pubs p strong
{
    display:     block;
    font-weight: 400;
    color:       #1f1f1f;
}

.typography .kaos-pubs a,
.typography .kaos-pubs a:visited
{
    display:          inline-block;
    margin-left:      0.25em;
    padding:          0 0.6em;
    border:           1px solid #9b1142;
    border-radius:    2px;
    font-size:        0.85em;
    line-height:      1.6;
    text-decoration:  none;
    color:            #9b1142;
    transition:       color 0.2s linear, background-color 0.2s linear;
}

.typography .kaos-pubs a:hover
{
    background-color: #9b1142;
    color:            #ffffff;
}

/* Figure (e.g. a diagram) in a white box */

.typography .kaos-figure
{
    margin:           1.5em 0;
    padding:          1em;
    background-color: #ffffff;
    text-align:       center;
}

.kaos-figure img
{
    max-width: 100%;
    height:    auto;
}

/* Timeline: year markers on the left, entries on a vertical line */

.kaos-timeline
{
    margin: 1em 0 2em;
}

.typography .kaos-timeline h1
{
    float:       left;
    clear:       left;
    width:       4.5rem;
    margin:      0;
    font-size:   1.3em;
    line-height: 1.6;
    color:       #9b1142;
}

.typography .kaos-timeline ul
{
    margin:       0 0 0 5.5rem;
    padding:      0 0 1.25em 1.5em;
    border-left:  2px solid #e7e7e7;
    position:     relative;
}

.typography .kaos-timeline ul::before
{
    content:          "";
    position:         absolute;
    top:              0.55em;
    left:             -6px;
    width:            10px;
    height:           10px;
    border-radius:    50%;
    background-color: #9b1142;
}

.typography .kaos-timeline li
{
    margin-bottom: 0.3em;
}

/* Profile: portrait beside a white text box */

.kaos-profile
{
    display:     flex;
    align-items: flex-start;
    gap:         2.5em;
    margin:      1.5em 0 2.5em;
}

.kaos-profile-photo
{
    position:     relative;
    flex:         0 0 210px;
    aspect-ratio: 3 / 4;
}

.kaos-profile-photo img
{
    position:   relative;
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    filter:     grayscale(0.4) contrast(1.05);
    transition: filter 0.3s linear;
}

.kaos-profile:hover .kaos-profile-photo img
{
    filter: none;
}

.kaos-profile-text
{
    flex:             1 1 auto;
    padding:          1.25em 1.5em;
    background-color: #ffffff;
    border-bottom:    3px solid #9b1142;
}

.typography .kaos-profile-text h2
{
    margin:      0 0 0.3em;
    line-height: 1.4;
}

/* Contact details */

.typography .kaos-fingerprint
{
    font-family:    "DejaVu Sans Mono", Consolas, monospace;
    font-size:      0.8em;
    font-weight:    400;
    letter-spacing: 0.03em;
    word-spacing:   0.2em;
    color:          #1f1f1f;
}


/* Photo grid: three equal photos per row */

.kaos-mosaic
{
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   6px;
    margin:                1.5em 0.5cm 2em;
}

.kaos-mosaic figure
{
    margin:       0;
    aspect-ratio: 4 / 3;
    overflow:     hidden;
}

.kaos-mosaic img
{
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* Four per row */

.kaos-cards-4
{
    grid-template-columns: repeat(4, 1fr);
}

.kaos-cards-4 .kaos-card-body
{
    padding: 1em 1.25em;
}

/* Text link with the arrow button, e.g. "all events" */

.typography .kaos-more,
.typography .kaos-more:visited
{
    display:         inline-flex;
    align-items:     center;
    gap:             0.6em;
    text-decoration: none;
    color:           #3f3f3f;
}

.typography .kaos-more .kaos-card-more
{
    margin: 0;
}

.typography .kaos-more:hover .kaos-card-more
{
    background-color: #9b1142;
    color:            #ffffff;
    transform:        translateX(3px);
}

/* Home page events: labels above upcoming and past events */

#events .kaos-events-label
{
    margin:         1.5em 0 0.25em;
    font-size:      0.9em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          #9b1142;
}

#main .section.kaos-events
{
    padding-top: 1em;
}

#events .row:first-child .kaos-events-label
{
    margin-top: 0;
}

#events .kaos-events-more
{
    margin-top: 1.5em;
    text-align: right;
}

/* Medium screens */

@media only screen and (max-width: 959px)
{
    .kaos-cards-3 { grid-template-columns: 1fr 1fr; }
    .kaos-cards-4 { grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 767px)
{
    .kaos-cards-3 { grid-template-columns: 1fr; }
    .kaos-cards-4 { grid-template-columns: 1fr; }
    .kaos-mosaic { grid-template-columns: 1fr 1fr; }
    .kaos-profile { flex-direction: column; align-items: center; gap: 1.5em; }
    .kaos-profile-photo { flex-basis: auto; width: 180px; }
    .kaos-profile-text { align-self: stretch; }
    .typography .kaos-timeline h1 { float: none; width: auto; }
    .typography .kaos-timeline ul { margin-left: 0.5em; }
    .kaos-strip figure:nth-child(n+4) { display: none; }
    .kaos-strip figure { height: 150px; }
    .kaos-cards { grid-template-columns: 1fr; }
    .kaos-split { flex-direction: column-reverse; }
    .kaos-split-img { min-height: 180px; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
    .kaos-bgsection { padding: 1em; }
    .typography ul.kaos-cols { columns: 1; }
}