/* NoorVista 3.2.10 — single canonical stylesheet for the public portfolio page.
 * Card thumbnails use a stable 4:3 cover crop. The lightbox always shows the full image.
 * Keep portfolio card/media/lightbox rules here so no secondary portfolio override layer is needed.
 */
:root{
  --nv-portfolio-ink:#123f68;
  --nv-portfolio-muted:#687f91;
  --nv-portfolio-line:#d9e7f0;
  --nv-portfolio-accent:#0e83b8;
  --nv-portfolio-surface:#f4f9fc;
}

body[data-public-page="portfolio"] .nv-portfolio-main{max-width:1220px;margin:0 auto;padding:64px 20px 132px}
body[data-public-page="portfolio"] .nv-portfolio-intro{position:relative;text-align:center;max-width:780px;margin:0 auto 38px}
body[data-public-page="portfolio"] .nv-portfolio-intro::before{content:"";display:grid;place-items:center;width:72px;height:72px;margin:0 auto 16px;border:1px solid #bfe1ee;border-radius:24px;background:linear-gradient(145deg,#e9f9ff,#fff);box-shadow:0 16px 38px rgba(14,131,184,.13);-webkit-mask:none;mask:none}
body[data-public-page="portfolio"] .nv-portfolio-intro::after{content:"";position:absolute;width:30px;height:30px;background:#087eaa;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9.2 4.5 10.4 3h3.2l1.2 1.5H18a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h3.2ZM12 17a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0-2a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9.2 4.5 10.4 3h3.2l1.2 1.5H18a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h3.2ZM12 17a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0-2a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;transform:translateY(-67px)}
body[data-public-page="portfolio"] .nv-portfolio-intro>span{display:inline-flex;padding:7px 14px;border-radius:999px;background:#eaf8ff;color:#0878a5;font-size:.8rem;font-weight:850}
body[data-public-page="portfolio"] .nv-portfolio-intro h1{color:var(--nv-portfolio-ink)!important;font-size:clamp(2rem,4vw,3.2rem)!important;margin:14px 0 10px!important}
body[data-public-page="portfolio"] .nv-portfolio-intro p{color:var(--nv-portfolio-muted)!important;line-height:2.05!important;margin:0!important;font-size:.96rem!important}

body[data-public-page="portfolio"] .nv-public-portfolio-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;align-items:stretch!important;grid-auto-rows:1fr!important}
body[data-public-page="portfolio"] .nv-public-portfolio-card{min-width:0;height:100%;background:#fff!important;border:1px solid var(--nv-portfolio-line)!important;border-radius:24px!important;overflow:hidden!important;box-shadow:0 18px 42px rgba(15,42,70,.075)!important;display:grid!important;grid-template-rows:auto 1fr!important;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important}
@media(hover:hover){
  body[data-public-page="portfolio"] .nv-public-portfolio-card:hover{transform:translateY(-3px)!important;border-color:#bfdcea!important;box-shadow:0 24px 52px rgba(15,42,70,.12)!important}
}

/* Stable thumbnail stage: card images are intentionally cropped for visual consistency. */
body[data-public-page="portfolio"] .nv-public-portfolio-image{position:relative!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important;min-height:0!important;padding:12px!important;box-sizing:border-box!important;overflow:hidden!important;background:linear-gradient(180deg,#edf7fb 0%,#deeff7 100%)!important;isolation:isolate!important;border-radius:0!important;clip-path:none!important}
body[data-public-page="portfolio"] .nv-public-portfolio-image>button{position:relative!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;border:0!important;background:#dfeaf1!important;cursor:zoom-in!important;display:block!important;overflow:hidden!important;border-radius:16px!important;clip-path:none!important;appearance:none!important;-webkit-appearance:none!important}
body[data-public-page="portfolio"] .nv-public-portfolio-image>button::before{content:none!important;display:none!important}
body[data-public-page="portfolio"] .nv-public-portfolio-image>button::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:3!important;background:linear-gradient(180deg,rgba(4,24,38,0) 54%,rgba(4,24,38,.24) 100%)!important;opacity:.72!important;pointer-events:none!important;transition:opacity .22s ease!important}
body[data-public-page="portfolio"] .nv-public-portfolio-image img{position:absolute!important;inset:0!important;z-index:2!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:block!important;object-fit:cover!important;object-position:center center!important;border-radius:16px!important;clip-path:none!important;filter:none!important;transform:scale(1)!important;transform-origin:center center!important;transition:transform .28s ease!important}
@media(hover:hover){
  body[data-public-page="portfolio"] .nv-public-portfolio-card:hover .nv-public-portfolio-image img,
  body[data-public-page="portfolio"] .nv-public-portfolio-image>button:hover img{transform:scale(1.025)!important}
  body[data-public-page="portfolio"] .nv-public-portfolio-image>button:hover::after{opacity:.9!important}
}
body[data-public-page="portfolio"] .nv-public-portfolio-image>button:focus-visible{outline:3px solid #16a7c4!important;outline-offset:-3px!important}
body[data-public-page="portfolio"] .nv-public-portfolio-zoom{position:absolute!important;z-index:6!important;left:50%!important;right:auto!important;bottom:14px!important;width:min(220px,calc(100% - 28px))!important;max-width:calc(100% - 28px)!important;min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:9px 14px!important;border-radius:999px!important;background:rgba(7,39,59,.9)!important;color:#fff!important;font-size:.78rem!important;font-weight:900!important;line-height:1.5!important;backdrop-filter:blur(10px)!important;box-shadow:0 10px 28px rgba(4,24,38,.28)!important;pointer-events:none!important;white-space:nowrap!important;overflow:hidden!important;transform:translateX(-50%)!important;opacity:1!important;visibility:visible!important}
body[data-public-page="portfolio"] .nv-public-portfolio-zoom::before{content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 5C6.4 5 2.3 10.1 1.5 11.2a1.3 1.3 0 0 0 0 1.6C2.3 13.9 6.4 19 12 19s9.7-5.1 10.5-6.2a1.3 1.3 0 0 0 0-1.6C21.7 10.1 17.6 5 12 5Zm0 11.2A4.2 4.2 0 1 1 12 7.8a4.2 4.2 0 0 1 0 8.4Zm0-1.9a2.3 2.3 0 1 0 0-4.6 2.3 2.3 0 0 0 0 4.6Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 5C6.4 5 2.3 10.1 1.5 11.2a1.3 1.3 0 0 0 0 1.6C2.3 13.9 6.4 19 12 19s9.7-5.1 10.5-6.2a1.3 1.3 0 0 0 0-1.6C21.7 10.1 17.6 5 12 5Zm0 11.2A4.2 4.2 0 1 1 12 7.8a4.2 4.2 0 0 1 0 8.4Zm0-1.9a2.3 2.3 0 1 0 0-4.6 2.3 2.3 0 0 0 0 4.6Z'/%3E%3C/svg%3E") center/contain no-repeat}

body[data-public-page="portfolio"] .nv-public-portfolio-body{padding:16px 18px 18px!important;display:flex!important;flex-direction:column!important;gap:8px!important;min-height:166px!important}
body[data-public-page="portfolio"] .nv-public-portfolio-category{align-self:flex-start!important;color:#0b7ca8!important;font-size:.75rem!important;font-weight:850!important;padding:4px 9px!important;border-radius:999px!important;background:#edf9ff!important}
body[data-public-page="portfolio"] .nv-public-portfolio-body h2{margin:0!important;color:var(--nv-portfolio-ink)!important;font-size:1.08rem!important;line-height:1.7!important}
body[data-public-page="portfolio"] .nv-public-portfolio-body p{margin:0!important;color:var(--nv-portfolio-muted)!important;line-height:1.95!important;font-size:.86rem!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
body[data-public-page="portfolio"] .nv-public-portfolio-empty{grid-column:1/-1;text-align:center;padding:60px;border:1px dashed #b8d8e8;border-radius:22px;color:var(--nv-portfolio-muted);background:#fff}

/* Lightbox: always show the entire source image without cropping. */
body[data-public-page="portfolio"] .nv-portfolio-lightbox{position:fixed!important;inset:0!important;z-index:10000!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;padding:clamp(12px,2vw,28px)!important;border:0!important;background:rgba(2,18,28,.91)!important;box-sizing:border-box!important;overflow:hidden!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox::backdrop{background:rgba(2,18,28,.91)!important;backdrop-filter:blur(8px)!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox[open]{display:grid!important;place-items:center!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__panel{position:relative!important;width:min(1180px,96vw)!important;height:min(88dvh,840px)!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(310px,370px)!important;grid-template-areas:"image copy"!important;border-radius:24px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 32px 110px rgba(0,0,0,.45)!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__image{grid-area:image!important;position:relative!important;min-width:0!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important;box-sizing:border-box!important;overflow:hidden!important;background:#061f2e!important;isolation:isolate!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__image::before,
body[data-public-page="portfolio"] .nv-portfolio-lightbox__image::after{content:none!important;display:none!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__image img{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;display:block!important;margin:auto!important;border-radius:0!important;clip-path:none!important;filter:none!important;transform:none!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__copy{grid-area:copy!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:12px!important;padding:30px 26px 24px!important;overflow:auto!important;background:linear-gradient(180deg,#fff,#f7fbfd)!important;border-right:1px solid rgba(215,230,239,.95)!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__category{align-self:flex-start!important;display:inline-flex!important;padding:6px 10px!important;border-radius:999px!important;background:#eaf8ff!important;color:#0878a5!important;font-size:.74rem!important;font-weight:850!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__copy h2{margin:0!important;color:var(--nv-portfolio-ink)!important;font-size:clamp(1.2rem,2vw,1.55rem)!important;line-height:1.7!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__copy p{margin:0!important;color:var(--nv-portfolio-muted)!important;font-size:.92rem!important;line-height:2.05!important;white-space:pre-line!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__notice{margin-top:auto!important;padding-top:16px!important;border-top:1px solid #dce9f0!important;color:#7890a1!important;font-size:.76rem!important;line-height:1.85!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__counter{position:absolute!important;right:16px!important;bottom:14px!important;z-index:3!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:54px!important;height:32px!important;padding:0 10px!important;border-radius:999px!important;background:rgba(3,24,36,.72)!important;color:#fff!important;font-size:.72rem!important;font-weight:850!important;backdrop-filter:blur(10px)!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__close{position:absolute!important;top:14px!important;left:14px!important;z-index:4!important;width:44px!important;height:44px!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.35)!important;background:rgba(7,39,59,.78)!important;color:#fff!important;font-size:1.65rem!important;line-height:1!important;cursor:pointer!important;box-shadow:0 10px 26px rgba(0,0,0,.22)!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__nav{position:absolute!important;top:50%!important;z-index:4!important;width:44px!important;height:54px!important;transform:translateY(-50%)!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:14px!important;background:rgba(7,39,59,.65)!important;color:#fff!important;font-size:1.65rem!important;cursor:pointer!important;backdrop-filter:blur(10px)!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__nav--prev{right:14px!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__nav--next{left:14px!important}
body[data-public-page="portfolio"] .nv-portfolio-lightbox__nav[hidden]{display:none!important}

@media(max-width:920px){
  body[data-public-page="portfolio"] .nv-public-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-public-page="portfolio"] .nv-portfolio-main{padding-top:46px!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox__panel{grid-template-columns:minmax(0,1fr) minmax(270px,330px)!important}
}

@media(max-width:700px){
  body[data-public-page="portfolio"] .nv-portfolio-lightbox{padding:0!important;overflow-y:auto!important;overflow-x:hidden!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox[open]{display:block!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox__panel{width:100%!important;height:auto!important;max-height:none!important;min-height:100dvh!important;grid-template-columns:1fr!important;grid-template-rows:minmax(300px,68dvh) auto!important;grid-template-areas:"image" "copy"!important;border-radius:0!important;overflow:visible!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox__image{width:100%!important;height:68dvh!important;min-height:300px!important;max-height:68dvh!important;padding:12px!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox__copy{overflow:visible!important;border-right:0!important;border-top:1px solid #dce9f0!important;padding:20px 18px 22px!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox__close{position:fixed!important;top:max(10px,env(safe-area-inset-top))!important;left:10px!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox__counter{right:12px!important;bottom:12px!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox__nav{width:40px!important;height:48px!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox__nav--prev{right:10px!important}
  body[data-public-page="portfolio"] .nv-portfolio-lightbox__nav--next{left:10px!important}
}

@media(max-width:620px){
  body[data-public-page="portfolio"] .nv-public-portfolio-grid{grid-template-columns:1fr!important;gap:16px!important}
  body[data-public-page="portfolio"] .nv-portfolio-main{padding:34px 12px 118px!important}
  body[data-public-page="portfolio"] .nv-portfolio-intro{margin-bottom:24px!important}
  body[data-public-page="portfolio"] .nv-portfolio-intro h1{font-size:1.8rem!important}
  body[data-public-page="portfolio"] .nv-portfolio-intro p{font-size:.86rem!important}
  body[data-public-page="portfolio"] .nv-public-portfolio-card{border-radius:18px!important}
  body[data-public-page="portfolio"] .nv-public-portfolio-body{padding:15px!important;min-height:0!important}
  body[data-public-page="portfolio"] .nv-public-portfolio-image{aspect-ratio:4/3!important;padding:10px!important}
  body[data-public-page="portfolio"] .nv-public-portfolio-image>button,
  body[data-public-page="portfolio"] .nv-public-portfolio-image img{border-radius:14px!important}
  body[data-public-page="portfolio"] .nv-public-portfolio-zoom{bottom:10px!important;width:min(210px,calc(100% - 20px))!important;max-width:calc(100% - 20px)!important;min-height:40px!important}
}

/* Portfolio mobile navigation/sidebar isolation retained from 3.0.106. */
@media(max-width:720px){
  body[data-public-page="portfolio"]{overflow-x:hidden!important}
  body[data-public-page="portfolio"] .navbar{z-index:10030!important}
  body[data-public-page="portfolio"] .navbar .container.nav-inner{max-width:100%!important;overflow:visible!important}
  body[data-public-page="portfolio"] .navbar nav{position:static!important;min-width:0!important}
  body[data-public-page="portfolio"] .navbar .menu{position:fixed!important;z-index:10031!important;top:96px!important;right:10px!important;left:10px!important;bottom:10px!important;width:auto!important;max-width:none!important;max-height:none!important;margin:0!important;padding:12px!important;border:1px solid #d8e8f1!important;border-radius:20px!important;background:rgba(255,255,255,.985)!important;box-shadow:0 26px 70px rgba(7,39,59,.24)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;align-content:start!important}
  body[data-public-page="portfolio"] .navbar .menu>li>a.active,
  body[data-public-page="portfolio"] .navbar .menu>li>a[aria-current="page"]{background:linear-gradient(135deg,#e0f5ff,#edf9ff)!important;color:#075985!important;box-shadow:inset -3px 0 0 #0ea5e9!important}
  body[data-public-page="portfolio"].nv-mobile-menu-open{overflow:hidden!important}
  body[data-public-page="portfolio"].nv-mobile-menu-open::before{content:"";position:fixed;inset:0;z-index:10020;background:rgba(2,22,34,.28);backdrop-filter:blur(3px);pointer-events:none}
}

@media(prefers-reduced-motion:reduce){
  body[data-public-page="portfolio"] .nv-public-portfolio-card,
  body[data-public-page="portfolio"] .nv-public-portfolio-image img,
  body[data-public-page="portfolio"] .nv-public-portfolio-image>button::after{transition:none!important}
}
