/* ==========================================================================
   iSkills — APK template sections (Hero + App information)
   Everything is scoped to .isk-apk so the Menu / Tools templates are unaffected.
   ========================================================================== */

.isk-apk {
	--isk-red: #EF1B2D;
	--isk-red-bright: #FF3D4E;
	--isk-red-deep: #8F0A16;
	--isk-red-glow: rgba(239, 27, 45, .35);

	--isk-bg: #0A0A0C;
	--isk-bg-alt: #0E0E12;
	--isk-surface: #141419;
	--isk-surface-2: #1B1B22;
	--isk-line: rgba(255, 255, 255, .08);
	--isk-line-strong: rgba(255, 255, 255, .14);

	--isk-text: #F4F4F6;
	--isk-text-soft: #A8A8B3;
	--isk-text-dim: #6E6E7A;

	--isk-good: #22C55E;
	--isk-good-bg: rgba(34, 197, 94, .10);
	--isk-warn: #F59E0B;

	--isk-r-md: 16px;
	--isk-r-lg: 22px;
	--isk-pad-section: clamp(64px, 8vw, 120px);
	--isk-gap: clamp(20px, 2.4vw, 32px);

	--isk-font-display: 'Sora', system-ui, sans-serif;
	--isk-font-body: 'Manrope', system-ui, sans-serif;

	/* Icons (used as CSS masks, coloured with background-color). */
	--isk-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	--isk-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
	--isk-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
	--isk-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3C/svg%3E");
	--isk-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01' stroke-linecap='round'/%3E%3C/svg%3E");

	position: relative;
	overflow: hidden;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-block: var(--isk-pad-section);
	background: var(--isk-bg);
	color: var(--isk-text);
	font-family: var(--isk-font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Resets inside the sections (beat Kadence content defaults) ---------- */
.isk-apk *,
.isk-apk *::before,
.isk-apk *::after { box-sizing: border-box; }

.isk-apk h1,
.isk-apk h2,
.isk-apk h3 {
	margin: 0;
	color: var(--isk-text);
	font-family: var(--isk-font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}
.isk-apk p { margin: 0 0 1.1em; color: var(--isk-text-soft); }
.isk-apk p:last-child { margin-bottom: 0; }
.isk-apk strong { color: var(--isk-text); font-weight: 600; }
.isk-apk ul { margin: 0; padding: 0; list-style: none; }
.isk-apk li { margin: 0; }
.isk-apk .wp-block-columns { margin: 0; }
.isk-apk .wp-block-group { margin-top: 0; margin-bottom: 0; }

.isk-apk .isk-wrap {
	position: relative;
	z-index: 1;
	width: min(100% - 40px, 1200px);
	max-width: none;
	margin-inline: auto !important;
}

/* ---------- Shared icon helper ---------- */
.isk-apk .isk-chips li::before,
.isk-apk .isk-trust li::before,
.isk-apk .isk-checks li::before,
.isk-apk .isk-btn .wp-block-button__link::before {
	content: "";
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--isk-icon, var(--isk-i-check)) center / contain no-repeat;
	mask: var(--isk-icon, var(--isk-i-check)) center / contain no-repeat;
}

/* ---------- Buttons ---------- */
.isk-apk .wp-block-buttons { gap: 14px; margin: 0; }
.isk-apk .isk-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 30px;
	border: 1px solid transparent;
	border-radius: 100px;
	font-family: var(--isk-font-display);
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.isk-apk .isk-btn .wp-block-button__link::before { width: 19px; height: 19px; }
.isk-apk .isk-btn--download { --isk-icon: var(--isk-i-download); }
.isk-apk .isk-btn--info { --isk-icon: var(--isk-i-info); }

.isk-apk .isk-btn--primary .wp-block-button__link {
	background: linear-gradient(135deg, var(--isk-red-bright), var(--isk-red) 55%, var(--isk-red-deep));
	color: #fff;
	box-shadow: 0 10px 30px -8px var(--isk-red-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.isk-apk .isk-btn--primary .wp-block-button__link:hover,
.isk-apk .isk-btn--primary .wp-block-button__link:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -10px var(--isk-red-glow), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.isk-apk .isk-btn--ghost .wp-block-button__link {
	background: rgba(255, 255, 255, .04);
	border-color: var(--isk-line-strong);
	color: var(--isk-text);
}
.isk-apk .isk-btn--ghost .wp-block-button__link:hover,
.isk-apk .isk-btn--ghost .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, .08);
	color: var(--isk-text);
	transform: translateY(-2px);
}
.isk-apk .wp-block-button__width-100 { width: 100%; }
.isk-apk .wp-block-button__width-100 .wp-block-button__link { width: 100%; }
.isk-apk .wp-block-button__link:focus-visible { outline: 2px solid var(--isk-red-bright); outline-offset: 3px; }

/* ==========================================================================
   SECTION 1 — HERO
   ========================================================================== */
.isk-apk.isk-hero { padding-bottom: 0; padding-top: clamp(56px, 7vw, 96px); }

/* Red glow behind the hero */
.isk-apk.isk-hero::before {
	content: "";
	position: absolute;
	top: -260px;
	left: 50%;
	z-index: 0;
	width: 1100px;
	height: 760px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, var(--isk-red-glow), transparent 62%);
	opacity: .55;
	filter: blur(20px);
	pointer-events: none;
}

.isk-apk .isk-hero__grid { gap: clamp(30px, 5vw, 70px); }

.isk-apk .isk-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
	padding: 7px 14px 7px 8px;
	border: 1px solid rgba(239, 27, 45, .3);
	border-radius: 100px;
	background: rgba(239, 27, 45, .10);
	color: #FFB3B9;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.4;
}
.isk-apk .isk-badge strong {
	padding: 3px 11px;
	border-radius: 100px;
	background: var(--isk-red);
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .05em;
}

