/* Pill buttons — primary = amber/white text; secondary = outline or text link with arrow. */
.ogsp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.625rem 1.25rem;
	border-radius: var(--ogsp-radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	font-family: var(--ogsp-font-body);
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ogsp-btn-primary {
	background: var(--ogsp-amber);
	color: var(--ogsp-white);
}

.ogsp-btn-primary:hover {
	background: var(--ogsp-amber-hover);
}

.ogsp-btn-secondary {
	background: transparent;
	color: var(--ogsp-charcoal);
	border-color: var(--ogsp-charcoal);
}

.ogsp-btn-secondary:hover {
	border-color: var(--ogsp-amber);
	color: var(--ogsp-amber);
}

.ogsp-btn-white {
	background: var(--ogsp-white);
	color: var(--ogsp-charcoal);
}

.ogsp-btn-white:hover {
	background: rgba(255, 255, 255, 0.9);
}

.ogsp-btn-outline-white {
	background: transparent;
	color: var(--ogsp-white);
	border-color: var(--ogsp-white);
}

.ogsp-btn-outline-white:hover {
	background: rgba(255, 255, 255, 0.1);
}

.ogsp-btn-text {
	background: transparent;
	color: var(--ogsp-amber);
	padding-left: 0;
	padding-right: 0;
}

.ogsp-btn-text::after {
	content: '\2192';
}

/* Shared "Subscribe on YouTube" treatment — charcoal on-palette fill,
   used on both dark (hero) and light (cta bar, story/episode) contexts.
   Only the small glyph is red (a rounded red rect + white play triangle),
   so the locked "no red YouTube-brand buttons" rule stays intact. */
.ogsp-btn-youtube {
	background: var(--ogsp-charcoal);
	color: var(--ogsp-white);
	border-color: rgba(255, 255, 255, 0.22);
}

.ogsp-btn-youtube:hover {
	filter: brightness(1.2);
}

/* Outline variant for dark contexts (the hero) — Design Pass B, Item 2.
   Same red glyph, transparent fill, white outline + text. */
.ogsp-btn-youtube--outline {
	background: transparent;
	color: var(--ogsp-white);
	border-color: rgba(255, 255, 255, 0.6);
}

.ogsp-btn-youtube--outline:hover {
	background: rgba(255, 255, 255, 0.1);
	filter: none;
}

/* Minimal card base — subtle border, no heavy shadow. */
.ogsp-card {
	border: 1px solid rgba(44, 44, 44, 0.1);
	border-radius: var(--ogsp-radius);
	background: var(--ogsp-white);
	overflow: hidden;
}

/* Small text link + chevron — "View All Films", "Learn More About Us", etc. */
.ogsp-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ogsp-amber);
	text-decoration: none;
	white-space: nowrap;
}

.ogsp-link-arrow:hover {
	text-decoration: underline;
}

.ogsp-link-arrow svg {
	flex-shrink: 0;
}

/* Form notices — success/error states shared by the contact form and
   the newsletter partial (brief §8). Hidden via the [hidden] attribute
   until the relevant handler reveals them. */
.ogsp-form-notice {
	border-radius: var(--ogsp-radius);
	padding: 0.875rem 1.25rem;
	font-size: 0.8125rem;
	margin-bottom: 1.5rem;
}

.ogsp-form-notice--success {
	background: var(--ogsp-cream);
	border: 1px solid rgba(192, 122, 42, 0.35);
	color: var(--ogsp-charcoal);
}

.ogsp-form-notice--error {
	background: rgba(44, 44, 44, 0.04);
	border: 1px solid rgba(44, 44, 44, 0.25);
	color: var(--ogsp-charcoal);
}

/* Icon-in-circle — filled variant (topic tiles, Beyond tiles) and outline
   variant (support-path cards). */
.ogsp-icon-circle {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--ogsp-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ogsp-charcoal);
	transition: background-color 0.15s ease;
}

.ogsp-icon-circle--outline {
	width: 2.5rem;
	height: 2.5rem;
	background: transparent;
	border: 1px solid rgba(192, 122, 42, 0.25);
	color: var(--ogsp-amber);
}