/* Responsive overrides shared by the case pages (loaded after case-N.css) */

/* Tablet & small laptops */
@media (max-width: 1280px) {
    :root {
        --page-padding: var(--spacing-xl);
    }

    body {
        align-items: stretch;
    }

    main,
    footer {
        max-width: 100%;
    }

    .next-case section {
        height: auto;
    }

    .case {
        min-width: 0;
    }
}

/* Phones */
@media (max-width: 768px) {
    :root {
        --page-padding: var(--spacing-md);
    }

    h1 {
        font-size: var(--font-size-2xl);
        line-height: 1.1;
    }

    h2 {
        font-size: var(--font-size-lg);
    }

    h3 {
        font-size: var(--font-size-md);
    }

    .chips {
        flex-wrap: wrap;
    }

    .content,
    .insight-list,
    .decisions-list,
    .testemonials-list,
    .next-case section {
        flex-direction: column;
    }

    .details {
        align-self: flex-start;
        flex-direction: row;
        gap: var(--spacing-xl);
    }

    /* Results: show the whole screenshot instead of a cropped, zoomed-in detail */
    .result,
    .result-3 {
        height: auto;
        padding: var(--spacing-lg);
        align-items: stretch;
    }

    .result img {
        width: 100%;
        transform: none;
        margin-top: var(--spacing-lg);
        border-radius: var(--spacing-sm);
    }

    .result-header {
        max-width: none;
    }

    /* Insights / decisions: one insight followed by its decision */
    .insights-decisions {
        display: flex;
        flex-direction: column;
    }

    .insights-decisions .sideways-lr {
        display: none;
    }

    .insights-decisions .r1 > div {
        flex: 1;
        padding: var(--spacing-lg);
    }

    .insights-decisions .r2 {
        margin-bottom: var(--spacing-lg);
    }

    .insights-decisions .r2 > div {
        flex: 1;
        height: auto;
    }

    .insights-decisions .r2 video,
    .insights-decisions .r2 img {
        width: 100%;
        height: auto;
        margin: 0;
        transform: none;
    }

    .next-case .case {
        flex: none;
        height: 260px;
    }

    .testemonials-list h1 {
        font-size: var(--font-size-xl);
    }

    .testemonials-list h2 {
        font-size: var(--font-size-md);
    }

    /* home button becomes a floating action button */
    .anchor {
        position: fixed;
        top: auto;
        bottom: var(--spacing-lg);
        right: var(--spacing-lg);
        left: auto;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    }

    .case > span {
        max-width: none;
    }

    .case-2 > ul,
    .case-2 > span {
        margin-left: 0;
        text-align: left;
    }
}