/**
 * Zen Addons Pro - Portfolio ready-made designs.
 *
 * Thirty self-contained card looks for the Portfolio Grid widget. Portfolio is a
 * Pro-only widget, so every design ships to every licensed user: there is no free
 * tier to gate against and no locked-upsell cards.
 *
 * SPECIFICITY: every rule is scoped under a TRIPLED
 * `.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-<id>` root, so it only
 * ever paints a Portfolio that opted into a design, and it deterministically beats
 * the widget's own compiled base (SiteOrigin compiles the LESS at 0,2,0 under
 * `.so-widget-<id>`) regardless of stylesheet load order, without `!important`.
 * The classic card (no design selected) is never touched by this file.
 *
 * GLYPHS: drawn from the self-hosted "ZASO Material Symbols Rounded" subset that
 * the free core bundles (no CDN, no Google Fonts request). The subset does NOT
 * contain `north_east`, so the diagonal arrows render `arrow_forward` (e5c8)
 * rotated -45deg rather than a missing-glyph box.
 *
 * @package Zen Addons for SiteOrigin Page Builder Pro
 */

/* ------------------------------------------------------------------ *
 * Shared design scaffolding.
 *
 * The renderer emits ONE enriched markup for every design (eyebrow, index,
 * badge, chips, ribbon, tags, metrics, author, meta, CTA, glyph). Everything
 * is hidden here; each design opts back in only what it uses. That is why a
 * design change never needs a markup change.
 * ------------------------------------------------------------------ */

.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__eyebrow,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__index,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__badge,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__chips,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__ribbon,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__tags,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__metrics,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__author,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__meta,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__cta,
.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__glyph {
	display: none;
}

/* Typography + reset shared by every design. */
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] {
	font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__item {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	overflow: visible;
}

.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

/* Kill the theme's link underline on every text piece of a design'd card (Twenty
   Twenty-One underlines anchors and the decoration paints through the spans). */
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__link,
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__link:hover,
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__link:focus,
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__cta,
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__cta-label {
	text-decoration: none;
}

.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: #e2e8f0;
}

