/* ContentGrid Component Styles - Unified Flexbox 3-column layout */

.content-grid {
    display: flex;
    gap: 0;
    padding: 0;
    align-items: flex-start;
    position: relative;
}

@media (min-width: 769px) {
    .content-grid {
        gap: var(--col-gap);
    }
}

/* Vertical dashed gutter lines — HIDDEN FOR NOW (uncomment to restore).
   Same rule as the nav divider (combined-menu.css: 1px dashed var(--rule)).
   Two interior gutters only; grid height + 72px overhang top and bottom.
   Also has a `display: none` twin in the max-width:768px block below. */
/*
.content-grid::before,
.content-grid::after {
    content: "";
    position: absolute;
    top: -72px;
    bottom: -72px;
    width: 0;
    border-left: 1px dashed var(--rule);
    pointer-events: none;
}
.content-grid::before {
    left: calc((100% - 2 * var(--col-gap)) / 3 + var(--col-gap) / 2);
}
.content-grid::after {
    left: calc((100% - 2 * var(--col-gap)) / 3 * 2 + var(--col-gap) * 1.5);
}
*/

.content-column {
    flex: 1;
    /* Keep the three columns exactly equal: without this a flex item's
       automatic minimum is its min-content, so a wide child could push its
       column past its 1/3 share. min-width:0 lets the column shrink. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--stack);
}

.content-grid-item {
    position: relative;
    overflow: visible;
}

.content-grid-item .image-wrapper,
.content-grid-item .video-wrapper {
    position: relative;
    line-height: 0;
}

.content-grid-item img,
.content-grid-item video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-lg);
    /* Hairline drawn INSIDE the media, not a border ring: an inset shadow sits
       on top of the edge pixels, so the image keeps its full size and nothing
       is added to the footprint. */
    box-shadow: inset 0 0 0 1px var(--line);
}

/* Soft lift on the framed blocks — standalone image/video tiles and the
   card. Card media (inside .card__text or straight in the card) is
   left flat: it already sits on the shadowed card. The inset hairline rides
   along in the same box-shadow list. */
.content-grid-item .image-wrapper img,
.content-grid-item .video-wrapper video {
    box-shadow: inset 0 0 0 1px var(--line), 0 1px 4px 0 rgba(0, 0, 0, 0.25);
}

/* Video controls styling */
.content-grid-item video {
    cursor: pointer;
}

/* Text block styling */
.content-grid-item.text-block {
    display: flex;
    flex-direction: column;
    position: relative;
}

.content-grid-item.text-block .text-content {
    padding: 0 0px;
    color: var(--ink);
    font: var(--type-body);
    position: relative;
    z-index: 2;
}

/* Text blocks with bottom image - no bottom padding on text-content */
.content-grid-item.text-block.has-bottom-image .text-content {
    padding: 0 0px;
}

/* Text headers with ## */
.content-grid-item.text-block .text-content .text-header {
    color: var(--white-20);
}

/* Bio-specific text styles (for core page) */
.content-grid-item.text-block .text-content .bio-header {
    color: var(--white-20);
}

.content-grid-item.text-block .text-content .bio-highlight {
    color: var(--white-90);
}

/* Inline vertical spacer - matches the column gap between items */
.content-grid-item.text-block .text-content .vgap,
.card__text .vgap {
    display: block;
    height: var(--stack-2);
}

/* When a case-link button follows a spacer, drop its 4px margin so the gap stays 11px */
.content-grid-item.text-block .text-content .vgap + .bio-case-link {
    margin-top: 0;
}

/* Link styling inside text-content is owned by components/links/links.css (unified pill style) */

/**
 * Tags — the small coloured markers under a page's lede.
 *
 * Rendered by ContentGrid from an item's `tags: []` array. The marker is an SVG
 * file used as a mask, so `background-color: currentColor` paints it and the
 * artwork itself carries no colour. Palette and icon paths live in
 * assets/tokens.css (.tag--*), which is the only place to edit either.
 */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-2);
    row-gap: var(--stack-3);
    margin-top: var(--stack-2);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--stack-3);
    font: var(--type-tag);
    text-transform: lowercase;
    color: var(--tag-c, var(--ink));
    white-space: nowrap;
}

.tag__marker {
    flex: none;
    width: var(--tag-w, 14px);
    height: 6px;
    background-color: currentColor;
    -webkit-mask: var(--tag-icon) left center / contain no-repeat;
            mask: var(--tag-icon) left center / contain no-repeat;
}

/**
 * Cards — a section that owns its own media.
 *
 * Rendered by ContentGrid from `type: 'card'`. Where a plain image item belongs
 * to the column, a card's media belongs to the card: rufa-press groups each
 * project's photos under its heading, and clay.pet's notes carry a thumbnail
 * and a date. Media inside a card takes the tighter --r-md radius, which is
 * what separates it visually from standalone tiles at --r-lg.
 */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--stack-2);
    padding: 10px;
    border-radius: var(--r-lg);
    background: var(--card);
    /* Same soft lift the standalone image/video tiles carry (minus their inset
       hairline — the card has no outline). */
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
}

/* Title and year on one line, the year raised to the title's cap line. Same
   construction as .t-row / .t-year for page headings: align-self does the
   superscript, because a flex item ignores vertical-align. */
.card__head {
    display: flex;
    align-items: baseline;
    gap: var(--stack-3);
}

.card__title {
    font: var(--type-display);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--ink-strong);
}

.card__year {
    font: var(--type-year);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--ink-dim);
    align-self: flex-start;
}

