/* Blog: highlighted posts one at a time in a large window between the arrows, the latest posts as a list below.
   The window, the pixel arrows and the "screen" frame come from portfolio.css. */

/* ---------- Section headings ---------- */
.section_title {
    display: flex;
    align-items: center;
    gap: 14px;
    width: var(--column);
    margin: var(--space-section) auto 0;
    font-size: var(--fs-h2);
}

/* The first section starts at the same distance below the nav as the content of every other page */
.section_title:first-of-type {
    margin-top: var(--page-top);
}

/* Pixel marker, like the one above the current tab in the phone tab bar */
.section_title::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background-color: var(--color-border);
    box-shadow: 3px 3px 0 var(--color-shadow);
}

.section_title + .project,
.section_title + .hl_window,
.section_title + .post_list {
    margin-top: 16px;
}

/* ---------- Category and date ---------- */
.post_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 16px;
    font-size: var(--fs-small);
}

/* Same chip as the tags on the portfolio and the résumé, in blue: the category is the post's marker */
.post_category {
    padding: 2px 12px;
    line-height: var(--lh-chip);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-border);
    font-size: var(--fs-chip);
}

.post_date {
    align-self: flex-start;
    /* The digits start a quarter of the font size below the top of the text box (room the font keeps for
       taller letters), so the box moves up by that much: the digits then start level with the category frame */
    margin-top: -0.25em;
    color: var(--color-secondary);
}

/* ---------- Latest: the whole window is the link ---------- */
.post_list {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap);
    width: var(--column);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.post_card {
    container-type: inline-size;  /* on phones the picture takes its height from the card's width (cqw) */
    display: grid;
    grid-template-columns: 256px 1fr;
    align-items: start;  /* category, date, title and text start at the top edge of the picture */
    gap: var(--space-gap);
    padding: var(--panel-inset);
    border: 2px solid var(--color-line);
    border-radius: 12px;
    background-color: var(--color-card);
    box-shadow: var(--shadow-hard);
    color: var(--color-text-soft);
    text-decoration: none;
    /* Moved with top/left instead of translate: while Firefox animates translate it draws the text slightly
       differently, so the text seemed to move faster than the box. top/left is drawn like a still box. */
    position: relative;
    top: 0;
    left: 0;
    transition: top 0.12s steps(2), left 0.12s steps(2), box-shadow 0.12s steps(2);  /* stepped, like the buttons */
}

.post_thumb {
    box-sizing: border-box;
    height: 192px;  /* 4:3 of the 256px column */
    overflow: hidden;
    border: 2px solid var(--color-line);
    border-radius: 8px;
    background-color: var(--color-screen);
}

.post_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.post_card h3 {
    overflow-wrap: anywhere;
}

