/*
 * Simple Tree house ads.
 *
 * Device targeting lives here, not in PHP: the server emits every unit and
 * CSS decides who sees which. That keeps one cacheable HTML response for all
 * visitors. Units reserve their height up front so CLS stays at zero.
 */

.stap-ad {
	--stap-accent: #3f8f5b;
	display: block;
	margin: 1.75em 0;
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-left: 3px solid var(--stap-accent);
	border-radius: 6px;
	background: rgba(0, 0, 0, .02);
	font-size: 15px;
	line-height: 1.45;
	contain: layout style;
}

.stap-ad__label {
	display: block;
	margin-bottom: 8px;
	font-size: 10px;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .55;
}

.stap-ad__link {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none !important;
	color: inherit;
	box-shadow: none !important;
}

.stap-ad__icon {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;      /* explicit box => no layout shift on load */
	border-radius: 14px;
	object-fit: cover;
}

.stap-ad__text { flex: 1 1 auto; min-width: 0; }

.stap-ad__kicker {
	display: block;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--stap-accent);
	font-weight: 700;
}

.stap-ad__head {
	display: block;
	font-weight: 700;
	font-size: 16px;
	margin: 2px 0 3px;
}

.stap-ad__body { display: block; opacity: .78; font-size: 14px; }

.stap-ad__cta {
	flex: 0 0 auto;
	align-self: center;
	padding: 9px 15px;
	border-radius: 999px;
	background: var(--stap-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.stap-ad__link:hover .stap-ad__cta { filter: brightness(1.08); }

/* ---- Sidebar card variant ---- */
.stap-ad--card .stap-ad__link { flex-direction: column; text-align: center; gap: 10px; }
.stap-ad--card .stap-ad__cta { width: 100%; text-align: center; }

/* ---- Device gating ---------------------------------------------------
 * Salient collapses the sidebar below the article on narrow screens, so a
 * sidebar unit is invisible on a phone. Phones get the mid-article unit
 * instead; desktops get the sidebar. Everyone sees exactly two.
 */
@media (max-width: 999px) {
	.stap-dev-desktop:not(.stap-dev-mobile) { display: none !important; }
	.stap-ad__link { flex-wrap: wrap; }
	.stap-ad__cta { width: 100%; text-align: center; margin-top: 8px; }
}

@media (min-width: 1000px) {
	.stap-dev-mobile:not(.stap-dev-desktop) { display: none !important; }
}

@media (prefers-color-scheme: dark) {
	.stap-ad {
		border-color: rgba(255, 255, 255, .14);
		background: rgba(255, 255, 255, .04);
	}
}

/* ---- Showcase variant: real app screenshot instead of the icon ----------
 * The screenshot is the whole pitch at this size — the PathBloom bloom-map
 * and the SHSAT progress chart read as shape and colour long before any text
 * in them is legible, so they are cropped to 4:5 rather than shown whole.
 *
 * The image is sized by a WRAPPER SPAN, not by rules on the <img> itself.
 * Salient forces width on content images from a high-specificity selector
 * that an .class rule cannot outrank even with !important, and Perfmatters'
 * lazy-loader rewrites img attributes. Sizing a span sidesteps both: the
 * theme has no opinion about our span, and the img simply fills it.
 */
.stap-ad__shotwrap {
	display: block;
	flex: 0 0 108px;
	width: 108px;
	height: 135px;              /* 4:5 — matches the cropped source */
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .12);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .13);
	background: rgba(0, 0, 0, .04);
}

.stap-ad__shotwrap .stap-ad__shot {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	max-width: none;
}

.stap-ad--shot { padding: 16px; }
.stap-ad--shot .stap-ad__link { align-items: center; gap: 16px; }

/* Sidebar card: wider, since the column is narrow and it stacks. */
.stap-ad--card.stap-ad--shot .stap-ad__shotwrap {
	flex: 0 0 auto;
	width: 150px;
	height: 188px;
}

@media (max-width: 999px) {
	.stap-ad__shotwrap {
		flex: 0 0 92px;
		width: 92px;
		height: 115px;
	}
	/* Phone layout for showcase units:
	 *     [ shot 92px ][ text fills rest ]
	 *     [        CTA full width        ]
	 * The link MUST wrap. With nowrap, the CTA's 100% flex-basis competes in
	 * the same row and crushes the text column to one word per line.
	 */
	.stap-ad--shot .stap-ad__link { flex-wrap: wrap; align-items: flex-start; }
	.stap-ad--shot .stap-ad__text { flex: 1 1 0; min-width: 0; }
	.stap-ad--shot .stap-ad__head { font-size: 15px; }
	.stap-ad--shot .stap-ad__body { font-size: 13px; }
	.stap-ad--shot .stap-ad__cta {
		flex: 1 1 100%;
		width: 100%;
		text-align: center;
		margin-top: 10px;
	}
}

@media (prefers-color-scheme: dark) {
	.stap-ad__shotwrap { border-color: rgba(255, 255, 255, .16); }
}

/* The brand name in the attribution label is the link to simpletreeapps.com.
   It sits OUTSIDE the primary anchor, so this is not an anchor nested inside
   an anchor — the App Store button remains the primary click target. Styled to
   read as part of the label rather than as a second call to action. */
.stap-ad__brand {
	color: inherit;
	text-decoration: none !important;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.stap-ad__brand:hover { color: var(--stap-accent); }