/* Podcast Page Styles */

.podcast-page-container {
    font-family: 'Outfit', sans-serif;
    /* Assuming Outfit is used, fallback to sans-serif */
    color: #333;
    background-color: #f4fbf9;
    /* Light teal background */
}


/* Hero Section */
.podcast-hero {
    background-color: #003b38;
    /* Dark teal */
    color: #fff;
    padding: 96px;
    margin-top: 4rem;
    /* Increased top padding to fix header overlap */
    text-align: left;
    background-image: url('../images/podcast_hero_desktop.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.podcast-hero .hero-title {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #67c6be;
    /* Lighter teal */
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .podcast-hero {
        background-image: url(../images/podcast_hero_mobile.webp);
        padding: 70px 7px 0px;
        margin: 16px;
        margin-top: 5rem;
        border-radius: 20px;
        text-align: center;
        background-size: cover;
        background-position: center;
        min-height: 595px;
    }

    .podcast-hero .hero-title {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 13px;
    }

    .podcast-hero .hero-title br {
        display: none;
    }

    .podcast-hero .hero-underline {
        margin: 0 auto 25px auto;
    }

    .podcast-hero .subtitle {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .podcast-hero .description {
        font-size: 1rem !important;
        margin: 0 auto;
        line-height: 1.5;
    }
}



.podcast-hero .hero-underline {
    width: 150px;
    height: 2px;
    background-color: #67c6be;
    margin-bottom: 19px;
}

.podcast-hero .subtitle {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.podcast-hero .description {
    font-style: italic;
    opacity: 0.9;
    color: #fff;
    font-size: 1.1rem;
    max-width: 584px;
    /* Limit width for better readability on desktop */
}

/* About Section */
.podcast-about {
    text-align: center;
    padding: 80px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4FBF9 100%);
}

.podcast-about h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: #000;
}

.podcast-about .teal-text {
    color: #008078;
}

.podcast-about .about-subtitle {
    font-size: 1.3rem;
    font-style: italic;
    color: #547E7A;
    margin: 0 auto 25px auto;
    max-width: 700px;
    line-height: 1.5;
}

.podcast-about .about-question {
    font-size: 1.4rem;
    font-weight: 700;
    color: #004D48;
    margin-bottom: 25px;
}

.podcast-about .podcast-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.podcast-btn-custom {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 10px;
    color: #33bfbd;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 24px;
    border: 1px #bebebe solid;
    border-bottom: 5px #33bfbd solid;
    background: linear-gradient(#ffffff, #ffffff 50%, #33bfbd 50%, #33bfbd);
    background-size: 100% 200%;
    transition: background 1s;
    min-width: 180px;
}

.podcast-btn-custom:hover {
    background-position: 100% 100%;
    transition: all .5s ease-out;
    color: #fff;
    box-shadow: 0 0.5rem .8rem rgb(0 0 0 / 30%) !important;
    transform: translateY(0);
    border-color: #bebebe;
    /* Keep border color consistent or match hover if needed, but cta doesn't change it */
    border-bottom-color: #33bfbd;
}

@media (max-width: 768px) {
    .podcast-about {
        padding: 25px 16px;
    }

    .podcast-about h2 {
        font-size: 24px;
    }

    .podcast-about .about-subtitle {
        font-size: 16px;
    }

    .podcast-about .about-question {
        font-size: 16px;
    }

    .podcast-btn-custom {
        width: 100%;
        text-align: center;
    }
}

/* Episodes Section */
.podcast-episodes {
    padding: 60px 0;
    background-color: #eaf8f6;
    /* Very light teal */
}

.podcast-list-container {
    background-color: #fff;
    border: 2px solid #003b38;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.podcast-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 0;
    background-color: #001f1d;
    color: #fff;
    padding: 30px;
    border-bottom: 2px solid #003b38;
}

.podcast-section-header h2 {
    margin: 0;
    font-size: 2.5rem;
    color: #67c6be;
    font-weight: 700;
    white-space: nowrap;
}

.header-wave {
    width: auto;
}

.podcast-episodes-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px;
}

/* Pagination */
.podcast-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 30px 30px;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #003b38;
    color: #003b38;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
}

.pagination-btn:hover,
.pagination-btn.active {
    background: #003b38;
    color: #fff;
}

/* Episode Card - New Centered Layout */
.podcast-episode-card {
    display: flex !important;
    /* Ensure flex is used */
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    background: #b8f1ed;
    /* Light teal background from image */
    padding: 60px 40px;
    border-radius: 30px;
    margin-bottom: 40px;
    position: relative;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Added subtle shadow for depth */
    width: 100%;
}

.podcast-episode-pill-top {
    background: #49ada6;
    color: #fff;
    /* White text on teal pill */
    padding: 8px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    text-transform: capitalize;
    /* "Episode - 1" */
    margin-bottom: 30px;
    display: inline-block;
}

.podcast-header {
    max-width: 850px;
    margin-bottom: 45px;
}