/* Two lines of the excerpt, then "…" */
.post_card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--fs-text);
    line-height: var(--lh-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.read_more {
    display: inline-block;
    line-height: var(--lh-text);
    margin-top: 16px;
    color: var(--color-border);
    font-size: var(--fs-text);
}

@media (hover: hover) {
    .post_card:hover {
        top: -2px;
        left: -2px;
        box-shadow: var(--shadow-hard-hover);
    }

    .post_card:hover .read_more,
    .big_card:hover .read_more {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

.post_card:active {
    top: 2px;
    left: 2px;
    box-shadow: var(--shadow-hard-active);
}

.post_card:focus-visible {
    outline: 2px solid var(--color-border);
    outline-offset: 4px;
}

/* ---------- Highlight: a row of posts that scrolls sideways ----------
   The arrows are buttons (script at the end of the page); on touch screens the row is swiped. */
.hl_window {
    position: relative;
    display: flow-root;  /* the row's negative margins stay inside, so the window's own edges are the cards' */
    max-width: calc(1200px + 2 * 64px);  /* the cards line up with the headings, the arrows sit beside them */
    padding: 0 64px;                      /* room for the arrows */
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.hl_track {
    display: grid;
    grid-auto-flow: column;
    gap: var(--space-gap);
    margin: 0;
    padding: 4px 8px 10px 4px;  /* the cards' hard shadows and hover lift stay visible */
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

/* The row's inner padding (room for the shadows and the hover lift) moves outwards, so the cards' edges
   sit on the grid like every other panel (on phones the row runs to the screen edges instead) */
@media screen and (min-width: 601px) {
    .hl_track {
        margin: -4px -8px -10px -4px;
    }
}

.hl_track::-webkit-scrollbar {
    display: none;
}

.hl_track li {
    display: flex;
    scroll-snap-align: start;
}

/* Same pixel arrows as the image slider on the portfolio page, as real buttons */
.hl_window .arrow {
    padding: 0;
    border: 0;
    background: none;
}

.hl_window .arrow.prev {
    left: 10px;
}

.hl_window .arrow.next {
    right: 10px;
}

.hl_window .arrow:disabled {
    opacity: 0.25;
    cursor: default;
    transform: none;
}

.hl_window .arrow:focus-visible {
    outline: 2px solid var(--color-border);
    outline-offset: 2px;
}

/* Phones: swipe instead of arrows; the next card peeks in at the edge */
@media screen and (max-width: 600px) {
    /* The row runs to the screen edges; the first card still lines up with the heading */
    .hl_window {
        width: 100%;
        padding: 0;
    }

    .hl_window .arrow {
        display: none;
    }

    /* The first card starts at the content column, like the heading above it */
    .hl_track {
        gap: 16px;
        padding-top: 0;  /* no hover lift on touch screens: the cards start right at the row's top edge */
        padding-bottom: 16px;  /* room for the 4px phone shadow, on the 16px grid */
        padding-left: calc((100% - var(--column)) / 2);
        padding-right: calc((100% - var(--column)) / 2);
        scroll-padding-left: calc((100% - var(--column)) / 2);
    }
}

/* ---------- Highlight: arrows and window together are as wide as the heading ----------
   The arrows stay left and right of the window, the window is narrower to make room for them */
.hl_window.hl_inset {
    max-width: none;  /* as wide as the content column (--column) */
}

/* The drawn arrows line up exactly with the left and right edges of the Latest windows below */
.hl_window.hl_inset .arrow.prev {
    left: 0;
    justify-items: start;
}

.hl_window.hl_inset .arrow.next {
    right: 0;
    justify-items: end;
}

/* ---------- Highlight, big: one post per view, picture left, text right ---------- */
.hl_big .hl_track {
    grid-auto-columns: 100%;
}

.big_card {
    container-type: inline-size;  /* the picture takes its size from the card's width (cqw) */
    display: flex;
    flex: 1;
    align-items: flex-start;  /* category, title and text start at the top edge of the picture */
    gap: var(--space-gap);
    padding: var(--panel-inset);
    border: 2px solid var(--color-line);
    border-radius: 12px;
    background-color: var(--color-card);
    box-shadow: var(--shadow-hard);
    color: var(--color-text-soft);
    text-decoration: none;
    position: relative;  /* moved with top/left, see .post_card */
    top: 0;
    left: 0;
    transition: top 0.12s steps(2), left 0.12s steps(2), box-shadow 0.12s steps(2);
}

/* Same black "screen" frame as the screenshots on the portfolio page */
.big_img {
    box-sizing: border-box;
    flex: 0 0 round(down, 45cqw, 16px);
    height: round(down, 33.75cqw, 16px);  /* about 4:3 of its width, rounded down to the 16px grid */
    overflow: hidden;
    border: 2px solid var(--color-line);
    border-radius: 8px;
    background-color: var(--color-screen);
}

.big_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.big_text {
    flex: 1;
    min-width: 0;
}

.big_text h3 {
    overflow-wrap: anywhere;
}

.big_text p {
    margin: 0;
    font-size: var(--fs-text);
    line-height: var(--lh-text);
}

.big_text p + p {
    margin-top: 16px;
}

.big_text .read_more {
    margin-top: 16px;
}

@media (hover: hover) {
    .big_card:hover {
        top: -2px;
        left: -2px;
        box-shadow: var(--shadow-hard-hover);
    }
}

.big_card:active {
    top: 2px;
    left: 2px;
    box-shadow: var(--shadow-hard-active);
}

.big_card:focus-visible {
    outline: 2px solid var(--color-border);
    outline-offset: 4px;
}

/* Narrow screens: picture above the text */
@media screen and (max-width: 860px) {
    .big_card {
        flex-direction: column;
        align-items: stretch;
    }

    .big_img {
        flex: none;
        height: round(down, 75cqw, 16px);
    }
}

/* Phones: the next post peeks in at the edge */
@media screen and (max-width: 600px) {
    .hl_big .hl_track {
        grid-auto-columns: round(down, 88%, 16px);
    }
}

/* Phones: picture above the text */
@media screen and (max-width: 600px) {
    .post_card {
        grid-template-columns: 1fr;
    }

    .post_thumb {
        height: round(down, 56.25cqw, 16px);  /* about 16:9 of the card, on the 16px grid */
    }

}