/* ==========================================================================
   Arock Construction — Portfolio page

   Loaded last in <head> on portfolio.html so it wins on cascade order.
   Everything here is namespaced under .arock-pf- so it cannot leak into the
   theme's own portfolio-grid markup used on projects.html.
   ========================================================================== */

.arock-pf {
	--pf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--pf-dur: 380ms;
	--pf-accent: #FFB214; /* same amber as arock-enhancements.css */
	--pf-ink: #0C0C0C;
}


/* --------------------------------------------------------------------------
   1. Section shell + grid
   The theme's .layout-medium sets the same max width the Elementor sections
   above and below this block use, so the grid lines up with them.
   -------------------------------------------------------------------------- */

.arock-pf {
	padding: 0 0 30px;
}

/* Loading/empty/error state for the live-fetched grid (arock-portfolio-list.js,
   arock-portfolio-view.js). Shared with arock-projects.css / arock-sales.css. */
.arock-pj-status {
	margin: 0;
	padding: 60px 20px;
	text-align: center;
	font-size: 0.95rem;
	color: #6A6A6A;
}

.arock-pj-status a {
	color: inherit;
	text-decoration: underline;
}

/* Two columns rather than three. The revealed panel carries six specifications
   and a button, so the card has to be tall enough for that block to sit inside
   the bottom half of the photo instead of swallowing it. */
.arock-pf-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}


/* --------------------------------------------------------------------------
   2. Card
   The media fills the whole card and the information panel is overlaid on its
   bottom edge, so the panel can grow upward over the photo on hover.
   -------------------------------------------------------------------------- */

.arock-pf-card {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--pf-ink);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transform: translateZ(0);
	transition:
		transform var(--pf-dur) var(--pf-ease),
		box-shadow var(--pf-dur) var(--pf-ease);
}

.arock-pf-card__link {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none;
}

.arock-pf-card__link:hover,
.arock-pf-card__link:focus {
	text-decoration: none;
}

/* The theme underlines links inside content areas; this one is a whole card. */
.arock-pf-card__link:hover .arock-pf-card__title {
	color: #ffffff;
}

/* min-height is the floor the expanded panel needs. Between roughly 768px and
   1200px the two columns are narrow enough that 4:3 alone would make the card
   shorter than the open panel, which would clip it against the top edge. */
.arock-pf-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	min-height: 424px;
	overflow: hidden;
	background-color: #141414;
}

.arock-pf-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 600ms var(--pf-ease);
}

/* Resting scrim — keeps the name and one-liner legible over any photo. */
.arock-pf-card__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(8, 8, 8, 0.88) 0%,
		rgba(8, 8, 8, 0.60) 20%,
		rgba(8, 8, 8, 0.10) 46%,
		rgba(8, 8, 8, 0) 62%
	);
}

/* Dark transparent wash that fades in on hover. It is weighted towards the
   bottom because that is where the expanded panel lands — a flat tint dark
   enough for the spec text would have flattened the whole photograph. */
.arock-pf-card__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		to top,
		rgba(6, 6, 6, 0.93) 0%,
		rgba(6, 6, 6, 0.88) 40%,
		rgba(6, 6, 6, 0.62) 62%,
		rgba(6, 6, 6, 0.30) 82%,
		rgba(6, 6, 6, 0.18) 100%
	);
	transition: opacity var(--pf-dur) var(--pf-ease);
}


/* --------------------------------------------------------------------------
   3. Information panel
   At rest only .arock-pf-card__head is visible, which lands at roughly the
   bottom fifth of the card. The reveal block below it is collapsed with a
   0fr grid track so the panel's own height — and therefore everything above
   it — animates upward without a hard-coded height.
   -------------------------------------------------------------------------- */

.arock-pf-card__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 28px 24px;
}

.arock-pf-card__rule {
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 14px;
	background-color: var(--pf-accent);
	transition: width var(--pf-dur) var(--pf-ease);
}


/* --------------------------------------------------------------------------
   3. Information panel
   At rest only .arock-pf-card__head is visible, which lands at roughly the
   bottom fifth of the card. The reveal block below it is collapsed with a
   0fr grid track so the panel's own height — and therefore everything above
   it — animates upward without a hard-coded height.
   -------------------------------------------------------------------------- */

.arock-pf-card__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 28px 24px;
}

.arock-pf-card__rule {
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 14px;
	background-color: var(--pf-accent);
	transition: width var(--pf-dur) var(--pf-ease);
}

