/* ranking-1zoo.css — rich single-zoo ranking layout (rare-animal pages). */

.rz1-container {
	max-width: 1500px;
	margin: 0 auto;
	padding: 28px 16px 64px;
	overflow-x: hidden;
	width: 100%;
}

/* ── Title row: h1 + rarity badge on the same line ────── */

.rz1-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 24px;
}

/* Two copies of the title exist in the DOM (see ranking-1zoo.php): one lives inside
   .rz1-hero-text for desktop, one sits outside/above .rz1-hero for mobile — only one
   is ever shown at a time, toggled at the same 900px breakpoint the hero stacks at. */
.rz1-title-row--mobile { display: none; }

@media (max-width: 900px) {
	.rz1-title-row--desktop { display: none; }
	.rz1-title-row--mobile  { display: flex; }
}

.rz1-title {
	font-size: 2rem;
	line-height: 1.2;
	margin: 0;
	letter-spacing: -0.01em;
	flex: 1 1 auto;
	min-width: 0;
}

.rz1-rarity {
	display: inline-flex;
	align-self: flex-start;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 5px;
	max-width: none;
	width: auto;
	text-align: left;
	background: linear-gradient(135deg, #f0f8ea, #dcefd0);
	border: 1px solid rgba(74, 138, 42, 0.2);
	border-radius: 999px;
	padding: 8px 14px 10px;
	line-height: 1.25;
	margin: 14px 0 0;
	box-shadow: 0 2px 8px rgba(74, 138, 42, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rz1-rarity:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(74, 138, 42, 0.22);
}

.rz1-rarity-num {
	font-size: 0.85rem;
	font-weight: 800;
	color: #1f3d14;
}

.rz1-rarity-label {
	font-size: 0.7rem;
	color: #3f6a2c;
}

/* ── Hero: text left, gallery right ───────────────────── */

/* Grid instead of flex-grow: the theme's page-builder CSS applies its own flex rules to
   generic child divs, which fought with flex-grow here. Explicit grid columns can't be
   silently overridden by that. !important guards against the same conflict recurring. */
/* Text column is flexible (fills whatever space isn't taken by the fixed-width
   gallery column) so it actually uses the freed-up room instead of leaving it
   as dead space between text and photo. Gallery is a fixed 600px "featured
   photo" column on the right — not full-bleed. */
.rz1-hero {
	display: grid !important;
	grid-template-columns: minmax(300px, 1fr) 600px !important;
	align-items: start; /* was "stretch" — that forced the text column to match the
		gallery's height, and centering (below) then split the leftover space above AND
		below the text as dead gaps. "start" sizes the text column to its own content,
		so it just sits flush with the top — no trapped empty space either side. */
	gap: 40px;
	margin: 0 0 28px;
}

.rz1-hero-text {
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.rz1-hero-gallery {
	position: relative; /* anchors .rz1-side-tab on mobile — see below */
	width: 100% !important;
	min-width: 0;
}

.rz1-hero-gallery .ranking-gallery {
	margin-bottom: 0;
}

.rz1-zoo-name {
	display: inline-flex;
	align-self: flex-start; /* .rz1-hero-text is a flex column with default
		align-items:stretch, which was stretching this link's clickable/hover
		box to the column's full width — the underline itself stayed sized to
		the text, but hover triggered across the whole (invisible) extra area. */
	align-items: center;
	gap: 9px;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.2;
	color: #16181d;
	text-decoration: none;
	position: relative;
	transition: color 0.18s ease;
}

.rz1-zoo-name span {
	background-image: linear-gradient(#4a8a2a, #4a8a2a);
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: left 90%;
	transition: background-size 0.28s ease;
}

.rz1-zoo-name i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #f2f2f2;
	font-size: 0.75rem;
	color: #8a8a8a;
	transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.rz1-zoo-name:hover {
	color: #4a8a2a;
}

.rz1-zoo-name:hover span {
	background-size: 100% 2px;
}

.rz1-zoo-name:hover i {
	color: #fff;
	background: #4a8a2a;
	transform: translate(2px, -2px);
}

.rz1-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
	font-size: 0.95rem;
}

.rz1-meta > span {
	display: inline-flex;
	align-items: center;
	background: #f6f7f5;
	border: 1px solid #ececec;
	border-radius: 999px;
	padding: 7px 14px;
	color: #4b5563;
}

.rz1-meta i { margin-right: 6px; }
.rz1-location i { color: #4a8a2a; }
.rz1-rating { font-weight: 700; color: #16181d; }
.rz1-rating i { color: #ffcb22; filter: drop-shadow(0 0 3px rgba(255, 203, 34, 0.45)); }
.rz1-reviews { color: #9aa0a6; font-weight: 400; margin-left: 3px; }

/* Short teaser sentence next to the gallery — styled as a highlighted pull-quote,
   with a large decorative quote mark (::before, purely cosmetic — no markup change) */
.rz1-hero-text .rz1-lead {
	position: relative;
	margin: 18px 0 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.6;
	color: #1a2e12;
	background: linear-gradient(135deg, #f5faf1, #eaf3e2);
	border-left: 4px solid #4a8a2a;
	border-radius: 12px;
	padding: 18px 22px 18px 46px;
	box-shadow: 0 2px 10px rgba(74, 138, 42, 0.1);
}

.rz1-hero-text .rz1-lead::before {
	content: '\201C';
	position: absolute;
	top: 4px;
	left: 14px;
	font-size: 2.6rem;
	line-height: 1;
	font-weight: 800;
	font-family: Georgia, 'Times New Roman', serif;
	color: rgba(74, 138, 42, 0.35);
}

/* ── Narrative — full width below the hero row ────────── */

.rz1-narrative {
	margin: 28px 0 30px;
	line-height: 1.8;
	font-size: 1.07rem;
	color: #20242b;
}

.rz1-narrative p { margin: 0 0 16px; }

/* Editorial drop-cap on the opening paragraph. ranking-1zoo.php always renders
   the FIRST .rz1-narrative block as the immediate next sibling of .rz1-hero
   (both the "first section" and legacy flat-narrative code paths) — the second
   .rz1-narrative block (if any) instead follows .rz1-cta-wrap, so this combinator
   reliably targets only the opening paragraph, not every narrative block. */
.rz1-hero + .rz1-narrative > p:first-child::first-letter {
	float: left;
	font-size: 3.1em;
	line-height: 0.85;
	font-weight: 800;
	padding: 4px 8px 0 0;
	color: #2f5d1e;
}

/* Dynamic section headings from the two-stage article (rendered as <h2>) —
   accent bar via ::before, purely decorative, doesn't affect document flow. */
.rz1-section-heading {
	position: relative;
	font-size: 1.34rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #16181d;
	margin: 34px 0 14px;
	padding-left: 16px;
}

.rz1-section-heading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, #4a8a2a, #2f5d1e);
}

.rz1-section-heading:first-child { margin-top: 0; }

/* ── CTA to the zoo page — compact white pill, fills green on hover ──── */

.rz1-cta-wrap {
	text-align: center;
	margin: 26px 0;
}

.rz1-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 18px;
	border-radius: 999px;
	text-decoration: none;
	background: #fff;
	border: 1.5px solid #111;
	color: #111;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rz1-cta-icon {
	flex: 0 0 auto;
	font-size: 0.95rem;
	color: #111;
	transition: color 0.2s ease;
}

.rz1-cta-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1 1 auto;
	min-width: 0;
}

.rz1-cta-title {
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.rz1-cta-sub {
	font-size: 0.76rem;
	font-weight: 400;
	line-height: 1.3;
	opacity: 0.7;
}

.rz1-cta-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	transition: transform 0.2s ease;
}

.rz1-cta:hover {
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
	transform: translateY(-2px);
}

.rz1-cta:hover .rz1-cta-arrow { transform: translateX(4px); }

/* ── Sources — subtle footer, out of the reading flow ── */

.rz1-sources {
	margin-top: 34px;
	padding-top: 16px;
	border-top: 1px solid #eee;
	font-size: 0.82rem;
	color: #9aa0a6;
}

.rz1-sources-label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: #6b7280;
	margin-right: 8px;
}

.rz1-sources a {
	display: inline-block;
	min-width: 22px;
	text-align: center;
	margin: 0 3px;
	padding: 1px 8px;
	background: #fafafa;
	border: 1px solid #e2e2e2;
	border-radius: 20px;
	color: #4a8a2a;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.rz1-sources a:hover {
	background: #4a8a2a;
	border-color: #4a8a2a;
	color: #fff;
	transform: translateY(-1px);
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 900px) {
	.rz1-hero {
		grid-template-columns: 1fr !important;
		gap: 0;
	}

	.rz1-hero-gallery {
		order: -1; /* gallery above the text on smaller screens */
	}
}

/* Curve the text card over the bottom of the gallery, matching single-zoo.php's
   mobile gallery/page overlap. Same breakpoint and the same 100vw bleed trick as
   css/single-zoo.css's ".swiper" rule, so the card lines up with the image bleed
   instead of stacking with it. */
@media (max-width: 768px) {
	.rz1-hero-text {
		position: relative;
		z-index: 2;
		background: #fff;
		border-radius: 20px 20px 0 0;
		margin-top: -20px;
		width: 100vw !important; /* the base .rz1-hero-text rule above sets width:100% !important */
		margin-left: calc(-50vw + 50%);
		padding: 20px 16px 0;
	}

	.rz1-hero-text .rz1-lead {
		margin-top: 20px; /* space above the pull-quote box, separating it from the rarity badge */
	}
}

@media (max-width: 640px) {
	.rz1-title { font-size: 1.55rem; }
	.rz1-container { padding: 20px 14px 48px; }

	.rz1-title-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.rz1-zoo-name { font-size: 1.4rem; }
}

/* ── "See the Animals" tab ──────────────────────────────
   Desktop (>768px): a simple pill button centred on the gallery's bottom
   edge — half sitting inside the photo, half below it. No hover mechanic.
   Mobile (≤768px): .rz1-side-tab-flyin (outer) holds the position + one-time
   entrance animation; .rz1-side-tab-wrap (inner) handles the collapse/expand
   toggle — kept on separate elements so the two transforms never fight. */

.rz1-side-tab-wrap {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 30;
	display: flex;
	align-items: stretch;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid #111;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	transform: translate(-50%, 50%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Desktop reveals via hover, not a manual toggle — hide the button. */
.rz1-side-tab-toggle { display: none; }

.rz1-side-tab {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 18px 13px 16px;
	color: #111;
	text-decoration: none;
	white-space: nowrap;
}

.rz1-side-tab-icon {
	flex: 0 0 auto;
	font-size: 1.05rem;
}

.rz1-side-tab-text {
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.rz1-side-tab-wrap:hover,
	.rz1-side-tab-wrap:focus-within {
		transform: translate(-50%, 50%) translateY(-2px);
		box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
	}
}

/* Mobile: anchor to the photo's own top-right corner and fly in once, shortly
   after the page loads. White/black instead of the green gradient — a
   deliberate contrast to the CTA pill further down. */
@media (max-width: 768px) {
	.rz1-side-tab-flyin {
		position: absolute;
		top: 5px;
		right: -10px;
		z-index: 20; /* above the gallery's own overlays (Gallery badge, pagination) */
		opacity: 0;
		animation: rz1SideTabFlyIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
	}

	.rz1-side-tab-wrap {
		position: static;
		border-radius: 999px;
		background: #fff;
		border: 1.5px solid #111;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
		transform: none;
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* Collapsed: slide right so only the toggle + paw icon peek out, the text
	   goes past the image's edge — clipped by .rz1-container's overflow-x:
	   hidden, which the 100vw-bleed gallery already touches. */
	.rz1-side-tab-wrap--collapsed {
		transform: translateX(calc(100% - 62px));
	}

	.rz1-side-tab-wrap--collapsed .rz1-side-tab-text {
		opacity: 0;
	}

	.rz1-side-tab-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 30px;
		background: transparent;
		border: none;
		border-right: 1px solid #eee;
		color: #111;
		font-size: 0.85rem;
		cursor: pointer;
		padding: 0;
	}

	.rz1-side-tab-toggle .rz1-toggle-icon-open { display: none; }
	.rz1-side-tab-wrap--collapsed .rz1-side-tab-toggle .rz1-toggle-icon-close { display: none; }
	.rz1-side-tab-wrap--collapsed .rz1-side-tab-toggle .rz1-toggle-icon-open { display: inline-block; }

	.rz1-side-tab { padding: 4px 8px; color: #111; }
	.rz1-side-tab-icon { color: #111; }
}

@keyframes rz1SideTabFlyIn {
	from {
		opacity: 0;
		transform: translate(24px, -14px) scale(0.85);
	}
	to {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
}