.podcast-title {
    font-size: 2rem;
    color: #003b38;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 25px 0;
}

.podcast-excerpt {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 750px;
}

/* Featured Thumbnail Area */
.podcast-thumb-featured {
    position: relative;
    width: 100%;
    max-width: 950px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: 8px solid #fff;
    /* Thick white border from image */
}

.main-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.95;
    display: block;
}

.podcast-inner-pill {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    z-index: 5;
    text-transform: uppercase;
}

.podcast-logo-overlays {
    position: absolute;
    top: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    z-index: 5;
}

.xchange-logo {
    height: 70px;
    width: auto;
}

.kredx-logo {
    height: 35px;
    width: auto;
    filter: brightness(0) invert(1);
}

.podcast-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    cursor: pointer;
    z-index: 20;
    /* Higher z-index to be on top */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    /* Ensure it receives clicks */
}

.podcast-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 255, 255, 0.9);
}

.podcast-play-btn::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 35px solid #000;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    margin-left: 10px;
}

.podcast-guest-labels {
    position: absolute;
    bottom: 35px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 60px;
    gap: 20px;
    z-index: 5;
}

.guest-label {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 15px 30px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 250px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.guest-label .name {
    font-weight: 700;
    font-size: 20px;
}

.guest-label .role {
    font-size: 15px;
    opacity: 0.8;
}

/* Override and Mobile */
.podcast-list-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .podcast-episode-card {
        padding: 20px 12px;
        border-radius: 20px;
    }

    .podcast-header {
        margin-bottom: 20px;
    }

    .podcast-title {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    .podcast-excerpt {
        font-size: 0.7rem;
        line-height: 1.4;
    }

    .podcast-thumb-featured {
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .podcast-guest-labels {
        flex-direction: column;
        bottom: 8px;
        align-items: center;
        gap: 8px;
        padding: 0 10px;
    }

    .guest-label {
        width: 90%;
        min-width: unset;
        padding: 5px 10px;
        border-radius: 8px;
    }

    .guest-label .name {
        font-size: 14px;
    }

    .guest-label .role {
        font-size: 11px;
    }

    .xchange-logo {
        height: 35px;
    }

    .kredx-logo {
        height: 15px;
    }

    .podcast-play-btn {
        width: 60px;
        height: 60px;
    }

    .podcast-play-btn::after {
        border-left-width: 20px;
        border-top-width: 12px;
        border-bottom-width: 12px;
        margin-left: 6px;
    }
}

/* Modal and Read More Styles below */

/* Read More Modal Styles */
.read-more-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    padding: 20px;
}

.read-more-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    background-color: #003b38;
    border-radius: 20px;
    /* padding: 30px 30px 0px 30px; */
    color: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.read-more-close {
    position: absolute;
    top: 0px;
    right: 10px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    z-index: 10;
}

.read-more-body {
    display: flex;
    align-items: flex-start;
}

.read-more-left {
    flex: 1;
    padding: 20px 0px 0px 20px;
}

@media (max-width: 768px) {
    .read-more-left {
        padding: 0px;
    }
}

.read-more-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.read-more-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.read-more-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #67c6be;
}

.read-more-text h2 .teal-text {
    color: #67c6be;
}

.read-more-text h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.read-more-divider {
    width: 100px;
    height: 2px;
    background-color: #67c6be;
    margin-bottom: 30px;
}

.read-more-text p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0px !important;
    color: #e0e0e0;
}

.read-more-text strong {
    color: #fff;
    font-weight: 700;
}

.read-more-bottom {
    width: 100%;
    margin-top: auto;
    /* Push to bottom */
    line-height: 0;
    /* Remove space below image */
}

.read-more-wave {
    width: 100%;
    height: 76px;
    display: block;
}

@media (max-width: 768px) {
    .read-more-content {
        padding: 30px 10px 10px 10px;
        text-align: center;
    }

    .read-more-body {
        flex-direction: column-reverse;
        /* Put logo on top or bottom? User said "text only" for mobile in previous turn, but now asking for specific layout. Let's keep text first or stack them. */
        gap: 20px;
    }

    .read-more-right {
        display: none;
        /* Hide logo on mobile as per "text only" instruction or keep it? User said "mobile layout mei as you can se another image only there is text". Let's hide the right logo on mobile to match the "text only" vibe, or maybe show it small. Let's hide it for now to be safe with "text only". */
    }

    /* Actually, user said: "mobile layout mei as you can se another image only there is text with same background color". 
       This implies mobile has NO image, just text.
       So hiding .read-more-right is correct.
       What about bottom wave? User didn't specify, but it looks like a footer decoration. I'll keep it but maybe smaller.
    */

    .read-more-divider {
        margin: 0 auto 10px auto;
    }

    .read-more-text h2 {
        font-size: 2rem;
    }

    .read-more-wave {
        display: none;
    }
}

