/* ================= FURNITURE FEATURE BLOCK ================= */

/* We can reuse the classes from plat-feature-block previously defined in Economics.
However, since each file defines its own styles, we define them here again or just
leave it empty if economics is globally included. Normally in this architecture, each
component brings its own CSS file. Since they share classes exactly, we can just duplicate
the styles or make sure they don't break. The background is white for this one. */

/* Duplicate generic block if required */
.platform-protections__feature-block {
    background-color: white;
    padding: 100px 48px;
    display: flex;
    justify-content: center;
}

.platform-protections__feature-content {
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 80px;
}

.platform-protections__feature-img-col {
    flex: 1;
}

.platform-protections__feature-image {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

.platform-protections__feature-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.platform-protections__feature-subtitle {
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.platform-protections__feature-title {
    font-size: 40px;
    font-family: var(--display);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 24px 0;
    white-space: pre-line;
}

.platform-protections__feature-desc {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 32px;
    white-space: pre-line;
    text-align: start;
}

.platform-protections__feature-btn {
    background-color: var(--ink);
    color: white;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.platform-protections__feature-btn:hover {
    opacity: 0.9;
}

@media (max-width: 900px) {
    .platform-protections__feature-content {
        flex-direction: column;
        text-align: left;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .platform-protections__feature-block {
        padding: 60px 24px;
    }

    .platform-protections__feature-title {
        font-size: 32px;
        font-family: var(--display);
    }
}