/* ============================================================
   Header layout F — "Gold spine"  (be-species-profile--layout-spine)
   Flat dark panel with the profile label rotated into a vertical gold spine
   down the left edge, giving the title more horizontal room.
   Shares the taxonomy-strip behaviour with the other table layouts;
   the layout-specific rules are in the OVERRIDES section at the end.
   Loaded only when a block on the page uses this layout.
   ============================================================ */

.be-species-profile--layout-spine .be-species-profile__top {
    position: relative;
    padding: 36px 40px 16px;
    color: #fff;
    /* `background` is written inline by the block (preset or custom gradient).
       This is only a fallback for markup saved before v1.4.0. */
    background: linear-gradient(90deg, #1B5E3F 0%, #2D7D5C 45%, #4A6B3A 75%, #8B6F2C 92%, #C9A227 100%);
}

.be-species-profile--layout-spine .be-species-profile__profile-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--bio-gold, #E8B923);
    margin: 0 0 10px 0;
}

.be-species-profile--layout-spine .be-species-profile__common-name {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px 0;
    letter-spacing: -1px;
    line-height: 1.1;
    /* The title is an <h2>-<h5> or, when the tag is "None", a <div>. Themes style
       headings but not that div, so the two rendered differently. Everything a
       theme is likely to set on a heading is neutralised here, which makes the
       H3 output identical to the "None" output. */
    font-family: inherit;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    text-shadow: none;
    -webkit-text-fill-color: currentColor;
}

.be-species-profile--layout-spine .be-species-profile__subtitle {
    font-size: 15px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 20px 0;
    line-height: 1.4;
}
.be-species-profile--layout-spine .be-species-profile__subtitle em {
    font-style: italic;
}

/* Editor-only: binomial + subtitle are two editable divs on one line */
.editor-styles-wrapper .be-species-profile--layout-spine .be-species-profile__binomial,
.editor-styles-wrapper .be-species-profile--layout-spine .be-species-profile__subtitle {
    display: inline;
    font-size: 15px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
}
.editor-styles-wrapper .be-species-profile--layout-spine .be-species-profile__binomial + .be-species-profile__subtitle::before {
    content: " · ";
    margin: 0 2px;
}

/* ---- Taxonomy strip: wrapping flex row, cells sized to their content,
        so no phrase is ever truncated or word-wrapped. ---- */
