/* OssLand ad places (Views/Shared/Components/AdSlot, Views/Ad/_AdSlotContent).
   A place keeps its height before the ad arrives; an ad borrows its neighbours' card
   classes and adds only the label line: "Ad · Brand · Why am I seeing this?". */

.ossad-place { display: block; box-sizing: border-box; position: relative; }
.ossad-place--card,
.ossad-place--large { margin: 16px 0; }
.ossad-place--tile { margin: 0; }
/* In an article the body already spaces its blocks (gap: 20px). */
.jra-body > .ossad-place { margin: 0; }
/* Mobile: text keeps the page's 16 px gutter, pictures run edge to edge like the page's own. */
.ossad-place--m.ossad-place--card .ossad-mark,
.ossad-place--m.ossad-place--card .ossad-card-title,
.ossad-place--m.ossad-place--card .ossad-card-text,
.ossad-place--m.ossad-place--large .ossad-mark,
.ossad-place--m.ossad-place--row .ossad-mark,
.ossad-place--m.ossad-place--tl .ossad-mark { padding-left: 16px; padding-right: 16px; }
.ossad-place--m .ossad-card-img,
.ossad-place--m .ossad-ph-img { border-radius: 0; }

.ossad { position: relative; display: block; width: 100%; }

.ossad-mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
              font-size: 12px; line-height: 16px; color: #6b6b6b; padding: 0 0 4px; }
.ossad-label { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #4a4a4a; }
.ossad-brand::before { content: "·"; margin-right: 8px; color: #9a9a9a; }
.ossad-why { margin-left: auto; color: #6b6b6b; text-decoration: underline; }

/* Native card: image 1.91:1, title (≤ 60), text (≤ 125). */
.ossad-card { display: block; color: inherit; text-decoration: none; }
.ossad-card-img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: 6px; background: #f0f0f0; }
.ossad-card-title { display: block; margin: 8px 0 2px; font-weight: 700; font-size: 17px; line-height: 1.3; }
.ossad-card-text { display: block; font-size: 14px; line-height: 1.4; color: #4a4a4a; }

/* A wide desktop row: picture 1.91:1 on the left, title and text beside it. */
.ossad-drow { display: flex; gap: 16px; align-items: flex-start; color: inherit; text-decoration: none; }
.ossad-drow-img { flex: 0 0 210px; width: 210px; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: 6px; background: #f0f0f0; }
.ossad-drow-body { flex: 1; min-width: 0; }
.ossad-drow .ossad-card-title { margin-top: 0; }
.ossad--drow.ossad--placeholder .ossad-ph-img { width: 210px; margin: 0; }

/* Banner: the uploaded size, centred, never wider than the column. */
.ossad--banner { text-align: center; }
.ossad-banner-link { display: inline-block; max-width: 100%; }
.ossad-banner-img { display: block; max-width: 100%; height: auto; }

/* A timeline entry and a quote tile: the label sits over the tile. */
.jl-ad { display: flex; color: inherit; text-decoration: none; }
.ossad--tile .ossad-mark { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 6px 8px;
                           color: #fff; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.ossad--tile .ossad-label, .ossad--tile .ossad-why { color: #fff; }

/* The old desktop places (ART-D1, ART-D2): image with the title over it, as before. */
.ossad--legacy { height: 100%; }
.ossad--legacy .ossad-mark { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 3px 5px; background: rgba(255,255,255,.85); }
.ossad-legacy { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; color: inherit; text-decoration: none; }
.ossad-legacy img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ossad-legacy-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; background: rgba(255,255,255,.85); }
.ossad-legacy-text .banner-title, .ossad-legacy-text .banner-descr { display: block; }
.ossad--legacy.ossad--banner .ossad-banner-link,
.ossad--legacy.ossad--banner .ossad-banner-img { width: 100%; height: 100%; object-fit: cover; }

/* An empty place while Ads:PlaceholderPhoto is set: the photo in the place's shape. */
.ossad--placeholder { text-align: center; }
.ossad-ph-img { display: block; margin: 0 auto; width: 100%; height: auto; max-width: 100%; border-radius: 6px; background: #f0f0f0; }
.ossad-ph-img[width] { width: auto; }
.ossad--row.ossad--placeholder .ossad-ph-img { width: 96px; margin: 0; }
.ossad--legacy.ossad--placeholder .ossad-mark { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 3px 5px; background: rgba(255,255,255,.85); }
.ossad--legacy.ossad--placeholder .ossad-ph-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ossad--tile.ossad--placeholder .ossad-ph-img { height: 194px; object-fit: cover; border-radius: 0; }

/* Quote tile on the desktop page too, where the mobile jq-card styles are not loaded. */
.ossad--tile { height: 100%; }
.ossad--tile .jq-card { display: block; position: relative; height: 100%; min-height: 194px; overflow: hidden; color: #fff; text-decoration: none; border-radius: 6px; }
.ossad--tile .jq-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ossad--tile .jq-card-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,.65)); }
.ossad--tile .jq-card-text { position: absolute; left: 12px; right: 12px; bottom: 10px; font-weight: 700; line-height: 1.3; }

/* Sponsor bar (S) under a page's header: one thin line. */
.ossad--sponsor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 36px;
                  padding: 4px 16px; font-size: 13px; color: #4a4a4a; border-bottom: 1px solid #eee; }
.ossad-sponsor-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.ossad-sponsor-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }
.ossad-sponsor-brand { font-weight: 700; }
.ossad--sponsor .ossad-why { margin-left: auto; }
.ossad--sponsor.ossad--placeholder { display: block; min-height: 0; }