/* Area label + the shared list item (open-workshop-site 2b-2, 5a)
 *
 * The post's area: its short label in the category's ink (the --area value
 * generated by 2b-1) with the category's Tabler icon inline. Its own component
 * file because standalone landing pages (schema-1) never load main.css, so the
 * label CSS must be linked from both public heads.
 *
 * 5a adds the .ck-post rules here: every post a list surface shows comes from
 * one partial (public/partials/_post_item.html) whose parts each carry
 * .ck-post__<part>. No colours beyond var(--area…), no !important — a site with
 * no area colours keeps today's link/badge colours.
 */
.ck-area-label {
    color: var(--area, var(--color-primary));
}

.ck-area-label__icon {
    margin-inline-end: 0.25em;
    vertical-align: -0.125em;
}

/* ── The list item ─────────────────────────────────────────────────────────
 * Hook variables a theme can set (with the shipped fallbacks):
 *   --ck-post-gap          space between the parts of a row/card
 *   --ck-post-media-ratio  aspect ratio of an auto-height image
 */
.ck-post {
    --ck-post-gap: var(--spacing-sm, 0.5rem);
    --ck-post-media-ratio: 16 / 9;
}

/* Only the label takes the area ink. The category <a> keeps its own colour
 * (Bootstrap's link or badge colour), so an area without a colour keeps
 * today's link colour and a badge keeps its white text (5a fixup b). */
.ck-post .ck-area-label {
    color: var(--area, inherit);
}

.ck-post .badge .ck-area-label {
    color: inherit;
}

/* The "·" separators are decoration, so they are CSS, not text: one before
 * every meta part that follows another. The tags span never had one, and a
 * search result keeps its own separator-free meta line (5a fixup b).
 * The template already prints a space between the parts, so only the right
 * margin is needed: both gaps around the dot are then about one space wide
 * (5a fixup c). */
.ck-post:not(.search-result-card) .ck-post__meta > * + :not(.ck-post__tags)::before {
    content: "\00b7";
    margin-inline: 0 0.35em;
}

/* The dot before the category is plain meta text, not part of the link: a
 * ::before on the <a> takes the link's colour (and underline). So the part
 * before the link prints it instead, as an inline-block ::after — it inherits
 * the meta line's colour and takes no underline (5a fixup c). */
.ck-post:not(.search-result-card) .ck-post__meta > .ck-post__category::before {
    content: none;
}

.ck-post:not(.search-result-card) .ck-post__meta > :has(+ .ck-post__category)::after {
    content: "\00b7";
    margin-inline: 0.35em 0;
    display: inline-block;
}

/* "Updated <date>" (post_card, open-workshop-site 8): muted, the date's size. */
.ck-post__updated {
    color: var(--bs-secondary-color, #6c757d);
    font-size: inherit;
}

/* Badge rows keep the badges side by side (the plain skin keeps today's
 * ", "-separated inline flow instead). */
.ck-post--bootstrap .ck-post__tags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em;
}

/* The category badge and the tag badges stay a space apart in a card's
 * footer/body (5a fixup b). */
.ck-post--bootstrap .ck-post__footer .ck-post__category + .ck-post__tags,
.ck-post--bootstrap .ck-post__body > .ck-post__category + .ck-post__tags {
    margin-inline-start: 0.25em;
}

/* Images: sizing is CSS (an inline style would be dropped by the sanitizer). */
.ck-post__media img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.ck-post--cards .ck-post__media img {
    height: 200px;
}

.ck-post--media-sm .ck-post__media img {
    height: 160px;
}

/* Masonry keeps the image's natural ratio (5a fixup b: no forced 16:9). */
.ck-post--media-auto .ck-post__media img {
    height: auto;
}

.ck-post--featured .ck-post__media img {
    max-height: 400px;
}

/* featured_post (open-workshop-site 7): one flagged item, in its area ink. */
.ck-featured {
    margin-block: 1.5rem;
}

.ck-featured__title {
    margin-bottom: 1rem;
}

