/* =========================================================
   YHAYSMAH Portfolio
   Change these 6 values to match your brand colours.
   ========================================================= */
.yhp,
.yhp-single {
	--yhp-accent: #1d4ed8;      /* buttons, active filter, links */
	--yhp-accent-ink: #ffffff;  /* text on accent buttons */
	--yhp-text: #14171f;        /* headings */
	--yhp-muted: #5b6270;       /* small text */
	--yhp-line: #e3e6ec;        /* borders */
	--yhp-soft: #f4f6f9;        /* image background / tag background */
	--yhp-top-offset: 140px;    /* space under a fixed header on project pages */
	font-family: inherit;
	color: var(--yhp-text);
}

/* ---------- Filter buttons ---------- */
.yhp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
}
.yhp-filter {
	font: inherit;
	font-size: 15px;
	padding: 9px 18px;
	border: 1px solid var(--yhp-line);
	border-radius: 999px;
	background: transparent;
	color: var(--yhp-text);
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.yhp-filter:hover { border-color: var(--yhp-accent); }
.yhp-filter.is-active {
	background: var(--yhp-accent);
	border-color: var(--yhp-accent);
	color: var(--yhp-accent-ink);
}

/* ---------- Grid ---------- */
.yhp-grid {
	display: grid;
	grid-template-columns: repeat(var(--yhp-cols, 3), minmax(0, 1fr));
	gap: 40px 28px;
}
@media (max-width: 1024px) { .yhp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .yhp-grid { grid-template-columns: 1fr; gap: 32px; } }

.yhp-card[hidden] { display: none; }

/* ---------- Card: the screenshot does the talking ---------- */
.yhp-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.yhp-card__media {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-radius: 14px;
	background: var(--yhp-soft);
	border: 1px solid var(--yhp-line);
}
.yhp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform .6s ease;
}
.yhp-card__link:hover .yhp-card__media img { transform: scale(1.03); }
.yhp-card__placeholder { position: absolute; inset: 0; background: var(--yhp-soft); }

.yhp-card__body { padding: 18px 2px 0; }
.yhp-card__title {
	margin: 10px 0 4px;
	font-size: 21px;
	line-height: 1.25;
	color: var(--yhp-text);
}
.yhp-card__client {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--yhp-muted);
}
.yhp-card__result {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--yhp-accent);
}
.yhp-card__more {
	font-size: 15px;
	font-weight: 600;
	color: var(--yhp-text);
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.yhp-card__link:hover .yhp-card__more { color: var(--yhp-accent); }

.yhp-tag {
	display: inline-block;
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--yhp-soft);
	color: var(--yhp-muted);
}

.yhp-empty {
	padding: 24px;
	border: 1px dashed var(--yhp-line);
	border-radius: 10px;
	color: var(--yhp-muted);
}

/* ---------- Single project page ---------- */
.yhp-single { padding: var(--yhp-top-offset) 20px 80px; }
.yhp-wrap { max-width: 1100px; margin: 0 auto; }

.yhp-back {
	display: inline-block;
	margin-bottom: 28px;
	font-size: 15px;
	color: var(--yhp-muted);
	text-decoration: none;
}
.yhp-back:hover { color: var(--yhp-accent); }

.yhp-single__head { max-width: 760px; margin-bottom: 36px; }
.yhp-single__title {
	margin: 14px 0 8px;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.1;
	color: var(--yhp-text);
}
.yhp-single__client { margin: 0; font-size: 18px; color: var(--yhp-muted); }
.yhp-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 24px;
}
.yhp-single__result {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--yhp-accent);
}

.yhp-single__hero {
	margin: 0 0 48px;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--yhp-line);
	background: var(--yhp-soft);
}
.yhp-single__hero img { width: 100%; height: auto; display: block; }

.yhp-single__content {
	max-width: 720px;
	font-size: 18px;
	line-height: 1.7;
}
.yhp-single__content img { max-width: 100%; height: auto; border-radius: 12px; }
.yhp-single__content h2 { margin-top: 1.8em; font-size: 28px; line-height: 1.2; }
.yhp-single__content h3 { margin-top: 1.5em; font-size: 22px; }

/* ---------- Buttons ---------- */
.yhp-btn {
	display: inline-block;
	padding: 13px 24px;
	border-radius: 10px;
	border: 1px solid var(--yhp-accent);
	background: var(--yhp-accent);
	color: var(--yhp-accent-ink);
	font-weight: 600;
	text-decoration: none;
	transition: opacity .2s, background-color .2s, color .2s;
}
.yhp-btn:hover { opacity: .9; color: var(--yhp-accent-ink); }
.yhp-btn--ghost { background: transparent; color: var(--yhp-accent); }
.yhp-btn--ghost:hover { background: var(--yhp-accent); color: var(--yhp-accent-ink); opacity: 1; }

/* ---------- Call to action ---------- */
.yhp-cta {
	margin: 72px 0 48px;
	padding: 40px;
	border-radius: 18px;
	background: var(--yhp-soft);
}
.yhp-cta h2 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.yhp-cta p { margin: 0 0 22px; color: var(--yhp-muted); font-size: 17px; max-width: 560px; }
.yhp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Previous / next ---------- */
.yhp-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	border-top: 1px solid var(--yhp-line);
	padding-top: 24px;
}
.yhp-pager a {
	color: var(--yhp-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 18px;
}
.yhp-pager a:hover { color: var(--yhp-accent); }
.yhp-pager span { display: block; font-size: 14px; font-weight: 400; color: var(--yhp-muted); margin-bottom: 4px; }
.yhp-pager__next { text-align: right; grid-column: 2; }

@media (max-width: 640px) {
	.yhp-single { padding-left: 16px; padding-right: 16px; }
	.yhp-cta { padding: 28px 22px; }
	.yhp-pager { grid-template-columns: 1fr; }
	.yhp-pager__next { text-align: left; grid-column: auto; }
}

/* ---------- Accessibility ---------- */
.yhp-filter:focus-visible,
.yhp-card__link:focus-visible,
.yhp-btn:focus-visible,
.yhp-back:focus-visible,
.yhp-pager a:focus-visible {
	outline: 2px solid var(--yhp-accent);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.yhp-card__media img,
	.yhp-filter,
	.yhp-btn { transition: none; }
	.yhp-card__link:hover .yhp-card__media img { transform: none; }
}