/* Odoardo Alibi™ — 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, so the modal shell, the wizard chrome
   and the quantity totals are not repeated here. What belongs here is what only Alibi has: two editions
   shown as photographs, one stepper, and the soul that can be implanted into a dedicated series. */

/* #region Edition tiles */
/* The tiles fill the panel. The shared rule caps an axis at 700px and centres it, which is right
   for a column of choices under a heading and wrong for two photographs standing side by side. */
.product-configurator-modal .cfg-wizard-panel .cfg-axis {
    width: 100%;
}

.product-configurator-modal .cfg-wizard-panel .cfg-edition-choice {
    position: relative;
    min-height: 0;
    gap: .3rem;
    padding: 1.1rem 1.15rem 1rem;
}

/* One photograph per edition. Wider than tall on purpose: two square frames side by side in a panel
   this wide are nearly 300px each, which pushed the stepper below the fold — and a control a buyer
   has to go looking for is a control they report as missing. */
.cfg-edition-photo {
    position: relative;
    display: block;
    margin-bottom: .6rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(245, 245, 245, .07);
    background: #050505;
}

    .cfg-edition-photo img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

/* The unchosen edition is dimmed by a flat layer over the picture rather than by a filter on it.
   A `filter` (and a hover `transform`) on a photograph this large has to be re-rastered by the main
   thread on every paint, and inside a dialog that already carries a backdrop-filter that is what
   made the page stutter and the cursor lag. A solid overlay composites for free. */
    .cfg-edition-photo::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        background: rgba(5, 5, 5, .42);
        transition: opacity .35s ease;
        pointer-events: none;
    }

.cfg-edition-choice.selected .cfg-edition-photo {
    border-color: var(--gold-hover);
}

    .cfg-edition-choice.selected .cfg-edition-photo::after {
        opacity: 0;
    }

/* The radio mark stands in the photograph's corner rather than in the flow: in the flow it pushed
   the name a line down and left a dot floating over nothing. */
.product-configurator-modal .cfg-edition-choice .cfg-choice-check {
    position: absolute;
    z-index: 2;
    top: 1.9rem;
    right: 1.9rem;
    margin: 0;
}

/* The series a tile starts at, under the name it belongs to. Italic, not roman: the price at the foot
   of the tile is Playfair too, and the slope is what keeps the two apart at a glance. Gold arrives
   with the hand or the choice. */
.cfg-edition-scale {
    color: var(--white-soft);
    font-family: var(--font-display);
    font-size: .88rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.35;
    transition: color var(--motion-quick) var(--ease-house);
}

.cfg-edition-choice:hover .cfg-edition-scale,
.cfg-edition-choice:focus-visible .cfg-edition-scale,
.cfg-edition-choice.selected .cfg-edition-scale {
    color: var(--gold);
}

.product-configurator-modal .cfg-edition-choice .cfg-choice-description {
    margin: .35rem 0;
}

/* #endregion */

/* #region Quantity */
/* One stepper, under the editions 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-edition-quantity {
    margin-top: clamp(1.4rem, 2.6vh, 2rem);
    padding-top: clamp(1.1rem, 2vh, 1.5rem);
    border-top: 1px solid var(--hairline);
}

    .cfg-edition-quantity .cfg-axis-title {
        margin-bottom: .8rem;
    }

/* The row is a row, not a frame: the border and the padding belong to the stepper inside it, and
   the shared rule draws a second box around both. */
.product-configurator-modal .cfg-wizard-panel .cfg-edition-quantity .cfg-qty-row {
    justify-self: start;
    justify-content: flex-start;
    gap: .9rem;
    padding: 0;
    border: 0;
}

.product-configurator-modal .cfg-edition-quantity .cfg-qty-control {
    padding: .4rem;
    border-color: var(--hairline-mid);
}

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

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

/* The sentence that changes with the edition: from one copy, or from the series the dedicated
   edition starts at. */
.cfg-quantity-hint {
    margin: .9rem 0 0;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 300;
    line-height: 1.6;
}

/* #endregion */

/* #region The implanted soul */
/* Shown only for a dedicated series, so it stands under the stepper rather than beside the tiles:
   it is an extension of one edition priced per copy, not a third choice. */
.cfg-alibi-soul {
    margin-top: 1.1rem;
}

.product-configurator-modal .cfg-wizard-panel .cfg-alibi-soul-choice {
    width: 100%;
    min-height: 0;
    padding: 1.3rem 1.5rem;
}

/* The amount belongs to the sentence above it — it is what the option costs, not a second thing
   the tile offers — so it sits close enough to be read as its last clause. */
.product-configurator-modal .cfg-alibi-soul .cfg-choice-price {
    margin-top: .45rem;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

/* #endregion */

/* #region Responsive */
/* The dialog still stands in two columns here and the panel's own column is too narrow for two
   photographs side by side. The tiles stack — and stacked at full width the picture goes beside
   the words, or it would push the stepper off the screen. */
@media (max-width: 900px) {
    .product-configurator-modal .cfg-wizard-panel .cfg-edition-choices {
        grid-template-columns: 1fr;
    }

    .product-configurator-modal .cfg-wizard-panel .cfg-edition-choice {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        align-items: center;
        column-gap: 1.2rem;
    }

    /* Four rows: the name, the series, the sentence and the price. The mark is out of flow. */
    .cfg-edition-photo {
        grid-row: span 4;
        align-self: start;
        margin-bottom: 0;
    }

    /* The mark stays in the photograph's corner, which on a stacked tile is at its left. */
    .product-configurator-modal .cfg-edition-choice .cfg-choice-check {
        top: 1.6rem;
        right: auto;
        left: calc(1.15rem + 108px - 1.6rem);
    }
}
/* #endregion */