/*
-- nom: mark.css --
-- llibreria: loT --
-- grup: Components --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Mark amb background-image. Canvi d'imatge a 720px i clar/fosc. --
-- dependència: mk-src.css i mk-core.css --
*/
:root {
    /* Mides fixes */
    --mark-size-8v: clamp(3rem, 8vw, 5rem);
    --mark-size-6v: clamp(2.5rem, 6vw, 4rem);
    --mark-size-4v: clamp(2rem, 4vw, 3rem);
    /* Mides adaptatives (%) */
    --mark-size-l: 90%;
    --mark-size-m: 75%;
    --mark-size-s: 60%;

    --mark-size: var(--mark-size-l);
	--mark-bg-img: var(--mk-default);
    /* Slots d'injecció per al sistema gen. L'app les omple:
       - amb tema (light/dark, normal i sm): a <html> o en un element amb data-theme. Una sola imatge per àmbit de tema.
       - fix: via style="" al mark o en qualsevol avantpassat. */
    --mark-gen-light:    initial;
    --mark-gen-dark:     initial;
    --mark-gen-sm-light: initial;
    --mark-gen-sm-dark:  initial;
    --mark-gen-fix:      initial;
}
/* 👉 BASE */
.mark {
    display: block;
    block-size: var(--mark-size);
    inline-size: 100%;
	background-image: var(--mark-bg-img);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

/* 👉 MARKS MODIFICADORS DE MIDA */
.mark--size-l { --mark-size: var(--mark-size-l); }
.mark--size-m { --mark-size: var(--mark-size-m); }
.mark--size-s { --mark-size: var(--mark-size-s); }
.mark--size-8v { --mark-size: var(--mark-size-8v);}
.mark--size-6v { --mark-size: var(--mark-size-6v);}
.mark--size-4v { --mark-size: var(--mark-size-4v);}

/* 👉 MARKS MODIFICADORS SEMÀNTICS */
.mark--hd { --mark-bg-img: var(--mk-hd); }
.mark--bn { --mark-bg-img: var(--mk-bn); }
.mark--ft { --mark-bg-img: var(--mk-ft); }
.mark--gm { --mark-bg-img: var(--mk-gm); }
.mark--gm-uniq { --mark-bg-img: var(--mk-gm-sm); }
.mark--flag-cat-fix { --mark-bg-img: var(--mk-flag-cat-fix); }

/* 👉 MARK MODIFICADOR GENÈRIC */
/* Sistema obert per apps externes.
   - .mark--gen (amb tema): les variables --mark-gen-light, --mark-gen-dark, --mark-gen-sm-light i
     --mark-gen-sm-dark s'injecten a <html> o en un element amb data-theme. Limitació coneguda: tots
     els marks gen amb tema d'un mateix àmbit de tema mostren la mateixa imatge.
   - .mark--gen-fix (sense tema): --mark-gen-fix s'injecta via style="" al mark o en qualsevol
     avantpassat. Admet una imatge diferent per mark. */
.mark--gen { --mark-bg-img: var(--mk-gen); }
.mark--gen-fix { --mark-bg-img: var(--mk-gen-fix); }

/* 👉 RESPONSIVE — 720px */
@media (max-width: 720px) {
	.mark--hd { --mark-bg-img: var(--mk-hd-sm); }
	.mark--bn { --mark-bg-img: var(--mk-bn-sm); }
	.mark--ft { --mark-bg-img: var(--mk-ft-sm); }
    .mark--gm { --mark-bg-img: var(--mk-gm-sm); }
    .mark--gm-uniq { --mark-bg-img: var(--mk-gm-sm); }
	.mark--gen { --mark-bg-img: var(--mk-gen-sm); }
}