/* Projects page (page-templates/projects.php). Shared pieces live in base.css. */

/* Hero */
.pj-hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.pj-hero__shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,42,55,.95) 0%, rgba(11,42,55,.7) 55%, rgba(11,42,55,.45) 100%); }
.phero { position: relative; padding-top: 200px; padding-bottom: 88px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; }
.pj-hero__title { margin: 24px 0 0; font-size: clamp(44px, 6vw, 88px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; }
.pj-hero__text { margin: 24px 0 0; max-width: 600px; font-size: 19px; line-height: 30px; color: var(--mist); }
.kpis { margin: 0; display: grid; grid-template-columns: auto; gap: 8px 40px; }
.kpis dt { color: var(--mist); }
.kpis dd { margin: 0; font-size: 44px; font-weight: 700; color: var(--teal); }

/* Trusted by */
.pj-trust { background: #fff; border-bottom: 1px solid var(--line-light); }
.pj-trust__in { max-width: var(--max); margin: 0 auto; padding: 32px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.pj-trust__k { font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); flex: 0 0 auto; }
.pj-trust__logos { flex: 1 1 760px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; }
.cl { opacity: 1; max-width: none; }

/* Section heading */
.pj-main { background: #fff; }
.pj-main > .wrap { padding-top: 112px; padding-bottom: 112px; }
.sh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; padding-top: 24px; border-top: 1px solid var(--steel); }
.sh .tk { position: absolute; top: -6px; width: 1px; height: 11px; background: var(--steel); }
.sh .tk.l { left: 0; }
.sh .tk.r { right: 0; }
.h2 { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; font-weight: 700; letter-spacing: -.015em; }
.h3 { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.015em; }
.lbl.t { color: var(--teal-deep); }

/* Filter chips */
.pj-chips { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-light); background: #fff; color: var(--ink); font: 600 14px/20px var(--font); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Cards */
.cgrid { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.card { border: 1px solid var(--line-light); background: #fff; display: flex; flex-direction: column; cursor: pointer; }
.card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-img > img { width: 100%; height: 100%; display: block; }
.card-b { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-t { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 600; }
.card .more { color: var(--teal-deep); margin-top: auto; padding-top: 10px; }
.tag { position: absolute; left: 16px; top: 16px; padding: 6px 10px; background: var(--ink); color: #fff; font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.clogo { position: absolute; right: 16px; bottom: 16px; width: 128px; height: 44px; justify-content: center; padding: 8px 12px; box-sizing: border-box; background: #fff; display: flex; align-items: center; box-shadow: 0 4px 14px rgba(11,42,55,.22); }
.card-img .clogo img { width: auto; height: 100%; max-width: 104px; object-fit: contain; }

/* CTA row under the grid */
.pj-cta { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.pj-cta p { margin: 0; max-width: 640px; font-size: 19px; line-height: 30px; color: var(--slate); }

/* Data sheet pop-up */
.sheet-bg { position: fixed; inset: 0; z-index: 90; background: rgba(11,42,55,.78); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.sheet { position: relative; width: 100%; max-width: 1120px; max-height: calc(100vh - 48px); overflow: auto; display: flex; flex-wrap: wrap; background: #fff; color: var(--ink); border: 1px solid var(--line-light); }
.sheet-img { flex: 1.1 1 460px; min-width: 0; position: relative; min-height: 420px; background: var(--petrol); overflow: hidden; }
.sheet-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet-body { flex: 1 1 440px; min-width: 0; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; }
.sheet-x { align-self: flex-end; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-light); background: #fff; color: var(--ink); font: 600 14px/20px var(--font); cursor: pointer; }
.sheet-x:hover { border-color: var(--ink); }
.ds { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); border-top: 1px solid var(--line-light); }
.ds dt, .ds dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.ds dt { font: 500 12px/22px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); }
.ds dd { font-size: 16px; line-height: 24px; font-weight: 600; }
.ds-desc { margin: 8px 0 0; font-size: 16px; line-height: 26px; color: var(--slate); }

/* Motion (from the design) */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.card, .sh { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
	}
	.card { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
	.card:hover { transform: perspective(1100px) rotateX(2.5deg) rotateY(-2.5deg) translateY(-6px); }
	.card-img > img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
	.card:hover .card-img > img { transform: scale(1.045); }
}

/* Phone */
@media (max-width: 900px) {
	.sh { grid-template-columns: 1fr; gap: 10px; }
	.h3 { font-size: 28px; }
	.phero { padding-top: 128px; padding-bottom: 56px; }
	.kpis { gap: 6px 24px; }
	.kpis dd { font-size: 32px; }
	.pj-main > .wrap { padding-top: 64px; padding-bottom: 64px; }
	.pj-main .btn-p { height: auto; min-height: 54px; padding-top: 14px; padding-bottom: 14px; justify-content: center; text-align: center; width: 100%; }
	.cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cgrid .card-t { font-size: 16px; }
	.cgrid .card-b { padding: 12px; gap: 6px; }
	.cgrid .card .lbl { font-size: 10px; letter-spacing: .06em; }
	.cgrid .clogo { width: 80px; height: 30px; padding: 5px 8px; right: 8px; bottom: 8px; }
	.cgrid .card-img .clogo img { max-width: 64px; }
	.cgrid .tag { font-size: 9px; line-height: 12px; padding: 3px 6px; left: 8px; top: 8px; max-width: calc(100% - 16px); }
	.sheet-bg { padding: 12px; align-items: flex-start; }
	.sheet { max-height: calc(100vh - 24px); }
	.sheet-img { min-height: 220px; flex-basis: 100%; }
	.sheet-body { padding: 20px; gap: 16px; }
	.ds { grid-template-columns: 104px minmax(0, 1fr); }
	.ds dd { font-size: 15px; }
}

/* Smooth data sheet pop-up */
.sheet-bg:not([hidden]) { animation: pop-bg-in .24s ease both; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet-bg:not([hidden]) .sheet { animation: pop-in .32s cubic-bezier(.2,.7,.2,1) both; }
.sheet-bg.is-closing { animation: pop-bg-out .2s ease both; }
.sheet-bg.is-closing .sheet { animation: pop-out .2s ease both; }
.chip { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce) { .sheet-bg, .sheet { animation: none !important; } }