/* =====================================================
   Website demos page — website-demos.css
   ===================================================== */

.websiteDemosHero {
    padding: 3.6rem 0 2rem;
}

.websiteDemosHero h1 {
    font-size: clamp(2.1rem, 3.4vw, 3rem);
    line-height: 1.05;
}

.websiteDemosHero__actions {
    margin-top: 1.35rem;
}

.demoCard {
    display: flex;
    flex-direction: column;
}

.demoCard h3 {
    margin-bottom: 0.55rem;
}

.card__actions {
    margin-top: 1rem;
}

.websiteDemosCtaCard {
    text-align: center;
    padding: 2rem 1.2rem;
}

.websiteDemosCtaText {
    margin-top: 0.55rem;
}

.websiteDemosCtaButtons {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

@media (max-width: 640px) {
    .websiteDemosCtaButtons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Demo preview window */

.demoPreview {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(168, 193, 209, 0.18);
    background: rgba(22, 32, 43, 0.25);
    margin-bottom: 0.9rem;
}

.demoPreview__bar {
    height: 10px;
    background: rgba(168, 193, 209, 0.18);
}

/* Base preview area */
.demoPreview__content {
    min-height: 148px;
    padding: 0.52rem;
}

.demoPreview__layout {
    height: 100%;
    border-radius: 10px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
}

.demoHero {
    display: block;
    height: 32px;
    border-radius: 7px;
}

.demoLine {
    display: block;
    border-radius: 999px;
    height: 6px;
}

.demoLine--title {
    width: 60%;
}

.demoLine--text {
    width: 84%;
    opacity: 0.88;
}

.demoBlocks {
    display: grid;
    gap: 0.34rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.08rem;
}

.demoBlocks span {
    display: block;
    border-radius: 6px;
    min-height: 24px;
}

.demoCta {
    display: block;
    width: 40%;
    height: 11px;
    border-radius: 999px;
    margin-top: auto;
}

/* Contractor style */
.demoPreview__content--contractor {
    background: linear-gradient(
        180deg,
        rgba(64, 90, 122, 0.66),
        rgba(19, 29, 40, 0.84)
    );
}

.demoPreview__content--contractor .demoPreview__layout {
    background: rgba(12, 20, 31, 0.43);
    border: 1px solid rgba(168, 193, 209, 0.18);
}

.demoPreview__content--contractor .demoHero {
    background: linear-gradient(90deg, rgba(169, 198, 218, 0.3), rgba(101, 136, 170, 0.34));
}

.demoPreview__content--contractor .demoLine,
.demoPreview__content--contractor .demoBlocks span,
.demoPreview__content--contractor .demoCta {
    background: rgba(198, 218, 233, 0.33);
}

.demoPreview__content--contractor .demoBlocks {
    grid-template-columns: 1.3fr 1fr;
}

.demoPreview__content--contractor .demoBlocks span:nth-child(1) {
    grid-column: 1 / -1;
    min-height: 20px;
}

/* Salon style */
.demoPreview__content--salon {
    background: linear-gradient(
        180deg,
        rgba(209, 165, 172, 0.56),
        rgba(52, 35, 43, 0.72)
    );
}

.demoPreview__content--salon .demoPreview__layout {
    background: rgba(54, 37, 46, 0.31);
    border: 1px solid rgba(234, 205, 212, 0.24);
}

.demoPreview__content--salon .demoHero {
    background: linear-gradient(90deg, rgba(248, 224, 229, 0.48), rgba(216, 175, 186, 0.34));
}

.demoPreview__content--salon .demoLine,
.demoPreview__content--salon .demoBlocks span,
.demoPreview__content--salon .demoCta {
    background: rgba(244, 222, 227, 0.5);
}

.demoPreview__content--salon .demoCta {
    width: 46%;
}

.demoPreview__content--salon .demoBlocks span:nth-child(2) {
    transform: translateY(1px);
}

/* Shop style */
.demoPreview__content--shop {
    background: linear-gradient(
        180deg,
        rgba(188, 178, 160, 0.52),
        rgba(70, 62, 51, 0.72)
    );
}

.demoPreview__content--shop .demoPreview__layout {
    background: rgba(54, 49, 42, 0.3);
    border: 1px solid rgba(235, 225, 209, 0.2);
}

.demoPreview__content--shop .demoHero {
    height: 26px;
    background: linear-gradient(90deg, rgba(235, 226, 212, 0.47), rgba(214, 199, 175, 0.38));
}

.demoPreview__content--shop .demoLine,
.demoPreview__content--shop .demoBlocks span,
.demoPreview__content--shop .demoCta {
    background: rgba(236, 227, 212, 0.4);
}

.demoPreview__content--shop .demoLine--title {
    width: 52%;
}

.demoPreview__content--shop .demoBlocks span {
    min-height: 25px;
}

.demoPreview__content--shop .demoCta {
    width: 34%;
}

/* Small note under buttons */
.demoNote {
    font-size: 0.8rem;
    color: rgba(211, 219, 223, 0.6);
    margin-top: 0.5rem;
}