/* Sponsored ads (ads_inc/sponsored.php): the feed's ad card
 * (ads_inc/public_fancy_ad.php, .sad-card) and the right column's rows
 * (adverts/right_side_ads.php, .sad-row). Both slide through the ad's
 * pictures (.sad-slides, started by sbStartAdSlides). */

/* The pictures: each on a blurred copy of itself, so any shape fills the
 * frame; the caption over the bottom; thin bars show which picture. */
.sad-slides { position: relative; margin: 0 !important; }
/* Until the slider starts (sbStartAdSlides), only the first picture: not all
 * of them stacked, which then jumped to one. */
.sad-slides:not(.slick-initialized) > .sad-slide:not(:first-child) { display: none !important; }
.sad-slide { display: block !important; outline: none; }
.sad-media { position: relative; display: block; aspect-ratio: 1 / 1; width: 100%; overflow: hidden; background: #1c1e21; }
.sad-media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48px; background: linear-gradient(rgba(0, 0, 0, .32), transparent); z-index: 1; pointer-events: none; }
.sad-backdrop { position: absolute; inset: -24px; background: center / cover no-repeat; filter: blur(18px) brightness(.8) saturate(1.2); transform: scale(1.1); }
/* Centred at its own shape. Not width/height 100% + object-fit: under the
 * 85% body zoom on smaller screens (assets/js/spur_custom.js) Chrome draws
 * that as a crop. */
.sad-pic { position: absolute; top: 50%; left: 50%; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100%; transform: translate(-50%, -50%); border-radius: 0 !important; }
.sad-caption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72)); text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The picture that has just come in settles from a slight zoom; its caption rises into place. */
.sad-slides .slick-active .sad-pic, .sad-one .sad-pic { animation: sadSettle 6s cubic-bezier(.22, .61, .36, 1) both; }
.sad-slides .slick-active .sad-caption, .sad-one .sad-caption { animation: sadRise .5s .25s ease-out both; }
@keyframes sadSettle { from { transform: translate(-50%, -50%) scale(1.08); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes sadRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sad-bars { position: absolute; top: 8px; left: 10px; right: 46px; display: flex !important; gap: 4px; margin: 0; padding: 0; list-style: none; z-index: 2; }
.sad-bars li { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .45); cursor: pointer; }
.sad-bars li.slick-active { background: #fff; }
.sad-bars button { display: none; }

/* The ad's menu: why, hide, report. */
.sad-menu { position: absolute; z-index: 3; }
.sad-menu > button { width: 32px; height: 32px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; background: transparent; color: var(--sb-text-muted, #65676b); transition: background-color .15s; }
.sad-menu > button:hover, .sad-menu.open > button { background: rgba(127, 127, 127, .14); }
.sad-menu .dropdown-menu { right: 0; left: auto; min-width: 210px; border-radius: 10px; padding: 6px; border: 1px solid var(--sb-border, #e4e6eb); box-shadow: 0 12px 28px rgba(0, 0, 0, .15); }
.sad-menu .dropdown-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }

.sad-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; line-height: 1.3; color: var(--sb-text, #050505); }
.sad-desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; color: var(--sb-text, #050505); opacity: .8; }
.sad-domain { display: block; color: var(--sb-text-muted, #65676b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- The feed's ad card ---- */
.sad-card { position: relative; background: var(--sb-surface, #fff); border: 1px solid var(--sb-border, #e4e6eb); border-radius: 14px; overflow: hidden; margin: 0 0 16px; }
.sad-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 52px 8px 14px; }
.sad-card-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.sad-card-head b { display: block; font-size: 15px; color: var(--sb-text, #050505); line-height: 1.25; }
.sad-card-head small { font-size: 12.5px; color: var(--sb-text-muted, #65676b); }
.sad-card > .sad-menu { top: 12px; right: 10px; }
.sad-copy { padding: 0 14px 10px; font-size: 14.5px; line-height: 1.45; color: var(--sb-text, #050505); word-break: break-word; }
.sad-copy.is-long:not(.is-open) .sad-copy-text { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sad-copy-more { border: 0; background: none; padding: 0; font-weight: 700; color: var(--sb-text-muted, #65676b); cursor: pointer; }
.sad-copy.is-open .sad-copy-more { display: none; }
.sad-card .sad-media { max-height: 470px; }
.sad-card .sad-bars { right: 10px; }
.sad-foot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(127, 127, 127, .07); text-decoration: none !important; }
.sad-foot .sad-text { flex: 1; min-width: 0; }
.sad-foot .sad-domain { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.sad-foot .sad-title { font-size: 15px; -webkit-line-clamp: 1; line-clamp: 1; }
.sad-foot .sad-desc { font-size: 13px; margin-top: 1px; -webkit-line-clamp: 1; line-clamp: 1; }
.sad-cta { flex: none; padding: 8px 14px; border-radius: 8px; background: #e4e6eb; color: #050505; font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background-color .15s; }
.sad-foot:hover .sad-cta { background: #0866ff; color: #fff; }

/* ---- The right column: picture on the left, words beside it ---- */
.sad-wrap { margin: 0 0 16px; }
.sad-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; }
.sad-head b { font-size: 15px; font-weight: 800; color: var(--sb-text-muted, #65676b); }
.sad-head a { font-size: 13px; font-weight: 600; color: #0866ff; }
.sad-row { position: relative; display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; transition: background-color .15s; }
.sad-row:hover { background: rgba(127, 127, 127, .09); }
.sad-thumb { flex: none; width: 116px; border-radius: 10px; overflow: hidden; }
.sad-thumb .sad-media::before, .sad-thumb .sad-caption { display: none; }
.sad-thumb .sad-bars { top: auto; bottom: 6px; left: 0; right: 0; justify-content: center; gap: 4px; }
.sad-thumb .sad-bars li { flex: none; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, .4); }
.sad-info { flex: 1; min-width: 0; padding-right: 22px; text-decoration: none !important; }
.sad-info .sad-title { font-size: 14.5px; }
.sad-info .sad-desc { font-size: 13px; margin-top: 2px; }
.sad-info .sad-domain { font-size: 12.5px; margin-top: 4px; }
.sad-row > .sad-menu { top: 4px; right: 4px; opacity: 0; transition: opacity .15s; }
.sad-row:hover > .sad-menu, .sad-row > .sad-menu.open, .sad-row > .sad-menu:focus-within { opacity: 1; }
@media (hover: none) { .sad-row > .sad-menu { opacity: 1; } }
.sad-empty { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--sb-border, #e4e6eb); border-radius: 12px; background: var(--sb-surface, #fff); text-decoration: none !important; }
.sad-empty i { flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #0866ff; background: rgba(8, 102, 255, .1); }
.sad-empty b { display: block; font-size: 14px; color: var(--sb-text, #050505); }
.sad-empty span { font-size: 12.5px; color: var(--sb-text-muted, #65676b); }

body.theme-dark .sad-head a { color: #8ab4f8; }
body.theme-dark a.sad-foot, body.theme-dark a.sad-info, body.theme-dark a.sad-empty, body.theme-dark .sad-card-head a { color: var(--sb-text, #e4e6eb); }
body.theme-dark .sad-info .sad-domain, body.theme-dark .sad-foot .sad-domain { color: var(--sb-text-muted, #b0b3b8); }
body.theme-dark .sad-cta { background: #3a3b3c; color: #e4e6eb; }
body.theme-dark .sad-foot:hover .sad-cta { background: #2d88ff; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .sad-slides .sad-pic, .sad-slides .sad-caption { animation: none !important; }
}