/* ==========================================================================
   Zart Class Info — .zci section styles
   Palette: #46A580 (teal), #6FB6C6 (light teal), #034B68 (dark navy),
            #FFFFFF, #111111
   ========================================================================== */

/* --------------------------------------------------------------------------
   Outer section
   -------------------------------------------------------------------------- */

.zci {
    padding: 4px 0 40px;
}

/* --------------------------------------------------------------------------
   Description block
   -------------------------------------------------------------------------- */

.zci-desc {
    font-size: 16px;
    line-height: 1.85;
    color: #111;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #dde9e4;
}

/* When no .zci-blocks follows, suppress the bottom border */
.zci-desc--no-border,
.zci-desc:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Inherit sensible defaults for wysiwyg content */
.zci-desc p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Blocks row
   -------------------------------------------------------------------------- */

.zci-blocks {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 0;
}

.zci-blocks > .zci-block {
    flex: 1 1 0;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Individual card block
   -------------------------------------------------------------------------- */

.zci-block {
    background: #f8faf9;
    border-radius: 12px;
    padding: 20px 22px;
    border: 1px solid #e2ede9;
    box-sizing: border-box;
}

/* Left accent colours */
.zci-technique {
    border-left: 3px solid #46A580;
}

.zci-learn {
    border-left: 3px solid #6FB6C6;
}

/* --------------------------------------------------------------------------
   Block header (icon + label)
   -------------------------------------------------------------------------- */

.zci-block-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #555;
}

.zci-block-head svg {
    color: inherit;
    opacity: 0.7;
    flex-shrink: 0;
    display: block;
}

/* --------------------------------------------------------------------------
   Technique text
   -------------------------------------------------------------------------- */

.zci-technique p {
    font-size: 14px;
    line-height: 1.75;
    color: #222;
    font-style: italic;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Learn items list
   -------------------------------------------------------------------------- */

.zci-learn-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zci-learn-list li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #1a1a1a;
    margin-bottom: 9px;
}

.zci-learn-list li:last-child {
    margin-bottom: 0;
}

.zci-learn-list li::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2346A580' opacity='.15'/%3E%3Cpolyline points='4.5%2C8.5 7%2C11 11.5%2C5.5' fill='none' stroke='%2346A580' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* --------------------------------------------------------------------------
   Responsive — mobile
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .zci-blocks {
        flex-direction: column;
    }

    .zci-blocks > .zci-block {
        flex: none;
        width: 100%;
    }
}