/* A Third Opinion — homepage responsive fixes */

/* Holly's raised card only lifts above the row once columns sit side by side;
   stacked on narrow screens, the negative margin would crash into the card above. */
@media (min-width: 782px) {
	.atop-holly-card {
		margin-top: -28px !important;
	}
}

/* Listen buttons (Apple, Spotify, Amazon, YouTube) appear twice: filled amber
   pills in the hero (.atop-hero-buttons), and a transparent amber-outline
   repeat in the closing "New episodes" band (.atop-cta-buttons). Both share
   identical layout/responsive behaviour — only fill colour and hover differ
   — so the structural rules below target both classes together. Three tiers:

   Default (wide): one row, evenly spread across the full section width, each
   pill sized to its own content (icon left, text right) rather than forced
   into equal columns.

   ≤759px: not enough room for four content-width pills in a row without
   crowding — drop to a 2x2 grid, equal-width cells so it stays balanced
   regardless of label length.

   ≤480px: even a 2x2 grid gets tight — stack to one pill per row. */
.atop-hero-buttons.wp-block-buttons,
.atop-cta-buttons.wp-block-buttons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
}
.atop-hero-buttons.wp-block-buttons .wp-block-button,
.atop-cta-buttons.wp-block-buttons .wp-block-button {
	flex: none;
}

/* Padding, icon/text alignment, and nowrap live here rather than as inline
   styles on the button markup — the block editor only preserves inline
   styles it recognises as JSON block attributes (border radius, background
   colour, etc). Anything hand-added outside that schema, like padding or
   display:flex, gets silently stripped the next time a page is saved from
   wp-admin. Keeping it in this stylesheet means it survives that. */
.atop-hero-buttons.wp-block-buttons .wp-block-button__link,
.atop-cta-buttons.wp-block-buttons .wp-block-button__link {
	padding: 12px 22px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.atop-hero-buttons.wp-block-buttons .wp-block-button__link img,
.atop-cta-buttons.wp-block-buttons .wp-block-button__link img {
	width: 27px;
	height: 27px;
	margin-right: 10px;
	display: block;
	flex-shrink: 0;
}

/* Hover/focus affordance — these are calls to action, so they need to
   visibly react to a pointer, animated rather than an abrupt snap. */
.atop-hero-buttons.wp-block-buttons .wp-block-button__link:hover,
.atop-hero-buttons.wp-block-buttons .wp-block-button__link:focus-visible {
	background-color: #EFB758;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.atop-hero-buttons.wp-block-buttons .wp-block-button__link:active {
	background-color: #D0932E;
	transform: translateY(0);
	box-shadow: none;
}

/* CTA version is an amber outline on transparent, with amber text — a solid
   amber hover fill (like the hero's) would make that text unreadable, so
   this uses a soft translucent tint instead, kept legible either way. */
.atop-cta-buttons.wp-block-buttons .wp-block-button__link:hover,
.atop-cta-buttons.wp-block-buttons .wp-block-button__link:focus-visible {
	background-color: rgba(227, 166, 61, 0.15);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.atop-cta-buttons.wp-block-buttons .wp-block-button__link:active {
	background-color: rgba(227, 166, 61, 0.28);
	transform: translateY(0);
	box-shadow: none;
}

@media (max-width: 759px) {
	.atop-hero-buttons.wp-block-buttons,
	.atop-cta-buttons.wp-block-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		flex-wrap: wrap;
		gap: 10px;
	}
	.atop-hero-buttons.wp-block-buttons .wp-block-button,
	.atop-cta-buttons.wp-block-buttons .wp-block-button {
		width: 100%;
		margin: 0;
	}
	.atop-hero-buttons.wp-block-buttons .wp-block-button .wp-block-button__link,
	.atop-cta-buttons.wp-block-buttons .wp-block-button .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.atop-hero-buttons.wp-block-buttons,
	.atop-cta-buttons.wp-block-buttons {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
	}
	.atop-hero-buttons.wp-block-buttons .wp-block-button,
	.atop-cta-buttons.wp-block-buttons .wp-block-button {
		width: 100%;
	}
}

/* Email pill: the moment the two-column hero itself stacks to one column
   (WordPress's own columns breakpoint, 781px), go full-width to match. */
@media (max-width: 781px) {
	.atop-hero-mail a {
		width: 100%;
		justify-content: center;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}

/* Above that breakpoint, keep the email pill from ever exceeding the hero
   column's width — truncating gracefully rather than breaking its shape. */
.atop-hero-mail a {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}