/* =========================================================
   HTP PORTFOLIO / COMPANY PROFILE PAGE
   Frontend: PDF viewer + download only.
   Upload/replacement is managed in the page metabox.
========================================================= */

body.page-template-page-portfolio,
body.page-template-page-portfolio #page,
body.page-template-page-portfolio .site,
body.page-template-page-portfolio .site.grid-container,
body.page-template-page-portfolio .site-content,
body.page-template-page-portfolio .content-area,
body.page-template-page-portfolio .site-main,
body.page-template-page-portfolio .inside-article,
body.page-template-page-portfolio .entry-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #f4f5f7;
	overflow-x: hidden;
}

body.page-template-page-portfolio .entry-header,
body.page-template-page-portfolio .page-header,
body.page-template-page-portfolio .featured-image,
body.page-template-page-portfolio .post-image {
	display: none;
}

.htp-portfolio-page,
.htp-portfolio-page * {
	box-sizing: border-box;
}

.htp-portfolio-page {
	--htp-portfolio-red: #ed1c24;
	--htp-portfolio-dark: #101820;
	--htp-portfolio-text: #303742;
	--htp-portfolio-muted: #66707c;
	--htp-portfolio-border: #e3e7ee;
	width: 100%;
	max-width: 100%;
	background: #f4f5f7;
	color: var(--htp-portfolio-text);
	font-family: "Lato", Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
	overflow: hidden;
}

.htp-portfolio-container {
	width: min(1360px, calc(100% - 48px));
	margin-inline: auto;
}

.htp-portfolio-hero {
	position: relative;
	min-height: 316px;
	display: flex;
	align-items: center;
	background: var(--portfolio-hero-bg) center / cover no-repeat;
	color: #fff;
	overflow: hidden;
}

.htp-portfolio-hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(6, 12, 20, .94) 0%, rgba(6, 12, 20, .84) 52%, rgba(6, 12, 20, .38) 100%),
		linear-gradient(135deg, transparent 0 58%, rgba(237, 28, 36, .78) 58% 74%, transparent 74%);
	pointer-events: none;
}

.htp-portfolio-hero__inner {
	position: relative;
	z-index: 1;
	padding: 42px 0 48px;
}

.htp-portfolio-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 24px;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.htp-portfolio-breadcrumb a {
	color: rgba(255, 255, 255, .92);
	text-decoration: none;
}

.htp-portfolio-breadcrumb a:hover {
	color: #ff4b4b;
}

.htp-portfolio-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
	align-items: end;
}

.htp-portfolio-hero h1 {
	max-width: 760px;
	margin: 0;
	color: #fff;
	font-family: "Anton", Arial, sans-serif;
	font-size: clamp(52px, 5.2vw, 86px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .012em;
	text-transform: uppercase;
}


/* v33: hero title red phrase */
.htp-portfolio-hero-title-red {
	color: var(--htp-portfolio-red);
}

.htp-portfolio-hero p {
	max-width: 760px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .9);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
}

.htp-portfolio-hero__actions {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: flex-end;
}

