/* LED Blog Grid Widget — style.css v3.0 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Scoped reset ────────────────────────────────────────── */
.led-grid-wrapper *,
.led-grid-wrapper *::before,
.led-grid-wrapper *::after { box-sizing:border-box; }

.led-grid-wrapper {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    width:100%;
}

/* ── Grid ────────────────────────────────────────────────── */
.led-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    width:100%;
}
/* Responsive columns controlled via Elementor panel (desktop/tablet/mobile controls).
   These CSS fallbacks only apply when no Elementor override is present. */
@media(max-width:1024px){
    .led-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:767px){
    .led-grid{ grid-template-columns:1fr; }
}

/* ── Card ────────────────────────────────────────────────── */
.led-post-card {
    background:#fff;
    border-style: solid;
    border-width: 1px;
    border-color: #e9e9e9;
    border-radius:6px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.led-post-card:hover {
    box-shadow:0 6px 22px rgba(0,0,0,.10);
    transform:translateY(-3px);
}

/* ── Thumbnail ───────────────────────────────────────────── */
.led-post-img-wrap {
    display:block;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#ebebeb;
    flex-shrink:0;
}
.led-post-img-wrap img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}
.led-post-card:hover .led-post-img-wrap img { transform:scale(1.04); }
.led-no-thumb { width:100%; height:100%; background:linear-gradient(135deg,#e2e5ea,#c8cdd5); }

/* ── Card body ───────────────────────────────────────────── */
.led-post-body {
    padding:12px 14px 16px;
    display:flex;
    flex-direction:column;
    flex:1;
}

/* ── Date ────────────────────────────────────────────────── */
.led-post-date {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:400;
    color:#b0b0b0;
    margin-bottom:8px;
}
.led-date-icon { display:inline-flex; align-items:center; }
.led-date-icon i, .led-date-icon svg { font-size:11px; width:11px; height:11px; color:#c8c8c8; }

/* ── Title ───────────────────────────────────────────────── */
.led-post-title {
    font-size:14px;
    font-weight:700;
    line-height:1.45;
    margin:0 0 8px;
    padding:0;
    word-break:break-word;
    overflow-wrap:break-word;
}
.led-post-title a { color:#111; text-decoration:none; transition:color .16s; }
.led-post-title a:hover { color:#c0392b; }

/* ── Excerpt ─────────────────────────────────────────────── */
.led-post-excerpt {
    font-size:12px;
    color:#737373;
    line-height:1.65;
    margin:0 0 12px;
    flex:1;
}

/* ── Read More ───────────────────────────────────────────── */
.led-read-more {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    font-weight:600;
    color:#2176ff;
    text-decoration:none;
    transition:color .16s;
    margin-top:auto;
    align-self:flex-start;
}
.led-read-more:hover { color:#c0392b; text-decoration:underline; }
.led-readmore-icon { display:inline-flex; align-items:center; }
.led-readmore-icon i, .led-readmore-icon svg { font-size:11px; width:11px; height:11px; }

/* ── Load More button ────────────────────────────────────── */
.led-more-wrap { display:flex !important; justify-content:center; margin-top:40px; }

.led-load-more-btn {
    display:inline-flex;
    align-items:center;
    gap:0;
    background:linear-gradient(90deg,#f5a623 0%,#ef4444 22%,#d946a8 44%,#9333ea 66%,#3b82f6 88%,#2563eb 100%);
    color:#fff;
    border:none;
    padding:6px 6px 6px 26px;
    border-radius:100px;
    font-family:'Inter',sans-serif;
    font-size:15px;
    font-weight:600;
    letter-spacing:.01em;
    cursor:pointer;
    transition:opacity .2s,transform .18s,box-shadow .2s;
    box-shadow:0 4px 18px rgba(147,51,234,.30);
    line-height:1;
    white-space:nowrap;
}
.led-load-more-btn:hover:not(:disabled) {
    opacity:.88;
    transform:translateY(-2px);
    box-shadow:0 8px 26px rgba(147,51,234,.42);
}
.led-load-more-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }

.led-btn-text { padding-right:14px; line-height:1; }

.led-btn-arrow {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#111;
    border-radius:50%;
    width:34px; height:34px; min-width:34px;
    flex-shrink:0;
    transition:background .18s;
}
.led-btn-arrow i, .led-btn-arrow svg {
    font-size:14px; width:14px; height:14px;
    color:#fff; stroke:#fff; fill:none;
}
.led-load-more-btn:hover:not(:disabled) .led-btn-arrow { background:#000; }

/* ── Skeleton loader ─────────────────────────────────────── */
.led-skeleton { background:#fff; border:1px solid #e9e9e9; border-radius:6px; overflow:hidden; }
.led-skeleton-img { width:100%; aspect-ratio:16/9; background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:ledShimmer 1.4s infinite; }
.led-skeleton-body { padding:12px 14px 16px; }
.led-skeleton-line { height:11px; border-radius:4px; background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:ledShimmer 1.4s infinite; margin-bottom:8px; }
.led-skeleton-line.short  { width:38%; }
.led-skeleton-line.medium { width:72%; margin-bottom:5px; }
.led-skeleton-line.long   { width:90%; }

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

/* ── Fade-in ─────────────────────────────────────────────── */
@keyframes ledFadeUp { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
.led-card-new { animation:ledFadeUp .38s ease both; }

/* ── Responsive button ───────────────────────────────────── */
@media(max-width:540px){
    .led-load-more-btn{ font-size:13.5px; padding:5px 5px 5px 20px; }
    .led-btn-arrow{ width:30px; height:30px; min-width:30px; }
    .led-btn-arrow i,.led-btn-arrow svg{ font-size:12px; width:12px; height:12px; }
}