/* ═══════════════════════════════════════════════
   CONTRACTING PRO — projects.css
   Dark theme single-project page
   Background: #272727  •  Accent: #192E69
   Font: Cairo (Arabic + Latin)
═══════════════════════════════════════════════ */

/* ─── CSS Variables ──────────────────────────── */
:root {
	--cp-bg-dark:        #272727;   /* main dark background */
	--cp-bg-dark-deep:   #1c1c1c;   /* deeper variant — hero & related */
	--cp-bg-dark-card:   #333333;   /* slightly lighter — cards on dark */
	--cp-bg-dark-soft:   #2f2f2f;   /* subtle alt */

	--cp-primary:        #192e69;   /* brand color (deep navy) */
	--cp-accent:         #192e69;   /* accent — buttons, arrows, lines */
	--cp-accent-hover:   #2c4ab3;   /* lighter blue for hover states */
	--cp-accent-soft:    rgba(25, 46, 105, .12);

	--cp-white:          #ffffff;
	--cp-bg:             #f6f5f2;   /* light bg — archive widget context */
	--cp-text:           #4a4a5a;
	--cp-text-light:     #8a8a9a;
	--cp-text-on-dark:        rgba(255,255,255,.88);
	--cp-text-on-dark-muted:  rgba(255,255,255,.62);
	--cp-text-on-dark-soft:   rgba(255,255,255,.42);
	--cp-border:         #e0dbd2;
	--cp-border-dark:    rgba(255,255,255,.08);
	--cp-radius:         14px;
	--cp-radius-sm:      8px;
	--cp-shadow:         0 2px 16px rgba(0,0,0,.07);
	--cp-shadow-md:      0 6px 28px rgba(0,0,0,.11);
	--cp-shadow-lg:      0 14px 48px rgba(0,0,0,.16);
	--cp-shadow-dark:    0 8px 32px rgba(0,0,0,.45);
	--cp-ease:           cubic-bezier(.4, 0, .2, 1);
	--cp-dur:            .35s;

	--cp-font:           'Cairo', system-ui, -apple-system, 'Segoe UI', 'Tajawal', sans-serif;
}


/* ════════════════════════════════════════════
   FONT FAMILY — apply to our wrappers
   (children inherit naturally)
════════════════════════════════════════════ */

.cp-single-project-page,
.cp-projects-wrap,
.cp-filter-bar {
	font-family: var(--cp-font);
}


/* ════════════════════════════════════════════
   PROJECTS GRID + CARDS  (archive widget — light)
════════════════════════════════════════════ */

.cp-projects-wrap { width: 100%; }

.cp-projects-grid {
	display: grid;
	gap: 28px;
}
.cp-cols-1 { grid-template-columns: 1fr; }
.cp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cp-cols-4 { grid-template-columns: repeat(4, 1fr); }

.cp-project-card {
	background:    var(--cp-white);
	border-radius: var(--cp-radius);
	box-shadow:    var(--cp-shadow);
	overflow:      hidden;
	transition:    transform var(--cp-dur) var(--cp-ease),
	               box-shadow var(--cp-dur) var(--cp-ease);
}
.cp-project-card:hover {
	transform:  translateY(-7px);
	box-shadow: var(--cp-shadow-lg);
}
.cp-project-card__link {
	display:         block;
	text-decoration: none;
	color:           inherit;
}

.cp-project-card__img-wrap {
	position:     relative;
	aspect-ratio: 16/10;
	overflow:     hidden;
	background:   var(--cp-bg);
}
.cp-project-card__img,
.cp-project-card__img-wrap img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .6s var(--cp-ease);
}
.cp-project-card:hover .cp-project-card__img,
.cp-project-card:hover .cp-project-card__img-wrap img {
	transform: scale(1.07);
}

.cp-project-card__no-img {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--cp-bg);
	color:           var(--cp-border);
}

.cp-project-card__overlay {
	position:        absolute;
	inset:           0;
	background:      linear-gradient(to top, rgba(25,46,105,.82) 0%, rgba(25,46,105,.3) 100%);
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0;
	transition:      opacity var(--cp-dur) var(--cp-ease);
}
.cp-project-card:hover .cp-project-card__overlay { opacity: 1; }

.cp-project-card__btn {
	background:     var(--cp-accent);
	color:          var(--cp-white);
	padding:        11px 26px;
	border-radius:  50px;
	font-weight:    700;
	font-size:      .88rem;
	letter-spacing: .04em;
	transform:      translateY(6px);
	transition:     background var(--cp-dur) var(--cp-ease),
	                transform  var(--cp-dur) var(--cp-ease);
}
.cp-project-card:hover .cp-project-card__btn {
	background: var(--cp-accent-hover);
	transform:  translateY(0);
}