.isk-apk .isk-hero__title {
	font-size: clamp(2.1rem, 5vw, 3.7rem);
	font-weight: 800;
	letter-spacing: -.035em;
}
.isk-apk .isk-hero__title .isk-accent { display: block; color: var(--isk-red-bright); }

.isk-apk .isk-hero__sub { max-width: 52ch; margin-top: 22px; font-size: 1.1rem; }

/* Chips */
.isk-apk .isk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.isk-apk .isk-chips li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--isk-line);
	border-radius: 100px;
	background: rgba(255, 255, 255, .05);
	color: var(--isk-text-soft);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.4;
}
.isk-apk .isk-chips li::before { width: 14px; height: 14px; color: var(--isk-red-bright); }
.isk-apk .isk-chips .is-version { --isk-icon: var(--isk-i-plus); }
.isk-apk .isk-chips .is-size { --isk-icon: var(--isk-i-download); }
.isk-apk .isk-chips .is-device { --isk-icon: var(--isk-i-phone); }
.isk-apk .isk-chips .is-good { border-color: rgba(34, 197, 94, .3); background: var(--isk-good-bg); color: #86EFAC; }
.isk-apk .isk-chips .is-good::before { color: var(--isk-good); }

/* Rating */
.isk-apk .isk-rating { margin-bottom: 30px; font-size: .88rem; }
.isk-apk .isk-rating strong { font-family: var(--isk-font-display); }
.isk-apk .isk-stars {
	margin-right: 12px;
	font-size: 1.05rem;
	letter-spacing: 2px;
	background: linear-gradient(90deg, var(--isk-warn) 84%, rgba(245, 158, 11, .35) 84%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Trust row */
.isk-apk .isk-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; }
.isk-apk .isk-trust li { display: flex; align-items: center; gap: 8px; color: var(--isk-text-dim); font-size: .82rem; }
.isk-apk .isk-trust li::before { width: 16px; height: 16px; color: var(--isk-good); }

/* Phone mockup + floating download card */
.isk-apk .isk-hero__media { display: flex; justify-content: center; }
.isk-apk .isk-phone-stage { position: relative; width: fit-content; margin-inline: auto; }
.isk-apk .isk-phone { width: clamp(240px, 27vw, 300px); margin: 0; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .85)); }
.isk-apk .isk-phone img { display: block; width: 100%; height: auto; }

.isk-apk .isk-float-card {
	position: absolute;
	right: -70px;
	bottom: 60px;
	z-index: 2;
	width: 212px;
	padding: 16px;
	border: 1px solid var(--isk-line-strong);
	border-radius: var(--isk-r-md);
	background: rgba(20, 20, 25, .9);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85);
}
.isk-apk .isk-float-card::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 18px no-repeat,
		linear-gradient(140deg, var(--isk-red-bright), var(--isk-red-deep));
}
.isk-apk .isk-float-card p { line-height: 1.35; }
.isk-apk .isk-fc-name { margin: 0 0 2px 51px; color: var(--isk-text); font-family: var(--isk-font-display); font-size: .88rem; font-weight: 700; }
.isk-apk .isk-fc-ver { margin: 0 0 13px 51px; color: var(--isk-text-dim); font-size: .72rem; }
.isk-apk .isk-fc-meta {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding-top: 13px;
	color: var(--isk-text-dim);
	font-size: .7rem;
	font-weight: 600;
}
.isk-apk .isk-fc-meta strong { color: var(--isk-red-bright); font-weight: 700; }
.isk-apk .isk-fc-meta::before,
.isk-apk .isk-fc-meta::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 5px;
	border-radius: 100px;
}
.isk-apk .isk-fc-meta::before { right: 0; background: rgba(255, 255, 255, .08); }
.isk-apk .isk-fc-meta::after { width: 78%; background: linear-gradient(90deg, var(--isk-red-bright), var(--isk-red)); }

