/* Series Tracker links (Plan 4c-1): the explainer page (/tracker/) and the cards on book/series pages. */

/* ── Essence Pro, /tracker/ only (body.prb-tracker-essence, added by prb_tracker_render_page()) ──
 * Swap the theme's tall cover-wall header hero for the site header on a solid brand-blue background,
 * so our own brand band sits directly under the logo and menu. Same neutralisation the plugin already
 * uses for its themed pages — css/themes/home.css (body.prb-header-band-page / body.prb-themed-page)
 * and css/themes/bookthemes-base.css (body.prb-themed) — except the site header itself stays visible.
 * Essence sets the cover wall as an inline `.header-hero { background-image: … }`, pads the hero's
 * bottom by 14vw, pulls .site-inner up by -50px (-5% and 90% wide on phones) to overlap it, and
 * paints a divider in .site-inner::before. */
body.prb-tracker-essence .header-hero { background-image: none !important; background-color: #00659e !important; padding-bottom: 0 !important; }
body.prb-tracker-essence .hero-page-title,
body.prb-tracker-essence .breadcrumb { display: none !important; }
body.prb-tracker-essence .site-inner::before,
body.prb-tracker-essence .site-inner::after { content: none !important; display: none !important; }
body.prb-tracker-essence .site-inner,
body.prb-tracker-essence #content-sidebar-wrap,
body.prb-tracker-essence .content {
	max-width: 100% !important; width: 100% !important; float: none !important;
	margin: 0 !important; padding: 0 !important;
	background: transparent !important; box-shadow: none !important;
}

/* ── The page ──
 * Layout switches on the page's OWN width (a container query), not the viewport: on Essence the page
 * is full width, so this is the "computer ≥ 900px" layout; on a theme that boxes the content into a
 * narrow column it sensibly stays single-column. Browsers without container queries get the phone
 * layout everywhere. */
.prb-tracker-page { container: prb-tracker / inline-size; font-size: 18px; line-height: 1.5; color: #1f2d3a; }

/* Brand band: title, opening line, button (and on a computer, the screenshots + QR). */
.prb-tracker-band { background: linear-gradient(180deg, #00659e 0%, #008ad1 100%); color: #fff; border-radius: 28px; padding: 24px 20px 28px; }
/* On Essence the band continues the brand-blue header, so only its bottom corners are rounded. */
.prb-tracker-essence .prb-tracker-band { border-radius: 0 0 28px 28px; }
.prb-tracker-band__inner { max-width: 1100px; margin: 0 auto; }
.prb-tracker-band .prb-tracker-band__title { color: #fff; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.3px; margin: 0 0 10px; }
.prb-tracker-band .prb-tracker-band__lead { color: #fff; font-size: 19px; line-height: 1.45; margin: 0 0 20px; }
.prb-tracker-band__side { display: none; }

/* Screenshot fan (computer only): three phones, the middle one raised and in front. */
.prb-tracker-band__shots { --prb-shot: 124px; display: flex; align-items: flex-end; padding: 8px 0; }
.prb-tracker-band__shots img { width: var(--prb-shot); height: auto; flex: none; border-radius: 14px; box-shadow: 0 10px 24px rgba(0, 30, 55, 0.35); }
.prb-tracker-band__shots img + img { margin-left: calc(var(--prb-shot) * -0.28); }
.prb-tracker-band__shots img:nth-child(1) { transform: rotate(-6deg) translateY(8px); }
.prb-tracker-band__shots img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-8px); }
.prb-tracker-band__shots img:nth-child(3) { transform: rotate(6deg) translateY(8px); }

/* QR card (computer with a mouse only — never on phones). */
.prb-tracker-page__qr { display: none; width: 150px; flex: none; padding: 12px; border-radius: 16px; background: #fff; color: #1f2d3a; text-align: center; }
.prb-tracker-page__qr p { font-size: 15px; line-height: 1.3; margin: 0 0 6px; }
.prb-tracker-page__qr div { width: 126px; margin: 0 auto; }

/* Below the band. */
.prb-tracker-page__body { max-width: 760px; margin: 0 auto; padding: 28px 20px 48px; }
.prb-tracker-page .prb-tracker-page__heading { color: #1f2d3a; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.3px; margin: 0 0 16px; }
.prb-tracker-page__benefits { list-style: none; margin: 0 0 24px; padding: 0; }
.prb-tracker-page__benefits li { display: flex; gap: 12px; align-items: flex-start; list-style: none; margin: 0 0 16px; padding: 0; font-size: 18px; line-height: 1.5; }
.prb-tracker-page__tick { flex: none; margin-top: 1px; }
.prb-tracker-page__benefits strong { color: #00659e; font-weight: 700; }

/* Screenshots as a row that scrolls inside itself (phones; a computer sees them in the band). The
 * -20px side margins cancel the body's padding so the row runs edge to edge without page scroll. */
.prb-tracker-page__shots { display: flex; gap: 14px; overflow-x: auto; margin: 4px -20px 20px; padding: 6px 20px 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.prb-tracker-page__shots img { width: 200px; height: auto; flex: none; border-radius: 16px; box-shadow: 0 6px 18px rgba(13, 53, 83, 0.2); scroll-snap-align: start; }

.prb-tracker-page__small { font-size: 17px; line-height: 1.5; color: #4a5560; margin: 0 0 20px; }
.prb-tracker-page__cta { margin: 0; }

/* Buttons. The base style is shared with the book/series cards below. */
.prb-tracker-button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: #008ad1; color: #fff !important; font-weight: 700; font-size: 18px; text-decoration: none; }
.prb-tracker-button:hover, .prb-tracker-button:focus { background: #00659e; }
.prb-tracker-page .prb-tracker-button:focus-visible { outline: 3px solid #00659e; outline-offset: 3px; }
.prb-tracker-button--light { display: flex; justify-content: center; width: 100%; max-width: 380px; box-sizing: border-box; min-height: 54px; padding: 0 28px; background: #fff; color: #00659e !important; font-size: 19px; box-shadow: 0 6px 16px rgba(0, 40, 70, 0.25); }
.prb-tracker-button--light:hover, .prb-tracker-button--light:focus { background: #eef8fd; }
.prb-tracker-page .prb-tracker-button--light:focus-visible { outline-color: #fff; }
.prb-tracker-page__cta .prb-tracker-button { min-height: 52px; padding: 0 28px; }

/* Computer layout: two-column band (text + button | screenshots + QR); the phone screenshot row hides. */
@container prb-tracker (min-width: 860px) {
	.prb-tracker-band { padding: 44px 40px 48px; }
	.prb-tracker-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
	.prb-tracker-band .prb-tracker-band__title { font-size: 44px; }
	.prb-tracker-band .prb-tracker-band__lead { font-size: 22px; margin-bottom: 26px; }
	.prb-tracker-button--light { display: inline-flex; width: auto; }
	.prb-tracker-band__side { display: flex; align-items: center; gap: 28px; }
	.prb-tracker-page__shots { display: none; }
	.prb-tracker-page__body { padding-top: 40px; }
}
@container prb-tracker (min-width: 860px) and (max-width: 1040px) {
	.prb-tracker-band__shots { --prb-shot: 100px; }
	.prb-tracker-band .prb-tracker-band__title { font-size: 38px; }
}
@media (hover: hover) {
	@container prb-tracker (min-width: 860px) { .prb-tracker-page__qr { display: block; } }
}

/* Cards on book and series pages. */
.prb-tracker-card { margin: 20px 0; padding: 16px 18px; border-radius: 14px; background: #eef8fd; border: 1px solid #93d5f6; font-size: 17px; }
.prb-tracker-card p { margin: 0 0 12px; }