.cp-project-card__body {
	padding: 18px 22px 22px;
}
.cp-project-card__title {
	margin:      0 0 7px;
	font-size:   1.05rem;
	font-weight: 700;
	color:       var(--cp-primary);
	line-height: 1.4;
	transition:  color var(--cp-dur) var(--cp-ease);
}
.cp-project-card:hover .cp-project-card__title { color: var(--cp-accent-hover); }

.cp-project-card__excerpt {
	margin:      0;
	color:       var(--cp-text-light);
	font-size:   .875rem;
	line-height: 1.65;
}

.cp-no-projects {
	text-align:    center;
	color:         var(--cp-text-light);
	font-size:     1.05rem;
	padding:       50px 20px;
	background:    var(--cp-bg);
	border-radius: var(--cp-radius);
}


/* ════════════════════════════════════════════
   FILTER BAR (light context)
════════════════════════════════════════════ */

.cp-filter-bar {
	display:         flex;
	flex-wrap:       wrap;
	gap:             10px;
	margin-bottom:   36px;
	justify-content: center;
}
.cp-filter-btn {
	padding:          9px 22px;
	border:           2px solid var(--cp-border);
	border-radius:    50px;
	background:       transparent;
	color:            var(--cp-text);
	font-size:        .875rem;
	font-weight:      600;
	cursor:           pointer;
	transition:       all var(--cp-dur) var(--cp-ease);
	font-family:      inherit;
}
.cp-filter-btn:hover,
.cp-filter-btn.active {
	background:   var(--cp-accent);
	border-color: var(--cp-accent);
	color:        var(--cp-white);
}
.cp-project-card.cp-hidden {
	display: none;
}


/* ════════════════════════════════════════════
   SINGLE PROJECT PAGE — DARK THEME WRAPPER
════════════════════════════════════════════ */

.cp-single-project-page {
	background: var(--cp-bg-dark);
	color:      var(--cp-text-on-dark);
}


/* ════════════════════════════════════════════
   SINGLE PROJECT — HERO
════════════════════════════════════════════ */

.cp-hero {
	background: var(--cp-bg-dark-deep);
	padding:    120px 0 70px;
	position:   relative;
	overflow:   hidden;
}
.cp-hero::before {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     linear-gradient(135deg, rgba(25,46,105,.22) 0%, transparent 65%);
	pointer-events: none;
}
.cp-hero::after {
	content:        '';
	position:       absolute;
	top:            -80px;
	right:          -80px;
	width:          320px;
	height:         320px;
	border-radius:  50%;
	border:         1px solid rgba(25,46,105,.4);
	pointer-events: none;
}
[dir="rtl"] .cp-hero::after { right: auto; left: -80px; }

.cp-hero__inner {
	max-width: 1200px;
	margin:    0 auto;
	padding:   0 32px;
	position:  relative;
	z-index:   1;
}

/* Breadcrumb — white-tinted text for readability on dark */
.cp-breadcrumb {
	display:       flex;
	align-items:   center;
	flex-wrap:     wrap;
	gap:           6px;
	margin-bottom: 18px;
	font-size:     .82rem;
	font-family:   var(--cp-font);
}
.cp-breadcrumb a {
	color:           var(--cp-text-on-dark-muted);
	text-decoration: none;
	transition:      color var(--cp-dur) var(--cp-ease);
}
.cp-breadcrumb a:hover  { color: var(--cp-white); }
.cp-breadcrumb span     { color: var(--cp-text-on-dark-soft); }
.cp-breadcrumb .current { color: var(--cp-white); font-weight: 600; }

/* Title */
.cp-hero__title {
	color:          var(--cp-white);
	font-size:      clamp(1.9rem, 5vw, 3rem);
	font-weight:    800;
	line-height:    1.2;
	margin:         0 0 20px;
	letter-spacing: -.01em;
	font-family:    var(--cp-font);
}

/* Accent line */
.cp-hero__line {
	width:         64px;
	height:        4px;
	background:    var(--cp-accent);
	border-radius: 2px;
	box-shadow:    0 0 14px rgba(25,46,105,.55);
}


/* ════════════════════════════════════════════
   SINGLE PROJECT — GALLERY-ONLY LAYOUT
════════════════════════════════════════════ */

.cp-project-content {
	background: var(--cp-bg-dark);
	padding:    90px 32px 100px;
}

.cp-project-layout {
	max-width: 1000px;
	margin:    0 auto;
}

