/* Gallery: one accordion strip per category.
   Vanilla port of the <AccordionGallery/> options:
   defaultIndex, expandRatio, trigger=hover, grayscale, showLabels, duration, ease,
   parallax, tilt, stagger, height, gap, radius, orientation (vertical on phones). */

.acc-section {
    --ease: cubic-bezier(0.215, 0.61, 0.355, 1);   /* power3.out */
    --dur: .6s;
    --acc-h: 460px;
    --acc-gap: 10px;
    --acc-radius: 16px;
    margin-bottom: 2.6rem;
}
.acc-section[hidden] { display: none; }

.acc-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    margin: 0 0 1rem;
}
.acc-head h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; color: #0a2d5c; }
.acc-count {
    padding: .25rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
    color: #0d47a1; background: #e3f2fd; white-space: nowrap;
}

/* ---- accordion ------------------------------------------------------- */
.acc { display: flex; gap: var(--acc-gap); height: var(--acc-h); }

.acc-item {
    position: relative; flex: 1 1 0%; min-width: 0; overflow: hidden; isolation: isolate;
    border-radius: var(--acc-radius); cursor: pointer; background: #0a1a3a;
    transition: flex-grow var(--dur) var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
    transform: perspective(1100px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
    -webkit-tap-highlight-color: transparent;
}
.acc-item.is-active { flex-grow: var(--acc-grow, 4); box-shadow: 0 22px 46px rgba(6, 0, 16, .32); }
.acc-item:focus-visible { outline: 3px solid #42a5f5; outline-offset: 3px; }

.acc-media {
    position: absolute; inset: -4%;
    transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)) scale(1.02);
    transition: transform .5s var(--ease);
}
.acc-media img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) brightness(.72);
    transition: filter var(--dur) var(--ease);
}
.acc-item.is-active .acc-media img { filter: none; }

.acc-shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(6, 0, 16, .82) 0%, rgba(6, 0, 16, 0) 58%);
    opacity: .55; transition: opacity var(--dur) var(--ease);
}
.acc-item.is-active .acc-shade { opacity: 1; }

.acc-num {
    position: absolute; top: 12px; left: 12px; z-index: 2; padding: .15rem .55rem;
    border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #fff;
    background: rgba(6, 0, 16, .45); backdrop-filter: blur(4px);
}

/* Label on the open panel */
.acc-label {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.4rem 1.5rem;
    display: flex; flex-direction: column; gap: .25rem; color: #fff;
    opacity: 0; transform: translateY(14px);
    transition: opacity .4s var(--ease) .12s, transform .5s var(--ease) .12s;
}
.acc-item.is-active .acc-label { opacity: 1; transform: none; }
.acc-label strong { font-size: clamp(1.05rem, 2.2vw, 1.5rem); font-weight: 700; line-height: 1.2; color: #fff; }
.acc-label small { font-size: .82rem; color: rgba(255, 255, 255, .85); }

/* Vertical caption on the closed panels */
.acc-vlabel {
    position: absolute; left: 50%; bottom: 16px; z-index: 2; max-height: 70%; overflow: hidden;
    transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
    font-size: .85rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; text-overflow: ellipsis;
    color: #fff; transition: opacity .3s var(--ease);
}
.acc-item.is-active .acc-vlabel { opacity: 0; }

.acc-del {
    position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px;
    display: grid; place-items: center; border-radius: 50%; color: #fff; text-decoration: none;
    background: rgba(220, 53, 69, .9); opacity: 0; transition: opacity .25s ease;
}
.acc-item.is-active .acc-del, .acc-item:focus-within .acc-del { opacity: 1; }
.acc-del:hover { color: #fff; background: #dc3545; }

/* Entrance: panels rise in one after another */
.acc.pre .acc-item { opacity: 0; }
.acc.in .acc-item { animation: accIn .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * .06s); }
@keyframes accIn { from { opacity: 0; transform: translateY(22px); } }

/* ---- "see all" ------------------------------------------------------- */
.acc-more {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .55rem 1.2rem;
    border-radius: 999px; font-weight: 600; font-size: .92rem; cursor: pointer;
    color: #0d47a1; background: #fff; border: 1.5px solid #bbdefb; transition: all .2s ease;
}
.acc-more:hover { background: #e3f2fd; border-color: #42a5f5; }
.acc-more i { transition: transform .3s var(--ease); }
.acc-more[aria-expanded="true"] i { transform: rotate(180deg); }

.acc-all { display: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.acc-all.open { display: grid; }
.acc-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; cursor: pointer; background: #0a1a3a; }
.acc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.acc-tile:hover img, .acc-tile:focus-visible img { transform: scale(1.07); }
.acc-tile:focus-visible { outline: 3px solid #42a5f5; outline-offset: 2px; }
.acc-tile .acc-del { opacity: 0; }
.acc-tile:hover .acc-del, .acc-tile:focus-within .acc-del { opacity: 1; }

/* ---- lightbox -------------------------------------------------------- */
.glb {
    position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center;
    padding: 56px 64px; background: rgba(4, 10, 24, .95);
}
.glb.open { display: flex; }
.glb figure { margin: 0; max-width: 100%; text-align: center; }
.glb img { max-width: min(92vw, 1400px); max-height: 78vh; border-radius: 10px; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.glb figcaption { margin-top: .9rem; color: #fff; font-size: 1rem; }
.glb-count { position: absolute; top: 18px; left: 24px; color: rgba(255, 255, 255, .8); font-size: .9rem; font-weight: 600; }
.glb button {
    position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%;
    color: #fff; font-size: 1.3rem; cursor: pointer; background: rgba(255, 255, 255, .14); transition: background .2s ease;
}
.glb button:hover { background: rgba(255, 255, 255, .28); }
.glb-close { top: 14px; right: 18px; }
.glb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.glb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.glb.single .glb-prev, .glb.single .glb-next, .glb.single .glb-count { display: none; }

/* ---- dark mode ------------------------------------------------------- */
body.dark-mode .acc-head h2 { color: #fff; }
body.dark-mode .acc-count { color: #90caf9; background: rgba(66, 165, 245, .18); }
body.dark-mode .acc-more { color: #90caf9; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
body.dark-mode .acc-more:hover { background: rgba(255, 255, 255, .12); }

/* ---- phones: strips stack vertically --------------------------------- */
@media (max-width: 767.98px) {
    .acc-section { --acc-h: 560px; }
    .acc { flex-direction: column; }
    .acc-item { transform: none; }
    .acc-vlabel { writing-mode: horizontal-tb; transform: none; left: 16px; bottom: auto; top: 50%; translate: 0 -50%; max-width: 70%; }
    .acc-label { padding: 1rem 1.1rem; }
    .glb { padding: 56px 10px; }
    .glb-prev { left: 4px; } .glb-next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .acc-item, .acc-media, .acc-media img, .acc-shade, .acc-label, .acc-tile img, .acc-more i { transition: none; }
    .acc.in .acc-item { animation: none; }
}