/* Posts Widget (News Feed) — kabdalis2 design system.
   view.js adds .pw2 to wrapper at runtime and renders cards as:
   .post-card > .post-image-wrapper + .post-content (.post-header + .post-content-inner)
   This CSS targets the actual view.js-generated DOM. Theme primitive .post
   from block-patterns.css is also used; we override widget-specific bits. */

.kabdalis-posts-widget.pw2,
.kabdalis-posts-widget{ width: 100%; margin: 0; }

.posts-grid{
    display: grid;
    /* view.js sets --posts-cols via setProperty after fetch; auto-fit is
       the fallback before JS runs and for grids with no maxColumns hint. */
    grid-template-columns: var(--posts-grid-cols, repeat(auto-fit, minmax(280px, 1fr)));
    gap: clamp(20px, 3vw, 28px);
}
.posts-grid{ --posts-grid-cols: repeat(var(--posts-cols, auto-fit), minmax(280px, 1fr)); }

.no-posts-message,
.posts-grid > .loading-message{
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-style: italic;
    grid-column: 1 / -1;
}

.post-card{
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease;
}
.post-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--ink) 45%, transparent);
}
.post-card[data-url]{ cursor: pointer; }
.post-card:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Image wrapper handles aspect ratio + overflow for zoom-on-hover */
.post-image-wrapper{
    width: 100%;
    overflow: hidden;
    background: var(--bg2);
}
.post-image-wrapper.aspect-ratio-16-9{ aspect-ratio: 16 / 9; }
.post-image-wrapper.aspect-ratio-4-3{ aspect-ratio: 4 / 3; }
.post-image-wrapper.aspect-ratio-1-1{ aspect-ratio: 1 / 1; }
.post-image-wrapper.aspect-ratio-3-2{ aspect-ratio: 3 / 2; }

.post-image{
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.post-image.object-fit-cover{ object-fit: cover; }
.post-image.object-fit-contain{ object-fit: contain; background: var(--surface2); }
.post-card:hover .post-image{ transform: scale(1.04); }

.post-content{
    padding: clamp(16px, 2.5vw, 22px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.post-header{ display: flex; flex-direction: column; gap: 4px; }

.post-title{
    font-family: var(--font-display);
    font-weight: var(--display-w);
    letter-spacing: var(--display-ls);
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
}
.post-title a{
    color: inherit;
    text-decoration: none;
}
.post-title a:hover{ color: var(--accent); }

.post-subheader{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--muted);
    font-family: var(--font-mono);
    letter-spacing: .02em;
    flex-wrap: wrap;
}
.post-meta-separator{
    color: var(--line);
    font-size: 1rem;
    line-height: 1;
}
.post-date,
.post-author{
    color: var(--muted);
}

.post-content-inner{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.post-excerpt,
.post-content-full{
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: .92rem;
    margin: 0;
}
.post-content-full :is(h1,h2,h3,h4,h5,h6){
    font-family: var(--font-display);
    color: var(--ink);
    margin: .8em 0 .3em;
}
.post-content-full p{ margin: 0 0 .8em; }
.post-content-full p:last-child{ margin-bottom: 0; }
.post-content-full a{ color: var(--accent); }
.post-content-full img{ max-width: 100%; height: auto; border-radius: var(--radius-sm); }

@media (max-width: 560px){
    .posts-grid{ --posts-cols: 1; }
}