.tc-photo{
  background:var(--tc-bg);
  overflow:hidden;
  isolation:isolate;
}

.tc-photo::before,
.tc-photo::after{
  content:"";
  position:absolute;
  background-image:var(--portrait);
  background-position:center;
  background-repeat:no-repeat;
}

/* A softly enlarged copy fills the frame while the sharp copy above it
   always shows the complete portrait without cutting off the head. */
.tc-photo::before{
  inset:-16px;
  background-size:cover;
  filter:blur(14px) saturate(.82) brightness(.72);
  opacity:.62;
  transform:scale(1.08);
}

.tc-photo::after{
  inset:0;
  z-index:1;
  background-size:contain;
}

.builder-photo{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--bp-bg);
}

.builder-photo::before,
.builder-photo::after{
  content:"";
  position:absolute;
  background-image:url(images/template-people/portrait-43.webp);
  background-position:center;
  background-repeat:no-repeat;
}

.builder-photo::before{
  inset:-16px;
  background-size:cover;
  filter:blur(14px) saturate(.82) brightness(.72);
  opacity:.62;
  transform:scale(1.08);
}

.builder-photo::after{
  inset:0;
  z-index:1;
  background-size:contain;
}

/* Standard sharing controls and complete profile tabs on every card. */
.tc-utilities{position:absolute;z-index:5;top:13px;right:13px;display:flex;gap:6px}
.tc-utilities span{display:flex;align-items:center;gap:5px;min-height:29px;padding:0 9px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(7,17,31,.74);color:#fff;box-shadow:0 7px 18px rgba(0,0,0,.15);backdrop-filter:blur(10px)}
.tc-utilities svg,.tc-actions svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tc-utilities .tc-qr svg path:first-child{fill:currentColor;stroke:none}
.tc-utilities b,.tc-actions b{font:700 8px/1 var(--font-sans)}
.tc-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.tc-actions span{display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:6px 4px}
.layout-editorial .tc-actions{display:grid}
.layout-side .tc-actions{display:grid;grid-template-columns:1fr}

/* Five visual personalities combine with ten structures, so repeated layouts
   do not read as recolored copies. */
.character-0 .tc-shell{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc-accent) 35%,transparent)}
.character-0 .tc-copy small{padding-left:19px;position:relative}
.character-0 .tc-copy small::before{content:"";position:absolute;left:0;top:50%;width:13px;height:1px;background:var(--tc-accent)}
.character-1 .tc-shell{border-radius:34px 10px 34px 10px}
.character-1 .tc-copy h3{font-family:var(--font-serif);font-style:italic;font-weight:500;letter-spacing:-.025em}
.character-1 .tc-actions span{border-radius:999px;background:color-mix(in srgb,var(--tc-ink) 7%,transparent)}
.character-2 .tc-shell{box-shadow:inset 0 -8px 0 var(--tc-accent)}
.character-2 .tc-copy small{display:inline-flex;border:1px solid color-mix(in srgb,var(--tc-accent) 55%,transparent);border-radius:999px;padding:5px 8px;letter-spacing:.08em}
.character-2 .tc-actions span:first-child{background:var(--tc-accent);color:var(--tc-bg);border-color:transparent}
.character-3 .tc-shell{border-radius:8px}
.character-3 .tc-photo{filter:saturate(.78) contrast(1.06)}
.character-3 .tc-copy h3{letter-spacing:-.01em;text-transform:uppercase;font-size:21px}
.character-3 .tc-actions{gap:1px}
.character-3 .tc-actions span{border-radius:2px}
.character-4 .tc-shell{outline:1px solid color-mix(in srgb,var(--tc-accent) 45%,transparent);outline-offset:-9px}
.character-4 .tc-copy h3{font-family:var(--font-serif);font-weight:500}
.character-4 .tc-actions span{border-color:transparent;background:color-mix(in srgb,var(--tc-accent) 16%,transparent)}
.character-4 .tc-utilities span{border-radius:7px}

