/* 
  Mad-Dam Landing Page - Responsive Styles
  Updated: Complete responsive breakpoints for tablet and mobile
  Changes: Mobile-first responsive design with proper adjustments
*/

/* Tablet adjustments */
@media (max-width: 1024px) {
    :root {
        --container-padding: var(--space-md);
        --space-4xl: 6rem;
    }

    .hero__title {
        font-size: var(--text-5xl);
    }

    .section__title {
        font-size: var(--text-4xl);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    :root {
        --space-3xl: 4rem;
        --space-4xl: 5rem;
    }

    .hero {
        min-height: 90vh;
    }

    .hero__title {
        font-size: var(--text-4xl);
    }

    .hero__subtitle {
        font-size: var(--text-lg);
    }

    /* Reduce checkerboard square size on mobile */
    .hero__checkerboard {
        background-size: 100px 100px;
        background-position: 0 0, 0 50px, 50px -50px, -50px 0px;
        transform: perspective(800px) rotateX(3deg) scale(1.05);
    }

    .mechanic__board {
        max-width: 100%;
    }

    .mechanic__rules {
        gap: var(--space-md);
    }

    .rule-card {
        padding: var(--space-lg);
    }

    .rule-card__title {
        font-size: var(--text-xl);
        margin-bottom: var(--space-md);
    }

    .rule-card__desc {
        font-size: var(--text-sm);
    }

    .rule-card__desc--large {
        font-size: var(--text-base);
    }

    .rule-card__steps {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .rule-step__number {
        width: 32px;
        height: 32px;
        font-size: var(--text-base);
    }

    .rule-step__content p {
        font-size: var(--text-sm);
    }

    .rule-card__note {
        font-size: var(--text-xs);
        padding: var(--space-sm);
    }

    .form-radio-group {
        gap: var(--space-xs);
    }

    .features {
        gap: var(--space-lg);
    }

    .feature {
        padding: var(--space-md);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .hero__title {
        font-size: var(--text-3xl);
    }

    .section__title {
        font-size: var(--text-3xl);
    }

    .btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--text-sm);
    }

    .rule-card {
        padding: var(--space-md);
    }

    .rule-card__title {
        font-size: var(--text-lg);
        margin-bottom: var(--space-sm);
    }

    .rule-step {
        gap: var(--space-sm);
    }

    .rule-step__number {
        width: 28px;
        height: 28px;
        font-size: var(--text-sm);
    }
}