/*
  Shared styles for features every theme shows: embedded video, link-preview metadata,
  gallery + lightbox, resume card. Colours derive from each theme's own text colour
  (currentColor + color-mix), so they blend in without per-theme work.
  Themes can override any of these classes.
*/
.pm-section { margin: 56px auto 0; }
.pm-h2 { margin: 0 0 18px; }

/* Video */
.pm-video { position: relative; aspect-ratio: 16 / 9; margin: 14px 0; border-radius: 12px; overflow: hidden; background: #000; }
.pm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Link preview / GitHub meta */
.pm-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: .82em; opacity: .8; }
.pm-site { text-transform: uppercase; letter-spacing: .08em; font-size: .9em; }
.pm-lang i { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: currentColor; margin-right: .35em; opacity: .7; }

/* Gallery */
.pm-gallery-grid { columns: 3 220px; column-gap: 14px; }
.pm-gallery-item { display: block; position: relative; margin: 0 0 14px; break-inside: avoid; border-radius: 12px; overflow: hidden; text-decoration: none; color: #fff; background: none; box-shadow: none; }
.pm-gallery-item img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; }
.pm-gallery-item:hover img { transform: scale(1.05); }
.pm-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; font-size: .82rem; background: linear-gradient(transparent, rgba(0,0,0,.72)); opacity: 0; transform: translateY(6px); transition: .3s; }
.pm-gallery-item:hover .pm-cap, .pm-gallery-item:focus-visible .pm-cap { opacity: 1; transform: none; }

.pm-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 4vmin; }
.pm-lightbox:target { display: flex; animation: pm-fade .25s ease; }
.pm-lightbox-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 8, .88); backdrop-filter: blur(6px); box-shadow: none; }
.pm-lightbox figure { position: relative; margin: 0; max-width: min(1200px, 92vw); text-align: center; color: #eee; }
.pm-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: pm-zoom .35s cubic-bezier(.2,.7,.2,1); }
.pm-lightbox figcaption { margin-top: 12px; font-size: .95rem; }
.pm-lightbox-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; line-height: 1; color: #fff !important; background: rgba(255,255,255,.12) !important; text-decoration: none; box-shadow: none !important; }
@keyframes pm-fade { from { opacity: 0; } }
@keyframes pm-zoom { from { transform: scale(.94); opacity: 0; } }

/* Resume */
.pm-resume-card {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    background: color-mix(in srgb, currentColor 4%, transparent);
}
.pm-resume-icon { width: 52px; height: 64px; border-radius: 8px; display: grid; place-items: center; font: 700 .78rem/1 system-ui, sans-serif; letter-spacing: .06em; color: #fff; background: linear-gradient(160deg, #ef4444, #b91c1c); box-shadow: 0 8px 20px -8px #b91c1c; flex-shrink: 0; }
.pm-resume-text { display: grid; gap: 2px; flex: 1; min-width: 180px; }
.pm-resume-text span { font-size: .85em; opacity: .7; }
.pm-resume-actions { display: flex; gap: 10px; }
.pm-btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; font-size: .9em; font-weight: 600; text-decoration: none; color: inherit; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: none; box-shadow: none; transition: transform .2s, background .2s; }
.pm-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, currentColor 8%, transparent); }
.pm-btn-solid { border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent); }
.pm-resume-preview { margin-top: 12px; }
.pm-resume-preview summary { cursor: pointer; font-size: .9em; opacity: .75; }
.pm-resume-preview object { width: 100%; height: 80vh; margin-top: 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); background: #fff; }

/* Scroll reveals (only when motion.js has run; content is always visible without JS) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .pm-gallery-item img, .pm-lightbox, .pm-lightbox img { transition: none; animation: none; }
}

/* Availability badge */
.pm-avail { display: inline-flex; align-items: center; gap: .55em; margin: 0 0 14px; padding: .4em .95em; border-radius: 999px; font-size: .82rem; font-weight: 600; line-height: 1.3;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); }
.pm-avail i { position: relative; width: .6em; height: .6em; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.pm-avail i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pm-ping 2s cubic-bezier(0,0,.2,1) infinite; }
.pm-avail-busy i { background: #f59e0b; }
.pm-avail-busy i::after { animation: none; }
@keyframes pm-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* Story: signature statement, services, quote */
.pm-story { display: grid; gap: 22px; justify-items: start; }
.pm-tagline { margin: 0; max-width: 26ch; font-size: clamp(1.6rem, 5.4vw, 2.6rem); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.pm-services-title { margin: 12px 0 0; }
.pm-services { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.pm-services li { display: grid; gap: 4px; align-content: start; padding: 18px 18px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    background: color-mix(in srgb, currentColor 3%, transparent); transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.pm-services li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, currentColor 35%, transparent); }
.pm-svc-no { font-size: .72rem; letter-spacing: .14em; opacity: .55; font-variant-numeric: tabular-nums; }
.pm-services strong { font-size: 1.05rem; }
.pm-svc-desc { font-size: .92rem; opacity: .75; }
.pm-quote { margin: 8px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid color-mix(in srgb, currentColor 40%, transparent); max-width: 60ch; }
.pm-quote blockquote { margin: 0; }
.pm-quote p { margin: 0; font-size: clamp(1.15rem, 3.6vw, 1.45rem); line-height: 1.45; font-style: italic; }
.pm-quote p::before { content: "“"; } .pm-quote p::after { content: "”"; }
.pm-quote figcaption { margin-top: 10px; font-size: .85rem; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .pm-avail i::after { animation: none; } .pm-services li { transition: none; } }

/* Demo bar on /demo/{theme}: same look on every theme */
.pm-demo-bar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2000;
    display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; max-width: calc(100% - 20px); border-radius: 999px;
    font: 500 14px/1.2 Inter, "Segoe UI", system-ui, sans-serif; color: #f8fafc; background: rgba(15, 23, 42, .92);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 32px -8px rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    animation: pm-demo-in .6s cubic-bezier(.2,.8,.2,1) .4s both; }
.pm-demo-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; color: #cbd5e1; }
.pm-demo-label b { color: #fff; font-weight: 600; }
.pm-demo-bar a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-weight: 600; }
.pm-demo-ghost { color: #e2e8f0 !important; }
.pm-demo-ghost:hover { background: rgba(255,255,255,.1); }
.pm-demo-cta { color: #fff !important; background: linear-gradient(135deg, #2336ec, #7a2df0 55%, #f025c4); box-shadow: 0 6px 16px -6px #7a2df0; }
.pm-demo-cta:hover { filter: brightness(1.08); }
.theme-liquidgradient .pm-demo-bar { bottom: calc(96px + env(safe-area-inset-bottom)); }
@keyframes pm-demo-in { from { opacity: 0; transform: translate(-50%, 20px); } }
@media (max-width: 480px) { .pm-demo-label { display: none; } .pm-demo-bar { padding-left: 6px; } }
@media (prefers-reduced-motion: reduce) { .pm-demo-bar { animation: none; } }

/* Link-preview covers (GitHub repo cards, Open Graph images) carry text near their edges:
   show the whole image instead of cropping it to fill the frame. Uploaded screenshots still fill. */
img.pm-fit:not(.ix-float) { transform: none !important; }
img.pm-fit { object-fit: contain !important; object-position: center !important; }
img.pm-fit-light { background: #fff; }
.pm-cover-card { background: color-mix(in srgb, currentColor 6%, transparent); }