/* ========================================
   ALCHEMY PAGE CSS
   Page-specific styles only.

   Global typography, buttons, image breaks,
   videos and testimonials are inherited from:
   prof-bubbles-2026.css
   ======================================== */


/* ========================================
   01. HERO / POSTER INTRO
   ======================================== */

#slides.slide-alchemy {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #08131D;
}


/* Hero background */

.alchemy-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.alchemy-hero-bg img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    transform: scale(1.15) translateY(-10%);
    transform-origin: center center;
}


/* Hero overlay */

.slide-alchemy .img-overlay-solid {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: rgba(8, 19, 29, 0.14);
}


/* Prof. Bubbles logo */

.slide-alchemy .hero-logo {
    position: absolute;
    top: 40px;
    left: 52px;
    z-index: 10;

    width: 190px;
    height: 125px;

    background-size: contain;
    background-position: left top;
    background-repeat: no-repeat;
}


/* Alchemy title image */

.alchemy-poster-content {
    position: absolute;
    left: 50%;
    bottom: 155px;
    z-index: 10;

    width: 860px;

    transform: translateX(-50%);
}

.alchemy-title-logo {
    display: block;
    width: 660px;
    height: auto;
    margin: 0 auto;
}


/* Trailer link */

.alchemy-trailer-cta {
    position: absolute;
    left: 100px;
    bottom: 130px;
    z-index: 30;
}

.alchemy-trailer-cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;

    transition: color 0.25s ease, transform 0.25s ease;
}

.alchemy-trailer-cta a:hover {
    color: #ffffff;
    transform: translateX(4px);
}


/* Hero curve */

.hero-curve {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 20;
}

.hero-curve svg path {
    fill: #ffffff;
}


/* Hide legacy hero elements */

.alchemy-hero-intro,
.alchemy-floating-bubbles,
.alchemy-tagline,
.alchemy-description,
.alchemy-tagline-logo {
    display: none;
}


/* ========================================
   02. INTRO TEXT
   ======================================== */

#alchemy-intro {
    background: #ffffff;
    padding: 140px 0 120px;
}

#alchemy-intro .pb-section-header {
    max-width: 900px;
    margin: 0 auto;
}

#alchemy-intro .pb-section-heading {
    max-width: 820px;
    margin: 0 auto;

    font-size: clamp(34px, 3.8vw, 56px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

#alchemy-intro .pb-section-divider {
    margin: 24px auto 36px;
}

#alchemy-intro .pb-lead,
#alchemy-intro .pb-section-header p:not(.pb-lead):not(.pb-final) {
    max-width: 780px;
    margin: 0 auto 22px;

    font-size: clamp(19px, 1.55vw, 24px);
    line-height: 1.55;
    letter-spacing: -0.015em;

    color: #66727A;
}

#alchemy-intro .pb-final {
    max-width: 780px;
    margin: 8px auto 0;

    font-size: clamp(18px, 1.35vw, 22px);
    font-weight: 500;
    line-height: 1.55;

    color: var(--pb-blue);
}


/* ========================================
   03. IMAGE QUOTE BREAK
   Uses global image break structure:
   .pb-image-break
   .pb-image-break-overlay
   .pb-image-break-content
   ======================================== */

.pb-alchemy-quote-break {
    background-image: url("../img/pictures/Prof-Bubbles_alchemy_quote.jpg");
    background-position: center center;
}

.pb-alchemy-quote-break .pb-image-break-overlay {
    background: linear-gradient(
        90deg,
        rgba(8, 19, 29, 0.82) 0%,
        rgba(8, 19, 29, 0.62) 36%,
        rgba(8, 19, 29, 0.24) 68%,
        rgba(8, 19, 29, 0.06) 100%
    );
}

.pb-alchemy-quote-break .pb-image-break-content {
    left: clamp(36px, 7vw, 132px);
    max-width: 680px;
}

.pb-alchemy-quote-break .pb-image-break-content blockquote {
    max-width: 560px;
}

.pb-alchemy-quote-break .pb-image-break-content cite {
    max-width: 760px;
}


/* ========================================
   04. VIDEO
   ======================================== */

#alchemy-video {
    background: var(--pb-soft-white);
    padding: 110px 0 120px;
}

#alchemy-video .pb-section-header {
    max-width: 900px;
    margin: 0 auto 72px;
}

#alchemy-video .pb-section-heading {
    max-width: 820px;
    margin: 0 auto;

    font-size: clamp(34px, 3.8vw, 56px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

#alchemy-video .pb-video-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

#alchemy-video .pb-video-container {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;

    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(8, 19, 29, 0.18);
}