.arock-pf-card__title {
	margin: 0;
	font-family: 'Urbanist', sans-serif;
	font-size: clamp(18px, 1.8vw, 20px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.arock-pf-card__tagline {
	margin: 7px 0 0;
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.74);
}

.arock-pf-card__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows var(--pf-dur) var(--pf-ease),
		opacity 260ms var(--pf-ease);
}

.arock-pf-card__reveal-inner {
	overflow: hidden;
	min-height: 0;
}


/* --------------------------------------------------------------------------
   4. Specification list
   -------------------------------------------------------------------------- */

.arock-pf-specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 13px 20px;
	margin: 17px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
}

.arock-pf-specs li {
	margin: 0;
	padding: 0;
}

.arock-pf-specs li::before {
	content: none; /* theme adds bullets to content-area list items */
}

.arock-pf-spec__label {
	display: block;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.arock-pf-spec__value {
	display: block;
	margin-top: 3px;
	font-family: 'Urbanist', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

.arock-pf-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 19px;
	padding: 10px 21px;
	border-radius: 999px;
	background-color: var(--pf-accent);
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pf-ink);
	transition:
		background-color 300ms var(--pf-ease),
		color 300ms var(--pf-ease);
}

.arock-pf-card__cta svg {
	display: block;
	flex: none;
	transition: transform 300ms var(--pf-ease);
}

.arock-pf-card__link:hover .arock-pf-card__cta svg {
	transform: translateX(4px);
}

.arock-pf-card__cta svg path {
	fill: currentColor;
}


/* --------------------------------------------------------------------------
   5. Hover / focus state
   :focus-within mirrors hover so the card is reachable by keyboard.
   -------------------------------------------------------------------------- */

.arock-pf-card:hover,
.arock-pf-card:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 26px 50px rgba(0, 0, 0, 0.22);
}

.arock-pf-card:hover .arock-pf-card__img,
.arock-pf-card:focus-within .arock-pf-card__img {
	transform: scale(1.07);
}

.arock-pf-card:hover .arock-pf-card__wash,
.arock-pf-card:focus-within .arock-pf-card__wash {
	opacity: 1;
}

.arock-pf-card:hover .arock-pf-card__reveal,
.arock-pf-card:focus-within .arock-pf-card__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
}

.arock-pf-card:hover .arock-pf-card__rule,
.arock-pf-card:focus-within .arock-pf-card__rule {
	width: 46px;
}

.arock-pf-card__link:focus-visible {
	outline: 2px solid var(--pf-accent);
	outline-offset: -4px;
}


/* --------------------------------------------------------------------------
   6. Touch devices & coarse pointers
   With no hover there is nothing to trigger the reveal, so the panel drops out
   of the overlay and sits below the photo with everything already open. That
   also stops the taller open panel from being clipped by the shorter card.
   -------------------------------------------------------------------------- */

