/* ======================================================
SHARE MOD CARD — scoped additions on top of sc-modal-share.css.
Same class family (sc-share-story-canvas / sc-share-story__*) so tab
styles, scale system, spinner, stamp, and modal chrome all just work.
====================================================== */

/* Per-format canvas dimensions.
   The base .sc-share-story-canvas rule ships 1080×1920; portrait + square
   redefine width/height and aspect ratio to match their output. */

.sc-share-mod-canvas--portrait {
    width: 1080px;
    height: 1440px;
    aspect-ratio: 3 / 4;
}

.sc-share-mod-canvas--square {
    width: 1080px;
    height: 1080px;
    aspect-ratio: 1 / 1;
}

/* Preview-stage sizes match the canvas we scale. Story inherits the base
   sc-share-preview-stage rule (9:16) from sc-modal-share.css. */

.sc-share-preview-stage--portrait {
    width: calc(1080px * var(--story-scale));
    height: calc(1440px * var(--story-scale));
    aspect-ratio: 3 / 4;
}

.sc-share-preview-stage--square {
    width: calc(1080px * var(--story-scale));
    height: calc(1080px * var(--story-scale));
    aspect-ratio: 1 / 1;
}

/* ------------------------------------------------------
CANVAS INTERIOR
------------------------------------------------------ */

.sc-share-mod-canvas {
    /* Match the build card's canvas fill/border exactly (sc-modal-share.css
       .sc-share-story-canvas) — low contrast between the two keeps the
       inset border invisible instead of reading as a visible frame. */
    background: #1c1c20;
    padding: 36px;
    box-shadow: inset 0 0 0 1px #333;
}

.sc-share-mod__wrap {
    position: relative;
    z-index: 1;
    gap: 32px;
}

/* Hero photo — inset with margin from canvas edge, rounded, not full-bleed. */
.sc-share-mod__hero {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sc-share-mod__hero-row--single .sc-share-mod__hero--second {
    display: none;
}

/* Only one photo — the lone tile should read as a normal full hero again. */
.sc-share-mod__hero-row--single .sc-share-mod__hero {
    border-radius: 1.4rem;
}

.sc-share-mod__hero-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
}

.sc-share-mod__hero-scrim {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 30%);
    pointer-events: none;
}

/* Square is the shortest canvas — the base brand-mark/wordmark sizing (64px /
   36px) is tuned for the taller formats, so drop back to the base feature's
   own square-canvas sizing (46px / 27px) here. The base rule keys off
   :not(.sc-share-square-canvas), which carries the specificity of an extra
   class — matching that on our own canvas class (both live on the same
   element) is what it takes to out-rank it without !important. */
.sc-share-story-canvas.sc-share-mod-canvas--square .sc-share-story__brand-mark {
    width: 46px;
    height: 46px;
}

.sc-share-story-canvas.sc-share-mod-canvas--square .sc-share-story__wordmark {
    font-size: 27px;
}

/* ------------------------------------------------------
INFO PANEL
------------------------------------------------------ */

.sc-share-mod__info {
    gap: 26px;
    flex: 0 1 auto;
    min-height: 0;
}

.sc-share-mod__title-block {
    padding-top: 4px;
}

/* Name + subtitle keep one look on every canvas size — story, portrait, square.
   .sc-modal-share-mod.css loads after sc-modal-share.css, so these same-
   specificity rules already win over the base .sc-share-story__car-name /
   --car-brand-model styles without needing !important. */
.sc-share-mod__name {
    color: var(--primary);
    font-size: 50px;
}

.sc-share-mod__name--story {
    font-size: 52px;
}

.sc-share-mod__subtitle {
    /* Base .sc-share-story__car-brand-model sets margin-top with !important,
       so overriding it here needs !important too. */
    margin-top: 0 !important;
    color: #b0b0b0;
}

/* Square canvas is the tightest format — a smaller title fits better. Each
   canvas gets its own orientation class (sc-share-mod__name--<format>) from
   the template, so this just wins on source order, no !important needed. */
.sc-share-mod__name--square {
    font-size: 50px;
}

/* Car make/model — smaller on portrait + square, story keeps the base 30px
   (u-text-30 in the template). Same orientation-class approach as the title. */
.sc-share-mod__subtitle--portrait,
.sc-share-mod__subtitle--square {
    font-size: 24px;
}

.sc-share-mod-canvas--square .sc-share-mod__wrap { gap: 24px; }
.sc-share-mod-canvas--portrait .sc-share-mod__wrap { gap: 28px; }
.sc-share-mod-canvas--square .sc-share-mod__info { gap: 20px; }
.sc-share-mod-canvas--portrait .sc-share-mod__info { gap: 22px; }

/* ------------------------------------------------------
CREDIT BOXES — installed-by + on-this-build
------------------------------------------------------ */

.sc-share-mod-canvas--square .sc-share-mod__box,
.sc-share-mod-canvas--portrait .sc-share-mod__box {
    padding: 18px 20px;
}

/* Shop credit present — both boxes sit side by side at equal width instead
   of stacked, across all three formats (same 1080px canvas width). Icon and
   thumbnail match the base 80px size so neither looks undersized next to
   the other. */
.sc-share-mod__boxes--pair {
    flex-direction: row;
}

/* Both credit lines truncate in side-by-side mode — stack full-width instead. */
.sc-share-mod__boxes--stack {
    flex-direction: column;
}

