/* Articles: pill filter → card grid (columns from the widget, default 3 / 2 / 1). Card = photo (slow zoom) with the
   category as a frosted badge + date · reading time, title, excerpt, «اقرأ المقال». The whole card is the link.
   Featured layout: the first card spans two columns with the text over the photo (desktop / tablet). */
.sdo-w--posts .sdo-ps{--ps-r:clamp(20px,2.4vw,28px);--cols:3;margin-top:clamp(24px,4vw,44px)}
.sdo-w--posts .sdo-ps__filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,3vw,32px)}
.sdo-al--center.sdo-w--posts .sdo-ps__filter{justify-content:center}
.sdo-al--end.sdo-w--posts .sdo-ps__filter{justify-content:flex-end}
.sdo-w--posts .sdo-ps__filter button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:99px;border:1px solid var(--sdo-line);font-size:.92rem;font-weight:600;line-height:1.3;color:var(--sdo-muted);background:var(--sdo-surface);transition:background .6s var(--sdo-ease),color .6s var(--sdo-ease),border-color .6s var(--sdo-ease)}
.sdo-w--posts .sdo-ps__filter button:hover{border-color:var(--sdo-sand);color:var(--sdo-ink)}
.sdo-w--posts .sdo-ps__filter button.is-on{background:var(--sdo-accent);border-color:var(--sdo-accent);color:var(--sdo-accent-ink)}
.sdo-w--posts .sdo-ps__filter button:focus-visible{outline:2px solid var(--sdo-sand);outline-offset:2px}
.sdo-tone--dark.sdo-w--posts .sdo-ps__filter button:not(.is-on){background:transparent;color:color-mix(in srgb,var(--sdo-ivory) 72%,transparent);border-color:color-mix(in srgb,var(--sdo-ivory) 18%,transparent)}

