/*
 * Tarina-kortti: tall image card with a centered title. On hover / keyboard focus an
 * accent-colored layer opens with a short text and a link. Touch screens show the text always.
 *
 * Usage (GB), typically inside a .kortti-karuselli:
 *   container .tarina-kortti
 *     GB image (the background photo)
 *     container .tarina-sisalto -> headline h3, headline p, headline p .tarina-linkki (<a>)
 * The link stretches over the whole card, so the card is one click target.
 */
@media only screen and (min-width: 320px) {
    .tarina-kortti {
        --tarina-radius: 18px;
        position: relative;
        aspect-ratio: 2 / 3;
        border-radius: var(--tarina-radius);
        overflow: hidden;
        isolation: isolate;
        color: var(--on-image-clr); /* text always sits on a photo or the accent layer */
    }

    .tarina-kortti figure.gb-block-image {
        position: absolute;
        inset: 0;
        z-index: -2;
        margin: 0;
    }

    .tarina-kortti figure.gb-block-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
        transition: transform 1.2s var(--transition-timing-function);
    }

    .tarina-kortti::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, transparent 0%, var(--overlay-clr) 100%);
        transition: background var(--transition-speed) var(--transition-timing-function);
    }

    .tarina-kortti .tarina-sisalto {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 28px;
        color: inherit; /* GB containers get --font-clr from colors.css; keep the photo text color */
    }

    .tarina-kortti h3 {
        color: inherit;
        font-size: 20px;
        margin: 0;
        text-shadow: 0 1px 12px var(--overlay-clr);
    }

    .tarina-kortti .tarina-sisalto p {
        color: inherit;
        font-size: 14px;
        margin: 14px 0 0;
    }

    .tarina-kortti .tarina-linkki {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 28px;
    }

    .tarina-kortti .tarina-linkki a {
        color: inherit;
        font-size: 14px;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .tarina-kortti .tarina-linkki a::after {
        content: "";
        position: absolute;
        inset: -2000px; /* clipped by the card's overflow: whole card is clickable */
    }
}

/* Hover-capable devices: text hidden until hover or keyboard focus */
@media (hover: hover) {
    .tarina-kortti::before {
        background: linear-gradient(180deg, transparent 40%, var(--overlay-clr) 100%);
    }

    .tarina-kortti .tarina-sisalto p {
        max-height: 0;
        margin-top: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height var(--transition-speed), opacity var(--transition-speed), margin var(--transition-speed);
    }

    .tarina-kortti .tarina-sisalto p.tarina-linkki {
        max-height: none;
        overflow: visible;
    }

    .tarina-kortti:hover::before,
    .tarina-kortti:focus-within::before {
        background: color-mix(in srgb, var(--accent-clr) 72%, transparent);
    }

    .tarina-kortti:hover figure.gb-block-image img,
    .tarina-kortti:focus-within figure.gb-block-image img {
        transform: scale(1.05);
    }

    .tarina-kortti:hover .tarina-sisalto p,
    .tarina-kortti:focus-within .tarina-sisalto p {
        max-height: 200px;
        margin-top: 14px;
        opacity: 1;
    }
}

/* Editor: keep the layer open so the text can be edited */
.editor-styles-wrapper .tarina-kortti .tarina-sisalto p {
    max-height: none;
    opacity: 1;
}