/* OKU 3D Print — Sample gallery. Everything is scoped to .oku3dg. */

.oku3dg {
    --oku3dg-teal: #186E70;
    --oku3dg-dark: #104B4D;
    --oku3dg-soft: #F6FAFA;
    --oku3dg-border: #D9E9E7;
    --oku3dg-text: #1F2B2B;
    --oku3dg-muted: #3A4A4A;
    --oku3dg-gap: 18px;
    clear: both;
    width: 100%;
    margin: 24px 0 36px;
    padding: 14px 12px 8px;
    color: var(--oku3dg-text);
    background: linear-gradient(180deg, #F3F9F8 0%, #E8F3F2 100%);
    border: 1px solid var(--oku3dg-border);
    border-radius: 20px;
}
.oku3dg *, .oku3dg *::before, .oku3dg *::after { box-sizing: border-box; }

.oku3dg .oku3dg__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 11px;
    padding: 0 8px;
}
.oku3dg .oku3dg__badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--oku3dg-teal);
    background: #fff;
    border-radius: 50%;
}
.oku3dg .oku3dg__badge svg { width: 24px; height: 24px; }
.oku3dg .oku3dg__heading {
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(22px, 2.2vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--oku3dg-teal);
}
.oku3dg .oku3dg__subtitle {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin: 0 0 0 6px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--oku3dg-muted);
    border-left: 1px solid #BFD5D3;
}

/* Arrows either side of the row, with the dots underneath. */
.oku3dg .oku3dg__carousel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "prev track next"
        ".    dots  .";
    column-gap: 10px;
    align-items: center;
}
.oku3dg .oku3dg__arrow--prev { grid-area: prev; }
.oku3dg .oku3dg__arrow--next { grid-area: next; }
.oku3dg .oku3dg__track { grid-area: track; }
.oku3dg .oku3dg__dots { grid-area: dots; }

.oku3dg button.oku3dg__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    background: var(--oku3dg-teal);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s;
}
/* Level with the pictures rather than the middle of the card. */
.oku3dg button.oku3dg__arrow--prev,
.oku3dg button.oku3dg__arrow--next { margin-bottom: 30px; }
/* Nothing to scroll: the space stays, so the cards do not resize when the script starts. */
.oku3dg button.oku3dg__arrow[hidden] { visibility: hidden; }
.oku3dg button.oku3dg__arrow:hover { color: #fff; background: var(--oku3dg-dark); }
.oku3dg button.oku3dg__arrow:focus-visible { outline: 2px solid var(--oku3dg-teal); outline-offset: 2px; }

/* Native scrolling and snapping: swipes, trackpads and page scrolling just work. */
.oku3dg .oku3dg__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--oku3dg-gap)) / 4);
    gap: var(--oku3dg-gap);
    min-width: 0;
    margin: 0;
    padding: 4px 4px 14px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.oku3dg .oku3dg__track::-webkit-scrollbar { display: none; }
.oku3dg .oku3dg__track:focus-visible { outline: 2px solid var(--oku3dg-teal); outline-offset: 2px; border-radius: 12px; }

.oku3dg .oku3dg__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(16, 75, 77, 0.1);
    transition: box-shadow 0.2s;
}
.oku3dg .oku3dg__open {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    line-height: 0;
    background: #EDF0F0;
    cursor: zoom-in;
}
.oku3dg .oku3dg__open:focus-visible { outline: 2px solid var(--oku3dg-teal); outline-offset: -2px; }
.oku3dg .oku3dg__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    transition: transform 0.25s;
}
@media (hover: hover) {
    .oku3dg .oku3dg__card:hover { box-shadow: 0 6px 18px rgba(16, 75, 77, 0.16); }
    .oku3dg .oku3dg__card:hover .oku3dg__image { transform: scale(1.02); }
}

.oku3dg .oku3dg__body {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 14px;
}
.oku3dg .oku3dg__icon { flex: none; line-height: 0; color: var(--oku3dg-teal); }
.oku3dg .oku3dg__icon svg { width: 21px; height: 21px; }
.oku3dg .oku3dg__text { flex: 1; min-width: 0; }
.oku3dg .oku3dg__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--oku3dg-text);
}
.oku3dg .oku3dg__description {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--oku3dg-muted);
}
.oku3dg .oku3dg__material {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--oku3dg-dark);
    background: var(--oku3dg-soft);
    border: 1px solid var(--oku3dg-border);
    border-radius: 999px;
}
.oku3dg .oku3dg__material:empty,
.oku3dg .oku3dg__description:empty { display: none; }

