.ssp-podcasts {
display: grid;
gap: 20px;
max-width: 100%;
} .ssp-podcasts-columns-1 {
grid-template-columns: 1fr;
} .ssp-podcasts-columns-2 {
grid-template-columns: repeat(2, 1fr);
} .ssp-podcasts-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.ssp-podcast-card {
display: flex;
background: var(--ssp-podcast-card-bg, #f8f9fa);
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, background-color 0.3s ease;
position: relative;
}
.ssp-podcast-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
background: var(--ssp-podcast-card-hover-bg, #e9ecef);
}
.ssp-podcast-image {
flex-shrink: 0;
width: 120px;
aspect-ratio: 1 / 1;
margin-right: 20px;
border-radius: 8px;
overflow: hidden;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
align-self: flex-start;
}
.ssp-podcast-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ssp-podcast-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
color: white;
text-align: center;
padding: 10px;
}
.ssp-podcast-placeholder-text {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
word-break: break-word;
}
.ssp-podcast-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.ssp-podcast-header {
margin-bottom: 8px;
}
.ssp-podcast-title {
margin: 0;
font-size: 24px;
font-weight: 700;
color: var(--ssp-title-color, #6c5ce7);
line-height: 1.2;
}
.ssp-listen-now-button-content {
background: var(--ssp-button-bg, #343a40);
color: var(--ssp-button-text, #ffffff);
text-decoration: none;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
display: inline-block;
margin-top: auto;
margin-left: auto;
width: fit-content;
box-sizing: border-box;
transition: 0.3s ease;
} a.ssp-listen-now-button {
margin-top: auto;
margin-left: auto;
width: fit-content;
text-decoration: none;
} a.ssp-listen-now-button:hover .ssp-listen-now-button-content,
a.ssp-listen-now-button:focus .ssp-listen-now-button-content {
background: var(--ssp-button-hover-bg, #495057);
color: var(--ssp-button-text, #ffffff);
text-decoration: none;
outline: 1px solid var(--ssp-button-hover-bg, #495057);
outline-offset: 0px;
}
a.ssp-listen-now-button:focus-visible .ssp-listen-now-button-content {
outline: 1px solid var(--ssp-title-color, #6c5ce7);
outline-offset: 2px;
}
.ssp-podcast-episode-count {
font-size: 16px;
color: var(--ssp-episode-count-color, #6c757d);
margin-bottom: 8px;
font-weight: 500;
}
.ssp-podcast-description {
font-size: 16px;
color: var(--ssp-description-color, #6c757d);
line-height: 1.5;
margin: 0 0 16px 0;
text-align: justify;
} @media (max-width: 768px) { .ssp-podcasts-columns-2,
.ssp-podcasts-columns-3 {
grid-template-columns: 1fr;
}
.ssp-podcast-card {
flex-direction: column;
text-align: center;
}
.ssp-podcast-image {
width: 100%;
max-width: 300px;
aspect-ratio: 1 / 1;
margin: 0 auto 15px auto;
}
.ssp-podcast-title {
font-size: 20px;
text-align: center;
}
.ssp-listen-now-button-content {
font-size: 12px;
padding: 12px 12px;
width: 100%;
max-width: 300px;
display: block;
margin: auto auto 12px auto;
text-align: center;
} a.ssp-listen-now-button {
width: 100%;
max-width: 300px;
display: block;
margin: auto auto 12px auto;
text-align: center;
}
.ssp-podcast-episode-count {
font-size: 14px;
}
.ssp-podcast-description {
font-size: 14px;
}
} @media (max-width: 1024px) and (min-width: 769px) { .ssp-podcasts-columns-3 {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 900px) {
.ssp-podcast-card {
flex-direction: column;
text-align: center;
}
.ssp-podcast-image {
width: 100%;
max-width: 300px;
aspect-ratio: 1 / 1;
margin: 0 auto 15px auto;
}
} .ssp-podcast-card-clickable {
position: relative;
}
.ssp-podcast-card-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
text-decoration: none;
color: transparent;
}
.ssp-podcast-card-link:hover,
.ssp-podcast-card-link:focus {
text-decoration: none;
color: transparent;
outline: 2px solid #6c5ce7;
outline-offset: 2px;
} .ssp-podcast-card-link:focus-visible {
outline: 2px solid #6c5ce7;
outline-offset: 2px;
}
.ssp-podcast-card-clickable:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.ssp-podcast-title-link {
text-decoration: none;
color: inherit;
}
.ssp-podcast-title-link:hover,
.ssp-podcast-title-link:focus {
text-decoration: none;
color: #495057;
outline: 2px solid #6c5ce7;
outline-offset: 2px;
border-radius: 2px;
}
.ssp-podcast-title-link:focus-visible {
outline: 2px solid #6c5ce7;
outline-offset: 2px;
}
.ssp-podcast-title-link .ssp-podcast-title {
margin: 0;
font-size: 24px;
font-weight: 700;
color: var(--ssp-title-color, #6c5ce7);
line-height: 1.2;
transition: color 0.3s ease;
}
.ssp-podcast-title-link:hover .ssp-podcast-title {
color: #495057;
} .ssp-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}.shariff{display:block !important;clear:both}.shariff ul{display:flex;flex-direction:row;flex-flow:row wrap;padding:0 !important;margin:0 !important}.shariff li{height:35px;box-sizing:border-box;list-style:none !important;overflow:hidden !important;margin:5px !important;padding:0 !important;text-indent:0 !important;border-left:0 none !important}.shariff a{position:relative;display:block !important;height:35px;padding:0;margin:0;box-sizing:border-box;border:0;text-decoration:none;background-image:none !important;text-align:left;box-shadow:none;cursor:pointer}.shariff a:hover{color:#fff;background-color:inherit !important;text-decoration:none !important}.shariff a:visited{color:inherit}.shariff .shariff-count{position:absolute;height:33px;top:0;right:0;margin:1px;padding:0 8px;background-color:rgba(255,255,255,0.5)}.shariff .shariff-count,.shariff .shariff-text{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:36px;vertical-align:top}.shariff .shariff-text{padding-left:3px}.shariff .shariff-icon svg{width:32px;height:20px;padding:7px 1px;box-sizing:content-box !important}.shariff-button::before{content:none !important}.shariff .shariff-buttons .shariff-text-white{color:#fff}.shariff .shariff-buttons .shariff-hidezero{opacity:0}.shariff .theme-default a{color:#fff !important}.shariff .theme-default .shariff-icon svg path{fill:#fff}.shariff .theme-color .shariff-count{background-color:transparent !important;color:#fff !important}.shariff .theme-color .shariff-icon svg path{fill:#fff}.shariff .theme-grey a{background-color:#b0b0b0 !important}.shariff .theme-grey a:hover{background-color:inherit !important}.shariff .theme-grey .shariff-count{background-color:transparent;color:#fff !important}.shariff .theme-grey .shariff-icon svg path{fill:#fff}.shariff .theme-white a{background-color:#fff !important;border:1px solid #ddd}.shariff .theme-white a:hover{background-color:#eee !important;color:inherit}.shariff .theme-white svg{fill:currentColor}.shariff .theme-white .shariff-count{background-color:transparent;margin:0}.shariff .wcag_colors .shariff-count{color:#fff !important;background-color:rgba(255,255,255,0.2)}.shariff .shariff-buttons.theme-round li{width:35px !important;height:35px;border-radius:50%;margin:5px}.shariff .theme-round a{position:relative;height:35px;border-radius:50%}.shariff .theme-round .shariff-icon svg{display:block;margin:auto;padding:8px 1px}.shariff .theme-round .shariff-text{display:block}.shariff .theme-round .shariff-count{display:inline;padding:0;right:0;left:0;top:0;background-color:transparent;color:transparent !important;text-align:center}.shariff .theme-round .shariff-count:hover{background-color:inherit !important;color:#fff !important}.shariff .theme-round .shariff-icon svg path{fill:#fff}.shariff .shariff-buttons.buttonsize-small li{height:25px !important}.shariff .shariff-buttons.buttonsize-small a{height:25px !important}.shariff .shariff-buttons.buttonsize-small.orientation-vertical li{width:115px}.shariff .shariff-buttons.buttonsize-small .shariff-icon svg{width:22px;height:15px;padding:5px 1px}.shariff .shariff-buttons.buttonsize-small .shariff-text,.shariff .shariff-buttons.buttonsize-small .shariff-count{font-size:11px;line-height:25px;padding:0 5px;height:23px}.shariff .shariff-buttons.buttonsize-small .shariff-text{padding-left:1px !important}.shariff .shariff-buttons.buttonsize-small.theme-round li{width:25px !important}.shariff .shariff-buttons.buttonsize-small.theme-round a{width:25px !important}.shariff .shariff-buttons.buttonsize-small.theme-round .shariff-count{padding:0 !important;height:25px !important}.shariff .shariff-buttons.theme-round.buttonsize-small.orientation-horizontal li{margin:5px 7px}.shariff .shariff-buttons.theme-round.buttonsize-small.orientation-horizontal li:first-child{margin-left:5px}.shariff .shariff-buttons.theme-round.buttonsize-small.orientation-horizontal li:last-child{margin-right:5px}.shariff .buttonsize-large li{height:45px !important}.shariff .buttonsize-large a{height:45px !important}.shariff .buttonsize-large.orientation-vertical li{width:155px}.shariff .buttonsize-large .shariff-icon svg{width:40px;height:28px;padding:9px 2px}.shariff .buttonsize-large .shariff-text,.shariff .buttonsize-large .shariff-count{font-size:14px;line-height:45px;padding:0 10px;height:43px}.shariff .buttonsize-large .shariff-text{padding-left:1px !important}.shariff .shariff-buttons.buttonsize-large.theme-round li{width:45px !important;height:45px !important}.shariff .buttonsize-large.theme-round a{width:45px !important}.shariff .buttonsize-large.theme-round .shariff-count{padding:0 !important;height:45px !important}.shariff .orientation-vertical{flex-direction:column}.shariff .orientation-vertical li{width:135px}.shariff.shariff-align-flex-start ul{justify-content:flex-start;align-items:flex-start}.shariff.shariff-align-center ul{justify-content:center;align-items:center}.shariff.shariff-align-flex-end ul{justify-content:flex-end;align-items:flex-end}.widget .shariff.shariff-widget-align-flex-start ul{justify-content:flex-start;align-items:flex-start}.widget .shariff.shariff-widget-align-center ul{justify-content:center;align-items:center}.widget .shariff.shariff-widget-align-flex-end ul{justify-content:flex-end;align-items:flex-end}.shariff.shariff-buttonstretch li{flex:1 0 auto !important}.shariff.shariff-buttonstretch .orientation-vertical li{width:100% !important}.widget .shariff li{border:0;font-weight:400}.widget .shariff .theme-default a,.widget .shariff .theme-color a,.widget .shariff .theme-grey a,.widget .shariff .theme-round a{color:#fff;display:block;font-weight:400}.widget .shariff .theme-default a:hover,.widget .shariff .theme-color a:hover,.widget .shariff .theme-grey a:hover,.widget .shariff .theme-round a:hover{color:#fff;font-weight:400}.shariff-warning{background-color:red;color:#fff;font-size:20px;font-weight:700;padding:10px;text-align:center;margin:0 auto;line-height:1.5}.shariff .info a{border:1px solid #ddd;width:35px}.shariff .wcag_colors .info a{border:1px solid #575757;width:35px}.shariff .shariff-button.info{width:35px;flex:0 0 auto !important}.shariff .theme-default .shariff-button.shariff-nocustomcolor.info svg path{fill:#999}.shariff .theme-default.wcag_colors .shariff-button.shariff-nocustomcolor.info svg path{fill:#595959}.shariff .theme-round .shariff-button.shariff-nocustomcolor.info svg path{fill:#999}.shariff .theme-round.wcag_colors .shariff-button.shariff-nocustomcolor.info svg path{fill:#595959}.shariff .buttonsize-small .shariff-button.info{width:25px}.shariff .buttonsize-small .info a{width:25px}.shariff .buttonsize-large .shariff-button.info{width:45px}.shariff .buttonsize-large .info a{width:45px}.shariff .info .shariff-icon svg{display:block;margin:auto}@media only screen and (max-width:360px){.shariff .shariff-buttons.buttonsize-small li{width:25px}.shariff .shariff-buttons li{width:35px}.shariff .shariff-buttons.buttonsize-large li{width:45px}.shariff .shariff-buttons .shariff-icon svg{display:block;margin:auto}.shariff .shariff-buttons .shariff-text{display:none}.shariff .shariff-buttons .shariff-count{display:none}}@media only screen and (min-width:361px){.shariff .shariff-buttons.buttonsize-small li{width:105px}.shariff .shariff-buttons li{width:125px}.shariff .shariff-buttons.buttonsize-large li{width:155px}.shariff .shariff-buttons .shariff-text{display:inline}.shariff .shariff-buttons .shariff-count{display:inline}}@media only screen and (min-device-width:1025px){.shariff .shariff-mobile{display:none !important}}