/**
 * Media tag: a label on a photo that says where the photo is from, e.g.
 * "Kohde: Kaleva", usually a link to the reference page. Makes every picture
 * on a service page a real project.
 *
 * Look: a notch cut into the corner of the photo. The label sits flush in the
 * corner on the background color of whatever surrounds the photo (the card,
 * the section), so it reads as part of the page, like a caption in a printed
 * magazine, and not as a badge floating on the picture. "Kohde" is a small
 * uppercase line, the name is set in the heading face.
 *
 * className: media-tag   (a GB headline <p>, a sibling of the image inside
 *                         the container that frames the photo)
 *
 * Variants (corner; default is bottom left):
 *   media-tag--top-left       for cards, where the photo is the top of the card
 *   media-tag--top-right      for a cover with its text on the left
 *   media-tag--bottom-right   for a full-screen cover under a merged header
 *
 * Structure:
 *   .text-image-media | .card | .cover          any container with the photo
 *     figure.gb-block-image > img
 *     p.gb-headline.media-tag [.media-tag--…]   "Kohde: " + a (optional link)
 *
 * The container becomes the positioning box (position: relative) unless it
 * already has a position of its own. In a clickable card the tag sits above
 * the card's stretched link, so its own link stays clickable.
 *
 * Colors: the notch takes the surrounding palette's --bg-clr. Text colors are
 * resolved at the root, because a photo container (a cover, an overlay card)
 * redefines the text colors for what is written on the photo.
 *
 * Tuning: --media-tag-radius (inner corner, follows --radius)
 *
 * Chain animations: none; the tag belongs to the photo and shows with it.
 * Added in the Dekosound project (2026-11-14), a candidate for the base theme.
 */

:root {
    --media-tag-radius: var(--radius);
    --media-tag-clr: var(--heading-clr);
    --media-tag-label-clr: var(--accent-clr);
    --media-tag-page-bg: var(--body-bg-clr);
}

:where(.gb-container):has(> .media-tag) {
    position: relative;
}

/* Default corner: bottom left */
.gb-container > p.media-tag {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: auto;
    max-width: 85%;
    margin: 0;
    padding: 9px 16px 7px 0;
    border-radius: 0 var(--media-tag-radius) 0 0;
    background: var(--bg-clr);
    color: var(--media-tag-label-clr);
    font-family: var(--main-font);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 1;
}

/* A dark photo container (the full cover) sits on the page: the notch is the
   page background, not the dark palette of the cover. */
.wrapper-alternate-color.cover > p.media-tag {
    background: var(--media-tag-page-bg);
}

/* The name: heading face, normal case */
.gb-container > p.media-tag a,
.gb-container > p.media-tag a:hover {
    margin-left: 0.5em;
    color: var(--media-tag-clr);
    font-family: var(--title-font);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    opacity: 1;
}

.gb-container > p.media-tag a:hover,
.gb-container > p.media-tag a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.gb-container > p.media-tag--top-left {
    top: 0;
    bottom: auto;
    padding: 7px 16px 9px 16px;
    border-radius: 0 0 var(--media-tag-radius) 0;
}

.gb-container > p.media-tag--top-right {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    padding: 7px 16px 9px 16px;
    border-radius: 0 0 0 var(--media-tag-radius);
}

.gb-container > p.media-tag--bottom-right {
    right: 0;
    left: auto;
    padding: 9px 16px 7px 16px;
    border-radius: var(--media-tag-radius) 0 0 0;
}