#storm-sponsor {

    /* DISPATCHER OVERRIDES */

	--storm-min-widget-margin-x: 0px;
	--storm-max-widget-margin-x: 0px;
	--storm-min-widget-margin-y: unset;
	--storm-max-widget-margin-y: unset;

	--storm-card-container-gap: 150px;
	--storm-min-card-container-padding: 0px;
	--storm-max-card-container-padding: 0px;

	--storm-min-card-border-radius: 0px;
	--storm-max-card-border-radius: 0px;
	--storm-min-card-padding-x: 0px;
	--storm-max-card-padding-x: 0px;
	--storm-min-card-padding-y: 0px;
	--storm-max-card-padding-y: 0px;

    >.storm-card-container-continuous {

        background-color: inherit;

        >.storm-card,
        >.storm-card-placeholder >.storm-card {

            background-color: inherit;
            visibility: visible;

        }

    }

    >header {

        --storm-freeform-container-justify-content: center;
        --storm-freeform-container-align-items: center;
        --storm-min-freeform-container-padding-y: 40px;
        --storm-max-freeform-container-padding-y: 70px;
        padding-top: 0;

        .storm-custom {

            --storm-min-letter-spacing-override: 0.8px;
            --storm-max-letter-spacing-override: 2.5px;

        }

    }

}

