/* Tablet layout */

@media (max-width: 1000px) {
    .stories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .story-card__body {
        padding: 22px;
    }

    .story-card__title {
        font-size: 23px;
    }

    .site-header__inner {
        gap: 24px;
    }

    .primary-menu {
        gap: 8px 16px;
    }

    .story-article {
        max-width: 900px;
    }
}

/* Mobile and small tablet */

@media (max-width: 800px) {
    .hero-editorial__inner {
        grid-template-columns: 1fr;
        gap: 34px;
        max-width: 680px;
    }

    .hero-feature {
        width: min(100%, 480px);
        justify-self: start;
        transform: none;
    }

    .site-header__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 20px;
    }

    .primary-navigation {
        width: 100%;
    }

    .primary-menu {
        gap: 8px 18px;
    }

    .hero {
        padding: 48px 20px 54px;
    }

    .hero h1,
    .hero h2 {
        font-size: clamp(34px, 7vw, 48px);
        letter-spacing: -0.03em;
    }

    .hero-description {
        font-size: 17px;
    }

    .stories-home {
        padding: 56px 20px 64px;
    }

    .stories-home__heading {
        margin-bottom: 32px;
    }

    .stories-home__heading > p:last-child {
        font-size: 16px;
    }

    .stories-grid {
        gap: 20px;
    }

    .story-card__body {
        padding: 20px;
    }

    .story-card__title {
        font-size: 21px;
    }

    .story-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .story-card__actions .button {
        width: 100%;
    }

    .stories-home__footer {
        margin-top: 32px;
    }

    .intro-section {
        padding: 54px 20px 64px;
    }

    .single-story {
        padding: 0 20px 56px;
    }

    .story-header {
        padding: 48px 8px 28px;
    }

    .story-title {
        font-size: clamp(34px, 7vw, 46px);
    }

    .story-description {
        font-size: 17px;
    }

    .story-cover {
        margin-bottom: 34px;
        border-radius: 12px;
    }

    .story-cover__image {
        max-height: 440px;
    }

    .single-story .story-content,
    .single-story .entry-content {
        padding: 0 4px;
        margin-bottom: 42px;
        font-size: 17px;
        line-height: 1.9;
    }

    .story-extra-image {
        margin-bottom: 40px;
    }

    .story-audio {
        margin-bottom: 44px;
        padding: 22px;
    }

    .fairy-tale-section {
        margin: 48px auto;
        padding: 32px 18px;
        border-radius: 16px;
    }

    .fairy-tale-details[open] .fairy-tale-toggle {
        margin-bottom: 18px;
    }

    .fairy-tale-details__content {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .fairy-tale-content {
        font-size: 17px;
        line-height: 1.85;
    }

    .fairy-tale-audio {
        padding: 18px;
    }

    .story-navigation__posts .nav-links {
        flex-direction: column;
    }

    .story-navigation__posts .nav-previous,
    .story-navigation__posts .nav-next {
        max-width: 100%;
    }

    .entry-content,
    .story-content,
    .fairy-tale-content {
        font-size: 17px;
    }

    .primary-menu .sub-menu {
        left: 0;
        min-width: 190px;
    }
}

/* Small phones */

@media (max-width: 560px) {
    .site-logo {
        width: 180px;
    }

    .stories-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .story-card__image-link {
        aspect-ratio: 3 / 2;
    }

    .story-card__body {
        padding: 22px;
    }

    .story-card__title {
        font-size: 24px;
    }

    .story-card__actions {
        flex-direction: column;
    }

    .story-card__actions .button,
    .stories-home__footer .button {
        width: 100%;
    }

    .site-brand {
        font-size: 27px;
    }

    .primary-menu {
        gap: 6px 14px;
    }

    .primary-menu a {
        font-size: 13px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .story-header {
        padding-top: 36px;
    }

    .story-title {
        font-size: 34px;
    }

    .story-cover__image {
        aspect-ratio: 4 / 3;
    }

    .story-audio {
        padding: 18px;
    }

    .fairy-tale-section {
        padding: 26px 14px;
    }

    .fairy-tale-details__content {
        padding: 20px 16px;
    }

    .fairy-tale-content {
        font-size: 16px;
        line-height: 1.8;
    }

    .fairy-tale-toggle {
        width: 100%;
    }

    .story-navigation__all .button {
        width: 100%;
    }
}

/* Reduced motion accessibility */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}