/**
 * Turniejomat landing (turniejomat.pl) — responsywność
 * Skala zsynchronizowana z :root w brand-tokens.css (--bp-*).
 *
 *   phone ……… max-width: 479px   (6–7" portret)
 *   phone-lg …… max-width: 639px
 *   tablet ……… 640–1023           (8–11" portret / phone landscape)
 *   desktop …… min 1024
 *   laptop ……… min 1280
 *   monitor …… min 1920           (~24" FHD+)
 *   short ……… max-height: 500px + landscape
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding-left: var(--safe-left, 0px);
    padding-right: var(--safe-right, 0px);
    min-height: 100dvh;
}

.wrap {
    padding-left: max(16px, var(--safe-left, 0px));
    padding-right: max(16px, var(--safe-right, 0px));
    box-sizing: border-box;
}

.hero {
    padding-top: calc(48px + var(--safe-top, 0px));
}

/* =========================================================
   TELEFON 6–7" — portret
   ========================================================= */
@media (max-width: 479px) {
    .wrap {
        padding-left: max(12px, var(--safe-left, 0px));
        padding-right: max(12px, var(--safe-right, 0px));
    }

    .section {
        padding: 40px 0;
    }

    .section--tight {
        padding: 28px 0;
    }

    .hero {
        padding: calc(36px + var(--safe-top, 0px)) 0 36px;
    }

    .hero-logo {
        width: 78%;
        max-width: 220px;
        margin-bottom: 18px;
    }

    h1 {
        font-size: clamp(22px, 7vw, 28px);
    }

    h2 {
        font-size: clamp(20px, 5.5vw, 26px);
    }

    .lead {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .btn-row {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
    }

    .grid-3,
    .steps,
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .card,
    .price-card,
    .demo-box {
        padding: 18px 16px;
    }

    .price-amount {
        font-size: 34px;
    }

    .outcome {
        padding: 20px 16px;
    }

    .outcome p {
        font-size: 15px !important;
    }

    .checkout-email-wrap,
    .checkout-consent-wrap {
        max-width: 100%;
    }

    .checkout-consent {
        align-items: flex-start;
    }
}

@media (max-width: 639px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .footer-links {
        gap: 12px 14px;
        font-size: 12px;
    }
}

/* =========================================================
   TABLET 8–11" / phone landscape szeroki
   ========================================================= */
@media (min-width: 640px) and (max-width: 1023px) {
    .wrap {
        max-width: var(--max-content-tablet, 960px);
    }

    .section {
        padding: 52px 0;
    }

    .hero {
        padding: calc(56px + var(--safe-top, 0px)) 0 48px;
    }

    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-3 > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   LAPTOP + MONITOR ~24"
   ========================================================= */
@media (min-width: 1280px) {
    .wrap {
        max-width: var(--max-content, 1080px);
    }

    .section {
        padding: 72px 0;
    }
}

@media (min-width: 1920px) {
    .wrap {
        max-width: min(1200px, var(--max-content-monitor, 1600px));
    }

    .hero {
        padding: calc(88px + var(--safe-top, 0px)) 0 64px;
    }

    h1 {
        font-size: clamp(36px, 2.4vw, 48px);
    }

    .lead {
        font-size: 19px;
    }
}

/* =========================================================
   ORIENTACJA — telefon / tablet w poziomie
   ========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        padding: calc(20px + var(--safe-top, 0px)) 0 24px;
    }

    .hero-logo {
        max-width: 140px;
        margin-bottom: 10px;
    }

    .section {
        padding: 28px 0;
    }

    .section--tight {
        padding: 20px 0;
    }

    .btn-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .btn {
        width: auto;
        min-width: 200px;
    }
}

@media (orientation: landscape) and (max-width: 1023px) {
    .grid-3,
    .steps,
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wrap {
        max-width: min(960px, 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}