/* ================================================================
 * Block: Comparison wedge — comparison_wedge
 * Design: Figma "Growston NEW" §5 "we also ship it" (node 38:1659)
 * Tokens: assets/css/growston-tokens.css (--g-*)
 * ================================================================ */

.g-compare {
    padding-block: var(--g-hero-inset);
    padding-inline: max(var(--g-hero-inset), calc((100% - var(--g-content-max)) / 2));
}

.g-compare__wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--g-radius-hero-top); /* 40px */
    background: var(--g-color-hero-bg);
    padding: var(--g-space-10); /* 150px */
}

.g-compare__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    mix-blend-mode: luminosity;
    z-index: 0;
}

.g-compare__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(114.32deg, rgba(0, 229, 255, 0.3) 9.96%, rgba(29, 34, 63, 0.3) 23.15%, rgba(29, 34, 63, 0.3) 71.35%, rgba(74, 20, 140, 0.3) 85.36%),
        linear-gradient(180deg, rgb(29, 34, 63) 0%, rgba(29, 34, 63, 0) 31.73%),
        linear-gradient(90deg, rgba(27, 32, 63, 0.67) 0%, rgba(27, 32, 63, 0.67) 100%);
}

.g-compare__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-7); /* 50px */
    width: 100%;
}

/* Nagłówek sekcji — wspólny .g-section-head (growston-section-head.css) */

.g-compare__panels {
    display: flex;
    gap: var(--g-space-7);
    align-items: stretch;
}

.g-compare__panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-7);
    border-radius: var(--g-radius-card); /* 30px */
    padding: var(--g-space-6); /* 30px */
    backdrop-filter: blur(10.15px);
    -webkit-backdrop-filter: blur(10.15px);
}

.g-compare__panel--bad {
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.04);
}

.g-compare__panel--good {
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.10);
}

.g-compare__panel-title {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-panel); /* 42px */
    line-height: 1;
    color: var(--g-color-white);
    text-align: center;
    margin: 0;
}

.g-compare__list {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-5); /* 20px */
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.g-compare__row {
    display: flex;
    align-items: center;
    gap: var(--g-space-5);
}

.g-compare__row > span:last-child {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-size: var(--g-fs-body);
    line-height: 1.35;
    color: var(--g-color-white);
}

.g-compare__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--g-icon-md);
    height: var(--g-icon-md);
    border-radius: var(--g-radius-pill);
    flex: none;
}

.g-compare__mark--x {
    background: var(--g-color-white);
    color: var(--g-color-red);
}

.g-compare__mark--check {
    background: var(--g-color-cyan);
    color: var(--g-color-white);
}

.g-compare__mark svg {
    width: 50%;
    height: 50%;
}

.g-compare__quote {
    margin: 0;
    text-align: center;
    color: var(--g-color-white);
}

.g-compare__quote blockquote {
    margin: 0 0 var(--g-space-3);
    font-family: var(--g-font-body);
    font-style: italic;
    font-size: var(--g-fs-body);
    line-height: 1.4;
}

.g-compare__quote figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-3);
}

.g-compare__quote-photo {
    border-radius: var(--g-radius-pill);
}

.g-compare__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-4);
}

.g-compare__note {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-size: var(--g-fs-body);
    color: var(--g-color-white);
    margin: 0;
}

/* ── Wariant jasny (płaski, bez tła/radiusa — jak .g-content) ── */
.g-compare--light {
    padding-block: var(--g-space-9);
    padding-inline: 0;
}

.g-compare--light .g-compare__wrapper {
    background: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}

.g-compare--light .g-compare__inner {
    padding-inline: var(--g-pad-x);
}

.g-compare--light .g-compare__panel {
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: flex-start;
    gap: var(--g-space-5);
    padding: 0;
}

.g-compare--light .g-compare__panel-title {
    color: var(--g-color-heading);
    text-align: left;
}

.g-compare--light .g-compare__row > span:last-child {
    color: var(--g-color-ink);
}

.g-compare--light .g-compare__mark--x {
    background: var(--g-color-red);
    color: var(--g-color-white);
}

/* ── Responsywność ── */
@media (max-width: 1024px) {
    .g-compare__wrapper {
        padding-inline: var(--g-space-13);
    }
    .g-compare__panels {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .g-compare {
        padding: 2px;
    }
    .g-compare__wrapper {
        border-radius: var(--g-radius-tile);
    }
}