/**
 * Toi motifs — culturally careful visual-language pilot.
 *
 * These forms are original geometric abstractions: a growth spiral, a stepped
 * woven rhythm, and a repeated diamond grid. They reference mathematical ideas
 * shared by pattern systems without reproducing any named or customary taonga
 * design. Keep this stylesheet opt-in until cultural design review is complete.
 */

.toi-motif-pilot {
    --toi-motif-accent: var(--page-accent, var(--tc-accent, #b45309));
    --toi-motif-deep: #173f35;
}

/* Ambient growth-spiral grid: quiet enough to remain environmental, not emblematic. */
.toi-motif-pilot .toi-hero-motif::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M118 75c0-31-25-56-56-56S6 44 6 75s25 56 56 56c25 0 45-20 45-45 0-20-16-36-36-36S35 66 35 86c0 15 12 27 27 27 11 0 20-9 20-20 0-8-6-14-14-14-6 0-11 5-11 11'/%3E%3Cpath opacity='.45' d='M20 121 6 135m47-6-13 13m53-27 12 17'/%3E%3C/g%3E%3C/svg%3E");
    background-position: right -1rem top 42%;
    background-repeat: repeat-x;
    background-size: clamp(7.5rem, 13vw, 10rem);
    opacity: 0.13;
    mix-blend-mode: soft-light;
    -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 48%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 8%, #000 48%, #000 100%);
}

.toi-motif-pilot .toi-hero-motif .unit-hero__inner {
    z-index: 2;
}

/* A stepped geometric rhythm between major ideas; intentionally not a copied pattern. */
.toi-motif-pilot .toi-woven-divider::before {
    content: "";
    display: block;
    width: 100%;
    height: 0.7rem;
    margin: 0 0 1.25rem;
    color: var(--toi-motif-accent);
    background:
        conic-gradient(
            from 45deg at 50% 50%,
            transparent 0 25%,
            currentColor 0 50%,
            transparent 0 75%,
            currentColor 0
        )
        left center / 0.9rem 0.9rem repeat-x;
    opacity: 0.28;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* One deliberate featured panel: the frame signals significance without claiming provenance. */
.toi-motif-pilot .toi-featured-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(180, 83, 9, 0.2);
    border-left: 4px solid var(--toi-motif-accent);
    background:
        linear-gradient(135deg, rgba(255, 250, 240, 0.97), rgba(249, 250, 251, 0.97));
    box-shadow: 0 1rem 2.5rem -2rem rgba(23, 63, 53, 0.55);
}

.toi-motif-pilot .toi-featured-panel::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.42rem;
    pointer-events: none;
    color: var(--toi-motif-accent);
    background:
        linear-gradient(135deg, transparent 38%, currentColor 39% 61%, transparent 62%)
        left center / 1rem 0.75rem repeat-x;
    opacity: 0.7;
}

@media (max-width: 600px) {
    .toi-motif-pilot .toi-hero-motif::after {
        background-position: left -1.5rem top 54%;
        background-size: 7rem;
        opacity: 0.1;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
        mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
    }

    .toi-motif-pilot .toi-woven-divider::before {
        margin-bottom: 1rem;
    }
}

@media print {
    .toi-motif-pilot .toi-hero-motif::after,
    .toi-motif-pilot .toi-featured-panel::after {
        display: none;
    }

    .toi-motif-pilot .toi-woven-divider::before {
        height: 0;
        margin-bottom: 0.7rem;
        border-top: 1px solid #777777;
        background: none;
        opacity: 1;
    }

    .toi-motif-pilot .toi-featured-panel {
        border: 1px solid #777777;
        border-left-width: 3px;
        background: #ffffff;
        box-shadow: none;
    }
}