/* Responsive styles moved from style.css */

@media (max-width: 768px) {
    .category-menu {
        width: 80vw;
    }

    /* Mobile positioning adjustments */
    .category-menu__item--family {
        transform: translate(-50%, -50%) translate(0, -8rem);
    }
    .category-menu__item--family:hover {
        transform: translate(-50%, -50%) translate(0, -8rem) scale(1.05);
    }

    .category-menu__item--love {
        transform: translate(-50%, -50%) translate(7.6rem, -2.5rem);
    }
    .category-menu__item--love:hover {
        transform: translate(-50%, -50%) translate(7.6rem, -2.5rem) scale(1.05);
    }

    .category-menu__item--work {
        transform: translate(-50%, -50%) translate(4.7rem, 6.5rem);
    }
    .category-menu__item--work:hover {
        transform: translate(-50%, -50%) translate(4.7rem, 6.5rem) scale(1.05);
    }

    .category-menu__item--health {
        transform: translate(-50%, -50%) translate(-4.7rem, 6.5rem);
    }
    .category-menu__item--health:hover {
        transform: translate(-50%, -50%) translate(-4.7rem, 6.5rem) scale(1.05);
    }

    .category-menu__item--talent {
        transform: translate(-50%, -50%) translate(-7.6rem, -2.5rem);
    }
    .category-menu__item--talent:hover {
        transform: translate(-50%, -50%) translate(-7.6rem, -2.5rem) scale(1.05);
    }

    /* Mobile sizing adjustments */
    .category-menu__item {
        width: 7.2rem;
        height: 7.2rem;
        font-size: 0.55rem;
    }

    .category-menu__icon {
        width: 3rem;
        height: 3rem;
    }

    .category-menu__logo {
        width: 75px;
        height: 75px;
        max-width: 75px;
        padding: 0.5rem;
    }

    /* Page content adjustments */
    .page-content h1 {
        font-size: 2rem;
    }
    .page-content {
        padding: 1rem;
    }

    /* Back link mobile adjustments */
    .back-link {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        border-radius: 0.375rem;
    }

    .audio-button {
        min-width: 150px;
        font-size: 0.9rem;
        padding: 0.375rem;
    }

    .audio-button:hover {
        box-shadow: 3px 5px 0px #8b1414;
    }

    .audio-button__content {
        gap: 0.5rem;
    }

    .audio-button__image {
        width: 40px;
        height: 40px;
    }

    .play-pause-icon {
        width: 12px;
        height: 1.2rem;
        background-size: 24px 1.2rem;
    }
}