/* Dots: a small circle in a target large enough to press. */
.oku3dg .oku3dg__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 26px;
}
.oku3dg .oku3dg__dots[hidden] { visibility: hidden; }
.oku3dg button.oku3dg__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 26px;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
}
.oku3dg button.oku3dg__dot::before {
    content: "";
    width: 12px;
    height: 12px;
    background: #C3CFCE;
    border-radius: 50%;
    transition: background 0.15s;
}
.oku3dg button.oku3dg__dot:hover::before { background: #8FA6A5; }
.oku3dg button.oku3dg__dot[aria-current="true"]::before { background: var(--oku3dg-teal); }
.oku3dg button.oku3dg__dot:focus-visible { outline: 2px solid var(--oku3dg-teal); outline-offset: -2px; }

/* Larger image */
.oku3dg .oku3dg__box {
    width: min(960px, 94vw);
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    margin: auto;
    padding: 0;
    overflow: auto;
    color: var(--oku3dg-text);
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(16, 40, 40, 0.35);
}
.oku3dg .oku3dg__box::backdrop { background: rgba(16, 32, 32, 0.72); }
.oku3dg .oku3dg__figure { margin: 0; }
.oku3dg .oku3dg__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    background: var(--oku3dg-soft);
}
.oku3dg .oku3dg__full {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72vh;
    max-height: 72dvh;
    margin: 0;
    border-radius: 0;
}
.oku3dg .oku3dg__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
}
.oku3dg .oku3dg__box-nav { display: flex; flex: none; align-items: center; gap: 8px; }
.oku3dg .oku3dg__box-nav[hidden] { display: none; }
.oku3dg .oku3dg__box-nav button.oku3dg__arrow { width: 42px; height: 42px; }
.oku3dg .oku3dg__count { min-width: 44px; font-size: 13px; text-align: center; color: var(--oku3dg-muted); }
.oku3dg button.oku3dg__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: var(--oku3dg-dark);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--oku3dg-border);
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
}
.oku3dg button.oku3dg__close:hover { color: #fff; background: var(--oku3dg-teal); border-color: var(--oku3dg-teal); }
.oku3dg button.oku3dg__close:focus-visible { outline: 2px solid var(--oku3dg-teal); outline-offset: 2px; }
html.oku3dg-locked { overflow: hidden; }

/* Too narrow for the heading and subtitle on one line. */
@media (max-width: 1299px) {
    .oku3dg .oku3dg__head { flex-wrap: wrap; }
    .oku3dg .oku3dg__heading { flex: 1 1 0; min-width: 0; }
    .oku3dg .oku3dg__subtitle { flex: 1 1 100%; margin: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 1199px) {
    .oku3dg .oku3dg__track { grid-auto-columns: calc((100% - 2 * var(--oku3dg-gap)) / 3); }
}
@media (max-width: 899px) {
    .oku3dg .oku3dg__track { grid-auto-columns: calc((100% - var(--oku3dg-gap)) / 2); }
}
@media (max-width: 599px) {
    .oku3dg { --oku3dg-gap: 12px; margin-bottom: 28px; padding: 14px 10px 10px; border-radius: 16px; }
    .oku3dg .oku3dg__head { padding: 0 4px; }
    .oku3dg .oku3dg__badge { width: 36px; height: 36px; }
    /* One card, with the edge of the next showing there is more. No room for arrows beside it. */
    .oku3dg .oku3dg__carousel {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "track track track"
            "prev  dots  next";
        column-gap: 6px;
    }
    .oku3dg .oku3dg__track { grid-auto-columns: 82%; }
    .oku3dg button.oku3dg__arrow { width: 44px; height: 44px; }
    .oku3dg button.oku3dg__arrow--prev,
    .oku3dg button.oku3dg__arrow--next { margin-bottom: 0; }
    .oku3dg button.oku3dg__arrow[hidden],
    .oku3dg .oku3dg__dots[hidden] { display: none; }
    .oku3dg .oku3dg__caption { align-items: flex-start; flex-direction: column; gap: 10px; }
    .oku3dg .oku3dg__box-nav { align-self: stretch; justify-content: space-between; }
    .oku3dg .oku3dg__box-nav button.oku3dg__arrow { width: 44px; height: 44px; }
    .oku3dg button.oku3dg__close { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .oku3dg .oku3dg__track { scroll-behavior: auto; }
    .oku3dg .oku3dg__image,
    .oku3dg .oku3dg__card,
    .oku3dg button.oku3dg__arrow,
    .oku3dg button.oku3dg__dot::before { transition: none; }
    .oku3dg .oku3dg__card:hover .oku3dg__image { transform: none; }
}