/**
 * plg_system_mazaimageauthor — plaketa autora u obrázku.
 *
 * Registruje se přes Metadata (`style:mazaimageauthor`) do <head> jako <link>.
 * NEVKLÁDAT do stránky jako inline <style>: element <style> sice nic
 * nevykresluje, ale pro sourozenecký kombinátor je plnohodnotný element a
 * motiv má `* + .uk-margin{margin-top:20px !important}` — první obrázek na
 * řádku by tak dostal 20px navíc oproti ostatním.
 *
 * Selektory jsou postavené kolem .el-author, aby šly doladit v tabu Advanced.
 */

/* --- kotva ---------------------------------------------------------------
 * "box" = vlastní obal kolem obrázku, smrští se na jeho skutečnou velikost
 * (nutné, protože nativní Width/Height zmenší jen <img>, ne kořenový <div>).
 * inline-block (ne width:fit-content) kvůli zarovnání přes text-align.
 * font-size:0 + line-height:0 ruší mezeru pod obrázkem od účaří řádku.
 * "root" = fallback pro height_expand/height_viewport, kde obrázek box vyplní.
 */
[data-el-author-host] { position: relative; }

[data-el-author-host="box"] {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    font-size: 0;
    line-height: 0;
}

/* --- plaketa ------------------------------------------------------------- */
.el-author {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .3em;
    box-sizing: border-box;
    margin: var(--el-author-gap, .35rem);
    padding: .2em .55em;
    max-width: calc(100% - 2 * var(--el-author-gap, .35rem));
    line-height: 1.35;
    font-size: .8125rem;
    color: var(--el-author-color, #fff);
    background: var(--el-author-bg, rgba(0, 0, 0, .55));
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-author-link { color: inherit; text-decoration: none; }
.el-author-link:hover { text-decoration: underline; }

/* --- umístění ------------------------------------------------------------ */
.el-author-tl { top: 0; left: 0; }
.el-author-tr { top: 0; right: 0; }
.el-author-bl { bottom: 0; left: 0; }
.el-author-br { bottom: 0; right: 0; }
.el-author-bc {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
}

/* --- vzhled -------------------------------------------------------------- */
.el-author-fs-small { font-size: .6875rem; }
.el-author-fs-large { font-size: 1rem; }
.el-author-bold { font-weight: 700; }
.el-author-rounded { border-radius: 4px; }
.el-author-vertical { writing-mode: vertical-rl; }
.el-author-hover { opacity: 0; transition: opacity .25s ease; }
[data-el-author-host]:hover > .el-author-hover { opacity: 1; }

@media (max-width: 639px) {
    .el-author-hide-mobile { display: none !important; }
}

/* --- režim ikony --------------------------------------------------------- */
/* overflow/white-space ze základní plakety by bublinu uřízly. */
.el-author-icon {
    overflow: visible;
    max-width: none;
    padding: .35em;
    line-height: 0;
    white-space: normal;
}

.el-author-icon.el-author-rounded { border-radius: 999px; }
.el-author-glyph { display: block; color: var(--el-author-icon-color, inherit); }
.el-author-icon > .el-author-link { display: block; line-height: 0; }

/* --- bublina ------------------------------------------------------------- */
/* POZOR: bublina nesmí mít role="tooltip" — viz README. */
.el-author-tip {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    width: max-content;
    max-width: 16rem;
    padding: .35em .6em;
    line-height: 1.35;
    color: inherit;
    background: var(--el-author-bg, rgba(0, 0, 0, .55));
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    pointer-events: none;
}

.el-author-rounded > .el-author-tip { border-radius: 4px; }

.el-author-icon:hover > .el-author-tip,
.el-author-icon:focus-within > .el-author-tip { opacity: 1; visibility: visible; }

/* Bublina se odklápí dovnitř obrázku podle rohu, kde ikona sedí. */
.el-author-tl > .el-author-tip,
.el-author-tr > .el-author-tip { top: calc(100% + .4em); }

.el-author-bl > .el-author-tip,
.el-author-br > .el-author-tip,
.el-author-bc > .el-author-tip { bottom: calc(100% + .4em); }

.el-author-tl > .el-author-tip,
.el-author-bl > .el-author-tip { left: 0; }

.el-author-tr > .el-author-tip,
.el-author-br > .el-author-tip { right: 0; }

.el-author-bc > .el-author-tip { left: 50%; transform: translateX(-50%); }
