.f-offers {
    @apply my-6;
}

.f-offers-grid {
    @apply flex flex-wrap justify-center gap-8;
}

.f-card {
    @apply bg-[--f-bg] text-[--f-text] border border-[--f-offers-border] rounded-2xl shadow-md p-6 relative flex flex-col gap-4;
    scroll-margin-top: calc(var(--f-navbar-height, 84px) + 16px);
    flex: 1 1 100%;
    max-width: 26rem;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.f-card:hover {
    @apply shadow-lg;
    transform: translateY(-3px);
}

.f-card-popular {
    border: 2px solid var(--f-offers-popular);
    background: var(--f-offers-popular-bg);
}

.f-card-badge {
    @apply absolute top-3 right-3 bg-[--btn-background] text-[--btn-text] text-sm font-semibold px-3 py-1 rounded-full;
}

.f-card-header {
    @apply flex flex-col items-start gap-1;
}

.f-card-name {
    @apply text-3xl font-semibold;
}

.f-card-price {
    @apply text-3xl font-extrabold text-[--f-offers-price];
}

.f-card-features {
    @apply list-none p-0 m-0;
}

.f-card-row {
    @apply grid grid-cols-[2fr_1fr] gap-2 py-2 border-b border-[--f-offers-border] items-center;
}

.f-card-row:last-child {
    @apply border-b-0;
}

.f-card-label {
    @apply text-base font-medium opacity-80;
}

.f-card-value {
    @apply text-base font-semibold text-right;
}

@media (min-width: 768px) {
    .f-card {
        flex: 1 1 300px;
        max-width: 360px;
    }

    /* 4 karty → 2 + 2 */
    .f-count-4 .f-card {
        flex: 0 1 calc(50% - 2rem);
        max-width: 420px;
    }

    /* 5 kart → 3 + 2 */
    .f-count-5 .f-card {
        flex: 0 1 calc(33% - 2rem);
    }

    .f-count-5 .f-card:nth-child(n + 4) {
        flex: 0 1 calc(50% - 2rem);
        max-width: 420px;
    }

    /* 7 kart → 3 + 3 + 1 (środek) */
    .f-count-7 .f-card {
        flex: 0 1 calc(33% - 2rem);
    }

    .f-count-7 .f-card:last-child {
        flex: 0 1 calc(33% - 2rem);
        margin-left: auto;
        margin-right: auto;
    }

    /* 8 kart → 3 + 3 + 2 */
    .f-count-8 .f-card {
        flex: 0 1 calc(33% - 2rem);
    }

    .f-count-8 .f-card:nth-child(n + 7) {
        flex: 0 1 calc(50% - 2rem);
        max-width: 420px;
    }

    /* 10 kart → 3 + 3 + 3 + 1 */
    .f-count-10 .f-card:last-child {
        flex: 0 1 calc(33% - 2rem);
        margin-left: auto;
        margin-right: auto;
    }
}


.f-card.is-target {
    outline: none;
    box-shadow:
        0 0 0 3px var(--card-ring),
        0 10px 25px var(--card-shadow-deep);
    transform: translateY(-6px) scale(1.01);
    position: relative;
    background-color: var(--f-navbar-background);
    z-index: 2;
}

.f-card.is-target:hover {
    transform: translateY(-6px) scale(1.01);
}