/* Know Your Host Modal Styles */
.know-host-content {
    /* background-image: url('../images/podcast_hero_desktop.webp'); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #003b38;
    max-width: 1000px;
    padding: 40px;
}

.know-host-body {
    display: flex;
    gap: 50px;
    align-items: center;
}

.know-host-left {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.host-card {
    text-align: center;
    width: 100%;
}

.host-img-wrapper {
    border: 2px solid #3bcbc0;
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 15px;
    background: rgba(0, 59, 56, 0.5);
    /* Semi-transparent background for card */
    box-shadow: 0 0 15px rgba(59, 203, 192, 0.3);
    /* Teal glow */
}

.host-img {
    width: 100%;
    border-radius: 15px;
    display: block;
}

.host-info h3 {
    color: #3bcbc0;
    font-size: 1.4rem;
    margin: 15px 0 5px;
    font-weight: 700;
}

.host-info p {
    color: #e0e0e0;
    font-size: 0.9rem;
}

.host-social {
    margin-top: 10px;
}

.host-social img {
    width: 40px;
    height: auto;
    transition: transform 0.2s;
}

.host-social img:hover {
    transform: scale(1.1);
}

.know-host-right {
    flex: 1;
}

.know-host-right .read-more-text h2 {
    color: #3bcbc0;
    /* Teal title */
    margin-top: 0;
}

.know-host-right .read-more-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 20px !important;
}

.know-host-right .read-more-text strong {
    color: #fff;
    font-weight: 800;
}

/* Mobile Responsive for Know Your Host */
@media (max-width: 768px) {
    .know-host-content {
        background-image: none;
        /* Text only background */
        background-color: #003b38;
        padding: 30px 20px;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .know-host-body {
        flex-direction: column;
        gap: 0;
    }

    .know-host-left {
        display: none;
        /* Hide image on mobile */
    }

    .know-host-right .read-more-text h2 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 10px;
    }

    .know-host-right .read-more-text p {
        font-size: 0.95rem;
        text-align: left;
        /* Or justify? */
        color: #e0e0e0;
    }
}

/* Responsive Styles for Podcast List */
@media (max-width: 768px) {
    .podcast-list-container {
        border-radius: 15px;
    }

    .podcast-section-header {
        padding: 20px 15px;
    }

    .podcast-section-header h2 {
        font-size: 1.8rem;
    }

    .header-wave {
        display: none;
    }

    .podcast-episodes-list {
        padding: 0px;
        gap: 16px;
    }

    .podcast-pagination {
        padding: 0 15px 20px;
    }

    .pagination-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* Podcast Footer Section */
.podcast-footer-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #eaf8f6 0%, #ffffff 100%);
    text-align: center;
}

.podcast-footer-block {
    margin-bottom: 60px;
}

.podcast-footer-block:last-child {
    margin-bottom: 0;
}

.podcast-footer-block h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000;
}

.podcast-footer-block .teal-text {
    color: #3bcbc0;
}

/* Platform Buttons */
.podcast-platform-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.platform-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-decoration: none !important;
    color: #000;
    font-weight: 700;
    font-size: 1.2rem;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 200px;
    justify-content: center;
}

.platform-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: #000;
}

.platform-btn img {
    height: 30px;
    width: auto;
}

.spotify-btn span {
    color: #1DB954;
    /* Spotify Green */
}

.youtube-btn span {
    color: #FF0000;
    /* YouTube Red */
}

.apple-btn span {
    color: #fa243c;
    /* Apple Music */
}


.soundcloud-btn span {
    color: #ff5500;
    /* SoundCloud Orange */
    text-transform: uppercase;
}

/* Social Icons */
.social-subtext {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 25px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.podcast-social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.podcast-social-icons a {
    color: #333;
    font-size: 2rem;
    transition: color 0.2s, transform 0.2s;
}

.podcast-social-icons a:hover {
    color: #3bcbc0;
    transform: scale(1.1);
}

/* Contact Block */
.contact-block h3 {
    margin-bottom: 10px;
}

.contact-block .feature-text {
    font-size: 2rem;
    margin-bottom: 5px;
}

.contact-block .series-text {
    font-size: 2rem;
    margin-bottom: 40px;
}

.contact-block .contact-title {
    font-size: 2rem;
    margin-bottom: 30px;
}

.contact-details {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-label {
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: 600;
}

.contact-value {
    font-size: 1.3rem;
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

.contact-value.underline {
    text-decoration: underline;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .podcast-footer-section {
        padding: 50px 20px;
    }

    .podcast-footer-block h3,
    .contact-block .feature-text,
    .contact-block .series-text,
    .contact-block .contact-title {
        font-size: 1.5rem;
    }

    .podcast-platform-buttons {
        gap: 15px;
    }

    .platform-btn {
        width: 100%;
        padding: 10px;
    }

    .contact-details {
        flex-direction: column;
        gap: 30px;
    }

    #podcastModalClose {
        right: 0;
        top: -40px;
    }
}