@media(max-width:560px){.tc-utilities span{min-height:31px;padding:0 10px}.tc-utilities b,.tc-actions b{font-size:9px}}

/* Complete digital-card gallery: every template is a fully composed client
   profile rather than a photograph with an overlaid caption. */
.template-grid{grid-template-columns:repeat(auto-fit,minmax(360px,450px));justify-content:center;align-items:start;gap:34px}
.complete-card{width:100%;max-width:450px;padding:0;border-radius:34px;background:transparent;box-shadow:var(--shadow)}
.complete-card .tc-shell{height:805px;min-height:805px;display:flex;flex-direction:column;padding:18px;border-radius:34px;overflow:hidden}
.complete-card .tc-photo{position:relative;inset:auto;width:100%;height:226px;flex:0 0 auto;border-radius:19px;transform:none;clip-path:none;box-shadow:none;filter:none}
.complete-card .tc-profile-body{position:relative;z-index:3;display:flex;flex:1;flex-direction:column;gap:10px;padding-top:14px}
.complete-card .tc-identity{text-align:center}
.complete-card .tc-identity>small{display:block;color:var(--tc-accent);font:700 8px/1.2 var(--font-sans);letter-spacing:.13em;text-transform:uppercase}
.complete-card .tc-identity h3{margin:7px 0 4px;color:var(--tc-ink);font:600 24px/1 var(--font-sans);letter-spacing:-.035em}
.complete-card .tc-identity p{margin:0;color:var(--tc-soft);font-size:11px}
.complete-card .tc-identity>span{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:8px;color:var(--tc-soft);font-size:8px}
.complete-card .tc-identity>span svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8}
.complete-card .tc-info{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.complete-card .tc-info>span{min-width:0;padding:10px;border:1px solid color-mix(in srgb,var(--tc-ink) 18%,transparent);border-radius:11px;background:color-mix(in srgb,var(--tc-ink) 4%,transparent)}
.complete-card .tc-info b,.complete-card .tc-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.complete-card .tc-info b{font-size:9px}.complete-card .tc-info small{margin-top:3px;color:var(--tc-soft);font-size:7px}
.complete-card .tc-sharing{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.complete-card .tc-primary-actions,.complete-card .tc-secondary-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.complete-card .tc-sharing span,.complete-card .tc-primary-actions span,.complete-card .tc-secondary-actions span,.complete-card .tc-save{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid color-mix(in srgb,var(--tc-ink) 23%,transparent);background:color-mix(in srgb,var(--tc-ink) 6%,transparent);color:var(--tc-ink)}
.complete-card .tc-sharing span{min-height:41px;border-radius:10px}.complete-card .tc-primary-actions span,.complete-card .tc-secondary-actions span{min-height:45px;flex-direction:column;border-radius:10px;gap:4px}
.complete-card .tc-sharing svg,.complete-card .tc-primary-actions svg,.complete-card .tc-secondary-actions svg,.complete-card .tc-save svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.complete-card .tc-sharing b,.complete-card .tc-primary-actions b,.complete-card .tc-secondary-actions b{font:700 8px/1 var(--font-sans)}
.complete-card .tc-save{min-height:44px;border:0;border-radius:11px;background:var(--tc-accent);color:var(--tc-bg);font-size:11px}
.complete-card .tc-save b{font-weight:750}
.complete-card .tc-activity{display:flex;justify-content:center;gap:8px;margin-top:auto;padding-top:2px}
.complete-card .tc-activity span{border:1px solid color-mix(in srgb,var(--tc-ink) 15%,transparent);border-radius:999px;padding:6px 9px;color:var(--tc-soft);font-size:7px}

/* Ten picture structures and five art directions create fifty distinct cards. */
.complete-card.design-1 .tc-photo{height:245px;border-radius:28px 28px 8px 8px}
.complete-card.design-1 .tc-identity{text-align:left}.complete-card.design-1 .tc-identity>span{justify-content:flex-start}
.complete-card.design-2 .tc-photo{width:205px;height:205px;margin:4px auto 0;border-radius:50%;box-shadow:0 0 0 7px color-mix(in srgb,var(--tc-accent) 35%,transparent)}
.complete-card.design-2 .tc-sharing span,.complete-card.design-2 .tc-save{border-radius:999px}
.complete-card.design-3 .tc-photo{height:238px;border-radius:120px 120px 18px 18px}
.complete-card.design-3 .tc-info>span{border-radius:2px;border-width:0 0 1px;background:transparent}
.complete-card.design-4 .tc-photo{height:220px;border-radius:18px 76px 18px 76px}
.complete-card.design-4 .tc-identity{text-align:left;padding-left:6px;border-left:3px solid var(--tc-accent)}.complete-card.design-4 .tc-identity>span{justify-content:flex-start}
.complete-card.design-5 .tc-photo{height:250px;margin:-14px -14px 0;width:calc(100% + 28px);border-radius:0 0 32px 32px}
.complete-card.design-5 .tc-profile-body{padding-top:18px}.complete-card.design-5 .tc-save{box-shadow:0 8px 20px color-mix(in srgb,var(--tc-accent) 28%,transparent)}
.complete-card.design-6 .tc-photo{width:74%;height:215px;margin-left:auto;border-radius:90px 18px 18px 90px}
.complete-card.design-6 .tc-identity{text-align:left;margin-top:-54px;width:48%;padding:10px;background:var(--tc-bg);border-radius:0 12px 0 0}.complete-card.design-6 .tc-identity>span{justify-content:flex-start;line-height:1.35}
.complete-card.design-7 .tc-photo{height:230px;border-radius:12px;box-shadow:inset 0 0 0 5px var(--tc-bg),0 0 0 1px var(--tc-accent)}
.complete-card.design-7 .tc-sharing{order:3}.complete-card.design-7 .tc-info{order:2}.complete-card.design-7 .tc-primary-actions{order:4}.complete-card.design-7 .tc-save{order:5}.complete-card.design-7 .tc-secondary-actions{order:6}.complete-card.design-7 .tc-activity{order:7}
.complete-card.design-8 .tc-photo{width:210px;height:230px;margin:0 auto;border-radius:105px 105px 16px 16px}
.complete-card.design-8 .tc-identity h3{font-family:var(--font-serif);font-weight:500}
.complete-card.design-9 .tc-photo{height:205px;border-radius:4px}
.complete-card.design-9 .tc-shell{border-radius:10px}.complete-card.design-9 .tc-info>span,.complete-card.design-9 .tc-sharing span,.complete-card.design-9 .tc-primary-actions span,.complete-card.design-9 .tc-secondary-actions span,.complete-card.design-9 .tc-save{border-radius:4px}

.complete-card.character-1 .tc-shell{border-radius:36px 12px 36px 12px}
.complete-card.character-1 .tc-identity h3{font-family:var(--font-serif);font-style:italic;font-weight:500}
.complete-card.character-2 .tc-shell{border-bottom:8px solid var(--tc-accent)}
.complete-card.character-2 .tc-secondary-actions span:first-child{background:var(--tc-accent);color:var(--tc-bg);border-color:transparent}
.complete-card.character-3 .tc-shell{border-radius:9px}.complete-card.character-3 .tc-identity h3{text-transform:uppercase;letter-spacing:-.01em;font-size:21px}
.complete-card.character-4 .tc-shell{outline:1px solid color-mix(in srgb,var(--tc-accent) 45%,transparent);outline-offset:-9px}.complete-card.character-4 .tc-identity h3{font-family:var(--font-serif);font-weight:500}

@media(max-width:1000px){.template-grid{grid-template-columns:repeat(2,minmax(320px,450px))}}
@media(max-width:760px){.template-grid{grid-template-columns:minmax(0,450px)}.complete-card{width:100%;max-width:450px;margin:0 auto}.complete-card .tc-shell{height:805px;min-height:805px}}