/*
 * Advertisement banners (spec 3.3).
 *
 * Shipped with the plugin and loaded site-wide, because banners appear in four
 * placements including sidebars that are rendered after wp_head has already
 * gone out - a conditionally enqueued stylesheet would arrive too late to
 * apply.
 */

.aop-adslot {
	margin: 0 0 24px;
}

.aop-ad[hidden] {
	display: none;
}

.aop-ad {
	position: relative;
	margin: 0 0 12px;
}

.aop-adslot .aop-ad:last-child {
	margin-bottom: 0;
}

/* Every banner is labelled. Required by the spec, and it is also the honest
   thing to do: a paid placement inside a charity's own pages should never be
   mistakable for the charity's own recommendation.

   The colour and size are measured rather than eyeballed. At .62rem with
   opacity .75 this label came out at 3.40:1 against the page, below the 4.5:1
   minimum for text this size - and a disclosure nobody can read is not a
   disclosure. Full opacity on the darker body tone measures about 11:1. */
.aop-ad__label {
	display: block;
	margin: 0 0 4px;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--global-palette4, #2E3A44);
}

.aop-ad__link {
	display: block;
	overflow: hidden;
	line-height: 0;
	background: var(--global-palette7, #F7F5F0);
	border: 1px solid var(--global-palette6, #D9D5CC);
	border-radius: var(--aop-radius-sm, 6px);
}

.aop-ad__link:focus-visible {
	outline: 3px solid var(--global-palette1, #0B5D4A);
	outline-offset: 2px;
}

.aop-ad__link img {
	display: block;
	width: 100%;
	height: auto;
}

/* Home page strip: a grid on desktop, a swipeable row on a phone. */
.aop-adslot--strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 32px 0;
}

.aop-adslot--strip .aop-ad {
	margin: 0;
}

/* The banner dropped between directory cards has to span the whole grid,
   otherwise it is squeezed into one card's column and renders as a sliver. */
.aop-adslot--incard {
	grid-column: 1 / -1;
	margin: 4px 0 12px;
}

@media (max-width: 700px) {

	/* Scroll-snap rather than a scripted carousel: it is swipeable, keyboard
	   scrollable, works with no JavaScript at all, and cannot get stuck
	   half-way between two banners. */
	.aop-adslot--strip {
		display: flex;
		gap: 12px;
		padding-bottom: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.aop-adslot--strip .aop-ad {
		flex: 0 0 82%;
		scroll-snap-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.aop-adslot--strip {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   The Advertise With Us page (spec P21)
   -------------------------------------------------------------------------- */

.aop-placements {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin: 24px 0 32px;
}

.aop-placement {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--global-palette6, #D9D5CC);
	border-radius: var(--aop-radius, 12px);
}

.aop-placement__name {
	margin: 0 0 6px;
	font-size: 1.05rem;
}

.aop-placement__where {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
}

/* A drawn box at the real proportion of the placement, so an advertiser can
   see the shape their artwork has to fit. The hatching says "this is a space,
   not a picture". min-height keeps the label readable on the letterbox shape,
   where the true ratio would leave about 37px to write in - the figures
   underneath are the authority, not the box. */
.aop-placement__sample {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	margin: 14px 0 12px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--global-palette4, #2E3A44);
	background: repeating-linear-gradient(45deg, #F7F5F0, #F7F5F0 8px, #EDE8DE 8px, #EDE8DE 16px);
	border: 1px dashed var(--global-palette6, #D9D5CC);
	border-radius: var(--aop-radius-sm, 6px);
}

.aop-placement__note {
	margin: 0 0 10px;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--global-palette5, #5A6672);
}

.aop-placement__status {
	margin: auto 0 0;
	padding-top: 10px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--global-palette1, #0B5D4A);
	border-top: 1px solid var(--global-palette6, #D9D5CC);
}

.aop-sponsors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.aop-sponsor {
	padding: 10px 18px;
	font-weight: 600;
	background: var(--aop-tint, #E6F5F1);
	border-radius: 999px;
}

.aop-sponsor a {
	text-decoration: none;
}

.aop-sponsor a:hover,
.aop-sponsor a:focus-visible {
	text-decoration: underline;
}