@media (hover: none) {
	.arock-pf-card {
		background-color: #101010;
	}

	/* Nothing expands over the photo any more, so it can go back to 4:3. */
	.arock-pf-card__media {
		min-height: 0;
	}

	.arock-pf-card__panel {
		position: static;
		padding: 22px 24px 26px;
	}

	.arock-pf-card__scrim,
	.arock-pf-card__wash {
		display: none;
	}

	.arock-pf-card__reveal {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}


/* --------------------------------------------------------------------------
   7. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.arock-pf-card,
	.arock-pf-card__img,
	.arock-pf-card__reveal,
	.arock-pf-card__rule,
	.arock-pf-card__wash,
	.arock-pf-card__cta,
	.arock-pf-card__cta svg {
		transition-duration: 1ms;
	}

	.arock-pf-card:hover,
	.arock-pf-card:focus-within {
		transform: none;
	}

	.arock-pf-card:hover .arock-pf-card__img,
	.arock-pf-card:focus-within .arock-pf-card__img {
		transform: none;
	}
}


/* ==========================================================================
   8. Homepage-aligned visual finish
   Applied to portfolio.html which loads this file instead of
   arock-enhancements.css. Selectors are scoped to .elementor-1178 (the
   portfolio page Elementor wrapper) where specificity requires it.
   ========================================================================== */

/* ── Feature icon lists (top section category bullets) ────── */

.elementor-element-7a95f5f .elementor-icon-list-item,
.elementor-element-ba4ed8a .elementor-icon-list-item {
	border-top: 1px solid rgba(0, 0, 0, 0.09);
	transition: background-color .35s;
}

.elementor-element-7a95f5f .elementor-icon-list-item:last-child,
.elementor-element-ba4ed8a .elementor-icon-list-item:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.elementor-element-7a95f5f .elementor-icon-list-item > a,
.elementor-element-ba4ed8a .elementor-icon-list-item > a {
	transition: color .3s, transform .35s var(--pf-ease);
}

.elementor-element-7a95f5f .elementor-icon-list-item:hover > a,
.elementor-element-ba4ed8a .elementor-icon-list-item:hover > a {
	color: #D98D00;
	transform: translateX(6px);
}

.elementor-element-7a95f5f .elementor-icon-list-icon i,
.elementor-element-ba4ed8a .elementor-icon-list-icon i {
	display: inline-block;
	transition: transform .45s var(--pf-ease), color .3s;
}

.elementor-element-7a95f5f .elementor-icon-list-item:hover .elementor-icon-list-icon i,
.elementor-element-ba4ed8a .elementor-icon-list-item:hover .elementor-icon-list-icon i {
	color: var(--pf-accent);
	transform: rotate(90deg);
}


/* "Found the one?" closing CTA headline */
.elementor-1178 .elementor-element.elementor-element-5b0abee .qodef-qi-typeout-text .qodef-m-text {
	font-size: clamp(28px, 3.5vw, 38px);
	font-weight: 500;
}

/* Follow-on paragraph in closing CTA */
.elementor-1178 .elementor-element.elementor-element-52d8d12 .qodef-qi-typeout-text .qodef-m-text {
	font-size: clamp(15.5px, 1.8vw, 17.5px);
	font-weight: 400;
}


/* ── "Book a Consultation" button — hover lift only ─────── */

.elementor-1178 .elementor-element.elementor-element-f3817df .qodef-qi-button {
	transition:
		transform .35s var(--pf-ease),
		box-shadow .35s;
}

.elementor-1178 .elementor-element.elementor-element-f3817df .qodef-qi-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}


/* ── Responsive type ─────────────────────────────────────── */

