/* What's On / events-list / upcoming-events banner art.
   data-wo-banner="{kind}-{family}" e.g. football-cyan, party-orange. */

[data-wo-banner="football-cyan"]   { --wo-banner: url("/images/whatson/widget-banners/football-cyan.png"); }
[data-wo-banner="football-green"]  { --wo-banner: url("/images/whatson/widget-banners/football-green.png"); }
[data-wo-banner="football-lime"]   { --wo-banner: url("/images/whatson/widget-banners/football-lime.png"); }
[data-wo-banner="football-orange"] { --wo-banner: url("/images/whatson/widget-banners/football-orange.png"); }
[data-wo-banner="football-pink"]   { --wo-banner: url("/images/whatson/widget-banners/football-pink.png"); }
[data-wo-banner="football-purple"] { --wo-banner: url("/images/whatson/widget-banners/football-purple.png"); }
[data-wo-banner="football-red"]    { --wo-banner: url("/images/whatson/widget-banners/football-red.png"); }
[data-wo-banner="party-cyan"]      { --wo-banner: url("/images/whatson/widget-banners/party-cyan.png"); }
[data-wo-banner="party-green"]     { --wo-banner: url("/images/whatson/widget-banners/party-green.png"); }
[data-wo-banner="party-lime"]      { --wo-banner: url("/images/whatson/widget-banners/party-lime.png"); }
[data-wo-banner="party-orange"]    { --wo-banner: url("/images/whatson/widget-banners/party-orange.png"); }
[data-wo-banner="party-pink"]      { --wo-banner: url("/images/whatson/widget-banners/party-pink.png"); }
[data-wo-banner="party-purple"]    { --wo-banner: url("/images/whatson/widget-banners/party-purple.png"); }
[data-wo-banner="party-red"]       { --wo-banner: url("/images/whatson/widget-banners/party-red.png"); }

.wo-banner-panel {
    position: relative;
    background-color: #0f172a;
    background-image: var(--wo-banner);
    background-size: cover;
    background-position: center right;
    color: #fff;
    isolation: isolate;
}
.wo-banner-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, .78) 0%,
        rgba(15, 23, 42, .52) 48%,
        rgba(15, 23, 42, .32) 100%
    );
    pointer-events: none;
    z-index: 0;
}
.wo-banner-panel > * {
    position: relative;
    z-index: 1;
}

.swel-card--cyan .swel-date-col,
.swue-card--cyan .swue-date-col { background: #2563eb; }
.swel-card--purple .swel-date-col,
.swue-card--purple .swue-date-col { background: #7c3aed; }
.swel-card--green .swel-date-col,
.swue-card--green .swue-date-col { background: #059669; }
.swel-card--orange .swel-date-col,
.swue-card--orange .swue-date-col { background: #d97706; }
.swel-card--red .swel-date-col,
.swue-card--red .swue-date-col { background: #dc2626; }
.swel-card--pink .swel-date-col,
.swue-card--pink .swue-date-col { background: #db2777; }
.swel-card--lime .swel-date-col,
.swue-card--lime .swue-date-col { background: #65a30d; }