/* ─────────────────────────────────────────────
   Future Broadband Blog Grid — Stylesheet v1.0
   White background, purple accent theme.
   Colours injected via PHP CSS vars; fallbacks
   kept so the sheet works standalone.
───────────────────────────────────────────── */

.fbb-blog-wrap {
    --fbb-purple:      #6B21A8;
    --fbb-purple-mid:  #7C3AED;
    --fbb-purple-glow: rgba(107,33,168,.14);
    --fbb-bg:          #ffffff;
    --fbb-card:        #ffffff;
    --fbb-card-hover:  #faf7ff;
    --fbb-border:      #e5e7eb;
    --fbb-border-h:    #c4b5fd;
    --fbb-text:        #111827;
    --fbb-muted:       #6b7280;
    --fbb-pill-bg:     #f5f3ff;
    --fbb-radius:      12px;
    --fbb-radius-lg:   16px;
    --fbb-trans:       .22s ease;

    background:    var(--fbb-bg);
    border-radius: var(--fbb-radius-lg);
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color:         var(--fbb-text);
    box-sizing:    border-box;
}

.fbb-blog-wrap *, .fbb-blog-wrap *::before, .fbb-blog-wrap *::after {
    box-sizing: inherit;
}

/* ══════════════════════════════════════════
   SEARCH — centred layout
══════════════════════════════════════════ */
.fbb-search-section {
    text-align:    center;
    margin-bottom: 1.75rem;
}

.fbb-search-box {
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    #ffffff;
    border:        1.5px solid var(--fbb-purple-mid);
    border-radius: 50px;
    padding:       12px 22px;
    max-width:     600px;
    margin:        0 auto;
    box-shadow:    0 2px 20px var(--fbb-purple-glow);
    transition:    box-shadow var(--fbb-trans), border-color var(--fbb-trans);
}

.fbb-search-box:focus-within {
    box-shadow:   0 4px 32px rgba(107,33,168,.22);
    border-color: var(--fbb-purple);
}

.fbb-search-icon {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    color:       var(--fbb-purple-mid);
}

.fbb-search-box input[type="text"] {
    flex:       1;
    border:     none;
    outline:    none;
    background: transparent;
    font-size:  15px;
    color:      var(--fbb-text);
    min-width:  0;
}

.fbb-search-box input[type="text"]::placeholder {
    color: var(--fbb-muted);
}

.fbb-search-clear {
    background:     transparent;
    border:         none;
    cursor:         pointer;
    padding:        0;
    color:          var(--fbb-muted);
    display:        flex;
    align-items:    center;
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--fbb-trans), color var(--fbb-trans);
}

.fbb-search-clear svg { width: 16px; height: 16px; }
.fbb-search-clear.fbb-clear-visible { opacity: 1; pointer-events: auto; }
.fbb-search-clear:hover { color: var(--fbb-purple); }

/* ══════════════════════════════════════════
   CATEGORY FILTERS — centred
══════════════════════════════════════════ */
.fbb-filters {
    display:         flex;
    gap:             8px;
    flex-wrap:       wrap;
    justify-content: center;
    margin-bottom:   1.5rem;
}

.fbb-pill {
    padding:       7px 18px;
    border-radius: 50px;
    font-size:     12px;
    font-weight:   500;
    border:        1px solid var(--fbb-border);
    background:    var(--fbb-pill-bg);
    color:         var(--fbb-muted);
    cursor:        pointer;
    transition:    all var(--fbb-trans);
    line-height:   1;
    white-space:   nowrap;
}

.fbb-pill:hover          { border-color: var(--fbb-purple-mid); color: var(--fbb-purple); background: #ede9fe; }
.fbb-pill.active         { background: var(--fbb-purple); color: #ffffff; border-color: var(--fbb-purple); font-weight: 600; }

/* ══════════════════════════════════════════
   RESULTS BAR
══════════════════════════════════════════ */
.fbb-results-bar {
    font-size:     12px;
    color:         var(--fbb-muted);
    margin-bottom: 1.25rem;
    min-height:    18px;
    text-align:    center;
}

.fbb-results-bar strong { color: var(--fbb-purple); }

/* ══════════════════════════════════════════
   GRID
══════════════════════════════════════════ */
.fbb-grid {
    display:       grid;
    gap:           20px;
    margin-bottom: 2rem;
}

.fbb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.fbb-cols-2 { grid-template-columns: repeat(2, 1fr); }

/* ── Responsive breakpoints ── */
@media (max-width: 960px) {
    .fbb-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .fbb-cols-3,
    .fbb-cols-2  { grid-template-columns: 1fr; }
    .fbb-blog-wrap { padding: 1.5rem 1rem; }
    .fbb-filters { justify-content: flex-start; }
}

@media (max-width: 400px) {
    .fbb-blog-wrap { padding: 1rem 0.75rem; }
    .fbb-search-box { padding: 10px 16px; }
}

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.fbb-card {
    background:      var(--fbb-card);
    border:          1px solid var(--fbb-border);
    border-radius:   var(--fbb-radius-lg);
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    transition:      border-color var(--fbb-trans), transform var(--fbb-trans), box-shadow var(--fbb-trans);
    animation:       fbbFadeUp .4s ease both;
}

.fbb-card:hover {
    border-color: var(--fbb-purple-mid);
    background:   var(--fbb-card-hover);
    transform:    translateY(-4px);
    box-shadow:   0 12px 36px rgba(107,33,168,.12);
}

@keyframes fbbFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* card image */
.fbb-card-img-link { display: block; text-decoration: none; }

.fbb-card-img {
    width:           100%;
    height:          200px;
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    flex-shrink:     0;
}

.fbb-card-img--photo {
    background-size:     cover;
    background-position: center;
}

.fbb-card-img--photo::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.45) 100%);
}