/* featured_post count + layouts (open-workshop-site 10b). */
.ck-featured__list > .ck-featured__item + .ck-featured__item {
    margin-block-start: var(--ck-post-gap, 0.5rem);
}

.ck-post-list--cards.ck-featured__list > .ck-featured__item + .ck-featured__item {
    margin-block-start: 0;
}

/* The slider is the Bootstrap carousel: room for the 3rem controls and the
   dots outside the card, so they never cover its links. */
.ck-featured--slider .carousel-item {
    padding-inline: 3rem;
    padding-block-end: 2.25rem;
}

.ck-featured--slider .carousel-control-prev,
.ck-featured--slider .carousel-control-next {
    width: 3rem;
    min-width: 44px;
    min-height: 44px;
}

/* Excerpt line clamps (excerpt_lines 1-6). */
.ck-post__excerpt--lines-1,
.ck-post__excerpt--lines-2,
.ck-post__excerpt--lines-3,
.ck-post__excerpt--lines-4,
.ck-post__excerpt--lines-5,
.ck-post__excerpt--lines-6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ck-post__excerpt--lines-1 { -webkit-line-clamp: 1; }
.ck-post__excerpt--lines-2 { -webkit-line-clamp: 2; }
.ck-post__excerpt--lines-3 { -webkit-line-clamp: 3; }
.ck-post__excerpt--lines-4 { -webkit-line-clamp: 4; }
.ck-post__excerpt--lines-5 { -webkit-line-clamp: 5; }
.ck-post__excerpt--lines-6 { -webkit-line-clamp: 6; }

/* ── The plain skin (post_list) ────────────────────────────────────────────
 * The unskinned look: structure only, no Bootstrap, and no reset — the list
 * stays the plain bulleted <ul class="post-list"> it is today, because sites'
 * component_css styles .post-list / .post-list-item / .post-meta / .tags /
 * .tag and must keep seeing them.
 */
/* Only the tag links are reset; the title keeps the page's link look
 * (5a fixup b: the reset was meant for the tags only). */
.ck-post-list .ck-post__tag {
    color: inherit;
    text-decoration: none;
}

/* The plain skin had no image ratio before; 5b may add one as an option. */
.ck-post--plain .ck-post__media img {
    height: auto;
}

/* ── The list wrapper's layouts (open-workshop 5b) ─────────────────────────
 * ``post_list`` renders one ``<ul class="post-list ck-post-list
 * ck-post-list--<layout>">``; the layout class is a public hook, so a theme
 * can target one layout without touching the others.
 *   compact  today's plain bulleted list (no rule needed, it is the default)
 *   rows     one item per line, no marker, no indent
 *   cards    a responsive grid of the same items, no marker
 */
.ck-post-list--compact {
    list-style-position: outside;
}

.ck-post-list--rows,
.ck-post-list--cards {
    list-style: none;
    padding-inline-start: 0;
    margin-inline-start: 0;
}

.ck-post-list--cards {
    display: grid;
    gap: var(--ck-post-gap, 0.5rem);
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.ck-post-list--rows > .post-list-item + .post-list-item {
    margin-block-start: var(--ck-post-gap, 0.5rem);
}

/* Menu item icon (open-workshop-site 9): takes the item's area ink; the link
   text keeps the theme colour. */
.ck-nav__icon {
    margin-inline-end: 0.35em;
    vertical-align: -0.125em;
    color: var(--area, currentColor);
}

/* Inline icon from the ``icon`` shortcode / ``icon()`` helper (open-workshop-site
   11): sized to the text, coloured by ``currentColor``. */
.ck-icon {
    display: inline-block;
    width: var(--ck-icon-size, 1em);
    height: var(--ck-icon-size, 1em);
    vertical-align: -0.125em;
    flex: none;
}

.ck-icon.ck-icon--sm {
    width: 0.875em;
    height: 0.875em;
}

.ck-icon.ck-icon--lg {
    width: 1.25em;
    height: 1.25em;
}