/* Page-specific styles for /articles/jevons-paradox.html. Shared foundations live in /v2/. */

        .carousel-container {
            width: 100%;
            max-width: 800px;
            margin: 2rem auto;
            position: relative;
            border-radius: 15px;
            box-shadow: 0 4px 8px color-mix(in srgb, var(--shadow-color) 10%, transparent);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .carousel-wrapper {
            height: 80vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px 15px 0 0;
        }
        .carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: auto;
            max-height: 100%;
        }
        .carousel img {
            width: 100%;
            height: auto;
            max-height: 80vh;
            flex-shrink: 0;
            object-fit: contain;
            border-radius: 15px;
        }
        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: color-mix(in srgb, var(--shadow-color) 50%, transparent);
            color: white;
            padding: 1rem;
            border: none;
            cursor: pointer;
            z-index: 2;
            transition: background-color 0.3s;
        }
        .carousel-button:hover { background: color-mix(in srgb, var(--shadow-color) 80%, transparent); }
        .prev { left: 0; border-radius: 0 5px 5px 0; }
        .next { right: 0; border-radius: 5px 0 0 5px; }
        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 1rem 0;
            border-radius: 0 0 15px 15px;
        }
        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ccc;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .dot.active { background: #333; }