/* Odoardo Art™ — the configurator's own layer.

   The dialog itself, its rail and every shared control come from product-configurator.css: this
   page's modal carries .product-configurator-modal like the other four. What is left here is what
   only Art has — the oak frame with a real work hanging in it, one stepper, and the degressive
   ladder printed as steps a patron can press. */

/* #region The stage */
/* The frame stands in the panel, not in the column opposite: it is the thing being configured, so
   it belongs on the side a buyer works on. Bounded rather than sized to the column — the stepper
   and the ladder under it have to stay on the screen without scrolling on a laptop. */
.cfg-art-stage {
    position: relative;
    width: min(100%, 300px);
    margin: 0 auto;
    aspect-ratio: 1;
}

/* No artist in the catalogue yet: the product photograph stands in, and it is a photograph rather
   than a frame with an opening, so nothing is laid over it. */
.cfg-art-stage--empty img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-shadow: 0 35px 85px rgba(5, 5, 5, .72);
    filter: var(--photo-at-rest);
}

/* The works travel through the stage itself, and there is no opening to fit them to: the oak is on each
   work rather than around the reel, so no inset here measures the passe-partout of a frame photograph. */
/* The reel runs on and the panel has to end somewhere, so its two edges are dissolved rather than
   cut: a work travelling out of view fades instead of being sliced by a hard border, which is what
   made the strip read as clipped rather than as continuing. A mask and not a gradient overlay,
   because whatever stands behind the panel shows through — an overlay would have to know the
   background colour and would be wrong the moment that changed.

   The band is a share of the height, so the dissolve stays proportional on a tall screen and a short
   one; big enough to soften a plate's edge, small enough that a whole work is never inside it. */
.cfg-art-stage-reel {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #050505 12%, #050505 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #050505 12%, #050505 88%, transparent);
}

/* Twice the list, moved by half its own height: at the end of the run the strip stands exactly where
   it started, so the works come round with no seam and nothing to press.

   flow-root, not block: each plate carries a bottom margin, and the last one would otherwise
   collapse out through the strip's own edge — leaving it half a gap short of twice the list, which
   the -50% below would then land wrong on, once every pass. The same arithmetic the oak frame's reel
   in product.css has to keep. */
.cfg-art-stage-strip {
    display: flow-root;
    animation: cfg-art-reel var(--cfg-art-reel-duration, 20s) linear infinite;
    will-change: transform;
}

/* Downward, the way a work is put into a frame — and the way the oak frame's reel beside the price
   already runs. Upward read as the works being taken out of it. */
@keyframes cfg-art-reel {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}

/* The oak around one work, and it is the house's one moulding: the same photograph, sliced the same
   way, as the frame „Tak rośnie galeria" hangs its chapters in and as the anchor on the Lens page is
   cut from. Thin, because at this size a wide profile leaves a postage stamp in the middle of it.
   Square, so one work fills the stage exactly — which is what makes them arrive one at a time rather
   than as a ribbon of pictures. */
.cfg-art-stage-plate {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1;
    /* A hairline of dark between one work and the next, so they read as separate pieces travelling
       past rather than as a continuous ribbon. Uniform on every plate, which is what keeps the loop
       seamless: half the doubled strip is still exactly the list, gaps included. */
    margin-bottom: clamp(.5rem, 1.2vw, .9rem);
    overflow: hidden;
    border: clamp(.5rem, 1.5vw, .9rem) solid transparent;
    border-image: url('/img/art/frame-wood.webp') 30% round;
    outline: 1px solid var(--hairline-strong);
    background: #050505;
    /* The moulding taken down a little, exactly as the gallery frame does it: a border-image has
       nothing under it to tint, so the dimming sits on the whole plate and the work inside gets its
       own grade back below. */
    filter: brightness(.88);
}

.cfg-art-stage-artwork {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-grade);
}

/* A visitor who asked for less movement gets the frame with a work in it, hung and still. */
@media (prefers-reduced-motion: reduce) {
    .cfg-art-stage-strip {
        animation: none;
    }
}

/* The caption under the frame is centred with it — as a left-aligned line under a centred object it
   read as the opening of the next block. */
