/*
 * The article's head over its text (news/snippets/article_head.html), on every outlet. Of the family of the subscription
 * and about pages (styrkja.scss, about.scss): filled controls in a tint of the text, no outlines, the page's own type.
 * Its colours come from the text's (currentColor), so it is right on white, on an opinion piece's tint, in the dark
 * look and in each outlet's. Its rules:
 *   who and when  round greyscale pictures beside the names, overlapping by a little with a ring in the ground behind
 *                 (article-head.js reads it into --ahead-ground); from three writers the pictures over the names;
 *   the buttons   40px circles, a 6% tint, 12% on hover; on a wide screen to the right of the names;
 *   Hlusta        the ink filled across the column, until the player takes its place;
 *   the age       a note on pastel yellow (about.scss's), no border.
 */
.ahead {
    --ahead-tint: color-mix(in srgb, currentColor 6%, transparent);
    --ahead-tint-hover: color-mix(in srgb, currentColor 12%, transparent);
    --ahead-rule: color-mix(in srgb, currentColor 16%, transparent);
    --ahead-muted: color-mix(in srgb, currentColor 66%, transparent);
    --ahead-yellow: #fff3d6;
    --ahead-yellow-ink: #3d3100;
    padding-top: 18px;
    border-top: 1px solid var(--ahead-rule);
    font-family: inherit;
}
[data-theme="dark"] .ahead {
    --ahead-yellow: rgba(255, 211, 122, .14);
    --ahead-yellow-ink: inherit;
}
.ahead *, .ahead *::before, .ahead *::after { box-sizing: border-box; }

.ahead__row { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) {
    .ahead__row { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}

/* Who and when. The byline's old hooks (news/snippets/article_head_byline.html, for Snati's editor) keep the site's own
   rules for .article__byline: the commas and "og" between the names come from there; the rest is set over them here. */
.ahead .ahead__by { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ahead .ahead__by:has(.byline__avatars > li:not(:empty) ~ li:not(:empty) ~ li:not(:empty)) { flex-direction: column; align-items: flex-start; gap: 12px; }
.ahead .article__byline .byline__avatars { display: flex; flex: none; gap: 0; margin: 0; padding: 0; list-style: none; }
.ahead .article__byline .byline__avatars:not(:has(> li:not(:empty))) { display: none; }
.ahead .article__byline .byline__avatars > li:empty { display: none; }
.ahead .article__byline .byline__avatars > li { border-radius: 50%; box-shadow: 0 0 0 2px var(--ahead-ground, var(--base-bg, #fff)); }
.ahead .article__byline .byline__avatars > li:not(:empty) ~ li:not(:empty) { margin-left: -12px; }
.ahead .article__byline .byline__avatars a { display: block; }
.ahead .article__byline .byline__avatars img {
    display: block; width: 52px; height: 52px; max-width: none; border-radius: 50%; object-fit: cover;
    background: color-mix(in srgb, currentColor 9%, var(--ahead-ground, var(--base-bg, #fff)));
    filter: grayscale(100%) contrast(108%);
}
.ahead__text { min-width: 0; line-height: 1.3; }
.ahead .article__byline .byline__authors { margin: 0; padding: 0; font-size: 16px; font-weight: 800; }
.ahead .article__byline .byline__authors a { color: inherit; text-decoration: none; white-space: nowrap; }
.ahead .article__byline .byline__authors a:hover { color: var(--base-accent, currentColor); text-decoration: underline; }
.ahead .byline__extra { margin-top: 2px; font-size: 14px; color: var(--ahead-muted); }
.ahead .byline__extra a { color: inherit; text-decoration: underline; text-decoration-color: var(--ahead-rule); text-underline-offset: 3px; }
.ahead .ahead__date.article__pubdate { margin: 3px 0 0; font-size: 14px; line-height: 1.3; color: var(--ahead-muted); font-variant-numeric: tabular-nums; }
.ahead__text > .ahead__date:first-child { margin-top: 0; }
.ahead__date strong { font-weight: 700; }

/* The buttons */
.ahead__actions { position: relative; display: flex; flex: none; gap: 8px; }
.ahead__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 999px;
    background: var(--ahead-tint); color: inherit; font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
    text-decoration: none; cursor: pointer; transition: background .12s;
}
.ahead__btn[hidden] { display: none; }
.ahead__btn:hover, .ahead__btn[aria-expanded="true"] { background: var(--ahead-tint-hover); color: inherit; text-decoration: none; }
.ahead__btn:focus { outline: none; }
.ahead__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ahead__btn svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ahead__count:empty { display: none; }
.ahead__btn:has(.ahead__count:not(:empty)) { padding: 0 14px 0 12px; }

/* The share list: under the button, on the page's ground */
.ahead__pop {
    position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 200px; padding: 6px;
    border-radius: 14px; background: var(--ahead-ground, var(--base-bg, #fff));
    box-shadow: 0 0 0 1px var(--ahead-rule), 0 8px 28px rgba(0, 0, 0, .14);
}
@media (min-width: 768px) { .ahead__pop { left: auto; right: 0; } }
.ahead__pop[hidden] { display: none; }
.ahead__pop a, .ahead__pop button {
    display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none;
    color: inherit; font: inherit; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.ahead__pop a:hover, .ahead__pop button:hover { background: var(--ahead-tint); color: inherit; text-decoration: none; }
.ahead__pop button { margin-top: 4px; border-top: 1px solid var(--ahead-rule); border-radius: 0 0 9px 9px; }

/* Hlusta */
.ahead__listen {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; margin-top: 14px; padding: 0 18px 0 5px;
    border: 0; border-radius: 999px; color: inherit; background: currentColor; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ahead__listen > span:last-child { color: var(--ahead-ground, var(--base-bg, #fff)); }
.ahead__listen:hover { filter: brightness(1.25); }
.ahead__listen:focus { outline: none; }
.ahead__listen:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ahead__disc { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ahead-ground, var(--base-bg, #fff)); }
.ahead__disc svg { width: 17px; height: 17px; fill: currentColor; }
.ahead__listen[hidden] { display: none; }
/* While the button is there, the player under it waits for it (with scripts; without, the player shows as before). */
.js .article:has([data-ahead-listen]:not([hidden])) .article__audio { display: none; }

/* The age, or where it first appeared */
.ahead__old {
    margin-top: 14px; padding: 12px 16px; border-radius: 12px;
    background: var(--ahead-yellow); color: var(--ahead-yellow-ink); font-size: 15px; line-height: 1.45;
}