/*
|--------------------------------------------------------------------------
| Pattern: SliderHP
|--------------------------------------------------------------------------
|
| CSS specifico del pattern (scaffolding: assets/css/template-parts/block-sliderhp.css)
| Swiper.js integration – overrides e stili complementari.
|
| NOTE: This file is imported OUTSIDE @layer in tailwind-input.css,
| so its rules have higher cascade priority than @layer components
| (where .layout-container-wide is defined).
*/

/* ---- Container: remove gutter from layout-container-wide ----
 * The slider fills the full container width edge-to-edge.
 * Internal elements (panel text, nav bar) handle their own gutters
 * via px-[12px] / md:px-[28px].
 */
.layout-container-wide:has(.js-sliderhp) {
    padding-inline: 0;
}

/* ---- Swiper container ---- */
.js-sliderhp.swiper {
    overflow: hidden;
}

/* ---- Swiper wrapper ----
 * Override Swiper default `height: 100%` (which needs a definite ancestor
 * height) so the wrapper sizes itself to the tallest slide's content.
 * With flex default `align-items: stretch`, all slides then match that height.
 */
.js-sliderhp .swiper-wrapper {
    height: auto;
}

/* ---- Slide ----
 * Override Swiper default `height: 100%` — leave it as `auto` so
 * flex `align-items: stretch` controls the cross-axis sizing.
 * `display: flex` lets the slide-inner grow via `flex: 1 1 auto`.
 */
.js-sliderhp .swiper-slide {
    display: flex;
    height: auto;
}

/* ---- Slide inner ---- */
[data-sliderhp-slide-inner] {
    flex: 1 1 auto;
    min-height: 533px;
}

[data-sliderhp-media] > img {
    display: block;
}

@media (min-width: 768px) {
    [data-sliderhp-slide-inner] {
        min-height: 712px;
    }
}

@media (min-width: 1280px) {
    [data-sliderhp-slide-inner] {
        min-height: 448px; /* Figma: h-[448px] */
    }

    /* ---- Desktop: Figma 732 / 708 split (≠ 50/50) ----
     * Panel is slightly wider to accommodate text without excessive wrapping.
     * These override the lg:w-[50%] utility (unlayered > @layer utilities).
     */
    [data-sliderhp-panel] {
        width: calc(732 / 1440 * 100%); /* ~50.83% — Figma: 732px at 1440px */
        padding-bottom: 12px; /* Figma: outer pb-0, inner pb-3 → 12px total */
        height: auto; /* override lg:h-[100%] so flex stretch controls height */
    }

    [data-sliderhp-media] {
        width: calc(708 / 1440 * 100%); /* ~49.17% — Figma: 708px at 1440px */
        height: auto; /* override lg:h-[100%] so flex stretch controls height */
        margin-left: 0;
    }

    /* ---- Desktop: image must NOT drive the slide height ----
     * The <img> is absolutely positioned so its natural dimensions don't
     * inflate the flex line height; it fills whatever space the panel dictates.
     */
    [data-sliderhp-media] > img {
        position: absolute;
        inset: 0;
    }
}

/* Seam mask between text/media columns to avoid subpixel flicker during drag */
[data-sliderhp-media]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(to right, var(--sliderhp-seam-color, var(--color-sector-pmi)) 0%, transparent 100%);
}

.js-sliderhp [data-sliderhp-panel].bg-sector-corporate + [data-sliderhp-media] {
    --sliderhp-seam-color: var(--color-sector-corporate);
}

.js-sliderhp [data-sliderhp-panel].bg-sector-pa + [data-sliderhp-media] {
    --sliderhp-seam-color: var(--color-sector-pa);
}

@media (min-width: 1280px) {
    [data-sliderhp-media]::before {
        width: 2px;
    }
}

/* SliderHP dark (corporate/pa): text button must be white (default/hover/active/focus) */
.js-sliderhp [data-sliderhp-panel].bg-sector-corporate [data-sliderhp-ctas] .btn-text-button,
.js-sliderhp [data-sliderhp-panel].bg-sector-corporate [data-sliderhp-ctas] .btn-text-button:hover,
.js-sliderhp [data-sliderhp-panel].bg-sector-corporate [data-sliderhp-ctas] .btn-text-button:active,
.js-sliderhp [data-sliderhp-panel].bg-sector-corporate [data-sliderhp-ctas] .btn-text-button:focus,
.js-sliderhp [data-sliderhp-panel].bg-sector-corporate [data-sliderhp-ctas] .btn-text-button:focus-visible,
.js-sliderhp [data-sliderhp-panel].bg-sector-pa [data-sliderhp-ctas] .btn-text-button,
.js-sliderhp [data-sliderhp-panel].bg-sector-pa [data-sliderhp-ctas] .btn-text-button:hover,
.js-sliderhp [data-sliderhp-panel].bg-sector-pa [data-sliderhp-ctas] .btn-text-button:active,
.js-sliderhp [data-sliderhp-panel].bg-sector-pa [data-sliderhp-ctas] .btn-text-button:focus,
.js-sliderhp [data-sliderhp-panel].bg-sector-pa [data-sliderhp-ctas] .btn-text-button:focus-visible {
    color: var(--color-white);
}

/* Common Scrollbar integration */
.common-scrollbar--sliderhp {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
    justify-content: flex-start;
    gap: 20px;
}

.common-scrollbar--sliderhp .common-scrollbar__controls {
    gap: 0; /* touch areas (44px) are adjacent — visual spacing comes from 8px padding inside each button */
}

@media (min-width: 768px) {
    .common-scrollbar--sliderhp {
        gap: 32px;
    }
}

@media (min-width: 1280px) {
    .common-scrollbar--sliderhp {
        gap: 64px;
    }
}

/* Prevent 1px seam under the wave on some DPRs */
.sliderhp-wave {
    display: block;
    pointer-events: none;
    bottom: -1px;
    left: -1px;
    width: calc(100% + 2px);
    transform: translateY(1px);
}