/* ═════════════════════════════════════════════════════════════════
   Custom buttons — rendered OpenSCAD button images

   Buttons split their row equally and scale with it: each
   button is a flex item keeping the source images' aspect
   ratio (630 × 149), so the artwork holds its proportions
   at any row width.
   ═════════════════════════════════════════════════════════════════ */

:root {
    /* Source image proportions: 630 × 149 */
    --prpol-button-gap:    0.8vw;     /* space between adjacent buttons */
}

/* ── Base button ──────────────────────────────────────── */
.prpol-button {
    position: relative;
    display: block;
    flex: 1 1 0;               /* share the row equally */
    min-width: 0;              /* allowed to shrink with the row */
    cursor: pointer;
    text-decoration: none;
    pointer-events: auto;            /* override .content-panel: none */
    /* Container query: lets the label size track the button's
       own width instead of the viewport. */
    container-type: inline-size;
}

/* Ratio box: an in-flow child whose containing block is the
   button itself, so the padding percentage resolves against the
   button's own width.  height: 0 + padding-bottom = width ×
   149/630, in every browser. */
.prpol-button__box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(100% * 149 / 630);
    box-sizing: border-box;
}

/* ── Button text ────────────────────────────────────── */
.prpol-button__text {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-nav);
    /* cqw = % of the button's own width, so the label scales
       with the button as the row shrinks and grows. */
    font-size: clamp(12px, 7cqw, 30px);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Button images ───────────────────────────────────── */
.prpol-button__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.prpol-button__img--rest {
    display: block;
}

.prpol-button__img--hover {
    display: none;
}

/* On hover: hide rest, show hover */
.prpol-button:hover .prpol-button__img--rest {
    display: none;
}

.prpol-button:hover .prpol-button__img--hover {
    display: block;
}