@media (max-width: 1024px) {
	.elementor-1178 .elementor-element.elementor-element-5b0abee .qodef-qi-typeout-text .qodef-m-text {
		font-size: 30px;
	}

	.elementor-1178 .elementor-element.elementor-element-52d8d12 .qodef-qi-typeout-text .qodef-m-text {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.elementor-1178 .elementor-element.elementor-element-5b0abee .qodef-qi-typeout-text .qodef-m-text {
		font-size: 24px;
	}

	.elementor-1178 .elementor-element.elementor-element-52d8d12 .qodef-qi-typeout-text .qodef-m-text {
		font-size: 14.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-1178 .elementor-element.elementor-element-f3817df .qodef-qi-button {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Storeys filter bar (arock-portfolio-list.js) — "All / Single Storey /
   Double Storey / Split-Level". Rendered inside #arock-pf-app above the
   grid, so it lives outside the .arock-pf custom-property scope above —
   literal colours here, matching --pf-accent/--pf-ink.
   -------------------------------------------------------------------------- */

.arock-pf-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 34px;
	align-items: center;
	padding: 0;
}

.arock-pf-filterbar .arock-pf-filter-btn,
button.arock-pf-filter-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 10px 18px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(12, 12, 12, 0.16) !important;
	background-color: #ffffff !important;
	color: #0C0C0C !important;
	font-family: 'Plus Jakarta Sans', 'Urbanist', 'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transform: translateZ(0);
	transition: background-color 200ms ease,
	            color 200ms ease,
	            border-color 200ms ease,
	            transform 180ms ease !important;
}

.arock-pf-filterbar .arock-pf-filter-btn:hover,
button.arock-pf-filter-btn:hover {
	border-color: #FFB214 !important;
	color: #000000 !important;
	background-color: #ffffff !important;
}

.arock-pf-filterbar .arock-pf-filter-btn:focus-visible,
button.arock-pf-filter-btn:focus-visible {
	outline: 2px solid #FFB214 !important;
	outline-offset: 2px !important;
}

.arock-pf-filterbar .arock-pf-filter-btn.is-active,
button.arock-pf-filter-btn.is-active {
	background-color: #0C0C0C !important;
	border-color: #0C0C0C !important;
	color: #FFB214 !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer;
}

.arock-pf-filterbar .arock-pf-filter-btn.is-active:hover,
button.arock-pf-filter-btn.is-active:hover {
	background-color: #0C0C0C !important;
	border-color: #0C0C0C !important;
	color: #FFB214 !important;
}

.arock-pf-card--animated {
	animation: arockPfCardIn 350ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes arockPfCardIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 767px) {
	/* ── Top Hero / Header Clearance & Intro Section ────── */
	.elementor-1178 .elementor-element-ac03a1f .bdt-prime-slider-skin-general,
	.elementor-1178 .elementor-element-ac03a1f .bdt-slideshow-item {
		min-height: 280px !important;
	}

	.elementor-1178 .elementor-element-b43c1f1 {
		padding-top: 30px !important;
		padding-bottom: 16px !important;
	}

	.elementor-1178 .elementor-element-b43c1f1 .qodef-m-title {
		font-size: clamp(28px, 8vw, 36px) !important;
		line-height: 1.2 !important;
		margin-bottom: 16px !important;
	}

	.elementor-1178 .elementor-element-7a95f5f,
	.elementor-1178 .elementor-element-ba4ed8a {
		margin-bottom: 10px !important;
	}

	.elementor-1178 .elementor-element-91dd7b1 {
		padding-top: 8px !important;
		padding-bottom: 14px !important;
	}

	.elementor-1178 .elementor-element-d31743b .elementor-heading-title {
		font-size: 17px !important;
		line-height: 1.45 !important;
	}

	.elementor-1178 .elementor-element-arock-projects-intro {
		padding-top: 0 !important;
		padding-bottom: 20px !important;
	}

	.elementor-1178 .elementor-element-arock-projects-intro-txt p {
		font-size: 14px !important;
		line-height: 1.6 !important;
		color: #555555 !important;
		margin-bottom: 12px !important;
	}

	.arock-pf {
		padding: 0 0 36px !important;
	}

	/* ── Filter Bar ───────────────────────────────────────── */
	.arock-pf-filterbar {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		gap: 8px !important;
		margin: 0 0 24px !important;
		padding: 4px 2px 10px !important;
	}

	.arock-pf-filterbar::-webkit-scrollbar {
		display: none !important;
	}

	.arock-pf-filterbar .arock-pf-filter-btn,
	button.arock-pf-filter-btn {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
		padding: 9px 16px !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: 0.04em !important;
		border-radius: 999px !important;
	}

	/* ── 1-Column Mobile Grid & Card Styling ─────────────── */
	.arock-pf-grid {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}

	.arock-pf-card {
		background-color: #121212 !important;
		border-radius: 12px !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important;
		overflow: hidden !important;
	}

	.arock-pf-card__media {
		min-height: 0 !important;
		aspect-ratio: 16 / 10 !important;
		width: 100% !important;
	}

	.arock-pf-card__panel {
		position: static !important;
		padding: 22px 20px 24px !important;
		background-color: #121212 !important;
	}

	.arock-pf-card__scrim,
	.arock-pf-card__wash {
		display: none !important;
	}

	.arock-pf-card__reveal {
		grid-template-rows: 1fr !important;
		opacity: 1 !important;
	}

	.arock-pf-card__rule {
		width: 32px !important;
		height: 2px !important;
		margin-bottom: 12px !important;
		background-color: var(--pf-accent) !important;
	}

	.arock-pf-card__title {
		font-size: 21px !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		color: #ffffff !important;
	}

	.arock-pf-card__tagline {
		font-size: 14px !important;
		line-height: 1.5 !important;
		margin-top: 6px !important;
		color: rgba(255, 255, 255, 0.72) !important;
	}

	/* ── Specifications Grid (3 Columns Full-Width Card) ─── */
	.arock-pf-specs {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 14px 12px !important;
		margin-top: 16px !important;
		padding-top: 16px !important;
		border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
	}

	.arock-pf-spec__label {
		display: block !important;
		font-size: 10.5px !important;
		font-weight: 500 !important;
		letter-spacing: 0.1em !important;
		color: rgba(255, 255, 255, 0.55) !important;
		text-transform: uppercase !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.arock-pf-spec__value {
		display: block !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
		margin-top: 3px !important;
		color: #ffffff !important;
		word-break: normal !important;
	}

	.arock-pf-card__cta {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		width: 100% !important;
		margin-top: 18px !important;
		padding: 12px 20px !important;
		border-radius: 999px !important;
		background-color: var(--pf-accent) !important;
		color: var(--pf-ink) !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: 0.1em !important;
		box-sizing: border-box !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arock-pf-filterbar .arock-pf-filter-btn,
	button.arock-pf-filter-btn {
		transition-duration: 1ms !important;
		transform: none !important;
	}
	.arock-pf-card--animated {
		animation: none;
	}
}