.cp-section-label {
	font-size:      .78rem;
	font-weight:    700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--cp-white);
	margin-bottom:  16px;
	font-family:    var(--cp-font);
}


/* ════════════════════════════════════════════
   SWIPER SLIDER
════════════════════════════════════════════ */

.cp-project-gallery { position: relative; }

.cp-swiper {
	border-radius: var(--cp-radius);
	overflow:      hidden;
	box-shadow:    var(--cp-shadow-dark);
	background:    var(--cp-bg-dark-deep);
}
.cp-swiper .swiper-slide img {
	width:        100%;
	aspect-ratio: 16/10;
	object-fit:   cover;
	display:      block;
}

/* Navigation arrows */
.cp-swiper .swiper-button-next,
.cp-swiper .swiper-button-prev {
	color:         var(--cp-white);
	background:    var(--cp-accent);
	width:         48px;
	height:        48px;
	border-radius: 50%;
	transition:    background var(--cp-dur) var(--cp-ease),
	               transform  var(--cp-dur) var(--cp-ease);
	box-shadow:    0 4px 16px rgba(25,46,105,.55);
}
.cp-swiper .swiper-button-next:hover,
.cp-swiper .swiper-button-prev:hover {
	background: var(--cp-accent-hover);
	transform:  scale(1.08);
}
.cp-swiper .swiper-button-next::after,
.cp-swiper .swiper-button-prev::after {
	font-size:   14px;
	font-weight: 900;
}

/* Pagination dots */
.cp-swiper .swiper-pagination-bullet {
	background: rgba(255,255,255,.5);
	opacity:    1;
}
.cp-swiper .swiper-pagination-bullet-active {
	background: var(--cp-white);
	transform:  scale(1.3);
}

/* No-image fallback */
.cp-no-image {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	aspect-ratio:    16/10;
	background:      var(--cp-bg-dark-deep);
	border:          1px solid var(--cp-border-dark);
	border-radius:   var(--cp-radius);
	color:           rgba(255,255,255,.28);
}
.cp-no-image span {
	font-size:   .9rem;
	color:       var(--cp-text-on-dark-muted);
	font-family: var(--cp-font);
}


/* ════════════════════════════════════════════
   RELATED PROJECTS  (dark)
════════════════════════════════════════════ */

.cp-related {
	background: var(--cp-bg-dark-deep);
	padding:    80px 0 90px;
	font-family: var(--cp-font);
}
.cp-related__inner {
	max-width: 1200px;
	margin:    0 auto;
	padding:   0 32px;
}
.cp-related__heading {
	text-align:    center;
	color:         var(--cp-white);
	font-size:     1.7rem;
	font-weight:   800;
	margin-bottom: 12px;
	font-family:   var(--cp-font);
}
.cp-related__heading::after {
	content:       '';
	display:       block;
	width:         48px;
	height:        4px;
	background:    var(--cp-accent);
	border-radius: 2px;
	margin:        12px auto 40px;
	box-shadow:    0 0 14px rgba(25,46,105,.55);
}

/* Related cards in dark context */
.cp-related .cp-project-card {
	background: var(--cp-bg-dark-card);
	box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.cp-related .cp-project-card:hover {
	box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.cp-related .cp-project-card__img-wrap {
	background: var(--cp-bg-dark-deep);
}
.cp-related .cp-project-card__title {
	color: var(--cp-white);
}
.cp-related .cp-project-card:hover .cp-project-card__title {
	color: var(--cp-white);
	text-decoration: underline;
	text-decoration-color: var(--cp-accent);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}
.cp-related .cp-project-card__excerpt {
	color: var(--cp-text-on-dark-muted);
}


/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */

@media ( max-width: 1100px ) {
	.cp-cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media ( max-width: 900px ) {
	.cp-cols-3,
	.cp-cols-4 { grid-template-columns: repeat(2, 1fr); }

	.cp-hero            { padding: 90px 0 56px; }
	.cp-project-content { padding: 60px 24px 70px; }
}

@media ( max-width: 580px ) {
	.cp-cols-2,
	.cp-cols-3,
	.cp-cols-4 { grid-template-columns: 1fr; }

	.cp-hero            { padding: 70px 0 44px; }
	.cp-hero__inner     { padding: 0 20px; }
	.cp-project-content { padding: 44px 18px 56px; }
	.cp-related         { padding: 56px 0 64px; }
	.cp-related__inner  { padding: 0 20px; }

	.cp-swiper .swiper-button-next,
	.cp-swiper .swiper-button-prev { width: 38px; height: 38px; }
	.cp-swiper .swiper-button-next::after,
	.cp-swiper .swiper-button-prev::after { font-size: 12px; }
}