/*
 * The image FILLS its frame by absolute positioning, not `height: 100%`.
 * A percentage height on an <img> inside the `<span class="…__media">` does not
 * resolve reliably against the span's own height (the theme's `img { height: auto }`
 * then wins the used value and the card shows a band of empty frame under the
 * photo). Absolute inset removes the dependency entirely: the frame's height is the
 * only thing that decides the crop, in every design and every theme.
 */
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__img {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__item:hover .zaso-portfolio__img {
	transform: scale( 1.07 );
}

.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__img--placeholder {
	background: linear-gradient( 135deg, #6366f1, #8b5cf6 );
}

.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__overlay {
	display: none;
}

/* Relative so a design can anchor a caption-row chip / arrow to the body. */
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__body {
	display: block;
	position: relative;
}

.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__title {
	display: block;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__excerpt {
	display: block;
	line-height: 1.5;
}

/* The eyebrow / meta / index are the DM Mono voice of the source design. */
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__eyebrow,
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__meta {
	font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* Shared glyph plumbing. Each design sets its own `content` + placement. */
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__glyph::before,
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__cta-label::after,
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__metric::before {
	font-family: 'ZASO Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* CTA: label + trailing arrow_forward. */
.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__cta-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
}

.zaso-portfolio.zaso-portfolio[class*="zaso-portfolio--design-"] .zaso-portfolio__cta-label::after {
	content: "\e5c8";
	font-size: 1.15em;
	font-variation-settings: 'wght' 600;
}

/* ------------------------------------------------------------------ *
 * 01 - Caption below (image top, caption under it)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-caption-below .zaso-portfolio__link {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-caption-below .zaso-portfolio__media { height: 160px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-caption-below .zaso-portfolio__body { padding: 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-caption-below .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #6366f1; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-caption-below .zaso-portfolio__title { font-size: 18px; color: #0f172a; margin: 5px 0 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-caption-below .zaso-portfolio__excerpt { font-size: 13px; color: #64748b; margin: 0 0 12px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-caption-below .zaso-portfolio__cta { display: block; font-size: 13px; color: #6366f1; }

/* ------------------------------------------------------------------ *
 * 02 - Overlay caption (always-on gradient scrim)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-overlay-caption .zaso-portfolio__link {
	position: relative;
	display: block;
	height: 240px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-overlay-caption .zaso-portfolio__media { position: absolute; inset: 0; height: 100%; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-overlay-caption .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #0d9488, #0891b2 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-overlay-caption .zaso-portfolio__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
	background: linear-gradient( to top, rgba( 15, 23, 42, 0.85 ), transparent 60% );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-overlay-caption .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #5eead4; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-overlay-caption .zaso-portfolio__title { font-size: 19px; color: #ffffff; margin: 5px 0 4px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-overlay-caption .zaso-portfolio__excerpt { font-size: 12.5px; color: rgba( 255, 255, 255, 0.85 ); margin: 0; }

/* ------------------------------------------------------------------ *
 * 03 - Split card (image left, copy right)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-card .zaso-portfolio__link {
	display: flex;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-card .zaso-portfolio__media { width: 118px; flex: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-card .zaso-portfolio__img--placeholder { background: linear-gradient( 160deg, #e11d48, #f97316 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-card .zaso-portfolio__body { flex: 1; padding: 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-card .zaso-portfolio__eyebrow { display: block; font-size: 10px; color: #e11d48; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-card .zaso-portfolio__title { font-size: 16px; color: #0f172a; margin: 5px 0 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-card .zaso-portfolio__excerpt { font-size: 12.5px; color: #64748b; margin: 0 0 10px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-card .zaso-portfolio__cta { display: block; font-size: 12.5px; color: #e11d48; }

/* ------------------------------------------------------------------ *
 * 04 - Framed (polaroid mat, arrow chip)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-framed .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 12px;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-framed .zaso-portfolio__media { height: 150px; border-radius: 12px; margin-bottom: 14px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-framed .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #d97706, #f59e0b ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-framed .zaso-portfolio__body {
	position: relative;
	padding: 0 8px 8px;
	padding-right: 46px;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-framed .zaso-portfolio__title { font-size: 16px; color: #0f172a; margin: 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-framed .zaso-portfolio__eyebrow { display: block; font-size: 12px; color: #94a3b8; text-transform: none; letter-spacing: 0; font-family: inherit; margin-top: 2px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-framed .zaso-portfolio__excerpt { display: none; }
/*
 * The arrow chip belongs in the CAPTION row, not on the photo. The markup's
 * `__glyph` sits inside `__media`, so it can only ever be positioned against the
 * image; the caption-row chip is drawn as a pseudo-element on the body instead.
 * Same reason for the label-bar play button and the minimal-line arrow below.
 */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-framed .zaso-portfolio__body::after {
	content: "\e5c8";
	display: flex;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY( -50% ) rotate( -45deg );
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fffbeb;
	align-items: center;
	justify-content: center;
	color: #d97706;
	font-family: 'ZASO Material Symbols Rounded';
	font-size: 18px;
	line-height: 1;
	font-variation-settings: 'wght' 600;
}

/* ------------------------------------------------------------------ *
 * 05 - Label bar (solid dark footer + play glyph)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-label-bar .zaso-portfolio__link {
	display: block;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-label-bar .zaso-portfolio__media { height: 170px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-label-bar .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #0f172a, #334155 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-label-bar .zaso-portfolio__body {
	position: relative;
	display: block;
	background: #0f172a;
	padding: 14px 48px 14px 18px;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-label-bar .zaso-portfolio__title { font-size: 15px; color: #ffffff; margin: 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-label-bar .zaso-portfolio__eyebrow { display: block; font-size: 11.5px; color: #94a3b8; text-transform: none; letter-spacing: 0; font-family: inherit; margin-top: 2px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-label-bar .zaso-portfolio__excerpt { display: none; }
/* Play glyph belongs in the dark label bar (the body), not on the photo. */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-label-bar .zaso-portfolio__body::after {
	content: "\e037";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY( -50% );
	color: #ffffff;
	font-family: 'ZASO Material Symbols Rounded';
	font-size: 22px;
	line-height: 1;
	font-variation-settings: 'FILL' 1;
}

/* ------------------------------------------------------------------ *
 * 06 - Minimal with tags (term chips under the title)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-tags .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-tags .zaso-portfolio__media { height: 150px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-tags .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #4f46e5, #3b82f6 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-tags .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-tags .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 0 0 10px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-tags .zaso-portfolio__excerpt { display: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-tags .zaso-portfolio__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-tags .zaso-portfolio__tag {
	font-size: 11px;
	font-weight: 600;
	color: #4f46e5;
	background: #eef2ff;
	padding: 4px 10px;
	border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * 07 - Corner tag (white term pill on the image)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-tag .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba( 79, 70, 229, 0.1 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-tag .zaso-portfolio__media { height: 170px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-tag .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #4f46e5, #7c3aed ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-tag .zaso-portfolio__badge {
	display: inline-block;
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 11px;
	font-weight: 700;
	color: #4f46e5;
	background: #ffffff;
	padding: 5px 12px;
	border-radius: 999px;
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.12 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-tag .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-tag .zaso-portfolio__title { font-size: 18px; color: #0f172a; margin: 0 0 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-tag .zaso-portfolio__excerpt { font-size: 13px; color: #64748b; margin: 0 0 12px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-tag .zaso-portfolio__cta { display: block; font-size: 13px; color: #4f46e5; }

/* ------------------------------------------------------------------ *
 * 08 - Dark with metrics
 *
 * The source mock shows likes (1.2k) and views (8.4k). WordPress stores
 * neither, and inventing numbers on a user's real posts would be a lie, so
 * this renders the REAL signals in the same treatment: comment count + date.
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__link {
	display: block;
	background: #0b1220;
	border: 1px solid #1e293b;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba( 56, 189, 248, 0.15 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__media { height: 160px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #0ea5e9, #6366f1 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #7dd3fc; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__title { font-size: 18px; color: #ffffff; margin: 5px 0 12px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__excerpt { display: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__metrics { display: flex; gap: 18px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__metric {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: #94a3b8;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__metric::before {
	font-size: 16px;
	color: #38bdf8;
	font-variation-settings: 'FILL' 1;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__metric--comments::before { content: "\e8af"; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-dark-metrics .zaso-portfolio__metric--date::before { content: "\e935"; }

/* ------------------------------------------------------------------ *
 * 09 - Tall portrait (masonry-friendly, deep scrim)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tall-portrait .zaso-portfolio__link {
	position: relative;
	display: block;
	height: 320px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba( 124, 58, 237, 0.2 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tall-portrait .zaso-portfolio__media { position: absolute; inset: 0; height: 100%; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tall-portrait .zaso-portfolio__img--placeholder { background: linear-gradient( 160deg, #7c3aed, #c026d3 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tall-portrait .zaso-portfolio__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
	background: linear-gradient( to top, rgba( 24, 7, 45, 0.9 ), transparent 55% );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tall-portrait .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #f0abfc; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tall-portrait .zaso-portfolio__title { font-size: 20px; color: #ffffff; margin: 5px 0 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tall-portrait .zaso-portfolio__excerpt { font-size: 13px; color: rgba( 255, 255, 255, 0.85 ); margin: 0; }

/* ------------------------------------------------------------------ *
 * 10 - Glass chip (frosted caption panel + round arrow)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-glass-chip .zaso-portfolio__link {
	position: relative;
	display: block;
	height: 220px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba( 15, 23, 42, 0.1 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-glass-chip .zaso-portfolio__media { position: absolute; inset: 0; height: 100%; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-glass-chip .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #f97316, #e11d48 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-glass-chip .zaso-portfolio__glyph {
	display: flex;
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.25 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	align-items: center;
	justify-content: center;
	color: #ffffff;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-glass-chip .zaso-portfolio__glyph::before {
	content: "\e5c8";
	font-size: 19px;
	font-variation-settings: 'wght' 600;
	transform: rotate( -45deg );
}
/*
 * The mock's glass panel is a white 18% tint, which assumes a saturated dark photo
 * behind it. Real featured images are often light, and white-on-light is unreadable,
 * so the pane is tinted from the slate end instead: it still reads as frosted glass
 * and the white caption stays legible on ANY image.
 */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-glass-chip .zaso-portfolio__body {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	background: rgba( 15, 23, 42, 0.38 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 14px;
	padding: 14px 16px;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-glass-chip .zaso-portfolio__eyebrow { display: block; font-size: 10px; color: rgba( 255, 255, 255, 0.85 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-glass-chip .zaso-portfolio__title { font-size: 17px; color: #ffffff; margin: 4px 0 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-glass-chip .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 11 - Featured ribbon (45deg corner banner)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-featured-ribbon .zaso-portfolio__link {
	position: relative;
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba( 217, 119, 6, 0.12 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-featured-ribbon .zaso-portfolio__media { height: 170px; overflow: visible; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-featured-ribbon .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #f59e0b, #ea580c ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-featured-ribbon .zaso-portfolio__ribbon {
	display: block;
	position: absolute;
	top: 16px;
	right: -34px;
	z-index: 2;
	transform: rotate( 45deg );
	background: #d97706;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 5px 42px;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.15 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-featured-ribbon .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-featured-ribbon .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #ea580c; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-featured-ribbon .zaso-portfolio__title { font-size: 18px; color: #0f172a; margin: 5px 0 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-featured-ribbon .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 12 - Index number (giant ghost numeral, REAL loop index)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-index-number .zaso-portfolio__link {
	position: relative;
	display: block;
	height: 220px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba( 15, 23, 42, 0.2 );
	background: linear-gradient( 150deg, #1e293b, #0f172a );
}
/*
 * No photo on this design (matches the mock): a translucent image washed the
 * dark card grey and drowned the ghost numeral, which IS the design. Only the
 * image layers are hidden, because the __index numeral itself lives inside
 * __media in the markup and must keep rendering.
 */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-index-number .zaso-portfolio__media {
	position: absolute;
	inset: 0;
	height: 100%;
	background: transparent;
	overflow: visible;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-index-number .zaso-portfolio__img,
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-index-number .zaso-portfolio__img--placeholder { display: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-index-number .zaso-portfolio__index {
	display: block;
	position: absolute;
	top: -20px;
	right: 6px;
	z-index: 2;
	font-size: 130px;
	font-weight: 800;
	color: rgba( 255, 255, 255, 0.09 );
	line-height: 1;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-index-number .zaso-portfolio__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-index-number .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #fcd34d; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-index-number .zaso-portfolio__title { font-size: 19px; color: #ffffff; margin: 5px 0 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-index-number .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 13 - Circular thumb (centred round crop)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-circular-thumb .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 26px;
	box-shadow: 0 4px 16px rgba( 13, 148, 136, 0.08 );
	text-align: center;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-circular-thumb .zaso-portfolio__media {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	margin: 0 auto 16px;
	box-shadow: 0 10px 24px rgba( 13, 148, 136, 0.3 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-circular-thumb .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #0d9488, #22d3ee ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-circular-thumb .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #0d9488; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-circular-thumb .zaso-portfolio__title { font-size: 18px; color: #0f172a; margin: 5px 0 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-circular-thumb .zaso-portfolio__excerpt { font-size: 13px; color: #64748b; margin: 0; }

/* ------------------------------------------------------------------ *
 * 14 - Video play (centred play button + bottom scrim)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__link {
	position: relative;
	display: block;
	height: 220px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba( 15, 23, 42, 0.12 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__media { position: absolute; inset: 0; height: 100%; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #334155, #0f172a ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__glyph {
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate( -50%, -50% );
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.95 );
	align-items: center;
	justify-content: center;
	color: #0f172a;
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.3 );
	transition: transform .3s ease;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__item:hover .zaso-portfolio__glyph { transform: translate( -50%, -50% ) scale( 1.08 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__glyph::before {
	content: "\e037";
	/* The subset's play_arrow draws with generous side bearings; 40px inside the
	   60px circle lands the visual weight the mock's 32px implied. */
	font-size: 40px;
	font-variation-settings: 'FILL' 1;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 20px;
	background: linear-gradient( to top, rgba( 15, 23, 42, 0.9 ), transparent );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #fcd34d; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__title { font-size: 17px; color: #ffffff; margin: 4px 0 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-video-play .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 15 - Color block (gradient rail on the left edge)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-color-block .zaso-portfolio__link {
	display: flex;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 225, 29, 72, 0.08 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-color-block .zaso-portfolio__media { width: 10px; flex: none; background: linear-gradient( #e11d48, #f97316 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-color-block .zaso-portfolio__img,
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-color-block .zaso-portfolio__img--placeholder { display: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-color-block .zaso-portfolio__body { flex: 1; padding: 22px 20px; }
/* The rose icon tile from the mock, drawn on the body (palette glyph e40a). */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-color-block .zaso-portfolio__body::before {
	content: "\e40a";
	display: flex;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #fff1f2;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	font-family: 'ZASO Material Symbols Rounded';
	font-size: 24px;
	line-height: 1;
	color: #e11d48;
	font-variation-settings: 'FILL' 1, 'wght' 500;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-color-block .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #e11d48; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-color-block .zaso-portfolio__title { font-size: 18px; color: #0f172a; margin: 5px 0 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-color-block .zaso-portfolio__excerpt { font-size: 13px; color: #64748b; margin: 0; }

/* ------------------------------------------------------------------ *
 * 16 - Chips on image (term chips floated over the photo)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-image-chips .zaso-portfolio__link {
	position: relative;
	display: block;
	height: 220px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba( 37, 99, 235, 0.12 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-image-chips .zaso-portfolio__media { position: absolute; inset: 0; height: 100%; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-image-chips .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #2563eb, #38bdf8 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-image-chips .zaso-portfolio__chips {
	display: flex;
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	gap: 6px;
	flex-wrap: wrap;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-image-chips .zaso-portfolio__chip {
	font-size: 11px;
	font-weight: 600;
	color: #2563eb;
	background: rgba( 255, 255, 255, 0.92 );
	padding: 4px 10px;
	border-radius: 999px;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-image-chips .zaso-portfolio__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	background: linear-gradient( to top, rgba( 2, 20, 60, 0.9 ), transparent );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-image-chips .zaso-portfolio__title { font-size: 18px; color: #ffffff; margin: 0 0 4px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-image-chips .zaso-portfolio__excerpt { font-size: 12.5px; color: rgba( 255, 255, 255, 0.85 ); margin: 0; }

/* ------------------------------------------------------------------ *
 * 17 - Author footer (initials avatar; NO Gravatar, that is an
 * external request the plugin forbids)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__media { height: 150px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #8b5cf6, #6366f1 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 0 0 12px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__excerpt { display: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__author {
	display: flex;
	align-items: center;
	gap: 9px;
	border-top: 1px solid #f1f5f9;
	padding-top: 14px;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__avatar {
	display: flex;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #8b5cf6;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__author-name { font-size: 12.5px; font-weight: 600; color: #475569; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-author-footer .zaso-portfolio__author-term {
	margin-left: auto;
	font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	color: #94a3b8;
}

/* ------------------------------------------------------------------ *
 * 18 - Call to action bar (solid accent footer strip)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-cta-bar .zaso-portfolio__link {
	display: block;
	border: 1px solid #ccfbf1;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba( 13, 148, 136, 0.18 );
	background: #ffffff;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-cta-bar .zaso-portfolio__media { height: 150px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-cta-bar .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #0d9488, #0891b2 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-cta-bar .zaso-portfolio__body { padding: 18px 20px 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-cta-bar .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #0d9488; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-cta-bar .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 5px 0 14px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-cta-bar .zaso-portfolio__excerpt { display: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-cta-bar .zaso-portfolio__cta {
	display: block;
	margin: 0 -20px;
	background: #0d9488;
	padding: 13px 20px;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-cta-bar .zaso-portfolio__cta-label {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 13px;
	font-weight: 800;
	color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * 19 - Minimal line (rule + mono meta line)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-line .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-line .zaso-portfolio__media { height: 160px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-line .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #64748b, #334155 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-line .zaso-portfolio__body { position: relative; padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-line .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 0; padding-right: 30px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-line .zaso-portfolio__excerpt { display: none; }
/* Arrow sits on the title row inside the body, not over the photo. */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-line .zaso-portfolio__body::after {
	content: "\e5c8";
	position: absolute;
	top: 18px;
	right: 20px;
	color: #0f172a;
	font-family: 'ZASO Material Symbols Rounded';
	font-size: 20px;
	line-height: 1.25;
	font-variation-settings: 'wght' 500;
	transform: rotate( -45deg );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-minimal-line .zaso-portfolio__meta {
	display: block;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #f1f5f9;
	font-size: 11px;
	color: #94a3b8;
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ *
 * 20 - Stacked gallery (layered frames behind the image)
 *
 * The mock's "+8" counter implies an attachment count this widget never
 * queries, so the fake counter is dropped and the stack is CSS only.
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 16px;
	box-shadow: 0 4px 16px rgba( 124, 58, 237, 0.1 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__media {
	height: 138px;
	border-radius: 12px;
	margin: 0 0 40px;
	overflow: visible;
	background: transparent;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__img,
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__img--placeholder {
	border-radius: 12px;
	position: relative;
	z-index: 3;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #7c3aed, #a855f7 ); }
/*
 * The two frames behind the photo are the whole point of this design, so they
 * peek from BELOW it (offset down + inset at the sides) rather than hiding
 * underneath. The photo keeps the top of the stack.
 */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__overlay {
	display: block;
	position: absolute;
	top: 10px;
	left: 8px;
	right: 8px;
	height: 100%;
	z-index: 2;
	border-radius: 12px;
	background: #ddd6fe;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__glyph {
	display: block;
	position: absolute;
	top: 20px;
	left: 17px;
	right: 17px;
	height: 100%;
	z-index: 1;
	border-radius: 12px;
	background: #ede9fe;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__glyph::before { content: ""; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__body { padding: 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__eyebrow {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: #94a3b8;
	font-family: inherit;
	letter-spacing: 0;
	text-transform: none;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-stacked-gallery .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 21 - Diagonal split (clip-path image, copy beneath)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-diagonal-split .zaso-portfolio__link {
	position: relative;
	display: block;
	height: 220px;
	border-radius: 18px;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	box-shadow: 0 8px 24px rgba( 8, 145, 178, 0.12 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-diagonal-split .zaso-portfolio__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 150px;
	-webkit-clip-path: polygon( 0 0, 100% 0, 100% 68%, 0 100% );
	clip-path: polygon( 0 0, 100% 0, 100% 68%, 0 100% );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-diagonal-split .zaso-portfolio__img--placeholder { background: linear-gradient( 120deg, #0891b2, #22d3ee ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-diagonal-split .zaso-portfolio__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 20px;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-diagonal-split .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #0891b2; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-diagonal-split .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 4px 0 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-diagonal-split .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 22 - Watermark (oversized ghost glyph on a dark card)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-watermark .zaso-portfolio__link {
	position: relative;
	display: block;
	overflow: hidden;
	background: #0f172a;
	border-radius: 18px;
	padding: 24px;
	min-height: 172px;
	box-shadow: 0 12px 30px rgba( 15, 23, 42, 0.25 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-watermark .zaso-portfolio__media { display: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-watermark .zaso-portfolio__body { position: relative; z-index: 2; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-watermark .zaso-portfolio__body::before {
	content: "\ea0b";
	position: absolute;
	bottom: -60px;
	right: -30px;
	z-index: -1;
	font-family: 'ZASO Material Symbols Rounded';
	font-size: 150px;
	line-height: 1;
	color: rgba( 255, 255, 255, 0.05 );
	font-variation-settings: 'FILL' 1;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-watermark .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #fcd34d; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-watermark .zaso-portfolio__title { font-size: 19px; color: #ffffff; margin: 5px 0 4px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-watermark .zaso-portfolio__excerpt { font-size: 12.5px; color: #94a3b8; margin: 0; }

/* ------------------------------------------------------------------ *
 * 23 - Gradient ring (round crop inside a gradient rim)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-ring .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 26px;
	box-shadow: 0 4px 16px rgba( 217, 70, 239, 0.08 );
	text-align: center;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-ring .zaso-portfolio__media {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	margin: 0 auto 16px;
	background: linear-gradient( 135deg, #d946ef, #8b5cf6 );
	box-sizing: border-box;
}
/*
 * The 3px inset makes the gradient read as a RING around the photo. Explicit calc
 * dimensions, NOT `width/height: auto`: an absolutely positioned REPLACED element
 * with auto dimensions resolves to its intrinsic aspect ratio instead of stretching
 * between the insets, which squashed the photo into an ellipse.
 */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-ring .zaso-portfolio__img,
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-ring .zaso-portfolio__img--placeholder {
	top: 3px;
	left: 3px;
	width: calc( 100% - 6px );
	height: calc( 100% - 6px );
	border-radius: 50%;
	border: 3px solid #ffffff;
	box-sizing: border-box;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-ring .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #d946ef, #8b5cf6 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-ring .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #c026d3; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-ring .zaso-portfolio__title { font-size: 18px; color: #0f172a; margin: 5px 0 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-ring .zaso-portfolio__excerpt { font-size: 13px; color: #64748b; margin: 0; }

/* ------------------------------------------------------------------ *
 * 24 - Panoramic (short wide crop)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-panoramic .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-panoramic .zaso-portfolio__media { height: 110px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-panoramic .zaso-portfolio__img--placeholder { background: linear-gradient( 120deg, #16a34a, #84cc16 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-panoramic .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-panoramic .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #16a34a; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-panoramic .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 5px 0 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-panoramic .zaso-portfolio__excerpt { font-size: 13px; color: #64748b; margin: 0; }

/* ------------------------------------------------------------------ *
 * 25 - Award tag (trophy pill on the image)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-award-tag .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-award-tag .zaso-portfolio__media { height: 160px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-award-tag .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #4f46e5, #6366f1 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-award-tag .zaso-portfolio__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	position: absolute;
	bottom: 14px;
	left: 14px;
	z-index: 2;
	font-size: 11px;
	font-weight: 700;
	color: #0f172a;
	background: rgba( 255, 255, 255, 0.95 );
	padding: 5px 11px;
	border-radius: 999px;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-award-tag .zaso-portfolio__badge::before {
	content: "\ea23";
	font-family: 'ZASO Material Symbols Rounded';
	font-size: 15px;
	line-height: 1;
	color: #d97706;
	font-variation-settings: 'FILL' 1;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-award-tag .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-award-tag .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #4f46e5; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-award-tag .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 5px 0 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-award-tag .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 26 - Split thumb
 *
 * The mock uses a second and third image. The widget only ever has the one
 * featured image, so the main pane carries the real photo and the side rail
 * is a CSS tint stack rather than an invented second image.
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
/*
 * The mock's right-hand rail is a second and third photo. The widget only ever has
 * the ONE featured image, so the photo takes two thirds and the rail is a CSS tint
 * stack: the same split rhythm without inventing an image that does not exist.
 */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__media {
	height: 150px;
	width: 100%;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__img,
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__img--placeholder {
	right: auto;
	width: calc( 66.67% - 3px );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #0d9488, #14b8a6 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__glyph {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 33.33%;
	background: linear-gradient( to bottom, #99f6e4 0%, #99f6e4 50%, #5eead4 50%, #5eead4 100% );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__glyph::before { content: ""; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #0d9488; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 5px 0 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-thumb .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 27 - Outline call to action (bordered button block)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 225, 29, 72, 0.08 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__media { height: 150px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #e11d48, #be123c ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #e11d48; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 5px 0 14px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__excerpt { display: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__cta { display: block; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__cta-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1.5px solid #e11d48;
	color: #e11d48;
	font-weight: 700;
	font-size: 13.5px;
	padding: 10px;
	border-radius: 11px;
	transition: background .2s ease, color .2s ease;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-outline-cta .zaso-portfolio__item:hover .zaso-portfolio__cta-label {
	background: #e11d48;
	color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * 28 - Corner badge (square numeral chip, REAL loop index)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-badge .zaso-portfolio__link {
	position: relative;
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 2, 132, 199, 0.08 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-badge .zaso-portfolio__media { height: 170px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-badge .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #0284c7, #0ea5e9 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-badge .zaso-portfolio__index {
	display: flex;
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba( 255, 255, 255, 0.95 );
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	color: #0284c7;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-badge .zaso-portfolio__body { padding: 18px 20px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-badge .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #0284c7; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-badge .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 5px 0 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-corner-badge .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 29 - Tilted frame (rotated polaroid + camera caption)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tilted-frame .zaso-portfolio__link {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.05 );
}
/*
 * The mat IS the media box (no padding): the photo is inset inside it by absolute
 * offsets, which leaves 10px of white frame on three sides and a 30px caption strip
 * at the bottom. Padding would push the absolutely-positioned photo off the mat,
 * because an absolute child is laid out against its container's PADDING box.
 */
/*
 * The polaroid mat is a white box-shadow RING around the photo, not a padded
 * parent. A padded parent cannot work: an absolutely positioned photo is laid out
 * against its container's PADDING box, so it escapes the mat, and the rotation then
 * carries that overflow outside the card. A shadow ring cannot bleed, because the
 * photo IS the box and the frame is painted around it.
 */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tilted-frame .zaso-portfolio__media {
	height: 140px;
	border-radius: 4px;
	margin: 20px 24px 44px;
	padding: 0;
	background: #e2e8f0;
	box-shadow:
		0 0 0 10px #ffffff,
		0 0 0 11px #f1f5f9,
		0 10px 24px rgba( 15, 23, 42, 0.18 );
	transform: rotate( -3deg );
	transition: transform .35s cubic-bezier( 0.16, 1, 0.3, 1 );
	overflow: hidden;
	box-sizing: border-box;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tilted-frame .zaso-portfolio__item:hover .zaso-portfolio__media { transform: rotate( 0deg ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tilted-frame .zaso-portfolio__img--placeholder { background: linear-gradient( 135deg, #f59e0b, #f97316 ); }
/* Camera glyph rides the caption row, where the mock put the filename. */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tilted-frame .zaso-portfolio__body::after {
	content: "\e412";
	position: absolute;
	top: 2px;
	right: 0;
	color: #94a3b8;
	font-family: 'ZASO Material Symbols Rounded';
	font-size: 18px;
	line-height: 1;
	font-variation-settings: 'wght' 400;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tilted-frame .zaso-portfolio__body { padding: 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tilted-frame .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: #f59e0b; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tilted-frame .zaso-portfolio__title { font-size: 17px; color: #0f172a; margin: 5px 0 0; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tilted-frame .zaso-portfolio__excerpt { display: none; }

/* ------------------------------------------------------------------ *
 * 30 - Gradient spotlight (imageless gradient card + sparkle tile)
 * ------------------------------------------------------------------ */
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-spotlight .zaso-portfolio__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	border-radius: 18px;
	padding: 26px;
	min-height: 220px;
	box-shadow: 0 16px 40px rgba( 124, 58, 237, 0.3 );
	background: linear-gradient( 140deg, #7c3aed, #4f46e5 );
	text-align: center;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-spotlight .zaso-portfolio__link::after {
	content: "";
	position: absolute;
	bottom: -40px;
	left: -30px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.08 );
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-spotlight .zaso-portfolio__media { display: none; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-spotlight .zaso-portfolio__body { position: relative; z-index: 2; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-spotlight .zaso-portfolio__body::before {
	content: "\e65f";
	display: flex;
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: rgba( 255, 255, 255, 0.2 );
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	font-family: 'ZASO Material Symbols Rounded';
	font-size: 30px;
	line-height: 1;
	color: #ffffff;
	font-variation-settings: 'wght' 300;
}
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-spotlight .zaso-portfolio__eyebrow { display: block; font-size: 10.5px; color: rgba( 255, 255, 255, 0.8 ); }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-spotlight .zaso-portfolio__title { font-size: 19px; color: #ffffff; margin: 6px 0 6px; }
.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-gradient-spotlight .zaso-portfolio__excerpt { font-size: 13px; color: rgba( 255, 255, 255, 0.9 ); margin: 0; }

/* ------------------------------------------------------------------ *
 * Masonry + small-screen behaviour shared by every design.
 * ------------------------------------------------------------------ */
@media ( max-width: 600px ) {
	.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-tall-portrait .zaso-portfolio__link { height: 260px; }
	.zaso-portfolio.zaso-portfolio.zaso-portfolio--design-split-card .zaso-portfolio__media { width: 96px; }
}