#alchemy-video .pb-video-container iframe {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;

    border: 0;
}


/* ========================================
   05. SCENES / PILLARS
   ======================================== */

#alchemy-scenes {
    background: #ffffff;
    padding: 110px 0 120px;
}

#alchemy-scenes .alchemy-pillars-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#alchemy-scenes .alchemy-pillar {
    max-width: 500px;
    margin: 0 auto;
}

#alchemy-scenes .alchemy-pillar-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 4.2;

    object-fit: cover;

    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(8, 19, 29, 0.10);
}

#alchemy-scenes .alchemy-pillar h3 {
    margin: 30px 0 14px;

    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;

    color: var(--pb-stage-dark);
}

#alchemy-scenes .alchemy-meta {
    margin-bottom: 22px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: var(--pb-blue);
}

#alchemy-scenes .alchemy-benefit {
    margin: 0;

    font-size: 21px;
    line-height: 1.65;

    color: #42505D;
}


/* ========================================
   06. VISUAL CURIOSITIES / QUOTE GRID
   ======================================== */

#alchemy-curiosities {
    background: var(--pb-soft-white);
    padding: 0;
}

.alchemy-curiosity-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.alchemy-curiosity-panel {
    position: relative;

    display: flex;
    align-items: flex-end;

    min-height: 620px;
    overflow: hidden;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.alchemy-curiosity-panel:first-child {
    grid-column: 1 / -1;
    min-height: 700px;
}

.alchemy-curiosity-panel:not(:first-child) {
    min-height: 560px;
}

.alchemy-curiosity-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(8, 19, 29, 0.86) 0%,
        rgba(8, 19, 29, 0.62) 42%,
        rgba(8, 19, 29, 0.16) 100%
    );
}

.alchemy-curiosity-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1180px;
    padding: 0 7vw 84px;

    color: #ffffff;
}

.alchemy-curiosity-panel:not(:first-child) .alchemy-curiosity-content {
    padding: 0 48px 58px;
}


/* Second curiosity panel uses right-side quote */

.alchemy-curiosity-panel:nth-child(2) {
    justify-content: flex-end;
}

.alchemy-curiosity-panel:nth-child(2) .alchemy-curiosity-overlay {
    background: linear-gradient(
        270deg,
        rgba(8, 19, 29, 0.86) 0%,
        rgba(8, 19, 29, 0.62) 42%,
        rgba(8, 19, 29, 0.16) 100%
    );
}

.alchemy-curiosity-panel:nth-child(2) .alchemy-curiosity-content {
    display: flex;
    justify-content: flex-end;
}

.alchemy-curiosity-panel:nth-child(2) .alchemy-quote-overlay {
    margin-left: auto;
}


/* Quote text inside curiosity panels */

.alchemy-quote-overlay {
    position: relative;
    max-width: 900px;
    padding-left: 0;
}

.alchemy-quote-overlay::before,
.alchemy-quote-overlay::after,
.alchemy-quote-overlay blockquote::before,
.alchemy-quote-overlay blockquote::after {
    display: none !important;
    content: none !important;
}

.alchemy-quote-overlay blockquote {
    max-width: 850px;
    margin: 0;

    color: rgba(255, 255, 255, 0.98);

    font-family: var(--pb-font-body);
    font-size: clamp(25px, 2vw, 38px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.02em;

    text-shadow:
        0 3px 18px rgba(0, 0, 0, 0.75),
        0 0 30px rgba(0, 0, 0, 0.25);
}

.alchemy-quote-overlay cite {
    display: block;
    margin-top: 24px;

    color: rgba(255, 255, 255, 0.90);

    font-family: var(--pb-font-body);
    font-size: 13px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.45;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

.alchemy-curiosity-panel:not(:first-child) .alchemy-quote-overlay {
    max-width: 620px;
}

.alchemy-curiosity-panel:not(:first-child) .alchemy-quote-overlay blockquote {
    font-size: clamp(23px, 1.65vw, 32px);
}

.alchemy-curiosity-panel:not(:first-child) .alchemy-quote-overlay cite {
    font-size: 12px;
}


/* ========================================
   07. TOURING / TECH INFO
   ======================================== */

#alchemy-touring {
    background: #ffffff;
    padding: 100px 0 110px;
}

.alchemy-touring-header {
    max-width: 880px;
    margin: 0 auto 44px;
    text-align: center;
}

.alchemy-touring-header .pb-section-heading {
    margin-bottom: 24px;
}

.alchemy-touring-header .pb-subheading {
    max-width: 720px;
    margin: 0 auto;
}

.alchemy-touring-image {
    max-width: 1080px;
    aspect-ratio: 16 / 9;
}

.alchemy-touring-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 42%;
}