.be-species-profile--layout-spine .be-species-profile__taxonomy {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 10px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.be-species-profile--layout-spine .be-species-profile__taxonomy-cell {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.be-species-profile--layout-spine .be-species-profile__taxonomy-cell:last-child {
    border-right: none;
}
.be-species-profile--layout-spine .be-species-profile__taxonomy-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--bio-gold, #E8B923);
    margin: 0 0 4px 0;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}
.be-species-profile--layout-spine .be-species-profile__taxonomy-value {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-style: italic;
    line-height: 1.25;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}
.be-species-profile--layout-spine .be-species-profile__taxonomy--8 .be-species-profile__taxonomy-cell {
    padding: 10px 10px;
}
.be-species-profile--layout-spine .be-species-profile__taxonomy--8 .be-species-profile__taxonomy-label {
    font-size: 10px;
    letter-spacing: 1px;
}
.be-species-profile--layout-spine .be-species-profile__taxonomy--8 .be-species-profile__taxonomy-value {
    font-size: 14px;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .be-species-profile--layout-spine .be-species-profile__top {
        padding: 24px 20px 20px;
    }
    .be-species-profile--layout-spine .be-species-profile__common-name {
        font-size: 24px;
    }
    .be-species-profile--layout-spine .be-species-profile__subtitle,
    .editor-styles-wrapper .be-species-profile--layout-spine .be-species-profile__binomial,
    .editor-styles-wrapper .be-species-profile--layout-spine .be-species-profile__subtitle {
        font-size: 13px;
    }
    .be-species-profile--layout-spine .be-species-profile__taxonomy,
    .be-species-profile--layout-spine .be-species-profile__taxonomy--8 {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .be-species-profile--layout-spine .be-species-profile__taxonomy-cell,
    .be-species-profile--layout-spine .be-species-profile__taxonomy--8 .be-species-profile__taxonomy-cell {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        text-align: left;
        padding: 10px 14px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .be-species-profile--layout-spine .be-species-profile__taxonomy-cell:last-child {
        border-bottom: none;
    }
    .be-species-profile--layout-spine .be-species-profile__taxonomy-label,
    .be-species-profile--layout-spine .be-species-profile__taxonomy--8 .be-species-profile__taxonomy-label {
        margin: 0;
        font-size: 11px;
        letter-spacing: 1.2px;
        flex: 0 0 auto;
    }
    .be-species-profile--layout-spine .be-species-profile__taxonomy-value,
    .be-species-profile--layout-spine .be-species-profile__taxonomy--8 .be-species-profile__taxonomy-value {
        font-size: 15px;
        text-align: right;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ---- Print ---- */
@media print {
    .be-species-profile--layout-spine .be-species-profile__top {
        background: #f5f5f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .be-species-profile--layout-spine .be-species-profile__common-name,
    .be-species-profile--layout-spine .be-species-profile__subtitle,
    .be-species-profile--layout-spine .be-species-profile__taxonomy-value {
        color: #000 !important;
    }
    .be-species-profile--layout-spine .be-species-profile__taxonomy {
        background: transparent !important;
        border: 1px solid #999 !important;
    }
    .be-species-profile--layout-spine .be-species-profile__taxonomy-cell {
        border-color: #ccc !important;
    }
    .be-species-profile--layout-spine .be-species-profile__taxonomy-label {
        color: #555 !important;
    }
}


/* ============================================================
   LAYOUT-SPECIFIC OVERRIDES
   ============================================================ */

.be-species-profile--layout-spine .be-species-profile__top {
    display: flex;
    align-items: stretch;
    padding: 0;   /* padding moves onto the inner column */
}

/* Straight header/body boundary.
   By default the body rounds its top corners by 24px and pulls itself up over
   the header by 12px (see style.css), which is a nice effect against a
   full-width band — but with a vertical spine on the left it left a curved
   notch beside the gold. Squaring the boundary off gives one clean horizontal
   line across the card and lets the spine run straight down into it.
   The card's outer 12px corners are untouched. */
.be-species-profile--layout-spine .be-species-profile__body {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* The spine was previously `linear-gradient(180deg, #C9A227, #8B6F2C)` — it
   faded into a dark bronze by the bottom, and its --bio-gold fallback was the
   muted #C9A227 rather than the brighter #E8B923 the rest of the plugin uses.
   It now stays a bright, saturated gold the whole way down, is wider, and has
   a lit top edge plus a shadow so it reads as a raised band against the dark
   panel instead of a flat stripe. */
.be-species-profile--layout-spine .be-species-profile__spine {
    flex: 0 0 86px;
    width: 86px;
    background: linear-gradient(180deg,
        #FFD954 0%,
        var(--bio-gold, #E8B923) 50%,
        #D9A81B 100%);
    display: flex;
    align-items: center;
    justify-content: center;

    /* `position: relative` (with NO z-index) lifts the spine above its sibling
       panel so its shadow is visible, while still letting the card body — which
       is `position: relative; z-index: 1` — paint over the top of it.
       Do not add a z-index here: at z-index 2 the spine painted OVER the body
       and spilled past the card's rounded bottom-left corner. */
    position: relative;

    /* Bright inner edge at the top, plus depth against the dark panel */
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.55),
        4px 0 18px rgba(0, 0, 0, 0.28);
}
.be-species-profile--layout-spine .be-species-profile__spine-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    /* Near-black on bright gold: ~11:1 contrast */
    color: #17301F;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.be-species-profile--layout-spine .be-species-profile__spine-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 30px 34px 18px;
}
.be-species-profile--layout-spine .be-species-profile__taxonomy {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 768px) {
    .be-species-profile--layout-spine .be-species-profile__spine {
        flex: 0 0 54px;
        width: 54px;
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.55),
            2px 0 12px rgba(0, 0, 0, 0.25);
    }
    .be-species-profile--layout-spine .be-species-profile__spine-label {
        font-size: 10px;
        letter-spacing: 0.22em;
    }
    .be-species-profile--layout-spine .be-species-profile__spine-main {
        padding: 22px 18px 20px;
    }
    .be-species-profile--layout-spine .be-species-profile__common-name {
        font-size: 22px;
    }
}
@media print {
    .be-species-profile--layout-spine .be-species-profile__spine {
        background: #ddd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* ============================================================
   BIOEXPLORER wordmark (top-right of the header)

   Flat type, no effects. The two halves are coloured per layout rather than
   globally, because the readable colour depends on what is behind them:
   the gradient band ends GOLD at the right, where the mark sits, so it needs
   dark ink; the darker panels need light ink; the ivory editorial panel needs
   dark ink again.
   ============================================================ */
.be-species-profile--layout-spine .be-species-profile__wordmark {
    position: absolute;
    top: 20px;
    right: 22px;
    z-index: 3;
    display: flex;
    align-items: baseline;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    /* Decorative only — never intercept clicks or become a selection target */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.be-species-profile--layout-spine .be-species-profile__wordmark-bio {
    color: #5CC08A;
}
.be-species-profile--layout-spine .be-species-profile__wordmark-explorer {
    color: #E8B923;
}

@media (max-width: 768px) {
    .be-species-profile--layout-spine .be-species-profile__wordmark {
        top: 14px;
        right: 14px;
        font-size: 11px;
        letter-spacing: 0.12em;
    }
}

@media print {
    .be-species-profile--layout-spine .be-species-profile__wordmark {
        display: none;
    }
}