/* ==========================================================================
   FOUR STRANDS PANEL (v1.9.0)

   Loaded only where the panel renders — the homepage when the setting selects
   it, and category archives when enabled. Same conditional pattern as
   home-visual.css and bands.css.

   Palette note: the sage/olive family here is new to the theme. It is scoped
   to this panel rather than added to :root, so it cannot leak into anything
   else. If the Willow palette is ever adopted site-wide these should move to
   style.css and this block should read from the tokens instead.
   ========================================================================== */

.cbm-strands {
    --strand-sage:   #4A6B52;   /* labels, leaves            — 5.34:1 on ground */
    --strand-orn:    #7D8C6A;   /* bough, rules              — decorative only */
    --strand-ground: #F5F2EA;   /* warm paper                                  */
    --strand-hair:   #E2DCCE;   /* hairlines between latest items              */

    position:       relative;
    background:     var(--strand-ground);
    padding-top:    var(--cbm-space-12);
    padding-bottom: var(--cbm-space-12);
    border-top:     1px solid var(--cbm-border);
    border-bottom:  1px solid var(--cbm-border);
    overflow:       hidden;   /* contains the pattern ground */
}

[data-theme="dark"] .cbm-strands {
    --strand-sage:   #8FAF95;
    --strand-orn:    #6E7C5E;
    --strand-ground: var(--cbm-surface-raised);
    --strand-hair:   var(--cbm-border);
}

/* ── Pattern ground ──────────────────────────────────────────────────────
   A tileable willow motif, not a bespoke path — it repeats to any height, so
   the panel can grow with its content without the seams that a drawn ornament
   would produce. Data-URI, so no HTTP request.
   Deliberately very faint: at working opacity a pattern ground should be felt
   rather than seen, and anything stronger competes with the text on it. */
.cbm-strands--ground::before {
    content:        '';
    position:       absolute;
    inset:          0;
    pointer-events: none;
    opacity:        0.055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%234A6B52' stroke-width='1'%3E%3Cpath d='M22 0 C34 24 10 48 22 72 C34 96 10 96 22 96'/%3E%3Cpath d='M70 0 C82 24 58 48 70 72 C82 96 58 96 70 96'/%3E%3C/g%3E%3Cg fill='%234A6B52'%3E%3Cellipse cx='31' cy='20' rx='9' ry='3.5' transform='rotate(-24 31 20)'/%3E%3Cellipse cx='13' cy='56' rx='9' ry='3.5' transform='rotate(22 13 56)'/%3E%3Cellipse cx='79' cy='36' rx='9' ry='3.5' transform='rotate(-24 79 36)'/%3E%3Cellipse cx='61' cy='76' rx='9' ry='3.5' transform='rotate(22 61 76)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 96px 96px;
    background-repeat: repeat;
}

[data-theme="dark"] .cbm-strands--ground::before { opacity: 0.075; }

.cbm-strands > .cbm-container { position: relative; z-index: 1; }

/* ── Heading block ───────────────────────────────────────────────────────── */
.cbm-strands__label {
    margin:         0 0 var(--cbm-space-2);
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-xs);
    font-weight:    600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--strand-sage);
}

.cbm-strands__heading {
    margin:      0 0 var(--cbm-space-4);
    font-family: var(--cbm-font-heading);
    font-size:   var(--cbm-text-3xl);
    font-weight: 700;
    line-height: 1.22;
    color:       var(--cbm-text-heading);
    max-width:   22ch;
}

.cbm-strands__heading-accent {
    color:       var(--cbm-accent);
    font-style:  italic;
}

.cbm-strands__intro {
    margin:    0 0 var(--cbm-space-6);
    max-width: 62ch;
    color:     var(--cbm-text);
}

/* ── The bough ───────────────────────────────────────────────────────────
   Decorative, and shown ONLY at the width where the strands are in their full
   single row (900px). Between 600 and 900 the strands wrap to two columns
   while the leaves would still be spaced for four, so the leaves would no
   longer sit above the columns they belong to — the whole point of the bough.
   Below 900 it is hidden rather than misaligned. */
.cbm-strands__bough { display: none; }

@media ( min-width: 900px ) {
    .cbm-strands__bough {
        display:  block;
        position: relative;
        height:   40px;
        margin:   var(--cbm-space-4) 0 0;
        color:    var(--strand-orn);
    }

    .cbm-strands__bough svg {
        display: block;
        width:   100%;
        height:  40px;
    }

    /* Leaves sit on the same track as the strand columns, so each column
       appears to hang from the bough. */
    .cbm-strands__leaves {
        position: absolute;
        inset:    0;
        display:  grid;
        grid-template-columns: repeat(var(--strand-cols, 4), 1fr);
        align-items: center;
    }

    .cbm-strands__leaf {
        justify-self:  center;
        width:         24px;
        height:        9px;
        border-radius: 50%;
        background:    var(--strand-sage);
        transform:     rotate(-22deg);
    }

    .cbm-strands__leaf:nth-child(even) { transform: rotate(24deg); }
}

/* ── Strand columns ──────────────────────────────────────────────────────
   Column count is driven by how many categories have a summary, so adding a
   fifth category does not need a code change. */
.cbm-strands--count-1 { --strand-cols: 1; }
.cbm-strands--count-2 { --strand-cols: 2; }
.cbm-strands--count-3 { --strand-cols: 3; }
.cbm-strands--count-4 { --strand-cols: 4; }
.cbm-strands--count-5 { --strand-cols: 5; }

