/* Frontend styles for Svenskamagasinet Ads */
.sm-ads { display: block; margin: 1.5rem 0; }
.sm-ads__heading { margin: 0 0 .75rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.sm-ads__empty { color: #777; font-style: italic; }

.sm-ads--grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sm-ads--list { display: flex; flex-direction: column; gap: 1rem; }
.sm-ads--list .sm-ad { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; align-items: start; }

/* Let list layout react to parent width (works in narrow sidebars too). */
.sm-ads--list { container-type: inline-size; }

@container (max-width: 620px) {
	.sm-ads--list .sm-ad {
		display: block !important;
	}
}

@media (max-width: 900px) {
	.sm-ads--list .sm-ad {
		display: block !important;
	}
}

.sm-ad { background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.sm-ad__media { display: block; line-height: 0; }
.sm-ad__image { width: 100%; height: auto; display: block; }
.sm-ad__body { padding: 1rem 1.1rem 1.1rem; }
.sm-ad__title { margin: 0 0 .4rem; font-size: 1.15rem; line-height: 1.25; }
.sm-ad__title a { color: inherit; text-decoration: none; }
.sm-ad__title a:hover { text-decoration: underline; }
.sm-ad__text { color: #444; font-size: .95rem; line-height: 1.45; }
.sm-ad__text p:last-child { margin-bottom: 0; }

.sm-ad__body,
.sm-ad__title,
.sm-ad__text { min-width: 0; overflow-wrap: anywhere; }

.sm-ad__offer { margin-top: .9rem; padding: .7rem .85rem; border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .92rem; }
.sm-ad__offer--reveal { background: #eaf7ee; border: 1px solid #b8e2c4; color: #1a5b30; }
.sm-ad__offer--link { text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.sm-ad__offer--link:hover { background: #d8efde; border-color: #8fcfa3; }
.sm-ad__offer--link .sm-ad__offer-text { text-decoration: underline; }
.sm-ad__offer--locked { background: #fff7e6; border: 1px solid #f0d49a; color: #6b4a00; }
.sm-ad__offer-label { font-weight: 600; }
.sm-ad__lock { font-size: 1rem; }
.sm-ad__cta { margin-left: auto; background: #b48313; color: #fff !important; padding: .35rem .8rem; border-radius: 4px; font-weight: 600; text-decoration: none; font-size: .85rem; }
.sm-ad__cta:hover { background: #8c640d; }

/* Premium widget variant */
.sm-ads--premium { padding: 1rem; background: #fafafa; border-radius: 8px; border: 1px solid #ececec; }
.sm-ads--premium .sm-ad { box-shadow: none; }

/* Let premium list react to its own width (e.g. sidebars), not only viewport width. */
.sm-ads--premium.sm-ads--list { container-type: inline-size; }

@container (max-width: 560px) {
	.sm-ads.sm-ads--premium.sm-ads--list {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr;
	}

	.sm-ads.sm-ads--premium.sm-ads--list .sm-ad {
		display: block !important;
	}
}

/* On smaller screens, show premium list ads as stacked card grid for better fit. */
@media (max-width: 768px) {
	.sm-ads.sm-ads--premium.sm-ads--list {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr;
	}

	.sm-ads.sm-ads--premium.sm-ads--list .sm-ad {
		display: block !important;
	}
}