#storm-sponsor .storm-sponsor-widget {

    /* DISPATCHER OVERRIDES */
    
    --storm-min-widget-margin-x: 5px;
    --storm-max-widget-margin-x: 100px;

    --storm-min-button-border-radius: 20px;
    --storm-max-button-border-radius: 20px;
    --storm-min-button-padding-x: 32px;
    --storm-max-button-padding-x: 32px;
    --storm-min-button-padding-y: 15px;
    --storm-max-button-padding-y: 15px;
    --storm-button-cursor: pointer;

    --storm-card-container-gap: 30px;
	--storm-min-card-container-padding: 10px;
	--storm-max-card-container-padding: 40px;

    /* 4 - ((4-x) * floor(1 / (1+floor(x/4)))) -> 1, 2, 3, 4, 4, 4, 4, 4, ...*/
    --storm-rendered-card-number: calc(4 - ((4 - var(--storm-fitting-card-number)) * round(down, 1 / (1 + round(down, var(--storm-fitting-card-number) / 4)))));

    --storm-min-card-width: 290px;
    --storm-max-card-width: 340px;
    --storm-min-card-border-radius: 15px;
    --storm-max-card-border-radius: 15px;
    --storm-min-card-padding-x: 15px;
    --storm-max-card-padding-x: 15px;
    --storm-min-card-padding-y: 20px;
    --storm-max-card-padding-y: 20px;
    --storm-card-gap: 15px;

    /* WIDGET SPECIFIC */
    --storm-sponsor-card-padding-top: 200px;
    --storm-sponsor-card-h3-height: 33px;
    --storm-sponsor-card-p-height: 120px;
    --storm-sponsor-card-a-height: 69px;
    --storm-sponsor-card-img-height: 260px;
    
    --storm-card-height: calc(
        var(--storm-sponsor-card-padding-top) +
        /*
            This works because padding is fixed.
            If it were continuous, a change in the template would be required
        */
        var(--storm-min-card-padding-y) +
        var(--storm-sponsor-card-h3-height) +
        var(--storm-sponsor-card-p-height) +
        var(--storm-sponsor-card-a-height) +
        var(--storm-sponsor-card-img-height)
    );

    header {

        /* Overrides default positioning and composes translation */
        left: --apply(2, anchor(center), calc(anchor(left) + 20px), card);
        translate: --apply(2, -50% 0, 0 0, card);

        --storm-min-font-size-override: 24pt;
        --storm-max-font-size-override: 24pt;
        --storm-min-line-height-override: 0.8;
        --storm-max-line-height-override: 0.8;
        --storm-min-letter-spacing-override: 1px;
        --storm-max-letter-spacing-override: 1px;
        --storm-min-button-padding-x: 5px;
        --storm-max-button-padding-x: 5px;
        --storm-min-button-padding-y: 5px;
        --storm-max-button-padding-y: 5px;
        --storm-button-cursor: text;

        h2 {

            height: 75px;
            width: 220px;

        }

    }

    details {

        --storm-sponsor-show-more-button-flag: false;

        &:has(.storm-card-container-freeze > :nth-child(n + 2 of .storm-card)) {

            --storm-min-fade-max-height: --apply(2, calc(var(--storm-card-height) + (2 * var(--storm-card-gap))), unset, card);
            --storm-max-fade-max-height: --apply(2, calc(var(--storm-card-height) + (2 * var(--storm-card-gap))), unset, card);
            --storm-sponsor-show-more-button-flag: --apply(2, true, false, card);

        }

        &:has(.storm-card-container-freeze > :nth-last-child(n + 3 of .storm-card)) {

            --storm-min-fade-max-height: --apply(3, calc(var(--storm-card-height) + (2 * var(--storm-card-gap))), unset, card);
            --storm-max-fade-max-height: --apply(3, calc(var(--storm-card-height) + (2 * var(--storm-card-gap))), unset, card);
            --storm-sponsor-show-more-button-flag: --apply(3, true, false, card);

        }

        &:has(.storm-card-container-freeze > :nth-last-child(n + 4 of .storm-card)) {

            --storm-min-fade-max-height: --apply(4, calc(var(--storm-card-height) + (2 * var(--storm-card-gap))), unset, card);
            --storm-max-fade-max-height: --apply(4, calc(var(--storm-card-height) + (2 * var(--storm-card-gap))), unset, card);
            --storm-sponsor-show-more-button-flag: --apply(4, true, false, card);

        }

        &:has(.storm-card-container-freeze > :nth-last-child(n + 5 of .storm-card)) {

            --storm-min-fade-max-height: --apply(5, calc(var(--storm-card-height) + (2 * var(--storm-card-gap))), unset, card);
            --storm-max-fade-max-height: --apply(5, calc(var(--storm-card-height) + (2 * var(--storm-card-gap))), unset, card);
            --storm-sponsor-show-more-button-flag: --apply(5, true, false, card);

        }

        .storm-card-container-freeze {

            padding-top: 130px;
            row-gap: 100px;

        }

        &.storm-accordion[open] {

            .storm-card-container-freeze {
                padding-bottom: if(
                    style(--storm-sponsor-show-more-button-flag: true): 80px;
                    else: var(--storm-card-container-padding);
                );
            }

        }

        .storm-card {

            position: relative;
            padding-top: var(--storm-sponsor-card-padding-top);

            picture {

                position: absolute;
                top: 0;
                left: 50%;
                translate: -50% -25%;

                img {

                    border-radius: 100%;
                    border: 4px solid #F84E57;
                    /* The img must be a square for it to end up perfectly circular */
                    width: var(--storm-sponsor-card-img-height);
                    height: var(--storm-sponsor-card-img-height);

                }

            }

            >h3 {

                --storm-min-font-size-override: 20pt;
                --storm-max-font-size-override: 20pt;
                line-height: normal;
                height: var(--storm-sponsor-card-h3-height);

            }

            >p {

                height: var(--storm-sponsor-card-p-height);
                --storm-min-font-size-override: 14pt;
                --storm-max-font-size-override: 14pt;
                line-height: normal;

            }

            >a {

                --storm-min-font-size-override: 24pt;
                --storm-max-font-size-override: 24pt;
                --storm-min-letter-spacing-override: 1.5px;
                --storm-max-letter-spacing-override: 1.5px;
                line-height: normal;
                text-wrap: nowrap;
                width: 80%;
                height: var(--storm-sponsor-card-a-height);
                pointer-events: auto;

            }

        }

        .storm-changing-button-center {

            visibility: if(
                style(--storm-sponsor-show-more-button-flag: true): visible;
                else: hidden;
            );

            --storm-min-button-padding-y: 15px;
            --storm-max-button-padding-y: 50px;
            --storm-min-button-border-radius: 20px;
            --storm-max-button-border-radius: 40px;

            --storm-min-font-size-override: 30pt;
            --storm-max-font-size-override: 40pt;
            
            --storm-changing-button-open-content: "VEDI DI PIÙ";
            --storm-changing-button-closed-content: "MOSTRA DI MENO";
            
            background: linear-gradient(to bottom, rgba(55, 51, 86, 0.9) 50%);
            transform: translate(0, -50%);

            height: 80px;
            --storm-show-more-button-width: --apply(2, var(--storm-card-container-width), 500px, card);
            width: var(--storm-show-more-button-width);
            left: calc(50% - (var(--storm-show-more-button-width) / 2));

            border: 3px solid black;

        }

    }
    
}