.htp-portfolio-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 8px 24px 6px;
	border-radius: 5px;
	font-family: "Anton", Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.htp-portfolio-btn img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.htp-portfolio-btn--outline {
	border: 1px solid rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.htp-portfolio-btn--outline img {
	filter: brightness(0) invert(1);
}

.htp-portfolio-btn--red {
	border: 1px solid transparent;
	background: linear-gradient(135deg, #ff9d00 0%, #ff5200 35%, #ed1c24 100%);
	color: #fff;
	box-shadow: 0 14px 28px rgba(237, 28, 36, .25);
}

.htp-portfolio-btn--red img {
	filter: brightness(0) invert(1);
}

.htp-portfolio-btn:hover {
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

.htp-portfolio-viewer-section {
	padding: 42px 0 58px;
}

.htp-portfolio-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 920px;
	margin: 0 0 24px;
}

.htp-portfolio-intro > span {
	display: inline-flex;
	width: max-content;
	margin: 0 0 10px;
	padding: 7px 14px 5px;
	border-radius: 999px;
	background: rgba(237, 28, 36, .08);
	color: var(--htp-portfolio-red);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.htp-portfolio-intro h2 {
	margin: 0 0 10px;
	color: #111827;
	font-family: "Anton", Arial, sans-serif;
	font-size: clamp(32px, 3.2vw, 48px);
	font-weight: 400;
	line-height: 1.08;
	text-transform: uppercase;
}

.htp-portfolio-intro p {
	margin: 0;
	color: var(--htp-portfolio-muted);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
}

.htp-portfolio-viewer-card,
.htp-portfolio-feature {
	border: 1px solid var(--htp-portfolio-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 38px rgba(17, 24, 39, .06);
}

.htp-portfolio-viewer-card {
	min-width: 0;
	overflow: hidden;
}

.htp-portfolio-viewer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--htp-portfolio-border);
	background: #fff;
}

.htp-portfolio-viewer-head span {
	display: block;
	margin-bottom: 4px;
	color: var(--htp-portfolio-red);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.htp-portfolio-viewer-head h2 {
	margin: 0;
	color: #111827;
	font-family: "Lato", Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.htp-portfolio-viewer-head a {
	color: var(--htp-portfolio-red);
	font-family: "Anton", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.htp-portfolio-book-shell {
	position: relative;
	height: min(72vh, 760px);
	min-height: 600px;
	padding: 18px;
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .12), transparent 34%),
		linear-gradient(135deg, #151a21 0%, #262d36 100%);
}

.htp-portfolio-pdf-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 8px;
	background: #1d232b;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 34px rgba(0, 0, 0, .2);
}

.htp-portfolio-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(17, 24, 39, .78);
	color: #fff;
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
	backdrop-filter: blur(4px);
	cursor: default;
}

.htp-portfolio-nav--prev {
	left: 18px;
}

.htp-portfolio-nav--next {
	right: 18px;
}

.htp-portfolio-pdf-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 36px;
	border: 1px dashed rgba(255, 255, 255, .25);
	border-radius: 8px;
	color: #fff;
	text-align: center;
}

.htp-portfolio-pdf-empty img {
	width: 72px;
	height: 72px;
	margin-bottom: 18px;
	filter: brightness(0) invert(1);
	opacity: .9;
}

.htp-portfolio-pdf-empty h3 {
	margin: 0 0 8px;
	color: #fff;
	font-family: "Anton", Arial, sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

.htp-portfolio-pdf-empty p {
	max-width: 520px;
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

.htp-portfolio-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: #101820;
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
	font-weight: 500;
}

.htp-portfolio-toolbar span:first-child {
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}

.htp-portfolio-toolbar a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.htp-portfolio-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.htp-portfolio-feature {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 6px 14px;
	align-items: center;
	padding: 20px;
}

.htp-portfolio-feature img {
	grid-row: 1 / span 2;
	width: 54px;
	height: 54px;
	object-fit: contain;
}

.htp-portfolio-feature strong {
	color: #111827;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.htp-portfolio-feature span {
	color: var(--htp-portfolio-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}

@media (max-width: 1024px) {
	.htp-portfolio-container {
		width: min(100% - 32px, 1360px);
	}

	.htp-portfolio-hero__layout {
		grid-template-columns: 1fr;
	}

	.htp-portfolio-hero__actions {
		justify-content: flex-start;
	}

	.htp-portfolio-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.htp-portfolio-book-shell {
		height: 640px;
		min-height: 540px;
	}

	.htp-portfolio-nav {
		width: 48px;
		height: 48px;
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.htp-portfolio-page {
		font-size: 16px;
	}

	.htp-portfolio-container {
		width: min(100% - 28px, 1360px);
	}

	.htp-portfolio-hero {
		min-height: auto;
	}

	.htp-portfolio-hero__inner {
		padding: 34px 0 38px;
	}

	.htp-portfolio-breadcrumb {
		font-size: 13px;
	}

	.htp-portfolio-hero h1 {
		font-size: 44px;
		line-height: 1.04;
	}

	.htp-portfolio-hero p,
	.htp-portfolio-intro p {
		font-size: 16px;
		line-height: 1.62;
	}

	.htp-portfolio-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.htp-portfolio-btn {
		width: 100%;
		min-height: 50px;
		font-size: 16px;
	}

	.htp-portfolio-viewer-section {
		padding: 28px 0 42px;
	}

	.htp-portfolio-intro h2 {
		font-size: 30px;
	}

	.htp-portfolio-viewer-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.htp-portfolio-viewer-head h2 {
		font-size: 18px;
	}

	.htp-portfolio-book-shell {
		height: 560px;
		min-height: 460px;
		padding: 10px;
	}

	.htp-portfolio-nav {
		width: 40px;
		height: 40px;
		font-size: 30px;
	}

	.htp-portfolio-nav--prev {
		left: 10px;
	}

	.htp-portfolio-nav--next {
		right: 10px;
	}

	.htp-portfolio-toolbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.htp-portfolio-feature-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.htp-portfolio-feature {
		padding: 16px;
	}
}

@media (max-width: 390px) {
	.htp-portfolio-hero h1 {
		font-size: 40px;
	}

	.htp-portfolio-book-shell {
		height: 520px;
		min-height: 430px;
	}

	.htp-portfolio-feature {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	.htp-portfolio-feature img {
		width: 46px;
		height: 46px;
	}
}


/* v30: remove side arrow controls from portfolio PDF viewer */
.htp-portfolio-nav,
.htp-portfolio-nav--prev,
.htp-portfolio-nav--next {
	display: none;
}


/* v32: PDF.js inline renderer for mobile/native PDF fallback */
.htp-portfolio-pdfjs {
	display: block;
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 14px;
	border-radius: 8px;
	background: #101820;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	-webkit-overflow-scrolling: touch;
}

.htp-portfolio-pdfjs.is-ready + .htp-portfolio-pdf-frame {
	display: none;
}

.htp-portfolio-pdfjs-loading,
.htp-portfolio-pdfjs-error {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 24px;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	font-family: "Lato", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.htp-portfolio-pdfjs-page {
	position: relative;
	width: max-content;
	margin: 0 auto 16px;
	padding: 0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
	overflow: hidden;
	max-width: 100%;
}

.htp-portfolio-pdfjs-page canvas {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	image-rendering: auto;
}

.htp-portfolio-pdfjs-page span {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(16, 24, 32, .86);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 767px) {
	.htp-portfolio-book-shell {
		height: 72vh;
		min-height: 560px;
		padding: 0;
	}

	.htp-portfolio-pdfjs {
		padding: 8px;
		border-radius: 0;
	}

	.htp-portfolio-pdfjs-page {
		margin-bottom: 12px;
		border-radius: 4px;
	}

	.htp-portfolio-pdf-frame {
		display: none;
	}
}