/* ─────────────────────────────────────────────
   GT Blog Grid — Stylesheet  v1.1
   Colours come from inline CSS variables
   injected by PHP (admin colour settings).
   Fallbacks kept so the sheet works standalone.
───────────────────────────────────────────── */

.gt-blog-wrap {
    --gt-green:      #7DC42B;
    --gt-green-glow: rgba(125,196,43,.18);
    --gt-bg:         #111111;
    --gt-card:       #1a1a1a;
    --gt-border:     #2a2a2a;
    --gt-border-h:   #3c3c3c;
    --gt-text:       #f0f0f0;
    --gt-muted:      #888888;
    --gt-radius:     10px;
    --gt-radius-lg:  14px;
    --gt-trans:      .22s ease;

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

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

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

.gt-search-heading {
    font-size:     22px;
    font-weight:   600;
    color:         var(--gt-text);
    margin-bottom: 0.5rem;
    line-height:   1.3;
}

.gt-search-heading span {
    color: var(--gt-green);
}

.gt-search-sub {
    font-size:     14px;
    color:         var(--gt-muted);
    margin-bottom: 1.25rem;
}

.gt-search-box {
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    var(--gt-card);
    border:        1.5px solid var(--gt-green);
    border-radius: 50px;
    padding:       12px 22px;
    max-width:     580px;
    margin:        0 auto;
    box-shadow:    0 0 18px var(--gt-green-glow);
    transition:    box-shadow var(--gt-trans);
}

.gt-search-box:focus-within {
    box-shadow: 0 0 32px rgba(125,196,43,.32);
}

.gt-search-icon {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    color:       var(--gt-green);
}

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

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

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

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

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

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

.gt-pill:hover          { border-color: var(--gt-green); color: var(--gt-green); }
.gt-pill.active         { background: var(--gt-green); color: #000; border-color: var(--gt-green); font-weight: 600; }

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

.gt-results-bar strong { color: var(--gt-green); }

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

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

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

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

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

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

.gt-card:hover {
    border-color: var(--gt-green);
    transform:    translateY(-3px);
    box-shadow:   0 8px 32px rgba(0,0,0,.4);
}

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

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

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

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

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

.gt-fallback-icon {
    width:  64px;
    height: 64px;
    color:  rgba(125,196,43,.3);
}

.gt-cat-badge {
    position:       absolute;
    top:            12px;
    left:           12px;
    background:     var(--gt-green);
    color:          #000;
    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 */
.gt-card-body {
    padding:        16px 18px 20px;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

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

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

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

.gt-card-title {
    font-size:     15px;
    font-weight:   600;
    line-height:   1.5;
    margin-bottom: 10px;
    flex:          1;
}

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

.gt-card-title a:hover { color: var(--gt-green); }

.gt-card-excerpt {
    font-size:     13px;
    color:         var(--gt-muted);
    line-height:   1.65;
    margin-bottom: 14px;
}

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

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

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

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

.gt-loadmore-btn:hover:not(:disabled) {
    background:  var(--gt-green);
    color:       #000;
    box-shadow:  0 0 28px rgba(125,196,43,.35);
}

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

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

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

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

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

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

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

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

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

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

.gt-reset-btn:hover { background: var(--gt-green); color: #000; }

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

.gt-skeleton-img {
    width:           100%;
    height:          190px;
    background:      linear-gradient(90deg, #1e1e1e 25%, #272727 50%, #1e1e1e 75%);
    background-size: 200% 100%;
    animation:       gtShimmer 1.5s infinite;
}

.gt-skeleton-body { padding: 16px 18px 20px; }

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

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

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