/*
 * JHT v0.3.0: phone and tablet layer (mobile review items 1–16).
 * Every rule sits inside @media (max-width: 950px) or narrower, so desktop rendering is unchanged.
 * Classes starting with "m-" are added by assets/wp/mobile.js, only on small screens.
 */

/* Desktop safety net: anything mobile.js injects stays hidden above 950px. */
@media (min-width: 951px) {
	.m-only { display: none !important; }
}
.m-see-all, .m-show-all, .m-more { display: none; }

@media (max-width: 950px) {
	/* #1: lighter hero art (same image, recompressed) and small copies of post-hero images. */
	.hs-stars .hs-in,
	.journey-bg > div:first-child[style*="hero-sky"] { background-image: url(img/hero-sky-m.webp) !important; }
	.lp-hero:before { background-image: radial-gradient(ellipse 55% 85% at 88% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), radial-gradient(ellipse 40% 60% at 0% 100%, #0a2a3a80, transparent), url(img/hero-sky-m.webp); }
	.pg-hero:before { background-image: radial-gradient(ellipse 60% 90% at 85% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(ellipse 40% 60% at 0% 100%, #0a2a3a80, transparent), url(img/hero-sky-m.webp); }
	.svc-hero { background-image: radial-gradient(ellipse 60% 80% at 85% 10%, color-mix(in srgb, var(--svc-primary) 16%, transparent), transparent 70%), linear-gradient(#030e15cc, #030e15), url(img/hero-sky-m.webp); }
	.hn-hero { background-image: linear-gradient(180deg, #02070ccc, #02070c), url(img/hero-sky-m.webp); }
	.post-hero-bg[style*="--bg-m"] { background-image: var(--bg-m) !important; }
	.training-art[style*="--art-m"] { background-image: var(--art-m) !important; }

	/* #5: menu = full-height opaque sheet with 48px rows; 44px burger and chevrons. */
	#menu { width: 44px !important; height: 44px !important; }
	#site-nav { top: 79px; height: calc(100vh - 80px); height: calc(100dvh - 80px); max-height: none; overflow-y: auto; overscroll-behavior: contain; background: #04141e; padding: 12px 5% 40px; justify-content: flex-start; gap: 0; }
	#site-nav.open { background: #04141e; backdrop-filter: none; -webkit-backdrop-filter: none; max-height: none; }
	html.m-nav-open .catalog-tab { display: none !important; }
	#site-nav .menu { width: 100%; }
	#site-nav .menu > li > a, #site-nav .menu > li > .sub-label { min-height: 48px; display: flex; align-items: center; }
	#site-nav .menu > li.has-sub { position: relative; }
	#site-nav .sub-toggle { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; display: inline-grid !important; place-items: center; }
	#site-nav .sub a, #site-nav .mm-links a { min-height: 44px; display: flex !important; align-items: center; }
	#site-nav .m-all { font-weight: 700; color: var(--accent, #65ceff) !important; }
	html.m-nav-open, html.m-nav-open body { overflow: hidden !important; overscroll-behavior: none; }

	/* #12: compact header that hides while scrolling down. */
	header { transition: transform .25s ease; will-change: transform; }
	html.m-hdr-hide header { transform: translateY(-100%); }
	html.m-hdr-hide .topic-nav { top: 0 !important; }
	.topic-nav { transition: top .25s ease; }

	/* #6: tap targets (44px) without moving the layout. */
	.hs-toggle { width: 44px; height: 44px; }
	.hc-body a.card-link, .crumbs a, a.ann-cta, .rm a.ann-cta, .o-posts-grid-post-category a, .o-posts-grid-post-meta a { padding-block: 12px; margin-block: -12px; }
	.cat-pill { padding-block: 12px; margin-block: -5px; }
	#deck-dots .dot, .dots .dot { position: relative; }
	#deck-dots .dot:before, .dots .dot:before { content: ""; position: absolute; inset: -20px -8px; }
	.t-dots .dot { overflow: visible; }
	.t-dots .dot:before { content: ""; position: absolute; inset: -20px -4px; }
	.t-dots .dot i { border-radius: 3px; overflow: hidden; }
	.share a, .share button { width: 44px !important; height: 44px !important; }
	details.toc > summary { padding-block: 13px; }
	details.toc li > a, .toc li > a { min-height: 44px; display: flex; align-items: center; }
	.big-search input, form.big-search input, .pg-search input { min-height: 44px; }
	.big-search .button { min-height: 44px; }
	.fchips a, .fchips button, .seg a, .seg button { min-height: 44px; display: inline-flex; align-items: center; }
	select.sel, .jht-sort select { min-height: 44px; }
	.pager a, .pager span, .page-numbers { min-width: 44px; min-height: 44px; }
	.merch-buy .button { min-height: 44px; }
	.t-prev, .t-next, .lr-prev, .lr-next { min-width: 44px; min-height: 44px; }
	footer .social a, #social-links .social a { width: 44px !important; height: 44px !important; }
	footer .footer-grid > div > a:not(.social a) { display: flex; align-items: center; min-height: 44px; margin: 0 !important; padding: 0 !important; font-size: 15px; line-height: 1.25; }
	.topic-nav a { min-height: 44px; }
	.post-tags a, .tags a { padding-block: 12px; margin-block: -6px; }
	/* 0.3.39: tag pills have 6px padding (post.css), so the -6px margin above only pulled wrapped rows into each other (rows overlapped by 4-5px). Tags box and end-of-article row only. */
	.tags-panel .tags .chip, .post-foot .tags .chip { margin-block: 0; }

	/* #7: room under the footer for the floating Catalog button; the button hides while the footer is visible. */
	body:has(.catalog-tab) footer#site-footer { padding-bottom: 84px; }
	.catalog-tab { transition: opacity .2s, visibility .2s; }
	html.m-foot .catalog-tab { opacity: 0; visibility: hidden; pointer-events: none; }

	/* #9: Latest Releases + chip rows: snap, edge fades, dots. */
	.lr-row { scroll-padding-inline: 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
	.lr-row.m-end { -webkit-mask-image: none; mask-image: none; }
	.lr-row > * { scroll-snap-align: start; }
	.lr-tabs, .fchips, .cat-chips, .topic-nav .wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
	.lr-tabs.m-end, .fchips.m-end, .cat-chips.m-end, .topic-nav .wrap.m-end { -webkit-mask-image: none; mask-image: none; }
	.fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
	.fchips > * { flex: none; scroll-snap-align: start; }
	.m-dots { display: flex; justify-content: center; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
	.m-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff30; transition: background .2s, width .2s; }
	.m-dots i.on { width: 16px; border-radius: 3px; background: var(--cyan, #00f5ff); }

	/* #11: text minimums on phones and tablets. */
	.eyebrow, .lr-cat, .hc-tag { font-size: 12px; letter-spacing: .12em; }
	.pc-cat, .ex-cat { font-size: 12px; }
	.pc-m, .lr-d, .cpe, em.jb-price, .jb-price, .jb-nyp, .ex-m, .lr-cpe, .tc-cpe { font-size: 13px; }
	.pc-ex, .lr-ex, .ex-ex { font-size: 14px; }
	.fchips button small, .fchips a small { font-size: 12px; }
	.post-tags a, .tags a { font-size: 13px; }

	/* #15: catalog drawer. */
	.cat-x { width: 44px !important; min-width: 44px; height: 44px; align-self: center; }
	.cat-chips button, .cat-seg button { min-height: 40px; }
	.cat-right select { min-height: 44px; }
	.cat-top, .cat-filters { position: sticky; z-index: 2; background: #020d14; }
	.cat-top { top: 0; }

	/* #4: reserve the hero All-Stars faces before allstars.js fills them (was a 21px shift, CLS 0.09 on home). */
	.allstar-line .as-faces:empty { display: block; flex: none; width: 134px; height: 38px; }

	/* #16: contain wide decorative layers so body overflow-x:clip isn't load-bearing. */
	.testimonials, #lifeline { overflow: hidden; }
	.qm::before { inset: -40px 0; }
	.entry-content img, .post-body img, article figure img { max-width: 100%; height: auto; }
}

/* #8: All-Stars as a 2-row snap strip with "See all 40"; touch copy. Values as a snap row. */
@media (max-width: 650px) {
	#all-stars .nodes:not(.m-all-open) { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: 58px; gap: 22px 14px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 18px 4px 6px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
	#all-stars .nodes:not(.m-all-open)::-webkit-scrollbar { display: none; }
	#all-stars .nodes:not(.m-all-open) > * { scroll-snap-align: start; }
	#all-stars .nodes:not(.m-all-open) .node:before, #all-stars .nodes:not(.m-all-open) .node:after { display: none; }
	.m-see-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #00f5ff80; background: #03131ccc; color: #dff9ff; font: 700 14px/1 Inter, "Inter Fallback", Arial, sans-serif; }
	.value-grid.m-snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; padding-inline: 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
	.value-grid.m-snap > .value { flex: 0 0 62%; scroll-snap-align: start; }
	.value-grid.m-snap.m-end { -webkit-mask-image: none; mask-image: none; }

	/* #9: testimonials: swipeable, no ghost-card text bleeding at the edges. */
	.t-ring { touch-action: pan-y; }
	/* v0.3.6: the neighbouring cards peek out behind the centre card (like landscape), dimmed and softly blurred so their text does not compete. */
	.t-card { width: 74%; }
	.t-card:not(.center) { pointer-events: none !important; filter: brightness(.5) blur(2px) !important; }

	/* #10: lifeline only in the hero and the timeline (set by mobile.js); timeline steps readable. */
	#lifeline.m-ll { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--ll-a), rgba(0,0,0,.4) calc(var(--ll-a) + 140px), rgba(0,0,0,.4) calc(var(--ll-b) - 140px), #000 var(--ll-b), #000 var(--ll-c), rgba(0,0,0,.4) calc(var(--ll-c) + 140px)); mask-image: linear-gradient(180deg, #000 0, #000 var(--ll-a), rgba(0,0,0,.4) calc(var(--ll-a) + 140px), rgba(0,0,0,.4) calc(var(--ll-b) - 140px), #000 var(--ll-b), #000 var(--ll-c), rgba(0,0,0,.4) calc(var(--ll-c) + 140px)); }
	.tl-card { opacity: .8; }

	.allstar-line .as-faces:empty { width: 104px; height: 32px; }

	/* #12: 60px header with a 44px logo. */
	header { height: 60px !important; }
	header .logo { width: 44px !important; height: 44px !important; }
	.hs-form { top: 68px; }
	#site-nav { top: 59px; height: calc(100vh - 60px); height: calc(100dvh - 60px); }
	.topic-nav { top: 60px !important; }
	html.m-hdr-hide .topic-nav { top: 0 !important; }

	/* #13: /free/: 4 cards per topic, then "Show all N". */
	.lp-sec.path .grid:not(.m-open) > .pc:nth-child(n+5) { display: none; }
	.m-show-all { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 18px 0 0; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c, #65ceff) 55%, #1d3b4a); background: #03121bcc; color: #eaf6fb; font: 700 15px/1.2 Inter, "Inter Fallback", Arial, sans-serif; }

	/* #14: page tops. */
	.svc-logo { max-width: 170px; margin-bottom: 8px; }
	.svc-logo img { width: 100%; height: auto; }
	.svc-hero { padding-top: 34px; }
	.svc-hero h1 { font-size: clamp(28px, 8vw, 40px) !important; }
	.lost-grid { display: flex !important; flex-direction: column; }
	.lost-grid .lost-copy { order: 1; }
	.lost-grid .lost-art { order: 2; width: 60% !important; max-width: 220px; height: auto !important; aspect-ratio: 1; margin: 18px auto 0; }
	.pg-hero .pg-intro.m-clamp:not(.m-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
	.m-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent, #65ceff); font: 700 15px/1 Inter, "Inter Fallback", Arial, sans-serif; cursor: pointer; }
}

/* 0.3.3: Coming Soon cards as a compact swipeable strip on phones (homepage section + the /coming-soon/ archive).
   Same pattern as the All-Stars / Latest Releases strips: scroll-snap, right-edge fade (dropped at the end by mobile.js). */
@media (max-width: 650px) {
	.cs-grid, body.category-coming-soon #grid { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: none; padding: 2px 2px 10px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
	.cs-grid::-webkit-scrollbar, body.category-coming-soon #grid::-webkit-scrollbar { display: none; }
	.cs-grid.m-end, body.category-coming-soon #grid.m-end { -webkit-mask-image: none; mask-image: none; }
	/* compact card: small cover, title, type/date; blurb hidden; no per-card reveal (off-screen cards would wait for a swipe) */
	.cs-grid > .cs-card, body.category-coming-soon #grid > .pc { flex: 0 0 clamp(150px, 43vw, 180px); scroll-snap-align: start; border-radius: 14px; opacity: 1; transform: none; }
	.cs-cover .production-status { top: 6px; left: 6px; padding: 3px 7px; gap: 5px; font-size: 11px; }
	.cs-body { padding: 10px 11px 12px; }
	.cs-body h3 { margin: 0 0 6px; font-size: 14px; line-height: 1.25; }
	.cs-body p { display: none; }
	.cs-meta { display: block; font-size: 11px; letter-spacing: .05em; line-height: 1.3; }
	body.category-coming-soon #grid > .pc .pc-img { aspect-ratio: 16 / 9; }
	body.category-coming-soon #grid > .pc .pc-img em { top: 6px; right: 6px; padding: 4px 6px; font-size: 11px; }
	body.category-coming-soon #grid > .pc .pc-body { gap: 5px; padding: 10px 11px 12px; }
	body.category-coming-soon #grid > .pc .pc-cat { font-size: 11px; letter-spacing: .1em; gap: 5px; }
	body.category-coming-soon #grid > .pc .pc-t { font-size: 14px !important; line-height: 1.25; }
	body.category-coming-soon #grid > .pc .pc-ex { display: none; }
	body.category-coming-soon #grid > .pc .pc-m { font-size: 12px; padding-top: 2px; }
}

/* #8: touch devices get touch wording (the hover copy is swapped by mobile.js; this hides the hover hint styling). */
@media (hover: none) and (pointer: coarse) {
	.m-touch-copy { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
	header, .topic-nav, .catalog-tab { transition: none !important; }
}

/* 0.3.4: phones show only the Cybersecurity Shenanigans signup card (name + form); the copy, recent issues,
   archive link, "Powered by" line and the outer glass panel are hidden. Tablets/desktop unchanged. */
@media (max-width: 650px) {
	.newsletter { padding: 36px 0; }
	.newsletter .nl-copy, .newsletter .nl-embed > small { display: none; }
	.newsletter .nl-inner { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none !important; }
}

/* v0.3.5 (phones only, desktop untouched): (1) a gap between the hero card controls and the announcement so the whole
   Hackernaut shows; (2) the four value pillars as a 2 x 2 grid instead of a swipe strip. */
@media (max-width: 650px) {
	.hero .hero-baseline { margin-top: 235px; }
	.hs-astro .hs-in { bottom: 232px !important; }
	.value-grid.m-snap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; padding-inline: 0; }
	.value-grid.m-snap h3 { text-wrap: balance; }
	.value-grid.m-snap > .value { flex: none; min-width: 0; scroll-snap-align: none; }
}

/* v0.3.6 (phones only): the hero's bottom row flows down: announcement, then the social icons, then the roadmap button. */
@media (max-width: 650px) {
	.hero .hero-baseline { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
	.hero-social { display: block !important; }
	.hero .hero-baseline { padding-right: 20px; text-align: center; }
	.hero-ticker > *, .hero-ticker .ann { justify-content: center; }
	.hero-social .social { display: flex; flex-wrap: nowrap; justify-content: center; gap: 5px !important; max-width: 100%; }
	.hero-social .social a { flex: 0 1 36px; min-width: 0; width: auto !important; height: 36px !important; aspect-ratio: 1; }
	.hero-roadmap { display: flex !important; align-self: center; align-items: center; text-align: center; justify-self: auto; }
	.hero-roadmap span { display: block !important; }
}