/* Stats strip */
.isk-apk .isk-stats-band {
	margin-top: clamp(56px, 7vw, 90px);
	padding-block: clamp(34px, 4vw, 48px);
	border-block: 1px solid var(--isk-line);
	background: var(--isk-bg-alt);
}
.isk-apk .isk-stats { gap: var(--isk-gap); }
.isk-apk .isk-stats .wp-block-column { text-align: center; }
.isk-apk .isk-stat__num {
	margin: 0;
	background: linear-gradient(180deg, #fff, #9A9AA6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--isk-font-display);
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.2;
}
.isk-apk .isk-stat__label {
	margin: 4px 0 0;
	color: var(--isk-text-dim);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ==========================================================================
   SECTION 2 — APP INFORMATION
   ========================================================================== */
.isk-apk.isk-info::before { /* hairline top border */
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--isk-line-strong) 20%, var(--isk-line-strong) 80%, transparent);
}

.isk-apk .isk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 16px;
	color: var(--isk-red-bright);
	font-family: var(--isk-font-display);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.4;
	text-transform: uppercase;
}
.isk-apk .isk-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--isk-red); }

.isk-apk .isk-h2 { max-width: 760px; font-size: clamp(1.75rem, 3.6vw, 2.75rem); letter-spacing: -.03em; }
.isk-apk .isk-lede { max-width: 760px; margin: 16px 0 clamp(36px, 4vw, 60px); font-size: 1.06rem; }

.isk-apk .isk-info__grid { align-items: flex-start; gap: var(--isk-gap); }

/* Spec table */
.isk-apk .isk-spec {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--isk-line);
	border-radius: var(--isk-r-lg);
}
.isk-apk .isk-spec table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.isk-apk .isk-spec td {
	padding: 15px 24px;
	border: 0;
	border-bottom: 1px solid var(--isk-line);
	background: transparent;
	color: var(--isk-text);
	font-size: .97rem;
	font-weight: 600;
	line-height: 1.5;
	vertical-align: middle;
}
.isk-apk .isk-spec tr:last-child td { border-bottom: 0; }
.isk-apk .isk-spec tr:nth-child(odd) td { background: rgba(255, 255, 255, .017); }
.isk-apk .isk-spec td:first-child {
	width: 200px;
	color: var(--isk-text-dim);
	font-size: .83rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.isk-apk .isk-spec strong { color: var(--isk-red-bright); font-family: var(--isk-font-display); }
.isk-apk .isk-spec code {
	padding: 0;
	background: none;
	color: var(--isk-text-soft);
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: .9rem;
}

/* Unlock / download card */
.isk-apk .isk-unlock-card {
	padding: 28px;
	border: 1px solid rgba(239, 27, 45, .24);
	border-radius: var(--isk-r-lg);
	background: linear-gradient(170deg, rgba(239, 27, 45, .1), var(--isk-surface) 45%);
	scroll-margin-top: 110px;
}
.isk-apk .isk-unlock-card h3 { margin-bottom: 6px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.isk-apk .isk-sm { margin-bottom: 20px; color: var(--isk-text-dim); font-size: .85rem; }
.isk-apk .isk-checks { display: grid; gap: 12px; margin-bottom: 24px; }
.isk-apk .isk-checks li { display: flex; align-items: flex-start; gap: 11px; color: var(--isk-text-soft); font-size: .93rem; line-height: 1.55; }
.isk-apk .isk-checks li::before { width: 18px; height: 18px; margin-top: 2px; color: var(--isk-good); }

/* ==========================================================================
   RESPONSIVE — Kadence breakpoints: 1024 (tablet) / 767 (mobile)
   ========================================================================== */
@media (max-width: 1024px) {
	.isk-apk .isk-hero__grid,
	.isk-apk .isk-info__grid { flex-wrap: wrap !important; }
	.isk-apk .isk-hero__grid > .wp-block-column,
	.isk-apk .isk-info__grid > .wp-block-column { flex-basis: 100% !important; }
	.isk-apk .isk-hero__media { margin-top: 20px; }
	.isk-apk .isk-float-card { right: -40px; }
	.isk-apk .isk-stats { flex-wrap: wrap !important; }
	.isk-apk .isk-stats > .wp-block-column { flex-basis: calc(50% - var(--isk-gap)) !important; flex-grow: 1; }
}

@media (max-width: 767px) {
	.isk-apk { font-size: 16px; }
	.isk-apk .isk-actions .wp-block-button,
	.isk-apk .isk-actions .wp-block-button__link { width: 100%; }
	.isk-apk .isk-float-card { right: -12px; bottom: 40px; width: 190px; }
	.isk-apk .isk-spec td { display: block; width: 100%; padding: 2px 18px 14px; border-bottom: 1px solid var(--isk-line); }
	.isk-apk .isk-spec td:first-child { width: 100%; padding: 14px 18px 0; border-bottom: 0; }
	.isk-apk .isk-spec tr:last-child td:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.isk-apk .isk-btn .wp-block-button__link { transition: none; }
	.isk-apk .isk-btn .wp-block-button__link:hover { transform: none; }
}

/* ==========================================================================
   Site-wide dark base — only when the APK template is the imported demo
   (body class added in inc/apk.php).
   ========================================================================== */
body.iskills-demo-apk {
	--global-body-font-family: 'Manrope', system-ui, sans-serif;
	--global-heading-font-family: 'Sora', system-ui, sans-serif;
	background: #0A0A0C;
}