.sc-share-mod__boxes--stack .sc-share-mod__box {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

.sc-share-mod__boxes--pair .sc-share-mod__box {
    /* Content-based width, not a rigid 50/50 split: basis auto lets each box
       size to its own label first, then grow/shrink to fill the row. A short
       shop name (or short build name) stays narrow instead of being forced
       to match its neighbor; the min/max bounds keep either side from being
       crushed to icon-only or stretching so far the other box loses its
       thumbnail/label pairing. u-truncate on box-v/box-sub is still the
       fallback if a name is long even at max-width. */
    flex: 1 1 auto;
    min-width: 38%;
    max-width: 62%;
    padding: 18px 20px;
}

.sc-share-mod__boxes--pair .sc-share-mod__box-ic,
.sc-share-mod__boxes--pair .sc-share-mod__box-thumb {
    width: 94px;
    height: 94px;
}

.sc-share-mod__box-thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
}

.sc-share-mod__box-text {
    flex: 1 1 auto;
    min-width: 0;
}

.sc-share-mod__box-k {
    color: #7a7a7a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.sc-share-mod__box-v {
    color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
}

.sc-share-mod__box-sub {
    margin-top: 6px;
    color: #9a9a9a;
    font-weight: 500;
    line-height: 1.2;
}

.sc-share-mod-canvas--square .sc-share-mod__box-v,
.sc-share-mod-canvas--portrait .sc-share-mod__box-v,
.sc-share-mod__boxes--pair .sc-share-mod__box-v {
    font-size: 36px;
}

.sc-share-mod-canvas--square .sc-share-mod__box-sub,
.sc-share-mod-canvas--portrait .sc-share-mod__box-sub,
.sc-share-mod__boxes--pair .sc-share-mod__box-sub {
    font-size: 22px;
}

.sc-share-mod-canvas--square .sc-share-mod__box-k,
.sc-share-mod-canvas--portrait .sc-share-mod__box-k,
.sc-share-mod__boxes--pair .sc-share-mod__box-k {
    font-size: 22px;
    margin-bottom: 6px;
}

/* ------------------------------------------------------
FOOTER — no arrow icon
------------------------------------------------------ */

.sc-share-mod__footer-label {
    color: #7a7a7a;
}

.sc-share-mod__footer-url {
    margin-top: 10px !important;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.2;
}

.sc-share-mod-canvas--square .sc-share-mod__footer,
.sc-share-mod-canvas--portrait .sc-share-mod__footer {
    padding-top: 20px;
}

.sc-share-mod-canvas--square .sc-share-mod__footer-url,
.sc-share-mod-canvas--portrait .sc-share-mod__footer-url {
    font-size: 22px;
    margin-top: 8px !important;
}

/* ------------------------------------------------------
MODAL — mirror the ID-scoped chrome from sc-modal-share.css so
the mod modal matches the build share modal visually.
------------------------------------------------------ */
#share-mod-preview-modal.sc-modal .sc-share-modal__dialog {
    animation: none !important;
    opacity: 1 !important;
    transition: none;
    will-change: auto;
}

@media (min-width: 768px) {
    #share-mod-preview-modal.sc-modal .sc-share-modal__dialog {
        transform: translateY(10px) !important;
        transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    #share-mod-preview-modal.sc-modal.show .sc-share-modal__dialog {
        transform: translateY(0) !important;
    }
    #share-mod-preview-modal.sc-modal.sc-is-closing .sc-share-modal__dialog {
        transform: translateY(10px) !important;
    }
}

#share-mod-preview-modal.sc-share-modal {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    padding: 24px 16px;
    overscroll-behavior: contain;
}

#share-mod-preview-modal .sc-modal-dialog.sc-share-modal__dialog {
    padding: 0;
    max-width: 550px;
    max-height: min(900px, calc(100vh - 60px));
    max-height: min(900px, calc(100svh - 60px));
}

@media (min-width: 768px) {
    #share-mod-preview-modal.sc-modal .sc-modal-dialog.sc-share-modal__dialog {
        max-width: 760px !important;
    }
    #share-mod-preview-modal.sc-modal .sc-share-modal__dialog {
        height: min(1100px, calc(100vh - 16px)) !important;
        height: min(1100px, calc(100svh - 16px)) !important;
        max-height: min(1100px, calc(100vh - 16px)) !important;
        max-height: min(1100px, calc(100svh - 16px)) !important;
    }
}

#share-mod-preview-modal .sc-share-modal__close {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.82);
    z-index: 3;
}

#share-mod-preview-modal .sc-share-modal__close:hover,
#share-mod-preview-modal .sc-share-modal__close:focus-visible {
    color: rgba(255, 255, 255, 0.98);
}

#share-mod-preview-modal .sc-share-modal__close-icon {
    width: 18px;
    height: 18px;
}

/* Mobile bottom-sheet — mirror the build share modal exactly. */
@media (max-width: 767px) {
    #share-mod-preview-modal.sc-share-modal {
        align-items: flex-end;
        padding: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #share-mod-preview-modal.sc-modal .sc-share-modal__dialog {
        width: 100%;
        max-width: none;
        height: min(92svh, 760px);
        max-height: 92svh;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 18px 18px 0 0;
        background: #1e1e1e;
        box-shadow: none !important;
        transform: translateY(100%);
        transition: none;
    }

    #share-mod-preview-modal.sc-modal.show .sc-share-modal__dialog {
        transform: translateY(100%);
        animation: sc-share-sheet-slide-up 260ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    #share-mod-preview-modal.sc-modal.sc-is-closing .sc-share-modal__dialog {
        animation: sc-share-sheet-slide-down 220ms cubic-bezier(0.4, 0, 0.6, 1) both !important;
    }

    #share-mod-preview-modal.sc-modal.show .sc-share-modal__dialog.is-dragging {
        animation: none !important;
        transition: none !important;
    }

    #share-mod-preview-modal .sc-share-modal__close {
        display: none;
    }
}