/*
 * peptilab/hero-slider — frontend styles
 * Depends on: variables.css
 */

/* ============================================================
   Slider wrapper
   ============================================================ */
.pl-hero-slider {
    position:     relative;
    overflow:     hidden;
    width:        100%;
    aspect-ratio: 1440 / 800;
    background:   var( --pl-soft-lime, #f0f8d9 );
}

/* ============================================================
   Slide — stacked absolute, soft cross-fade
   ============================================================ */
.pl-hero-slide {
    position:       absolute;
    inset:          0;
    width:          100%;
    height:         100%;
    overflow:       hidden;
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transition:     opacity 1.2s cubic-bezier(.4, 0, .2, 1),
                    visibility 1.2s cubic-bezier(.4, 0, .2, 1);
    z-index:        1;
}

.pl-hero-slide.is-active {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    z-index:        2;
}

/* Before JS hydrates: show the first slide as a fallback */
.pl-hero-slider:not(:has(.pl-hero-slide.is-active)) .pl-hero-slide:first-child {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
}

/* ============================================================
   Background image
   ============================================================ */
.pl-hero__bg {
    position: absolute !important;
    inset:    0 !important;
    z-index:  0;
    margin:   0 !important;
    width:    100% !important;
    height:   100% !important;
    overflow: hidden;
}

.pl-hero__bg img {
    width:           100% !important;
    height:          100% !important;
    object-fit:      cover !important;
    object-position: center center !important;
    display:         block;
}

/* Desktop: show desktop bg, hide mobile */
.pl-hero__bg--mobile {
    display: none !important;
}

/* ============================================================
   Content overlay
   ============================================================ */
.pl-hero__content {
    position:        absolute !important;
    inset:           0 !important;
    z-index:         2;
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: center !important;
}

.pl-hero__content > .wp-block-group {
    max-width:      1360px;
    width:          100%;
    margin:         0 auto !important;
    padding:        180px 60px 100px !important;
    box-sizing:     border-box;
    height:         100%;
    display:        flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* ============================================================
   Two-column layout
   ============================================================ */
.pl-slide-inner.wp-block-columns {
    display: flex;
    justify-content: space-between;
    align-items: stretch !important;
    gap:         0 !important;
    margin:      0 !important;
    flex:        1;
}

.pl-slide-left.wp-block-column {
    flex:           0 0 50% !important;
    max-width:      50% !important;
    display:        flex !important;
    flex-direction: column !important;
    height: 100%;
}

.pl-slide-right.wp-block-column {
    flex:           0 0 50% !important;
    max-width:      50% !important;
    display:        flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items:    flex-end !important;
    text-align:     right;
    height: 100%;
}

/* ============================================================
   Typography
   ============================================================ */
.pl-hero__title-1,
.pl-hero__title-2 {
    font-size:      88px;
    font-weight:    500;
    line-height:    1.0;
    letter-spacing: 0;
    color:          var(--pl-text) !important;
}

.pl-hero__desc {
    color:          #2A2A2A !important;
    max-width:      350px;
    margin-top:     auto !important;
}

/* ── CTA ── */
.pl-hero__cta { margin-top: 32px; margin-bottom: 0 }
.pl-hero__cta .wp-block-button__link {
    position: relative;
    background:      var(--pl-accent)!important;
    color:           #F7F9FC !important;
    font-weight:     600 !important;
    font-size:       16px !important;
    line-height: 1.5;
    border-radius: var(--pl-border-radius);
    transition:      background var(--pl-transition), border-color var(--pl-transition),
    transform var(--pl-transition-fast);
    padding: 14px 25px;
}

.pl-hero__cta .wp-block-button__link::before {
    content: "";
    display: inline-block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 13L13 1M13 1H5M13 1V9' stroke='%23F7F9FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    background-position: center;
    position: absolute;
    right: -52px;
    top: 50%;
    background-color: var(--pl-accent);
    transform: translateY(-50%);
}

.pl-hero__cta .wp-block-button__link:hover {
    background:   var(--pl-accent-dark) !important;
}

.pl-hero__cta .wp-block-button__link:hover::before {
    transform: translateY(-50%) rotate(45deg);
    background-color:   var(--pl-accent-dark)
}

/* ── Labels ── */
.pl-hero__labels {
    display:         flex !important;
    flex-wrap:       wrap;
    gap:             12px !important;
    justify-content: flex-end !important;
}

.pl-hero__label {
    display:       inline-flex !important;
    align-items:   center;
    margin:        0 !important;
    padding:       4px 12px !important;
    background:    #F7F9FC !important;
    border:        none !important;
    border-radius: 32px !important;
    font-size:     16px !important;
    font-weight:   400 !important;
    line-height:   calc( 24 / 16 ) !important;
    color:         #537FF4 !important;
    box-shadow: 0 2px 10px rgba(26,26,26, 0.08);
}

/* ── Title 2 — same typography as title-1 ── */
.pl-hero__title-2 {
    margin-top: 20px !important;
    text-align: right;
}

/* ============================================================
   Dot navigation — right-aligned, flush with content padding
   ============================================================ */
.pl-hero-nav {
    position:  absolute;
    bottom:    53px;
    right:     max(100px, calc((100% - 1240px) / 2));           /* mirror of content padding */
    display:   flex;
    gap:       8px;
    z-index:   10;
}


.pl-hero-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        none;
    background:     rgba(83, 127, 244, 0.4);
    cursor:        pointer;
    padding:       0;
    flex-shrink:   0;
    transition:    background var( --pl-transition );
}

.pl-hero-dot.is-active {
    background: rgba(83, 127, 244, 0.8);
}

/* ============================================================
   Responsive
   ============================================================ */
/* ============================================================
   Responsive — tablet (≤1024px)
   ============================================================ */
@media ( max-width: 1024px ) {
    .pl-hero__content > .wp-block-group {
        padding: 120px 24px !important;
    }

    .pl-hero__title-1,
    .pl-hero__title-2 {
        font-size:   36px;
        line-height: calc( 48 / 36 );
    }
    .pl-hero__title2 {
        text-align: left;
    }

    .pl-hero-nav { right: 48px; }
}

/* ============================================================
   Responsive — mobile (≤768px)
   ============================================================ */
@media ( max-width: 768px ) {
    .pl-hero-slider,
    .pl-hero-slide {
        aspect-ratio: 390/800;
        min-height:   auto;
    }

    .pl-hero__content > .wp-block-group {
        padding:        52px 24px !important;
        flex-direction: column !important;
    }

    /* Flatten both columns into one flow */
    .pl-slide-inner.wp-block-columns {
        display:        flex !important;
        flex-direction: column !important;
    }

    .pl-slide-left.wp-block-column,
    .pl-slide-right.wp-block-column {
        flex:      0 0 auto !important;
        max-width: 100% !important;
        padding:   0 !important;
        height:    auto !important;
        display:   contents !important;
    }

    /*
     * Use order to rearrange individual elements:
     * 1. labels
     * 2. title-1 (Precision Peptides)
     * 3. title-2 (for Clinical Research)
     * 4. desc
     * 5. CTA
     */
    .pl-hero__labels {
        order:           1;
        justify-content: flex-start !important;
        margin-bottom:   20px;
    }

    .pl-hero__title-1,
    .pl-hero__title2 {
        order: 2;
    }

    .pl-hero__title-2 {
        order:      3;
        text-align: right;
        margin-top: auto !important;
    }

    .pl-hero__desc {
        order:      4;
        max-width:  100% !important;
        margin-top: 24px !important;
    }

    .pl-hero__cta {
        order:      5;
        margin-top: 32px;
    }

    /* Swap bg images: hide desktop, show mobile */
    .pl-hero__bg--desktop {
        display: none !important;
    }

    .pl-hero__bg--mobile {
        display: block !important;
    }

    /* Dots — bottom left */
    .pl-hero-nav {
        bottom: 20px;
        left: 24px;
    }
}