/* ============================================================
   BE Classic Lister Box – front-end + editor styling
   ============================================================ */

.be-clb-box {
        border-radius: 12px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e5e5e5;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        margin: 1.5rem 0;
}

/* Header */

.be-clb-header {
        display: flex;
        align-items: stretch;               /* counter + title same height */
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 0;                   /* no gap above image */
}

/* Counter block */

.be-clb-count {
        /* no float – let flex handle layout */
        background-color: #FFFF00;
        color: #000000;
        font-weight: 700;
        font-size: 36px;                    /* desktop default */
        min-width: 48px;
        text-align: center;

        /* make the digit perfectly centered */
        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0 0.75rem;                 /* horizontal padding only */
        line-height: 1;
        border-radius: 0;                   /* flush with header/image */
}

/* tablets */
@media (max-width: 768px) {
  .be-clb-count {
        font-size: 26px;
        min-width: 38px;
  }
}

/* phones */
@media (max-width: 480px) {
  .be-clb-count {
        font-size: 22px;
        min-width: 32px;
  }
}

.be-clb-title-wrap {
        flex: 1;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        border-left: 1px solid #e5e5e5;
}

.be-clb-title {
        margin: 0;
        font-weight: 600;
}

/* Image – docked to top of box (no gap below header) */

.be-clb-image-wrap {
        margin-top: 0;
        line-height: 0;
}

.be-clb-image-wrap img {
        display: block;
        margin: 0;
}

.be-clb-image {
        display: block;
        width: 100%;
        height: auto;
}

/* Body */

.be-clb-body {
        padding: 1.25rem 1.5rem 1.5rem;
        font-size: 1rem;
        line-height: 1.6;
}

/* Binomial table – main styling comes from BE Responsive Table plugin */

.be-clb-binomial {
        margin-bottom: 1.25rem;
}

/* Text blocks */

.be-clb-intro,
.be-clb-closing {
        margin: 0 0 1rem;
}

/* Points */

.be-clb-points {
        margin: 0 0 1rem 1.25rem;
        padding-left: 1.25rem;
}

.be-clb-points li {
        margin-bottom: 0.5rem;
}

/* Suggested reading wrapper */

.be-clb-suggested-wrapper {
        margin-top: 1.5rem;
}

.be-clb-suggested-heading {
        font-weight: 700;
        margin-bottom: 0.75rem;
}

/* Sources wrapper */

.be-clb-sources-wrapper {
        margin-top: 1rem;
}

/* Sources list (both editor and front-end) */

.be-clb-sources-list {
        margin: 0.25rem 0 0 1.25rem;
        padding-left: 1.25rem;
}

.be-clb-sources-list li {
        margin-bottom: 0.4rem;
}

/* Fallback sources (no Shortcodes Ultimate) */

.be-clb-sources-fallback {
        margin-top: 0.25rem;
}

/* Read-more button overrides – prevent Feast hover shake */

.be-clb-suggested-wrapper .be-species-card__read-more,
.be-clb-suggested-wrapper .be-species-card__read-more:hover,
.be-clb-suggested-wrapper .be-species-card__read-more:focus {
        display: inline-block !important;
        padding: 0.5rem 1.25rem !important;
        border-radius: 999px;
        border: 1px solid #198f3a;
        background: transparent;
        color: #198f3a;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease,
                box-shadow 0.2s ease;
}

.be-clb-suggested-wrapper .be-species-card__read-more:hover,
.be-clb-suggested-wrapper .be-species-card__read-more:focus {
        background: #198f3a;
        color: #ffffff;
}

/* Editor helpers */

.be-clb-box-preview {
        border-style: dashed;
}

.be-clb-editor-section {
        margin-bottom: 1rem;
}

.be-clb-editor-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #666;
        margin-bottom: 0.25rem;
}

/* Mobile title sizing */

@media (max-width: 768px) {
  .be-clb-box .be-clb-title {
        font-size: 1.1rem;
        line-height: 1.3;
  }
}

@media (max-width: 480px) {
  .be-clb-box .be-clb-title {
        font-size: 1rem;
        line-height: 1.25;
  }
}