.product-configurator-modal .cfg-art-stage ~ .cfg-engraving-note {
    text-align: center;
}
/* #endregion */

/* #region Quantity */
/* One stepper, under the frame it counts. It carries no total of its own — the amount is in the
   rail, and printing it twice on one screen is what the rail exists to prevent. */
.cfg-art-quantity {
    margin-top: clamp(1.4rem, 2.6vh, 2rem);
    padding-top: clamp(1.1rem, 2vh, 1.5rem);
    border-top: 1px solid var(--hairline);
}

    .cfg-art-quantity .cfg-axis-title {
        display: block;
        margin-bottom: .8rem;
    }

.product-configurator-modal .cfg-art-quantity .cfg-qty-control {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: .4rem;
    border: 1px solid var(--hairline-mid);
}

.product-configurator-modal .cfg-art-quantity .cfg-qty-btn {
    width: 42px;
    height: 42px;
    flex: none;
}

.product-configurator-modal .cfg-art-quantity .cfg-qty-value {
    min-width: 46px;
    color: var(--gold);
    text-align: center;
}
/* #endregion */

/* #region The ladder */
/* The whole degressive scale, on the screen and pressable — never hidden behind a sentence naming the
   next cheaper step. Such a prompt appears one frame before the discount, and one frame is where every
   patron starts, so nobody reads it. */
.cfg-art-ladder {
    margin-top: clamp(1.4rem, 2.6vh, 2rem);
    padding-top: clamp(1.1rem, 2vh, 1.5rem);
    border-top: 1px solid var(--hairline);
}

    .cfg-art-ladder .cfg-axis-title {
        display: block;
        margin-bottom: .8rem;
    }

/* One row that wraps rather than a scroller: five steps at this width fit a laptop in one line and
   a phone in two, and a horizontal scroller hides the cheapest step behind an edge. */
.cfg-art-ladder-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cfg-art-ladder-step {
    display: flex;
    min-width: 92px;
    flex: 1 1 92px;
    flex-direction: column;
    gap: .3rem;
    padding: .7rem .8rem;
    border: 1px solid rgba(245, 245, 245, .14);
    background: rgba(245, 245, 245, .022);
    cursor: pointer;
    text-align: left;
    transition: border-color .35s var(--ease-house), background .35s var(--ease-house);
}

    .cfg-art-ladder-step:hover,
    .cfg-art-ladder-step:focus-visible {
        border-color: var(--gold-border);
    }

    /* The step the count has actually reached. It is a state, not a selection: pressing another
       step changes the count, and the count decides which one is marked. */
    .cfg-art-ladder-step.is-current {
        border-color: var(--gold-hover);
        background: var(--tint-raised);
    }

.cfg-art-ladder-scale {
    color: var(--text-muted);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cfg-art-ladder-step b {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 300;
    line-height: 1.1;
    transition: color .35s var(--ease-house);
}

/* Gold marks only the step the count has reached. */
.cfg-art-ladder-step.is-current .cfg-art-ladder-scale,
.cfg-art-ladder-step.is-current b {
    color: var(--gold);
}

.cfg-art-ladder-hint {
    margin: .8rem 0 0;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 300;
    line-height: 1.6;
}
/* #endregion */

/* #region The rail's own lines */
/* What the collection saves at this size, under the amount it is saved from. Gold, because it is
   the one line in the column that is good news. */
.cfg-rail-summary .cfg-art-saving {
    color: var(--gold);
}
/* #endregion */

/* #region Responsive */
/* The dialog still stands in two columns here and the panel's column is narrower — the frame gives
   up its width first, so the stepper and the ladder stay above the fold. */
@media (max-width: 900px) {
    .cfg-art-stage {
        width: min(100%, 230px);
    }
}

@media (max-width: 760px) {
    /* The stepper takes the full width of the panel: a 42px pair floating at the left edge of a
       phone reads as an unfinished row. */
    .product-configurator-modal .cfg-art-quantity .cfg-qty-control {
        display: flex;
        justify-content: space-between;
    }

    .cfg-art-ladder-step {
        flex-basis: calc(50% - .25rem);
    }
}
/* #endregion */