﻿/*.story-container {
    width: auto;
    height: auto;
}*/

/*     Constrain illustrations (img and inline svg).
   Use max-width / max-height and force width/height to auto so the browser preserves aspect ratio.
   The !important helps override presentation attributes on embedded SVGs. 
*/    .story-container img.illustration,
    .story-container svg,
    .story-container .illustration {
        display: block;
        float: left;
        margin: 0 2rem 0.5rem 0;
        max-width: 12rem;
        max-height: 12rem;
        width: auto !important;
        height: auto !important;
        background-color: transparent;
    }

    /* Story body */
    /*.story-container .story {
        padding: 2rem;
        font-family: "Century Gothic";
        text-align: left;
        overflow-wrap: break-word;
    }

[data-story-key] {
    background-color: transparent !important;
}

[data-story-key="dog-adventure"] {
    flex: 1;
    position: relative;
    background-image: url('images/scene-07-2x3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-story-key="dog-adventure"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);*/ /* your tint */
    /*backdrop-filter: blur(0.1px);*/ /* optional softening */
    /*pointer-events: none;*/ /* keeps content clickable */
/*}*/

.story-page {
    position: relative;
    width: auto;
    min-height: 100%; /* full page */
    overflow: hidden;
}

.story-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.story-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(0.5px);
    z-index: 2;
    pointer-events: none;
}

.story-content {
    position: relative;
    z-index: 3;
    padding: 2rem;
    color: white;
}

[data-story-key="dog-adventure"] .story-background {
    background-image: url('/images/scene-07-2x3.png');
}