/*
 * MLX-190 — structured description blocks (port of anvelope.MD ANV-98 / agropiese.MD AGR-139).
 *
 * Styles the HTML produced by App\Services\DescriptionBlockRenderer when a model description
 * arrives from param.agroit.md as JSON blocks. Rendered on the model and product pages inside
 * `.detail-text > .more`.
 *
 * Loaded from site/layout.blade.php <head> on purpose, next to readmore-fade.css: readmore.js
 * measures `.more` at document.ready (MLX-198), and a stylesheet arriving later would make it
 * measure unstyled blocks and clip the expanded text.
 *
 * Every rule is scoped under .detail-text and keyed on a .desc-block-* class, so legacy HTML
 * descriptions are never restyled. Colours follow style.css (#0a0e14 text, #d62424 accent).
 */

.detail-text .desc-block-intro {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #f2f2f2;
    border-left: 4px solid #d62424;
    border-radius: 4px;
}

.detail-text .desc-block-intro p:first-child {
    margin-top: 0;
}

.detail-text .desc-block-intro p:last-child {
    margin-bottom: 0;
}

.detail-text .desc-block-section,
.detail-text .desc-block-features,
.detail-text .desc-block-specs,
.detail-text .desc-block-applications {
    margin: 0 0 16px;
}

.detail-text [class^="desc-block-"] h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #0a0e14;
}

.detail-text .desc-block-features ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.detail-text .desc-block-features li {
    margin: 0 0 4px;
}

.detail-text .desc-block-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-text .desc-block-specs h3 {
    flex: 0 0 100%;
}

.detail-text .desc-block-spec-item {
    display: flex;
    flex: 1 1 140px;
    flex-direction: column;
    min-width: 0;
    padding: 8px 12px;
    background: #f2f2f2;
    border-radius: 4px;
}

.detail-text .desc-block-spec-label {
    font-size: 12px;
    color: #6b6b6b;
}

.detail-text .desc-block-spec-value {
    font-weight: 600;
    color: #0a0e14;
    overflow-wrap: anywhere;
}

.detail-text .desc-block-applications h3 {
    width: 100%;
}

.detail-text .desc-block-tag {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 10px;
    font-size: 12px;
    color: #fff;
    background: #d62424;
    border-radius: 12px;
}

@media screen and (max-width: 760px) {
    .detail-text .desc-block-spec-item {
        flex-basis: 100%;
    }
}