.sdo-w--posts .sdo-ps__grid{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
@media(max-width:1024px){.sdo-w--posts .sdo-ps{--cols:2}}
@media(max-width:767px){.sdo-w--posts .sdo-ps{--cols:1}}

/* card */
.sdo-w--posts .sdo-ps__card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;isolation:isolate;border:1px solid var(--sdo-line);border-radius:var(--ps-r);background:var(--sdo-surface);color:var(--sdo-ink);transition:opacity 1.1s var(--sdo-ease) var(--d,0s),border-color .7s var(--sdo-ease),box-shadow .9s var(--sdo-ease),transform .9s var(--sdo-ease)}
.sdo-w--posts .sdo-ps__card:hover{border-color:color-mix(in srgb,var(--sdo-sand) 70%,transparent);transform:translateY(-5px);box-shadow:0 30px 60px -38px color-mix(in srgb,var(--sdo-wine) 80%,transparent)}
.sdo-w--posts .sdo-ps__card.is-hidden{display:none}
.sdo-w--posts .sdo-ps__card.is-show{animation:sdo-ps-in .8s var(--sdo-ease) both}
@keyframes sdo-ps-in{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.sdo-w--posts .sdo-ps__media{position:relative;overflow:hidden;aspect-ratio:var(--ps-ratio,16/10);background:radial-gradient(80% 80% at 90% 10%,color-mix(in srgb,var(--sdo-wine) 70%,transparent),transparent 70%),linear-gradient(160deg,var(--sdo-wine-deep),var(--sdo-night))}
.sdo-w--posts .sdo-ps__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.6s var(--sdo-ease)}
.sdo-w--posts .sdo-ps__card:hover .sdo-ps__media img{transform:scale(1.07)}
.sdo-w--posts .sdo-ps__shade{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--sdo-night) 34%,transparent),transparent 42%);pointer-events:none}
.sdo-w--posts .sdo-ps__wave{position:absolute;inset-inline-start:-10%;bottom:8%;width:80%}
.sdo-w--posts .sdo-ps__wave path{stroke:var(--sdo-ivory);stroke-width:1.2;opacity:.14}
.sdo-w--posts .sdo-ps__wave path:nth-child(2){stroke:var(--sdo-sand);opacity:.4}
.sdo-w--posts .sdo-ps__badge{position:absolute;z-index:2;top:14px;inset-inline-start:14px;max-width:calc(100% - 28px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:7px 15px;border-radius:99px;font-size:.8rem;font-weight:600;line-height:1.3;color:#fff;background:color-mix(in srgb,var(--sdo-night) 42%,transparent);border:1px solid color-mix(in srgb,var(--sdo-ivory) 30%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.sdo-w--posts .sdo-ps__badge::before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:8px;border-radius:50%;background:var(--sdo-sand);vertical-align:middle}
.sdo-w--posts .sdo-ps__body{display:flex;flex:1;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,28px)}
.sdo-w--posts .sdo-ps__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.8rem;color:var(--sdo-sand-deep)}
.sdo-w--posts .sdo-ps__meta i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.sdo-w--posts .sdo-ps__title{margin:0;font-family:var(--sdo-head-ff);font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;line-height:1.5;text-wrap:balance}
.sdo-w--posts .sdo-ps__title a{color:inherit;text-decoration:none;outline:0}
.sdo-w--posts .sdo-ps__title a::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit}
.sdo-w--posts .sdo-ps__title a:focus-visible::after{outline:2px solid var(--sdo-sand);outline-offset:-3px;border-radius:var(--ps-r)}
.sdo-w--posts .sdo-ps__ex{margin:0;line-height:1.9;color:var(--sdo-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sdo-w--posts .sdo-ps__more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;font-size:.92rem;font-weight:600;color:var(--sdo-accent)}
.sdo-w--posts .sdo-ps__more .sdo-arrow{transition:transform .6s var(--sdo-ease)}
.sdo-w--posts .sdo-ps__card:hover .sdo-ps__more .sdo-arrow{transform:translateX(-5px)}
html:not([dir=rtl]) .sdo-w--posts .sdo-ps__more .sdo-arrow{transform:scaleX(-1)}
html:not([dir=rtl]) .sdo-w--posts .sdo-ps__card:hover .sdo-ps__more .sdo-arrow{transform:scaleX(-1) translateX(-5px)}
.sdo-tone--dark.sdo-w--posts .sdo-ps__card{background:color-mix(in srgb,var(--sdo-ivory) 4%,transparent);border-color:color-mix(in srgb,var(--sdo-ivory) 14%,transparent);color:var(--sdo-ivory)}
.sdo-tone--dark.sdo-w--posts .sdo-ps__ex{color:color-mix(in srgb,var(--sdo-ivory) 74%,transparent)}
.sdo-tone--dark.sdo-w--posts .sdo-ps__meta,.sdo-tone--dark.sdo-w--posts .sdo-ps__more{color:var(--sdo-sand)}

/* featured: first card spans 2 columns, text over the photo */
@media(min-width:768px){
	.sdo-w--posts .is-featured:not(.is-filtered) .sdo-ps__card.is-feat{grid-column:span min(2,var(--cols));min-height:clamp(380px,40vw,520px);color:#fff;border-color:transparent}
	.sdo-w--posts .is-featured:not(.is-filtered) .is-feat .sdo-ps__media{position:absolute;inset:0;aspect-ratio:auto}
	.sdo-w--posts .is-featured:not(.is-filtered) .is-feat .sdo-ps__shade{background:linear-gradient(0deg,color-mix(in srgb,var(--sdo-night) 92%,transparent) 0%,color-mix(in srgb,var(--sdo-night) 55%,transparent) 42%,transparent 75%)}
	.sdo-w--posts .is-featured:not(.is-filtered) .is-feat .sdo-ps__body{position:relative;justify-content:flex-end;padding:clamp(26px,3.4vw,46px)}
	.sdo-w--posts .is-featured:not(.is-filtered) .is-feat .sdo-ps__title{font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.4;max-width:22em}
	.sdo-w--posts .is-featured:not(.is-filtered) .is-feat .sdo-ps__ex{color:color-mix(in srgb,var(--sdo-ivory) 82%,transparent);max-width:38em}
	.sdo-w--posts .is-featured:not(.is-filtered) .is-feat .sdo-ps__meta,.sdo-w--posts .is-featured:not(.is-filtered) .is-feat .sdo-ps__more{color:var(--sdo-sand)}
	.sdo-w--posts .is-featured:not(.is-filtered) .is-feat .sdo-ps__more{margin-top:6px}
}

.sdo-w--posts .sdo-ps__all{margin-top:clamp(28px,4vw,44px);text-align:center}
.sdo-w--posts .sdo-ps__empty{margin:0;padding:28px;border:1px dashed var(--sdo-line);border-radius:var(--ps-r);text-align:center;color:var(--sdo-muted)}
@media(max-width:599px){.sdo-w--posts .sdo-ps__filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}.sdo-w--posts .sdo-ps__filter::-webkit-scrollbar{display:none}.sdo-w--posts .sdo-ps__filter button{flex:none}}
@media (hover:none){.sdo-w--posts .sdo-ps__card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.sdo-w--posts *{transition:none!important;animation:none!important}}
/* desktop: the featured article also spans two rows (magazine layout: 6 articles fill three full rows) */
@media(min-width:1025px){.sdo-w--posts .is-featured:not(.is-filtered) .sdo-ps__card.is-feat{grid-row:span 2}}