/* 2024 NOVEMBER */
/* SpoiltCat Markup Language */
/* A simple set of custom html elements that can be used to format "blurb" text */

/* A "Blog Card" to embed other R__Objects */
scml-card,
.scml-card {
    border: 1px solid var(--shadow);
    padding-inline: 1rem;
    margin-block: 1rem 3rem;
    border-radius: 2px;
}

/* H2 is the default header size inside SCML elements */
.scml-container > h2:not(:first-child) {
    margin-top: 3rem;
    clear: both;
}
scml-grid > h2 {
    grid-column:1/-1;
    margin-right:auto;
}

scml-flex, .scml-flex {
    display:flex;
    flex-wrap:wrap;
}

scml-wide, .scml-wide {
    grid-column: 1 / -1;
    width:98%;
}
scml-grid, .scml-grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-items:center;
    align-items: center;
}
scml-grid > a {display: contents;} /* 2024 DEC 28 : not sure when this is implemented? */
scml-box, .scml-box {
    display: block;
    margin-block:0.5rem 1rem;
    border: 2px solid silver;
    border-radius: 2px;
    padding: 1rem;
    font-size: var(--rfs-2);
    text-align: justify;
}
scml-box > a,
.scml-box > a {
    text-decoration: underline;
}

/* small text for figcaptions */
.scml-container figcaption {
    font-size: var(--rfs-1a);
}

/* .scf-inline are <figure>s generated from <img hexID=""> elements */
.scf-inline {
    /* display:inline-grid; */
    display:grid;
}
.scf-inline > img {
    object-fit: cover;
    max-height:200px;
    border-radius:4px;
}
.scf-inline.wide > img {
    max-width:100%;
    max-height:400px;
}

.scf-inline.left {
    float:left;
    margin-right:2ch;
}
.scf-inline.right {
    float:right;
    margin-left:2ch;
}

.scf-inline.square > img{
    aspect-ratio: 1;
}
.scf-inline.square.left > img{
    object-position: left;
}

#R__Lightbox .scf-inline > img {
    max-height:80vh;    /* =^.^=BAD : do not like using 80vh */
}
.scf-inline figcaption {
    font-size:var(--rfs-1);
}
.scf-inline:hover figcaption {
    background:hsla(0,0%,100%,0.5);
}
.scf-inline figcaption time {
    display:none;
}