.card__text {
    /* Wire to the body type token like .text-content does — otherwise the card
       copy inherits <body>'s hardcoded font-weight: 500 and ignores every
       change to --type-body (weight in particular). */
    font: var(--type-body);
    color: var(--ink);
}

/* Scoped through .card on purpose: the generic `.content-grid-item img` rule
   above is a class+element selector, so a bare .card__media would lose to it
   and the media would keep the standalone --r-lg radius. The inset hairline
   comes from that generic rule and rides along at this tighter radius; only
   the radius is restated here. */
.card .card__media {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-md);
}

/* clay.pet's inline thumbnail — sits at its natural size, not the card width */
.card .card__media--sm {
    width: 71px;
}

/* Opt out of the inset hairline. Some artwork is drawn with its own frame or
   generous margins on white — even.it's lockup and its marks are — and the
   hairline then reads as a second box around a box. `plain: true` on the media
   entry (see the card branch in the bundle) turns it off. Two classes so this
   beats the generic .content-grid-item img rule that draws the hairline. */
.card .card__media--plain {
    box-shadow: none;
}

/* Media dropped straight into the copy (obr var's "idea" runs title → text →
   image → image → text). These <img>s live inside .card__text, so the card's
   flex-column gap never reaches them — an explicit margin stands in for it.
   No :first-child / :last-child reset: text nodes aren't elements, so an <img>
   right after the opening sentence counts as the "first child" and would lose
   its top gap — the exact spot the gap is wanted. */
.card__text .card__media {
    margin: var(--stack-2) 0;
}

/* Paired media — `mediaLayout: 'row'` puts two tiles on one line instead of
   stacking them full-width. Used by signs' fire front card, where the two shots
   read as a set. Tiles top-align and split the row evenly; each keeps its own
   aspect ratio, so a portrait shot simply runs taller than a landscape one
   beside it. Stays side by side on mobile too — the column has already narrowed
   the whole card by then. .content-column's min-width:0 is what lets the tiles
   shrink to their share instead of widening the column. */
.card__media-row {
    display: flex;
    align-items: flex-start;
    gap: var(--stack-2);
}

.card .card__media-row .card__media {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

/* Tags inside a card ride the flex-column gap; kill the lede margin they carry
   in a text block so the spacing above them matches every other card row. */
.card .tags {
    margin-top: 0;
}

.card__date {
    font: var(--type-tag);
    color: var(--ink-faint);
}

::selection {
    background-color: rgba(255, 176, 30, 0.2);
}

/* DOTS DISABLED
   Dots overlay
.content-grid-item .dots-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    z-index: 1;
}

.content-grid-item .dots-row.top {
    top: 0;
}

.content-grid-item .dots-row.bottom {
    bottom: 0;
}

.content-grid-item .dots-row span {
    color: var(--white-90);
    user-select: none;
    font-family: "Fragment Mono", monospace;
    font-size: 12px;
    line-height: 16px;
}

   Text-block dots are in-flow spacers, not absolute overlays
.content-grid-item.text-block > .dots-row {
    position: relative;
    top: auto;
    bottom: auto;
}

   Separator between text and bottom image
.content-grid-item.text-block .text-block-separator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.content-grid-item.text-block .text-block-separator span {
    color: var(--white-90);
    user-select: none;
    font-family: "Fragment Mono", monospace;
    font-size: 12px;
    line-height: 16px;
}
*/

/* Bottom image wrapper - 19px gap above (replaces the old separator dots) */
.content-grid-item.text-block .text-block-bottom-wrapper {
    position: relative;
    margin-top: 19px;
}

/* Bottom image in text block */
.content-grid-item.text-block .text-block-bottom-image {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .content-grid {
        flex-direction: column;
        gap: var(--stack);
    }

    /* grid stacks — no gutters to divide (paired with the commented-out
       gutter-line rules near the top of the file) */
    /*
    .content-grid::before,
    .content-grid::after {
        display: none;
    }
    */

    /* Text sits on the same gutter as everything else — .main-frame owns it now,
       so text-content adds nothing of its own. */
    .content-grid-item.text-block .text-content {
        padding: 0;
    }

    /* Text blocks with bottom image */
    .content-grid-item.text-block.has-bottom-image .text-content {
        padding: 0;
    }

    /* Add 28px spacing between paragraphs */
    .content-grid-item.text-block .text-content br.paragraph-break {
        display: block;
        content: '';
        margin-bottom: 14.25px;
    }

    /* Media is inset to the page gutter like the text — the old 100vw break-out
       is gone, so wrappers just fill their column. */
    .content-grid-item .image-wrapper,
    .content-grid-item .video-wrapper {
        width: 100%;
        margin-left: 0;
        position: relative;
        left: auto;
        transform: none;
    }

    .content-grid-item img,
    .content-grid-item video {
        width: 100%;
        max-width: 100%;
        display: block;
    }

    .content-grid-item.text-block .text-block-bottom-image {
        width: 100%;
        max-width: 100%;
    }

    .content-grid-item.text-block .text-block-bottom-wrapper {
        width: 100%;
        margin-left: 0;
        position: relative;
        left: auto;
        transform: none;
    }

    /* DOTS DISABLED
       Dots positioning at 5vw from screen edges
    .content-grid-item .image-wrapper .dots-row,
    .content-grid-item .video-wrapper .dots-row {
        padding: 0 5vw;
    }

    .content-grid-item.text-block .dots-row {
        padding: 0 5vw;
    }

    .content-grid-item .dots-row span {
        line-height: 20px;
    }

    .content-grid-item.text-block .text-block-separator {
        padding: 0 5vw;
    }

    .content-grid-item.text-block .text-block-separator span {
        line-height: 20px;
    }
    */
}