/**
 * Tech Portal Layout — 1440 canonical column, unified gutters, fluid rhythm.
 *
 * @package NewTechPrice
 */

:root {
	/* Canonical content width — all views use .ntp-container */
	--ntp-main-container: 1440px;
	--ntp-container-max: var(--ntp-main-container);
	--ntp-container-wide: var(--ntp-main-container);
	/* Horizontal inset — matches master nav inner; 2rem on large desktop */
	--ntp-gutter: 1.5rem;
	/* Vertical rhythm — fluid section gaps */
	--ntp-section-gap: clamp(1.5rem, 1.35rem + 0.45vw, 2.5rem);
}

@media (min-width: 1024px) {
	:root {
		--ntp-gutter: 2rem;
	}
}

@media (min-width: 768px) {
	:root {
		--ntp-section-gap: clamp(1.65rem, 1.4rem + 0.55vw, 2.5rem);
	}
}

/**
 * Crisp type on high-DPI / mobile; fluid body from phone → 4K.
 */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-size-adjust: 100%;
}

body {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
	line-height: clamp(1.55rem, 1.45rem + 0.35vw, 1.7rem);
}

/**
 * Border-box is also applied by Tailwind Preflight (@tailwind base).
 * Repeated here so any non-Tailwind fragments stay consistent.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/**
 * Single shell class — header, footer, home, archives, singles, compare.
 * Max-width + gutters aligned to --ntp-gutter (no px-4/md:px-6 drift).
 */
.ntp-container {
	max-width: var(--ntp-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ntp-gutter);
	padding-right: var(--ntp-gutter);
	min-width: 0;
	width: 100%;
}

/**
 * Page-level vertical stack — use on view roots instead of ad-hoc space-y / mb-* between hero and main sections.
 */
.ntp-page-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ntp-section-gap);
}

/* Homepage: 2-column from tablet; sidebar widens at lg */
.ntp-home-layout {
	display: flex;
	flex-direction: column;
	gap: var(--ntp-section-gap);
}

@media (min-width: 768px) {
	.ntp-home-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
		gap: var(--ntp-section-gap);
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.ntp-home-layout {
		grid-template-columns: 1fr 300px;
	}
}

.ntp-home-main {
	min-width: 0;
}

.ntp-home-sidebar {
	position: sticky;
	top: 6rem;
}

/* Latest mobiles: 4-5 column grid, compact cards */
.ntp-latest-mobiles-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.ntp-latest-mobiles-grid .ntp-mobile-card {
	min-width: 0;
	overflow: hidden;
}

.ntp-latest-mobiles-grid .ntp-mobile-card .aspect-[3/4] {
	min-height: 100px;
	overflow: hidden;
}

.ntp-latest-mobiles-grid .ntp-mobile-card h3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

@media (min-width: 640px) {
	.ntp-latest-mobiles-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}
}

@media (min-width: 768px) {
	.ntp-latest-mobiles-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}
}

@media (min-width: 1440px) {
	.ntp-latest-mobiles-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/**
 * View roots (inside #ntp-main-content): clip horizontal bleed without affecting header mega-menus.
 */
.ntp-view-shell {
	overflow-x: clip;
}

/**
 * Fluid display headings — scales with viewport (Tier-1 portal rhythm).
 */
.ntp-h1-fluid {
	font-size: clamp(1.5rem, 1.35rem + 1.1vw, 2.75rem);
	line-height: 1.2;
	font-weight: 700;
}

.ntp-h2-fluid {
	font-size: clamp(1.25rem, 1.12rem + 0.65vw, 1.875rem);
	line-height: 1.25;
	font-weight: 700;
}

/* WP-injected titles (e.g. the_archive_title) inside view headers */
.ntp-page-header-slab h1 {
	font-size: clamp(1.5rem, 1.35rem + 1.1vw, 2.75rem);
	line-height: 1.2;
	font-weight: 700;
}

/**
 * Breadcrumbs — Yoast / Rank Math markup inherits .ntp-breadcrumbs__inner typography from the template;
 * normalize links, separators, and current item for a slim strip.
 */
.ntp-breadcrumbs .ntp-breadcrumbs__nav {
	min-width: 0;
}

.ntp-breadcrumbs .ntp-breadcrumbs__nav a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

.ntp-breadcrumbs .ntp-breadcrumbs__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ntp-breadcrumbs .breadcrumb_last,
.ntp-breadcrumbs .ntp-breadcrumbs__nav .last,
.ntp-breadcrumbs .rank-math-breadcrumb .last {
	font-weight: 600;
	color: rgb(30 41 59);
}

[data-theme="dark"] .ntp-breadcrumbs .breadcrumb_last,
[data-theme="dark"] .ntp-breadcrumbs .ntp-breadcrumbs__nav .last,
[data-theme="dark"] .ntp-breadcrumbs .rank-math-breadcrumb .last {
	color: rgb(241 245 249);
}

.ntp-breadcrumbs .rank-math-breadcrumb {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.35rem;
}