/* ════════════════════════════════════════════════════════
   AccordionGallery — vanilla CSS (portado casi 1:1 del original)
   ════════════════════════════════════════════════════════ */
.accordion-gallery {
    --ag-accent: var(--sun, #FFD966);
    --ag-overlay: var(--sea-deep, #031815);
    --ag-text: var(--sand, #FDF8F0);
    --ag-gap: 10px;
    --ag-radius: 18px;
    --ag-media-size: 320px;

    display: flex;
    flex-direction: row;
    gap: var(--ag-gap);
    width: 100%;
    max-width: 100%;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    margin: 0 auto;
}

.accordion-gallery--vertical { flex-direction: column; }

.ag-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--ag-radius);
    cursor: pointer;
    display: block;
    text-decoration: none;
    outline: none;
    transform-style: preserve-3d;
    transform-origin: center center;
    background: var(--sea-deep, #031815);
    box-shadow: 0 10px 30px -18px rgba(3, 24, 21, 0.55);
    will-change: flex-grow, transform;
    -webkit-tap-highlight-color: transparent;
}

.ag-panel:focus-visible {
    box-shadow: 0 0 0 2px var(--ag-accent), 0 10px 30px -18px rgba(3, 24, 21, 0.55);
}

.ag-panel__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }

.ag-panel__media {
    --ag-gray: 1;
    --ag-dim: 0.35;
    position: absolute;
    inset: 0;
    filter: grayscale(var(--ag-gray));
    will-change: transform, filter;
    transition: filter 0.3s ease;
}

.ag-panel__img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }

.ag-panel__overlay {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, transparent 45%, rgba(3,24,21,0.78) 100%),
        rgba(3,24,21, var(--ag-dim, 0.35));
    transition: background 0.3s ease;
}

.ag-panel__label {
    position: absolute; left: 20px; bottom: 20px; right: 20px;
    display: flex; align-items: center; gap: 12px; pointer-events: none; z-index: 2;
}
.ag-panel__bar {
    flex: 0 0 auto; width: 3px; height: 26px; border-radius: 3px;
    background: var(--ag-accent); opacity: 0;
    box-shadow: 0 0 12px rgba(255, 217, 102, 0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ag-panel__text {
    color: var(--ag-text); font-family: var(--font-body); font-weight: 600;
    font-size: clamp(1rem, 1.4vw, 1.4rem); letter-spacing: 0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; text-shadow: 0 2px 14px rgba(0,0,0,0.55);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (max-width: 680px) {
    .accordion-gallery { flex-direction: column; perspective: none; height: auto !important; }
    .ag-panel { min-height: 84px; transform: none !important; }
    .ag-panel__media { width: 100%; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ag-panel, .ag-panel__media { will-change: auto; transition: none; }
}

.ag-gallery-wrap { margin-top: 80px; }
.ag-gallery-title {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em;
    font-size: 26px; color: var(--sea-deep); margin-bottom: 24px; text-align: center;
}