/* ════════════════════════════════════════════
   APC Sidebar Timeline + APC Sidebar Timeline Panel — Frontend styles
   Parent stylesheet covers all child (.apc-stl-panel) selectors too,
   plus the page-level lightbox (.apc-stl-lightbox, appended to <body>).
   ════════════════════════════════════════════ */

.apc-sidebar-timeline {
    --apc-stl-accent:        var(--wp--preset--color--custom-um-yellow, #ffd400);
    --apc-stl-fg:            #ffffff;
    --apc-stl-fg-muted:      rgba(255, 255, 255, 0.45);
    --apc-stl-line-color:    rgba(255, 255, 255, 0.25);
    /* Built-in line-b.svg (inlined, so the line works without picking an
       image); a line image chosen in the block settings overrides it */
    --apc-stl-line-img:      url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' width='1064' height='8' viewBox='0 0 1064 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M362.456 1.30122C363.056 1.01801 362.544 0.909647 363.312 0.591959C362.288 0.579646 361.678 0.493451 360.23 0.530392C359.472 0.92196 359.718 1.25196 362.456 1.30122ZM1063.33 4.01018C1056.47 3.75406 1046.37 3.98555 1043.03 3.23936C1036.27 2.99555 1028.65 3.15316 1021.02 3.0448C1013.4 2.93398 1005.7 2.57935 998.594 2.46853C991.917 2.35771 987.978 2.54241 986.432 1.75681C979.41 1.54748 972.477 2.12376 965.711 1.95383C964.253 2.04002 963.485 2.22226 961.683 2.27152C956.976 1.76913 951.244 2.15084 945.926 2.13607C938.904 2.12376 935.743 1.21748 930.169 1.18054C929.568 1.26674 929.568 1.46375 927.943 1.43666C922.546 1.22733 918.617 1.70756 913.988 1.62137C910.049 1.5598 908 1.10666 904.14 0.850542C897.128 0.801288 887.969 0.825915 881.627 0.66584C877.431 0.555019 872.3 0.0772558 869.553 0.0181511C867.416 -0.0311028 864.323 0.0304646 862.363 0.0772558C851.402 0.372779 840.106 1.33816 828.121 1.49823C825.895 1.52286 823.492 1.41204 821.444 1.43666C816.047 1.49823 811.34 1.96368 805.263 1.81592C803.461 2.03756 800.9 2.26905 798.507 2.20749C797.306 2.32816 796.449 2.51286 794.903 2.58674C785.143 2.75913 772.301 2.83301 765.703 2.46607C763.477 2.79607 760.148 2.83301 759.37 3.23689C750.802 3.36988 744.302 3.80085 739.595 3.36003C738.827 3.28615 738.649 3.40928 737.793 3.36003C734.878 3.21227 733.932 3.00294 730.594 2.90689C729.914 2.73697 731.106 2.636 730.17 2.46607C726.31 2.30599 722.971 2.46607 718.943 2.33062C716.117 2.24443 713.3 1.84055 710.385 1.87749C708.327 1.91443 706.869 2.26905 704.998 2.33062C702.851 2.4045 699.345 2.24443 696.43 2.26905C688.551 2.31831 682.81 2.36756 674.852 2.0745C673.139 1.8036 676.143 1.78144 675.788 1.49823C671.002 1.24211 663.547 1.39972 659.095 1.49823C657.47 1.41204 656.269 1.27659 654.644 1.24211C648.745 1.11898 638.975 1.67062 633.5 1.69525C628.703 1.70756 624.764 1.35293 619.545 1.43913C615.261 0.22748 604.821 2.21241 597.977 1.36525C597.711 1.09435 599.001 1.04756 599.346 0.850542C591.556 0.998304 584.869 1.5598 577.768 1.36525C571.682 1.62137 566.63 2.08681 561.154 2.20995C558.85 2.2592 554.822 2.37002 552.084 2.33062C550.035 2.30599 548.489 1.92674 545.83 1.81592C544.461 1.76666 543.26 1.87749 542.236 1.81592C540.689 1.72972 539.921 1.52286 538.208 1.49823C536.494 1.4736 533.845 1.60905 531.865 1.69278C525.11 1.97599 519.535 2.48823 512.09 2.64831C507.117 2.26905 502.409 1.46129 495.476 1.4342C491.448 1.40957 487.942 1.75189 483.313 1.75189C477.326 0.944124 471.584 0.222555 460.889 0.527929C458.831 0.589496 457.373 0.845617 455.502 0.919497C451.307 1.06726 445.565 1.09189 441.114 1.04263C435.973 0.993378 431.354 1.03032 425.79 0.919497C424.332 1.01801 423.909 1.23719 421.762 1.23719C419.28 0.919498 414.051 1.00569 414.139 0.330913C409.688 0.293973 407.285 -0.0114012 401.977 0.0747931C396.668 0.675691 392.128 1.3751 382.201 1.30122C379.72 1.86517 373.131 1.8036 370.039 1.36278C368.581 1.46129 368.67 1.76666 366.877 1.81592C365.085 1.71741 362.938 1.65584 361.057 1.5598C361.146 1.85286 358.664 1.84301 357.029 2.01293C354.291 2.28383 349.407 3.01771 346.669 3.04234C345.389 3.05465 339.913 2.8207 341.705 2.52764C335.363 2.56458 332.379 2.85764 326.47 2.98077C320.472 1.86517 313.795 1.92674 304.892 1.87749C303.947 2.08681 302.755 2.26905 301.298 2.39219C293.587 2.14838 289.48 0.995841 280.567 1.30122C274.402 2.05973 266.533 2.88227 255.828 2.78376C252.578 3.23689 244.01 2.94383 237.845 2.90443C232.971 2.51286 228.775 2.24443 223.467 2.32816C220.473 2.37741 218.671 2.64585 215.844 2.58428C210.615 2.47346 208.645 1.28644 204.115 1.17562C201.279 1.08942 200.521 1.49331 197.438 1.61644C191.096 1.87256 183.138 1.71495 181.681 1.17562C177.741 1.26181 176.117 1.01554 172.699 1.04263C167.647 1.58196 164.131 2.62368 157.375 2.72219C153.603 2.77144 149.241 2.39219 144.789 2.52764C143.076 2.57689 142.307 2.77144 140.761 2.78376C130.913 2.86995 120.986 1.64353 112.851 2.26905C111.817 2.86995 108.4 3.12607 104.805 3.36003C104.717 3.24921 105.229 3.04234 103.948 3.10391C98.8076 3.01771 97.8721 2.34294 92.6426 2.26905C87.3344 3.13839 76.0286 3.29846 72.434 2.13361C66.9584 2.12129 65.5894 1.8036 59.8578 1.75435C56.5192 1.96368 56.8639 2.58674 53.5155 2.64831C52.2253 2.68525 50.0883 2.43898 47.6951 2.26905C43.8346 1.98831 40.8506 1.95137 39.1272 1.62137C35.2765 1.83069 31.7607 2.09913 27.0532 2.20995C17.6382 2.4045 5.82032 2.04987 0 2.84532C2.5704 3.0054 8.99147 2.85764 10.8823 2.90689C11.3944 3.39697 8.04603 3.77622 7.71119 4.19488C8.74526 4.25399 9.43464 4.37712 10.3702 4.451C9.69069 4.61108 9.43464 4.83026 9.08995 5.03712C13.0293 5.07406 14.9103 4.84257 18.9382 4.90168C18.3375 5.21936 20.3071 5.17257 20.3071 5.41638C30.7463 5.46563 44.2778 4.57167 50.8663 5.86951C53.2693 5.8572 55.5738 5.86951 55.8397 6.1872C67.3917 5.57399 71.5082 7.65743 83.2375 7.02206C88.5457 7.33974 90.1707 7.94064 95.8138 7.9899C101.634 8.05146 107.72 7.81751 113.797 7.67221C118.159 7.56139 123.123 7.37915 126.806 7.1575C130.755 6.92355 133.237 6.32511 136.743 6.18966C142.14 5.99511 150.019 6.34974 157.385 6.32511C169.715 6.27586 178.963 5.98034 188.466 5.55429C197.369 6.42362 215.342 6.53444 226.215 5.81041C230.154 6.17735 234.95 6.67974 241.026 6.38668C253.445 7.389 271.251 6.75362 280.577 5.73653C284.349 5.7981 285.807 5.54198 288.712 5.48041C291.538 5.77347 294.532 6.06899 298.56 6.18966C306.439 5.73653 314.573 6.61817 321.93 6.6428C328.518 6.66743 334.516 6.26355 338.623 6.06653C343.764 5.81041 349.672 5.77101 355.237 5.55183C361.579 5.28093 367.055 4.60861 372.274 4.38697C374.933 4.65787 377.671 4.53473 381.266 4.52242C381.354 4.80563 383.147 4.85242 384.004 5.03712C387.431 5.111 392.05 5.09869 394.364 4.70712C395.733 4.79332 396.245 5.00018 397.959 5.03712C398.392 4.75638 396.678 4.781 396.59 4.58399C399.662 4.57167 401.898 4.32787 404.636 4.44854C406.093 4.76623 405.66 5.3425 408.752 5.41638C409.511 5.23414 409.264 4.88936 410.968 4.84011C414.395 4.86473 416.444 5.00018 419.014 4.84011C420.816 5.26862 425.268 5.26862 429.375 5.47795C431.344 5.58877 432.536 5.83257 434.762 5.86951C442.039 5.99019 448.037 5.57399 452.311 5.03466C459.589 5.42623 466.177 5.72175 474.312 5.41392C478.251 6.07638 487.41 6.30787 494.087 6.18474C508.299 8.38885 532.446 5.92862 548.972 5.99019C554.113 6.01481 556.762 6.49258 561.548 6.57877C562.75 6.61571 561.203 6.2734 562.405 6.32265C563.518 6.29802 562.149 6.61571 563.774 6.50489C580.989 6.34481 591.851 5.18242 606.062 4.64309C608.465 4.5569 610.77 4.35003 613.261 4.3254C623.454 4.23921 631.835 5.40406 641.506 5.55183C648.439 5.65033 655.038 5.26862 661.37 5.09869C667.624 4.92876 674.035 4.92876 679.776 4.451C686.286 4.451 693.653 4.58645 698.616 4.52488C701.531 4.47563 705.037 4.68496 708.12 4.70958C709.922 4.73421 712.236 4.66033 713.94 4.70958C717.446 4.82041 720.282 5.11347 723.788 5.16272C726.95 5.21197 730.466 5.10115 733.725 5.16272C736.384 5.21197 738.777 5.44593 741.348 5.48041C744.686 5.54198 747.602 5.35727 750.763 5.35727C752.644 5.35727 754.958 5.55429 757.105 5.55429C758.307 5.54198 759.331 5.40653 760.266 5.41884C762.325 5.44347 764.038 5.64048 766.087 5.61339C768.746 5.57645 770.538 5.3819 773.286 5.41884C776.615 5.46809 781.411 5.90892 785.862 5.73653C790.826 6.27586 797.414 6.36205 804.268 6.25123C807.952 6.20198 809.577 5.93354 811.458 5.81041C813.595 5.66265 816.254 5.66265 818.647 5.55429C820.873 5.43115 822.842 5.16272 824.467 5.10115C829.007 4.93123 835.261 4.88197 840.224 4.70958C841.859 4.74653 842.105 4.95339 843.819 4.96571C848.359 4.74406 852.564 4.6825 857.351 4.451C864.284 4.121 871.217 3.38465 876.702 3.4216C880.986 3.45854 883.902 4.14563 889.289 3.87473C893.907 4.2663 898.792 4.46085 905.046 4.38943C908.552 4.34018 910.955 4.04466 914.461 3.87473C917.967 3.70234 925.678 3.6654 930.129 3.61861C939.377 3.50779 940.657 4.25399 950.85 4.07175C957.438 4.89182 973.373 4.18257 981.419 5.03959C986.471 5.07653 992.035 5.45824 995.797 4.96571C1000.08 5.0519 1002.47 4.85488 1004.37 4.58645C1024.92 4.84257 1044.61 5.02727 1061.9 5.16272C1065.07 4.82041 1063.87 4.61108 1063.28 4.01018H1063.33Z' fill='%231E1300'/%3E%3C/svg%3E");
    --apc-stl-line-height:   8px;
    --apc-stl-sidebar-width: 240px;
    --apc-stl-gallery-cols:  6;
    --apc-stl-gallery-cols-half: 3;
    --apc-stl-min-height:    0px;
    --apc-stl-radius:        8px;

    color: var(--apc-stl-fg);
}

.apc-sidebar-timeline,
.apc-sidebar-timeline *,
.apc-sidebar-timeline *::before,
.apc-sidebar-timeline *::after {
    box-sizing: border-box;
}

/* ── Body: mobile = nav row above panels, desktop = sidebar + panels ── */
.apc-sidebar-timeline__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── Year nav — mobile: horizontal, scrollable row ── */
.apc-sidebar-timeline__nav {
    position: relative;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.apc-sidebar-timeline__nav::-webkit-scrollbar {
    display: none;
}

.apc-stl-nav-btn {
    font: inherit;          /* resets font-family, font-size, line-height, weight, style all at once */
    letter-spacing: inherit;
    appearance: none;
    -webkit-appearance: none;
    flex: 1 0 76px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 0 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
}

.apc-stl-nav-btn:focus-visible {
    outline: 2px solid var(--apc-stl-accent);
    outline-offset: 6px;
    border-radius: 2px;
}

/* ── Decorative line — the line image (e.g. line-b.svg) is used as a
   mask for two layers: the muted base (::before) and the accent fill,
   which is revealed left → right with clip-path when the year becomes
   active. With autoplay on, frontend.js animates the same fill as a
   progress bar. The whole line is fitted to the button width (stretched
   horizontally only, height stays --apc-stl-line-height), so both
   tapered brush ends are always visible — on the 76px mobile buttons as
   well as the desktop sidebar. The built-in SVG carries
   preserveAspectRatio='none' for this; a custom line image needs the
   same attribute, otherwise it shrinks to a hairline. ── */
.apc-stl-line {
    position: relative;
    display: block;
    width: 100%;
    height: var(--apc-stl-line-height);
}

.apc-stl-line::before,
.apc-stl-line__fill {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: var(--apc-stl-line-img);
            mask-image: var(--apc-stl-line-img);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: left center;
            mask-position: left center;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}

.apc-stl-line::before {
    background: var(--apc-stl-line-color);
    transition: background-color 0.2s ease;
}

.apc-stl-line__fill {
    display: block;
    background: var(--apc-stl-accent);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.4s ease;
}

.apc-sidebar-timeline.is-inview .apc-stl-nav-btn.is-active .apc-stl-line__fill {
    clip-path: inset(0 0 0 0);
    transition-duration: 0.8s;
}

.apc-stl-nav-btn:hover .apc-stl-line::before {
    background: var(--apc-stl-fg-muted);
}

/* ── Year label ── */
.apc-stl-nav-btn__label {
    display: block;
    font-size: clamp(1.375rem, 1rem + 1.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    color: var(--apc-stl-fg-muted);
    transition: color 0.2s ease;
}

.apc-stl-nav-btn:hover .apc-stl-nav-btn__label {
    color: var(--apc-stl-fg);
}

.apc-stl-nav-btn.is-active .apc-stl-nav-btn__label {
    color: var(--apc-stl-accent);
}

/* ── Panels — stacked in one grid cell so the container takes the
   tallest panel's height (no clipping of long descriptions); only
   .is-active is visible. Switching is sequential and direction-aware
   (timed in frontend.js). ── */
.apc-sidebar-timeline__panels {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    min-width: 0;
    touch-action: pan-y;
}

.apc-sidebar-timeline__panels > .wp-block-apc-sidebar-timeline {
    display: contents;
}

.apc-stl-panel {
    grid-area: 1 / 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;      /* mobile only — reset to 0 in the desktop media query */
    opacity: 0;
    visibility: hidden;
    transform: translateX(14px);
    pointer-events: none;
    /* Must match PANEL_SWITCH_MS in frontend.js — keep the two in sync */
    transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s linear 0.26s;
    backface-visibility: hidden;
}

.apc-stl-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s;
}

/* Resting positions for inactive panels: earlier years wait on the
   left, later years on the right */
.apc-stl-panel--before {
    transform: translateX(-14px);
}

.apc-stl-panel--after {
    transform: translateX(14px);
}

/* Used briefly by frontend.js to jump a panel to its start position
   without animating that jump itself */
.apc-stl-panel--no-transition {
    transition: none !important;
}

/* Before JS runs, or if JS fails, show every panel stacked so content
   isn't hidden */
.apc-sidebar-timeline:not(.apc-sidebar-timeline--js) .apc-stl-panel {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    margin-bottom: 2.5rem;
}

.apc-sidebar-timeline:not(.apc-sidebar-timeline--js) .apc-stl-panel::before {
    content: attr(data-nav-label);
    display: block;
    margin-bottom: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--apc-stl-accent);
}

/* ── Panel content ── */
.apc-stl-heading {
    margin: 0 0 16px;
    color: var(--apc-stl-fg);
}

.apc-stl-description {
    max-width: 44rem;
    margin: 0 0 28px;
    color: var(--apc-stl-fg);
}

.apc-stl-description > p {
    margin: 0 0 0.75em;
}

.apc-stl-description > p:last-child {
    margin-bottom: 0;
}

/* ── Footer: image row ── */
.apc-stl-footer {
    margin-top: auto;
}

.apc-stl-gallery {
    display: grid;
    /* Below 1000px: half the column count (rounded up, set in render.php) */
    grid-template-columns: repeat(var(--apc-stl-gallery-cols-half, 3), minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apc-stl-gallery__item {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.apc-stl-thumb {
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--apc-stl-radius);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
}

button.apc-stl-thumb {
    cursor: zoom-in;
}

.apc-stl-thumb img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    transition: transform 0.5s ease;
}

button.apc-stl-thumb:hover img {
    transform: scale(1.05);
}

button.apc-stl-thumb:focus-visible {
    outline: 2px solid var(--apc-stl-accent);
    outline-offset: 3px;
}

/* ── Desktop (>=782px, matches the core Columns breakpoint) ── */
@media (min-width: 782px) {
    .apc-sidebar-timeline__body {
        flex-direction: row;
        align-items: stretch;
        gap: clamp(40px, 5vw, 80px);
        min-height: var(--apc-stl-min-height);
    }

    .apc-sidebar-timeline__nav {
        flex: 0 0 var(--apc-stl-sidebar-width);
        flex-direction: column;
        gap: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .apc-stl-nav-btn {
        flex: none;
        gap: 16px;
        padding: 0 0 32px;
    }

    .apc-stl-nav-btn:focus-visible {
        outline-offset: 4px;
    }

    .apc-sidebar-timeline__panels {
        flex: 1;
    }

    .apc-stl-panel {
        padding-top: 0;
    }
}

/* ── Image row: full column count only from 1000px; below that the row
   breaks into two lines (6 columns → 3 + 3, 4 → 2 + 2) ── */
@media (min-width: 1000px) {
    .apc-stl-gallery {
        grid-template-columns: repeat(var(--apc-stl-gallery-cols), minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .apc-stl-panel,
    .apc-stl-panel.is-active,
    .apc-stl-line__fill,
    .apc-stl-thumb img {
        transition: none !important;
    }
}


/* ════════════════════════════════════════════
   Lightbox (shared <dialog>, appended to <body> by frontend.js).
   It lives outside .apc-sidebar-timeline, so it sets its own
   box-sizing — without it the figure's side padding was added on top
   of its 100% width and pushed the image off-center.
   ════════════════════════════════════════════ */
html.apc-stl-lightbox-open {
    overflow: hidden;
}

.apc-stl-lightbox,
.apc-stl-lightbox *,
.apc-stl-lightbox *::before,
.apc-stl-lightbox *::after {
    box-sizing: border-box;
}

.apc-stl-lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    overflow: hidden;
}

.apc-stl-lightbox:focus {
    outline: none;
}

/* The dimmed background is a real element (not ::backdrop) so it can be
   faded in/out together with the image */
.apc-stl-lightbox::backdrop {
    background: transparent;
}

.apc-stl-lightbox__bg {
    position: absolute;
    inset: 0;
    background: rgba(5, 10, 25, 0.9);
}

.apc-stl-lightbox__figure {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 72px 16px;
}

.apc-stl-lightbox__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    border-radius: 8px;
    object-fit: contain;
    transform-origin: 50% 50%;
    will-change: transform, clip-path;
    user-select: none;
    -webkit-user-drag: none;
}

.apc-stl-lightbox__count {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 2;
    margin: 0;
    text-align: center;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.apc-stl-lightbox__btn {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.apc-stl-lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

.apc-stl-lightbox__btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.apc-stl-lightbox__btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.apc-stl-lightbox__close {
    top: 16px;
    right: 16px;
}

.apc-stl-lightbox__prev,
.apc-stl-lightbox__next {
    top: 50%;
    margin-top: -24px;
}

.apc-stl-lightbox__prev {
    left: 12px;
}

.apc-stl-lightbox__next {
    right: 12px;
}

.apc-stl-lightbox.is-single .apc-stl-lightbox__prev,
.apc-stl-lightbox.is-single .apc-stl-lightbox__next,
.apc-stl-lightbox.is-single .apc-stl-lightbox__count {
    display: none;
}

/* Mobile: arrows move to the bottom row so they never cover the photo */
@media (max-width: 781px) {
    .apc-stl-lightbox__prev,
    .apc-stl-lightbox__next {
        top: auto;
        bottom: 12px;
        margin-top: 0;
    }

    .apc-stl-lightbox__count {
        bottom: 26px;
    }
}

@media (min-width: 782px) {
    .apc-stl-lightbox__figure {
        padding: 72px 104px;
    }

    .apc-stl-lightbox__prev {
        left: 32px;
    }

    .apc-stl-lightbox__next {
        right: 32px;
    }
}