.fbb-fallback-icon {
    width:  64px;
    height: 64px;
    color:  rgba(107,33,168,.2);
}

/* fallback bg for icon cards — light purple tones */
.fbb-card-img--icon {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.fbb-cat-badge {
    position:       absolute;
    top:            12px;
    left:           12px;
    background:     var(--fbb-purple);
    color:          #ffffff;
    font-size:      10px;
    font-weight:    700;
    padding:        4px 12px;
    border-radius:  50px;
    letter-spacing: .5px;
    text-transform: uppercase;
    z-index:        2;
    line-height:    1;
}

/* card body */
.fbb-card-body {
    padding:        18px 20px 22px;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

.fbb-card-meta {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     11px;
    color:         var(--fbb-muted);
    margin-bottom: 10px;
    flex-wrap:     wrap;
}

.fbb-meta-item {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.fbb-meta-item svg { width: 13px; height: 13px; flex-shrink: 0; stroke: var(--fbb-purple-mid); }
.fbb-meta-dot      { color: var(--fbb-border-h); }

.fbb-card-title {
    font-size:     16px;
    font-weight:   700;
    line-height:   1.45;
    margin-bottom: 10px;
    flex:          1;
    color:         var(--fbb-purple);
}

.fbb-card-title a {
    color:           var(--fbb-purple);
    text-decoration: none;
    transition:      color var(--fbb-trans);
}

.fbb-card-title a:hover { color: var(--fbb-purple-mid); }

.fbb-card-excerpt {
    font-size:     13px;
    color:         var(--fbb-muted);
    line-height:   1.7;
    margin-bottom: 16px;
}

.fbb-readmore {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       13px;
    font-weight:     600;
    color:           var(--fbb-purple-mid);
    text-decoration: none;
    margin-top:      auto;
    transition:      gap var(--fbb-trans), color var(--fbb-trans);
}

.fbb-readmore svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--fbb-trans); }
.fbb-readmore:hover { color: var(--fbb-purple); }
.fbb-readmore:hover svg { transform: translateX(4px); }

/* ══════════════════════════════════════════
   LOAD MORE
══════════════════════════════════════════ */
.fbb-loadmore-wrap {
    display:         flex;
    justify-content: center;
    margin-top:      0.5rem;
}

.fbb-loadmore-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    padding:        13px 44px;
    border-radius:  50px;
    border:         1.5px solid var(--fbb-purple);
    background:     transparent;
    color:          var(--fbb-purple);
    font-size:      14px;
    font-weight:    600;
    cursor:         pointer;
    transition:     all var(--fbb-trans);
    letter-spacing: .3px;
}

.fbb-loadmore-btn:hover:not(:disabled) {
    background:  var(--fbb-purple);
    color:       #ffffff;
    box-shadow:  0 4px 24px rgba(107,33,168,.28);
}

.fbb-loadmore-btn:disabled { opacity: .5; cursor: not-allowed; }

/* spinner */
.fbb-btn-spinner { display: none; align-items: center; gap: 5px; }

.fbb-btn-spinner span {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    currentColor;
    animation:     fbbDotPulse 1s ease-in-out infinite;
}

.fbb-btn-spinner span:nth-child(2) { animation-delay: .15s; }
.fbb-btn-spinner span:nth-child(3) { animation-delay: .30s; }

@keyframes fbbDotPulse {
    0%,80%,100% { transform: scale(.6); opacity: .4; }
    40%         { transform: scale(1);  opacity: 1;  }
}

.fbb-loadmore-btn.fbb-loading .fbb-btn-text    { display: none; }
.fbb-loadmore-btn.fbb-loading .fbb-btn-spinner { display: flex; }

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.fbb-empty {
    text-align:    center;
    padding:       4rem 1rem;
    color:         var(--fbb-muted);
}

.fbb-empty svg {
    width:         56px;
    height:        56px;
    stroke:        var(--fbb-border-h);
    margin-bottom: 1rem;
}

.fbb-empty p { font-size: 15px; margin-bottom: 1.25rem; }
.fbb-empty strong { color: var(--fbb-purple); }

.fbb-reset-btn {
    padding:       9px 26px;
    border-radius: 50px;
    border:        1px solid var(--fbb-purple);
    background:    transparent;
    color:         var(--fbb-purple);
    font-size:     13px;
    cursor:        pointer;
    transition:    all var(--fbb-trans);
    font-weight:   600;
}

.fbb-reset-btn:hover { background: var(--fbb-purple); color: #ffffff; }

/* ══════════════════════════════════════════
   SKELETON LOADERS
══════════════════════════════════════════ */
.fbb-skeleton {
    background:    #ffffff;
    border:        1px solid var(--fbb-border);
    border-radius: var(--fbb-radius-lg);
    overflow:      hidden;
}

.fbb-skeleton-img {
    width:           100%;
    height:          200px;
    background:      linear-gradient(90deg, #f3f4f6 25%, #ede9fe 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation:       fbbShimmer 1.5s infinite;
}

.fbb-skeleton-body { padding: 18px 20px 22px; }

.fbb-skeleton-line {
    height:          12px;
    border-radius:   4px;
    background:      linear-gradient(90deg, #f3f4f6 25%, #ede9fe 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation:       fbbShimmer 1.5s infinite;
    margin-bottom:   10px;
}

.fbb-sl-short  { width: 50%; }
.fbb-sl-medium { width: 75%; }
.fbb-sl-full   { width: 100%; }
.fbb-sl-tall   { height: 16px; margin-bottom: 12px; }

@keyframes fbbShimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}