.alchemy-touring-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;

    margin: 34px auto 42px;

    text-align: center;
}

.alchemy-touring-facts span {
    position: relative;

    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;

    color: rgba(8, 19, 29, 0.82);
}

.alchemy-touring-facts span:not(:last-child)::after {
    content: "•";
    margin-left: 18px;

    color: var(--pb-blue);
}

.alchemy-specs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;

    max-width: 1180px;
    margin: 0 auto 42px;
    padding: 28px 34px;

    background: #ffffff;
    border: 1px solid rgba(37, 150, 190, 0.16);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(8, 19, 29, 0.08);
}

.alchemy-spec {
    text-align: center;
}

.alchemy-spec strong {
    display: block;
    margin-bottom: 7px;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;

    color: var(--pb-stage-dark);
}

.alchemy-spec span {
    display: block;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: rgba(8, 19, 29, 0.52);
}

.alchemy-touring-footer {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.alchemy-touring-footer p {
    margin: 0 0 28px;

    font-size: 18px;
    line-height: 1.65;

    color: rgba(8, 19, 29, 0.68);
}

.alchemy-touring-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}


/* ========================================
   08. RESPONSIVE: TABLET
   ======================================== */

@media (max-width: 991px) {

    #slides.slide-alchemy {
        min-height: 100svh;
    }

    .alchemy-hero-bg img {
        object-position: center 18%;
        transform: scale(1.12);
    }

    .slide-alchemy .hero-logo {
        top: 24px;
        left: 24px;

        width: 135px;
        height: 90px;
    }

    .alchemy-poster-content {
        left: 50%;
        right: auto;
        bottom: 110px;

        width: min(520px, calc(100vw - 48px));

        transform: translateX(-50%);
    }

    .alchemy-title-logo {
        width: min(460px, 100%);
    }

    #alchemy-touring {
        padding: 78px 0 88px;
    }

    .alchemy-specs {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ========================================
   09. RESPONSIVE: MOBILE
   ======================================== */

@media (max-width: 767px) {

    .alchemy-curiosity-stack {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .alchemy-curiosity-panel,
    .alchemy-curiosity-panel:first-child,
    .alchemy-curiosity-panel:not(:first-child) {
        grid-column: auto;
        min-height: 470px;
        align-items: flex-end;
    }

    .alchemy-curiosity-overlay,
    .alchemy-curiosity-panel:nth-child(2) .alchemy-curiosity-overlay {
        background: linear-gradient(
            180deg,
            rgba(8, 19, 29, 0.10) 0%,
            rgba(8, 19, 29, 0.58) 46%,
            rgba(8, 19, 29, 0.92) 100%
        );
    }

    .alchemy-curiosity-content,
    .alchemy-curiosity-panel:not(:first-child) .alchemy-curiosity-content,
    .alchemy-curiosity-panel:nth-child(2) .alchemy-curiosity-content {
        display: block;
        max-width: none;
        padding: 0 26px 42px;
    }

    .alchemy-quote-overlay,
    .alchemy-curiosity-panel:nth-child(2) .alchemy-quote-overlay,
    .alchemy-curiosity-panel:not(:first-child) .alchemy-quote-overlay {
        max-width: none;
        margin-left: 0;
        padding-left: 0;
    }

    .alchemy-quote-overlay blockquote,
    .alchemy-curiosity-panel:not(:first-child) .alchemy-quote-overlay blockquote {
        font-size: clamp(23px, 7vw, 31px);
        line-height: 1.28;
    }

    .alchemy-quote-overlay cite,
    .alchemy-curiosity-panel:not(:first-child) .alchemy-quote-overlay cite {
        font-size: 11px;
        letter-spacing: 0.055em;
    }
}


/* ========================================
   10. RESPONSIVE: SMALL MOBILE
   ======================================== */

@media (max-width: 640px) {

    .alchemy-touring-header {
        text-align: left;
    }

    .alchemy-touring-header .pb-subheading {
        margin-left: 0;
    }

    .alchemy-touring-image {
        border-radius: 14px;
    }

    .alchemy-specs {
        grid-template-columns: repeat(2, 1fr);
        padding: 24px 20px;
    }

    .alchemy-touring-actions {
        align-items: stretch;
    }

    .alchemy-touring-actions .pb-btn {
        width: 100%;
    }
}