.cbm-strands__list {
    list-style: none;
    margin:     var(--cbm-space-5) 0 0;
    padding:    0;
    display:    grid;
    grid-template-columns: 1fr;
    gap:        var(--cbm-space-6);
}

@media ( min-width: 600px ) {
    .cbm-strands__list { grid-template-columns: repeat(2, 1fr); }
}

@media ( min-width: 900px ) {
    .cbm-strands__list {
        grid-template-columns: repeat(var(--strand-cols, 4), 1fr);
        gap: var(--cbm-space-5);
    }
}

.cbm-strand { margin: 0; }

.cbm-strand__rule {
    display:       block;
    height:        3px;
    margin-bottom: var(--cbm-space-3);
    background:    var(--cbm-primary);
    border-radius: 2px;
}

/* Category colours reuse the existing tokens rather than redefining them. */
.cbm-strand--technology .cbm-strand__rule { background: var(--cbm-cat-technology); }
.cbm-strand--business   .cbm-strand__rule { background: var(--cbm-cat-business); }
.cbm-strand--creativity .cbm-strand__rule { background: var(--cbm-cat-creativity); }
.cbm-strand--society    .cbm-strand__rule { background: var(--cbm-cat-society); }

.cbm-strand__category {
    margin:         0 0 var(--cbm-space-1);
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-xs);
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--cbm-primary);
}

.cbm-strand--technology .cbm-strand__category { color: var(--cbm-cat-technology); }
.cbm-strand--business   .cbm-strand__category { color: var(--cbm-cat-business); }
.cbm-strand--creativity .cbm-strand__category { color: var(--cbm-cat-creativity); }
.cbm-strand--society    .cbm-strand__category { color: var(--cbm-cat-society); }

.cbm-strand__here {
    margin-left:    0.5em;
    padding:        2px 7px;
    border-radius:  10px;
    background:     var(--cbm-surface-raised);
    border:         1px solid var(--cbm-border);
    color:          var(--cbm-text-muted);
    font-weight:    600;
    letter-spacing: 0.06em;
}

.cbm-strand__title {
    margin:      0 0 var(--cbm-space-2);
    font-family: var(--cbm-font-heading);
    font-size:   var(--cbm-text-xl);
    font-weight: 700;
    line-height: 1.24;
    color:       var(--cbm-text-heading);
}

.cbm-strand__title a {
    color:           inherit;
    text-decoration: none;
}

.cbm-strand__title a:hover,
.cbm-strand__title a:focus-visible { color: var(--cbm-accent); }

.cbm-strand__summary {
    margin:      0 0 var(--cbm-space-3);
    font-size:   var(--cbm-text-sm);
    line-height: 1.6;
    color:       var(--cbm-text);
}

.cbm-strand__link { margin: 0; }

.cbm-strand__link a {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4em;
    font-family:     var(--cbm-font-body);
    font-size:       var(--cbm-text-xs);
    font-weight:     600;
    letter-spacing:  0.04em;
    color:           var(--cbm-accent);
    text-decoration: none;
}

.cbm-strand__link a:hover,
.cbm-strand__link a:focus-visible {
    text-decoration:       underline;
    text-underline-offset: 3px;
}

.cbm-strand__link svg { width: 14px; height: 14px; }

/* The current category on an archive page: marked, not linked. */
.cbm-strand.is-current .cbm-strand__title { color: var(--cbm-text-muted); }

/* ── Latest list ─────────────────────────────────────────────────────────── */
.cbm-strands__latest { margin-top: var(--cbm-space-12); }

.cbm-strands__latest::before {
    content:       '';
    display:       block;
    height:        1px;
    margin-bottom: var(--cbm-space-8);
    background:    var(--strand-orn);
    opacity:       0.5;
}

.cbm-strands__latest-heading {
    margin:      0 0 var(--cbm-space-5);
    font-family: var(--cbm-font-heading);
    font-size:   var(--cbm-text-2xl);
    font-weight: 700;
    color:       var(--cbm-text-heading);
}

.cbm-strands__latest-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    grid-template-columns: 1fr;
    gap:        0;
}

@media ( min-width: 700px ) {
    .cbm-strands__latest-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--cbm-space-10);
    }
}

.cbm-latest__item {
    padding:    var(--cbm-space-3) 0;
    border-top: 1px solid var(--strand-hair);
}

.cbm-latest__title {
    display:         block;
    font-family:     var(--cbm-font-heading);
    font-size:       var(--cbm-text-base);
    font-weight:     700;
    line-height:     1.3;
    color:           var(--cbm-text-heading);
    text-decoration: none;
}

.cbm-latest__title:hover,
.cbm-latest__title:focus-visible { color: var(--cbm-accent); }

.cbm-latest__meta {
    margin:     var(--cbm-space-1) 0 0;
    font-size:  var(--cbm-text-xs);
    color:      var(--cbm-text-muted);
    display:    flex;
    gap:        0.75em;
    align-items: baseline;
}

.cbm-latest__cat {
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--cbm-primary);
}

.cbm-latest__cat--technology { color: var(--cbm-cat-technology); }
.cbm-latest__cat--business   { color: var(--cbm-cat-business); }
.cbm-latest__cat--creativity { color: var(--cbm-cat-creativity); }
.cbm-latest__cat--society    { color: var(--cbm-cat-society); }

/* ── On a category archive the panel is a footer, not an interruption ───── */
.cbm-strands--archive {
    margin-top:    var(--cbm-space-12);
    border-bottom: 0;
}

@media ( prefers-reduced-motion: reduce ) {
    .cbm-strand__title a,
    .cbm-latest__title { transition: none; }
}