/* Alignment wrapper — flex column stacks monitor + stand naturally */
.bd-computer-mockup-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.bd-computer-mockup-wrapper.align-center { text-align: center; }
.bd-computer-mockup-wrapper.align-left   { text-align: left; }
.bd-computer-mockup-wrapper.align-right  { text-align: right; }

/* Monitor frame — fills container width, 16:9 screen via aspect-ratio */
.bd-computer {
    width: 100%;
    background: var(--bd-frame);
    border: 14px solid var(--bd-frame);
    border-bottom-width: 70px;
    border-radius: 18px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Chin dot — lives inside the 70px chin border area */
.bd-computer:before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--bd-dot);
}

/* Trapezoid pedestal — stacks below monitor via flexbox */
.bd-computer-pedestal {
    width: 20%;
    height: 50px;
    background: var(--bd-base);
    clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
}

/* Foot bar — stacks below pedestal via flexbox */
.bd-computer-foot {
    width: 33%;
    height: 14px;
    border-radius: 3px;
    background: var(--bd-foot);
}

/* Screen content — 16:9 via aspect-ratio */
.bd-computer-content {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    position: relative;
}

.bd-computer-content video,
.bd-computer-content iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.bd-computer-content video {
    object-fit: var(--bd-fit, cover);
    object-position: center center;
}

/* Placeholder shown when no video URL is set */
.bd-computer-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
}

.bd-computer-placeholder p {
    color: #666;
    margin: 0;
    font-size: 13px;
    text-align: center;
    padding: 0 20px;
}