/* ==========================================================================
   BLOCK: ABOUT WOO — membership introduction (index.html)
   Offset photo frame built with outline-offset (no pseudo-absolute).
   ========================================================================== */

@scope (.block-about-woo) {
    :scope {
        padding-block: var(--space-lg);
        background: var(--color-bg-alt);
        border-block-start: 1px solid var(--border-light);
        container-type: inline-size;
        container-name: aboutwoo;
    }

    .woo-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    @container aboutwoo (width >= 1024px) {
        .woo-grid { grid-template-columns: 1fr 1fr; align-items: center; }
    }

    /* Offset frame: lime outline pushed off the photo edge */
    .woo-img-wrap {
        outline: 2px solid var(--accent-lime);
        outline-offset: clamp(12px, 2vw, 20px);
        margin: clamp(12px, 2vw, 20px); /* room for the offset ring */
    }
    .woo-img-wrap img { width: 100%; height: 100%; }

    .woo-content { padding-inline-end: var(--space-sm); }

    h2 {
        font-weight: 300;
        font-size: var(--fs-h2);
        line-height: 1.1;
        margin-block-end: var(--space-sm);
    }
    h2 strong { font-weight: 900; }

    .woo-p {
        font-size: 1.1rem;
        line-height: 1.7;
        color: var(--text-secondary);
        margin-block-end: 20px;
        max-width: 600px;
    }

    .woo-stat-row {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        margin-block-start: var(--space-sm);
        border-block-start: 1px solid var(--border-light);
        padding-block-start: 30px;
    }
    .woo-stat strong {
        font-size: 2.5rem;
        font-weight: 900;
        display: block;
        line-height: 1;
        color: #000;
    }
    .woo-stat span {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-secondary);
        display: block;
        margin-block-start: 5px;
    }
}