/* ─── Pattern: story (2-col text + image z floating card) ─────
   Uniwersalna sekcja "story" — left text (eyebrow + h2 z accent + paragraphs +
   highlight box), right image (full-bleed) z opcjonalną floating card w prawym
   dolnym rogu. Reużywalna: /o-nas/, /jak-dzialamy/ (Gwarancja), …

   STRUKTURA:
     .kordit-story-section (section-basic, overflow:hidden dla full-bleed)
       .kordit-story            grid 2-col
         .kordit-story__left    text column (max-width 52ch)
           eyebrow + h2 (.kordit-accent-line.is-left) + paragraphs +
           .kordit-story__highlight (callout box z ikoną)
         .kordit-story__right   image column (full-bleed)
           img (max-height 520px, radius left side)
           .kordit-story__card  floating absolute pill w prawym dolnym rogu

   Typo/color przez atomy: .kordit-eyebrow, .kordit-accent-line, .kordit-accent,
   .kordit-icon-chip. Tutaj tylko layout + pattern-specific dekoracja. */

.kordit-story-section {
    overflow: hidden;
    /* Full-bleed image right wystaje z containera — overflow:hidden zapobiega
       horizontal scroll na całej stronie. */
}

.kordit-story {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    margin: 0 !important;

    >* {
        margin: 0 !important;
    }
}

.kordit-story__left {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-md);
    margin: 0 !important;

    >* {
        margin: 0 !important;
    }
}

/* Highlight callout — accent-2 tinted bg + left border + radius. */
.kordit-story__highlight {
    display: flex !important;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(220, 38, 38, 0.05);
    border-left: 3px solid var(--wp--preset--color--accent-2);
    border-radius: 8px;
    margin: 0 !important;
}

.kordit-story__highlight-text {
    margin: 0 !important;
}

/* Image column full-bleed do prawej krawędzi viewportu. */
.kordit-story__right {
    position: relative;
    margin-right: calc(((100vw - 100%) / -2) - ((100vw - min(95vw, 1340px)) / 2));
    align-self: stretch;
    display: flex;
    align-items: center;

    >img {
        width: 100%;
        height: 100%;
        max-height: 520px;
        object-fit: cover;
        border-radius: 16px 0 0 16px;
        display: block;
        box-shadow: 0 24px 48px -16px rgba(10, 22, 40, 0.25);
    }
}

/* Floating card — absolute pill w lewym dolnym rogu obrazu (wystaje
   poza krawędź image). */
.kordit-story__card {
    position: absolute;
    bottom: clamp(20px, 3vw, 40px);
    left: clamp(-20px, -2vw, -40px);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow:
        0 16px 36px -12px rgba(10, 22, 40, 0.25),
        0 2px 6px rgba(10, 22, 40, 0.08);
    max-width: 320px;
}

.kordit-story__card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;

    p {
        margin: 0;
        line-height: 1.3;
    }
}

@media (max-width: 1024px) {
    .kordit-story {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .kordit-story__right {
        margin-right: calc((100vw - 100%) / -2);
        margin-left: calc((100vw - 100%) / -2);

        >img {
            border-radius: 0;
            max-height: 360px;
        }
    }

    .kordit-story__card {
        left: clamp(16px, 4vw, 32px);
    }
}

@media (max-width: 640px) {
    /* Image i card przestają być flex-siblings w rzędzie — image full-width,
       card stackuje się POD nim (lekko nachodząc przez ujemny margin-top). */
    .kordit-story__right {
        flex-direction: column;
        align-items: stretch;
    }

    .kordit-story__card {
        position: relative;
        bottom: auto;
        left: auto;
        width: auto;
        max-width: none;
        margin-top: -32px;
        margin-inline: auto;
    }
}

/* Mobile padding override — bo block style.spacing.padding (2-xl=64px) jest
   za duzy na telefonie. Override inline-style z block attrs. */
@media (max-width: 900px) {
    .kordit-story-section {
        padding-top: var(--space-xl) !important;
        padding-bottom: var(--space-xl) !important;
    }
}

@media (max-width: 640px) {
    .kordit-story-section {
        padding-top: var(--space-lg) !important;
        padding-bottom: var(--space-lg) !important;
    }
}