/*
 * Product (Tour) page styles (page-product.php).
 * Converted from design-source/Marketing Mockups/Product (Tour).dc.html.
 * The inline styles in the template are the desktop spec; this file carries the
 * hover states (converted from style-hover) and the four-tier responsive layer
 * (rsp-* class hooks + the @media block), ported verbatim from the design's
 * <helmet>. The fixed-canvas mockups scale via the theme's global
 * .mk-scroll/.mk-fit-box/.mk-fit system (site.css + site.js), so this file does
 * not carry a second scaler.
 */

/* Anchor offset for the floating nav (the design's section[id] rule). */
.atarim-page section[id] { scroll-margin-top: 96px; }

/* ===== Hover states (converted from style-hover) ===== */
.pt-btn-mint { transition: background .16s ease; }
.pt-btn-mint:hover { background: #35c98a; }
.pt-btn-outline { transition: border-color .16s ease, color .16s ease; }
.pt-btn-outline:hover { border-color: #6D5DF3; color: #6D5DF3; }
.pt-btn-ghost-dark { transition: border-color .16s ease, color .16s ease; }
.pt-btn-ghost-dark:hover { border-color: #9385FF; color: #9385FF; }
.pt-cta { transition: background .16s ease, transform .16s ease; }
.pt-cta:hover { background: #35c98a; transform: translateY(-2px); }
/* The station CTAs under the 838px mockup frames overlap the frame's empty
 * lower band on desktop (inline margin-top:-100px, z-index:5 so the button
 * stays clickable over the embed). Once the mockup is scaled below 1280 that
 * band shrinks with it, so the button returns to sitting under the embed. */
@media (max-width: 1279px) { .pt-cta-tight { margin-top: 18px !important; } }
.pt-inboxlink { transition: color .16s ease; }
.pt-inboxlink:hover { color: #16042E; }
.pt-intcard { transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.pt-intcard:hover { border-color: rgba(109,93,243,0.45); transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(22,4,46,0.45); }
.pt-morecard { transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.pt-morecard:hover { border-color: #6D5DF3; background: rgba(109,93,243,0.06); transform: translateY(-4px); }
.pt-deepdive { transition: border-color .16s ease, transform .16s ease; }
.pt-deepdive:hover { border-color: rgba(109,93,243,0.45); transform: translateY(-3px); }

/* ============================================================
 * RESPONSIVE LAYER (Product Tour). Ported verbatim from the design's <helmet>
 * @media block. Desktop >=1280px is the inline spec and untouched. The page
 * shell min-width is released by the global .atarim-page rule in site.css.
 * Breakpoints: 1279 / 1023 / 767 / 479.
 * ============================================================ */
/* ===== ROUND 6 (Sep 2026) ===================================== */

/* The chain diagram's specialist chips: a hover card naming the mandate.
 * CSS-only, as the design ships it. Also opens on keyboard focus, which is
 * why the chip carries tabindex. */
.ai-chip {
	cursor: default;
	transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.ai-chip:hover,
.ai-chip:focus-visible {
	background: color-mix(in srgb, var(--h) 22%, transparent);
	border-color: var(--h);
	box-shadow: 0 12px 30px -14px var(--h);
	outline: none;
}
.ai-chip img { transition: transform .3s cubic-bezier(.22, .61, .21, 1); }
.ai-chip:hover img,
.ai-chip:focus-visible img { transform: translateY(-2px) scale(1.06); }

.ai-tip {
	position: absolute; bottom: calc(100% + 12px); left: 50%;
	width: 176px; margin-left: -88px; padding: 9px 12px;
	border-radius: 12px; background: #fff; color: #574a6e;
	font-size: 11.5px; line-height: 1.45; text-align: left; text-wrap: pretty;
	box-shadow: 0 18px 38px -14px rgba(9, 2, 20, 0.7);
	opacity: 0; transform: translateY(6px); pointer-events: none;
	transition: opacity .22s ease, transform .28s cubic-bezier(.22, .61, .21, 1);
}
.ai-tip strong { display: block; font-size: 12px; font-weight: 700; color: #16042E; margin-bottom: 2px; }
.ai-chip:hover .ai-tip,
.ai-chip:focus-visible .ai-tip { opacity: 1; transform: none; }

/* Station 01's Primary goal block: the one sanctioned serif emphasis on the
 * page, called out in the round-6 bundle. */
.pt-goal {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16.5px; line-height: 1.5; color: #16042E; text-wrap: pretty;
}

/* "And it knows WordPress itself": the plugin-skill grid. */
.pt-wpcard { transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.pt-wpcard:hover {
	border-color: rgba(109, 93, 243, 0.45);
	transform: translateY(-3px);
	box-shadow: 0 18px 36px -24px rgba(22, 4, 46, 0.45);
}
.pt-wpmore { transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.pt-wpmore:hover { border-color: #6D5DF3; background: rgba(109, 93, 243, 0.06); transform: translateY(-3px); }
.pt-mcppill { transition: border-color .16s ease, background .16s ease; }
.pt-mcppill:hover { border-color: rgba(109, 93, 243, 0.45); background: rgba(109, 93, 243, 0.08); }
.pt-vote { transition: border-color .16s ease, background .16s ease; }
.pt-vote:hover { border-color: #6D5DF3; background: rgba(109, 93, 243, 0.06); }

@media (max-width: 1279px) {
	.rsp-wpgrid { grid-template-columns: repeat(6, 1fr) !important; }
	.rsp-hero { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-sec { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 1023px) {
	.rsp-hero { padding-left: 24px !important; padding-right: 24px !important; padding-top: 150px !important; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-2col { grid-template-columns: 1fr !important; gap: 40px !important; }
	.rsp-2col > .rsp-visual { order: 2 !important; }
	.rsp-tiles3 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-agents { grid-template-columns: repeat(3, 1fr) !important; }
	.rsp-intgrid { grid-template-columns: repeat(4, 1fr) !important; }
	.rsp-wpgrid { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (max-width: 767px) {
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 120px !important; padding-bottom: 56px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
	.rsp-tiles3 { grid-template-columns: 1fr !important; }
	.rsp-agents { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-intgrid { grid-template-columns: repeat(3, 1fr) !important; }
	.rsp-wpgrid { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Responsive sweep (Sep 2026). A stacked `1fr` track still grows to its
 * content's min width, and the pillars diagram's chip rows (six agents, then
 * the site platforms) held it at ~445px on a 375 phone, running off-screen.
 * minmax(0,1fr) lets the column shrink; the chip rows wrap three to a line. */
@media (max-width: 1023px) {
	.rsp-2col { grid-template-columns: minmax(0, 1fr) !important; }
	.rsp-2col > * { min-width: 0; }
}
@media (max-width: 767px) {
	.pt-wraprow { flex-wrap: wrap !important; }
	.pt-wraprow > * { flex: 1 1 calc(33.333% - 6px) !important; min-width: 0; }
}
@media (max-width: 479px) {
	.rsp-intgrid { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-wpgrid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Responsive sweep, pass 2: two specialist cards per row left each role label
 * 48px on a 360 phone ("management" could not fit), so small phones go to one. */
@media (max-width: 479px) {
	.rsp-agents { grid-template-columns: minmax(0, 1fr) !important; }
}