/* =========================================================
   Smart Portfolio Pro — Frontend CSS v1.0.3
   All visual values driven by CSS custom properties.
   Properties are set inline by PHP from saved settings —
   override anything here with Custom CSS in the dashboard.
   ========================================================= */

/* ── Base properties (fallback defaults if inline vars absent) ── */
.spp-portfolio-wrap {
  --spp-cols:             3;
  --spp-gap:              1.5rem;
  --spp-radius:           14px;
  --spp-radius-sm:        8px;
  --spp-transition:       0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --spp-font-body:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --spp-font-heading:     var(--spp-font-body);

  /* Color defaults — overridden by PHP inline style */
  --spp-wrap-bg:          #0e0e14;
  --spp-card-bg:          #16161f;
  --spp-card-border:      #2a2a3a;
  --spp-surface-2:        #1e1e2a;
  --spp-text:             #e8e8f0;
  --spp-text-muted:       #8888a8;
  --spp-accent:           #6c63ff;
  --spp-btn-bg:           #6c63ff;
  --spp-btn-text:         #ffffff;
  --spp-hover-color:      #6c63ff;
  --spp-filter-bg:        #1e1e2a;
  --spp-filter-border:    #2a2a3a;
  --spp-filter-text:      #8888a8;
  --spp-filter-active-bg: #6c63ff;
  --spp-filter-active-tx: #ffffff;
  --spp-badge-wp:         #0073aa;
  --spp-badge-custom:     #e74c3c;
  --spp-badge-seo:        #27ae60;
  --spp-badge-webapp:     #f39c12;
  --spp-modal-bg:         #0e0e14;
  --spp-modal-header-bg:  #13131c;
  --spp-modal-overlay:    #05050a;
  --spp-modal-radius:     18px;
}

/* Font families */
.spp-font-serif   { --spp-font-heading: Georgia, 'Times New Roman', serif; }
.spp-font-mono    { --spp-font-heading: 'Courier New', Courier, monospace; }
.spp-font-display { --spp-font-heading: 'Playfair Display', Georgia, serif; }

/* =========================================================
   WRAPPER
   ========================================================= */
.spp-portfolio-wrap {
  background:   var(--spp-wrap-bg);
  color:        var(--spp-text);
  font-family:  var(--spp-font-body);
  padding:      2.5rem 1.5rem;
  border-radius:var(--spp-radius);
  box-sizing:   border-box;
}
.spp-portfolio-wrap *, .spp-portfolio-wrap *::before, .spp-portfolio-wrap *::after {
  box-sizing: border-box;
}

/* =========================================================
   FILTERS
   ========================================================= */
.spp-filters {
  display:        flex;
  flex-wrap:      wrap;
  gap:            .5rem;
  margin-bottom:  2rem;
  padding-bottom: 1.5rem;
  border-bottom:  1px solid var(--spp-card-border);
}
.spp-filter-btn {
  background:    var(--spp-filter-bg);
  color:         var(--spp-filter-text);
  border:        1px solid var(--spp-filter-border);
  padding:       .45rem 1.1rem;
  border-radius: 999px;
  cursor:        pointer;
  font-size:     .825rem;
  font-weight:   500;
  letter-spacing:.03em;
  transition:    all var(--spp-transition);
  font-family:   var(--spp-font-body);
  white-space:   nowrap;
  line-height:   1;
}
.spp-filter-btn:hover {
  color:        var(--spp-filter-active-tx);
  border-color: var(--spp-filter-active-bg);
  background:   var(--spp-filter-active-bg);
  opacity:      .8;
}
.spp-filter-btn.active {
  background:   var(--spp-filter-active-bg);
  color:        var(--spp-filter-active-tx);
  border-color: var(--spp-filter-active-bg);
  box-shadow:   0 0 16px rgba(0,0,0,.25);
}

/* =========================================================
   GRID
   ========================================================= */
.spp-grid {
  display:               grid;
  grid-template-columns: repeat(var(--spp-cols), 1fr);
  gap:                   var(--spp-gap);
}
.spp-layout-masonry .spp-grid { grid-auto-rows: 10px; }
.spp-layout-minimal .spp-grid { gap: 1rem; }

/* =========================================================
   CARD  (inner = <button>)
   ========================================================= */
.spp-card { display: block; }
.spp-card.spp-hidden     { display: none; }
.spp-card.spp-filter-out { animation: sppFadeOut .2s ease forwards; }
.spp-card.spp-filter-in  { animation: sppFadeUp  .3s ease forwards; }

.spp-card-inner {
  -webkit-appearance: none;
  appearance:         none;
  background:         var(--spp-card-bg);
  border:             1px solid var(--spp-card-border);
  border-radius:      var(--spp-radius);
  box-shadow:         0 4px 20px rgba(0,0,0,.35);
  cursor:             pointer;
  text-align:         left;
  font-family:        var(--spp-font-body);
  color:              var(--spp-text);
  padding:            0;
  margin:             0;
  width:              100%;
  display:            flex;
  flex-direction:     column;
  overflow:           hidden;
  transition:         transform var(--spp-transition),
                      box-shadow var(--spp-transition),
                      border-color var(--spp-transition);
}
.spp-card-inner:focus-visible {
  outline:        3px solid var(--spp-accent);
  outline-offset: 2px;
}

/* ── Hover effects ── */
.spp-hover-lift   .spp-card-inner:hover {
  transform:  translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.spp-hover-glow   .spp-card-inner:hover {
  box-shadow: 0 0 0 1.5px var(--spp-hover-color),
              0 8px 30px rgba(0,0,0,.45);
}
.spp-hover-border .spp-card-inner:hover {
  border-color: var(--spp-hover-color);
  box-shadow:   0 8px 30px rgba(0,0,0,.4);
}
.spp-card.spp-featured .spp-card-inner {
  border-color: var(--spp-accent);
  border-width: 1.5px;
}

/* ── Card visual ── */
.spp-card-visual {
  position:    relative;
  overflow:    hidden;
  aspect-ratio: 16/9;
  background:  var(--spp-surface-2);
  flex-shrink: 0;
}
.spp-card-img {
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.spp-card-inner:hover .spp-card-img { transform:scale(1.06); }

.spp-card-placeholder {
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--spp-accent) 15%, var(--spp-surface-2)), var(--spp-surface-2));
}
/* fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .spp-card-placeholder { background: var(--spp-surface-2); }
}
.spp-card-icon {
  font-size:3rem;opacity:.7;line-height:1;
  transition:transform var(--spp-transition),opacity var(--spp-transition);
}
.spp-card-inner:hover .spp-card-icon { transform:scale(1.15);opacity:1; }

/* Type badge */
.spp-type-badge {
  position:absolute;top:10px;left:10px;
  color:#fff;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.22rem .65rem;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  pointer-events:none;
}
.spp-featured-badge {
  position:absolute;top:10px;right:10px;
  font-size:1rem;line-height:1;pointer-events:none;
}

/* Hover overlay */
.spp-card-overlay {
  position:absolute;inset:0;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--spp-transition);pointer-events:none;
}
.spp-card-inner:hover .spp-card-overlay { opacity:1; }

.spp-preview-cue {
  display:inline-flex;align-items:center;gap:.45rem;
  background:    var(--spp-btn-bg);
  color:         var(--spp-btn-text);
  font-size:.85rem;font-weight:600;
  padding:.6rem 1.2rem;border-radius:999px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transform:translateY(5px);
  transition:transform var(--spp-transition);
  font-family:var(--spp-font-body);
  white-space:nowrap;pointer-events:none;
}
.spp-btn-sharp .spp-preview-cue  { border-radius:4px; }
.spp-btn-glass .spp-preview-cue  {
  border-radius:8px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:rgba(from var(--spp-btn-bg) r g b / 0.75);
  border:1px solid rgba(255,255,255,.2);
}
.spp-card-inner:hover .spp-preview-cue { transform:translateY(0); }

/* ── Card body ── */
.spp-card-body {
  padding:1.1rem 1.25rem 1.25rem;
  flex:1;display:flex;flex-direction:column;gap:.5rem;
}
.spp-card-title {
  font-family:var(--spp-font-heading);
  font-size:1rem;font-weight:700;
  color:var(--spp-text);margin:0;line-height:1.35;
}
.spp-card-excerpt {
  font-size:.825rem;color:var(--spp-text-muted);
  line-height:1.55;margin:0;flex:1;
}
.spp-card-tags { display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem; }
.spp-tag {
  background:var(--spp-filter-bg);
  color:var(--spp-accent);
  font-size:.7rem;font-weight:600;
  padding:.18rem .6rem;border-radius:999px;
  border:1px solid var(--spp-card-border);
  letter-spacing:.03em;
}

/* ── Minimal layout ── */
.spp-layout-minimal .spp-card-visual { aspect-ratio:3/2; }
.spp-layout-minimal .spp-card-inner  { border-radius:var(--spp-radius-sm); }
.spp-layout-minimal .spp-card-body   { padding:.9rem 1rem 1rem; }
.spp-layout-minimal .spp-card-title  { font-size:.92rem; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
.spp-animated .spp-card { animation:sppFadeUp .5s ease both; }
.spp-animated .spp-card:nth-child(1){animation-delay:.04s}
.spp-animated .spp-card:nth-child(2){animation-delay:.08s}
.spp-animated .spp-card:nth-child(3){animation-delay:.12s}
.spp-animated .spp-card:nth-child(4){animation-delay:.16s}
.spp-animated .spp-card:nth-child(5){animation-delay:.20s}
.spp-animated .spp-card:nth-child(6){animation-delay:.24s}
.spp-animated .spp-card:nth-child(n+7){animation-delay:.28s}

@keyframes sppFadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes sppFadeOut { to{opacity:0;transform:translateY(-8px)} }

.spp-empty { grid-column:1/-1;text-align:center;padding:3rem;color:var(--spp-text-muted); }

/* =========================================================
   MODAL
   The modal is moved to <body> by JS to escape any CSS
   stacking context created by page/theme ancestors.
   ========================================================= */

/* Force the modal to always cover the full viewport.
   !important guards against theme CSS overriding these. */
#spp-modal {
  position:  fixed  !important;
  top:       0      !important;
  left:      0      !important;
  right:     0      !important;
  bottom:    0      !important;
  width:     100vw  !important;
  height:    100vh  !important;
  z-index:   2147483647 !important; /* max safe z-index */
  display:   flex   !important;
  align-items:     center;
  justify-content: center;
  padding:   1.5rem;
  margin:    0      !important;
  transform: none   !important; /* never let anything transform the modal itself */
  box-sizing:border-box;
}
#spp-modal[hidden] {
  display: none !important;
}

/* ── Backdrop — covers 100 % of the modal (= viewport) ── */
.spp-modal-backdrop {
  position:   absolute;
  top:0;left:0;right:0;bottom:0;
  background: var(--spp-modal-overlay, #05050a);
  opacity:    .92;
  backdrop-filter:         blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation:  sppBdIn .22s ease both;
}
@keyframes sppBdIn { from{opacity:0} to{opacity:.92} }

/* ── Container ── */
.spp-modal-container {
  position:      relative;
  z-index:       1;
  width:         100%;
  max-width:     1200px;
  height:        100%;
  max-height:    820px;
  background:    var(--spp-modal-bg, #0e0e14);
  border:        1px solid rgba(255,255,255,.12);
  border-radius: var(--spp-modal-radius, 18px);
  overflow:      hidden;
  display:       flex;
  flex-direction:column;
  box-shadow:    0 40px 100px rgba(0,0,0,.75);
  animation:     sppMdIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sppMdIn {
  from { opacity:0; transform:scale(.93) translateY(14px); }
  to   { opacity:1; transform:none; }
}

/* ── Position variants ── */
.spp-modal-pos-top    { align-items:flex-start; }
.spp-modal-pos-bottom { align-items:flex-end;   }
.spp-modal-pos-top    .spp-modal-container,
.spp-modal-pos-bottom .spp-modal-container { max-height:82vh; }

.spp-modal-pos-fullscreen { padding:0; }
.spp-modal-pos-fullscreen .spp-modal-container {
  max-width:none; max-height:none;
  width:100%; height:100%;
  border-radius:0; border:none;
}

/* ── Style variants ── */
.spp-modal-style-sharp .spp-modal-container   { border-radius:0; }
.spp-modal-style-glass .spp-modal-container   {
  background:              rgba(10,10,18,.8);
  backdrop-filter:         blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border:1px solid rgba(255,255,255,.2);
}
.spp-modal-style-minimal .spp-modal-container { max-width:880px; max-height:680px; }
.spp-modal-style-minimal .spp-modal-header    { padding:.65rem 1rem; }

/* ── Header ── */
.spp-modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .85rem 1.25rem;
  gap:             1rem;
  flex-shrink:     0;
  background:      var(--spp-modal-header-bg, #13131c);
  border-bottom:   1px solid rgba(255,255,255,.07);
}
.spp-modal-project-title {
  font-size:     .9rem;
  font-weight:   700;
  color:         #e8e8f0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  flex:          1;
  font-family:   var(--spp-font-heading, sans-serif);
}

/* ── Close button — full reset so themes can't break it ── */
.spp-modal-close {
  /* reset all inherited / theme button styles */
  -webkit-appearance: none;
  appearance:         none;
  all:                unset; /* nuclear option — wipes theme button CSS */
  box-sizing:         border-box;

  /* our styles */
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  min-width:       36px;
  min-height:      36px;
  padding:         0;
  margin:          0;
  border:          none;
  border-radius:   50%;
  background:      rgba(255,255,255,.1);
  color:           #e8e8f0;
  cursor:          pointer;
  flex-shrink:     0;
  line-height:     1;
  font-size:       0;     /* prevent any inherited text affecting layout */
  transition:      background .2s ease, color .2s ease, transform .2s ease;
  outline:         none;
}
.spp-modal-close svg {
  display:      block;
  width:        18px;
  height:       18px;
  flex-shrink:  0;
  stroke:       currentColor;
  fill:         none;
  pointer-events: none;
}
.spp-modal-close:hover {
  background: rgba(255, 70, 70, .25);
  color:      #ff5555;
  transform:  rotate(90deg);
}
.spp-modal-close:focus-visible {
  outline:        2px solid var(--spp-accent, #6c63ff);
  outline-offset: 2px;
  border-radius:  50%;
}

/* Sharp / glass overrides */
.spp-modal-style-sharp .spp-modal-close  { border-radius:4px; }
.spp-modal-style-glass .spp-modal-close  { border-radius:4px; }
.spp-modal-style-glass .spp-modal-header { background:rgba(255,255,255,.04); }

/* ── Body / iframe ── */
.spp-modal-body {
  flex:     1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.spp-iframe {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  width:  100%;
  height: 100%;
  border: none;
  display:block;
  background:#fff;
}
.spp-iframe[hidden] { display:none; }

/* ── Loader ── */
.spp-loader {
  position:   absolute;
  inset:      0;
  background: var(--spp-modal-bg, #0e0e14);
  display:    flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:        1.25rem;
  z-index:    2;
}
.spp-loader[hidden] { display:none; }
.spp-spinner { width:52px; height:52px; position:relative; }
.spp-spinner-ring {
  position:     absolute;
  inset:        0;
  border:       3px solid transparent;
  border-radius:50%;
  animation:    sppSpin 1.2s linear infinite;
}
.spp-spinner-ring:nth-child(1) { border-top-color:var(--spp-accent,#6c63ff); }
.spp-spinner-ring--2 { inset:8px;  border-right-color:var(--spp-accent,#6c63ff); opacity:.55; animation-delay:-.4s; animation-duration:.9s; }
.spp-spinner-ring--3 { inset:16px; border-bottom-color:var(--spp-accent,#6c63ff);opacity:.3;  animation-delay:-.8s; animation-duration:.7s; }
@keyframes sppSpin { to { transform:rotate(360deg); } }
.spp-loader-text {
  font-size:.85rem; color:var(--spp-text-muted,#8888a8);
  margin:0; font-family:var(--spp-font-body,sans-serif);
  animation:sppPulse 1.5s ease-in-out infinite;
}
@keyframes sppPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── Fallback ── */
.spp-fallback {
  position:   absolute;
  inset:      0;
  background: var(--spp-modal-bg, #0e0e14);
  display:    flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:        1rem;
  padding:    2rem;
  text-align: center;
  z-index:    2;
}
.spp-fallback[hidden] { display:none; }
.spp-fallback-icon { font-size:3rem; line-height:1; }
.spp-fallback h4 {
  font-size:   1.2rem; font-weight:700; color:#e8e8f0;
  margin:0; font-family:var(--spp-font-heading,sans-serif);
}
.spp-fallback p  {
  font-size:.875rem; color:var(--spp-text-muted,#8888a8);
  max-width:380px; line-height:1.6; margin:0;
}

/* ── Visit Website button (fallback only) ── */
.spp-visit-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .45rem;
  background:      var(--spp-btn-bg, #6c63ff);
  color:           var(--spp-btn-text, #fff);
  font-size:       .9rem;
  font-weight:     600;
  font-family:     var(--spp-font-body, sans-serif);
  padding:         .7rem 1.5rem;
  border-radius:   999px;
  border:          none;
  text-decoration: none;
  cursor:          pointer;
  line-height:     1;
  box-shadow:      0 4px 20px rgba(0,0,0,.35);
  transition:      opacity .2s, transform .2s;
}
.spp-visit-btn svg { flex-shrink:0; }
.spp-btn-sharp .spp-visit-btn { border-radius:4px; }
.spp-btn-glass .spp-visit-btn { border-radius:8px; border:1px solid rgba(255,255,255,.2); }
.spp-visit-btn:hover { opacity:.85; transform:translateY(-2px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px) { .spp-portfolio-wrap { --spp-cols:2; } }
@media (max-width:640px)  {
  .spp-portfolio-wrap { --spp-cols:1; padding:1.5rem 1rem; }
  .spp-filter-btn { font-size:.78rem;padding:.38rem .85rem; }
  .spp-modal { padding:0; }
  .spp-modal-container { max-width:none;max-height:none;width:100vw;height:100%;border-radius:0;border:none; }
  .spp-modal-backdrop  { backdrop-filter:none; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce) {
  .spp-animated .spp-card,
  .spp-card-inner,.spp-card-img,
  .spp-modal-container,.spp-modal-backdrop { animation:none!important;transition:none!important; }
  .spp-spinner-ring { animation:sppSpin 2s linear infinite; }
}

/* =========================================================
   LOGO STYLES
   ========================================================= */

/* ── Logo badge on top of featured image ── */
.spp-logo-badge {
  position:      absolute;
  bottom:        10px;
  left:          10px;
  width:         44px;
  height:        44px;
  background:    #fff;
  border-radius: 8px;
  padding:       4px;
  box-shadow:    0 2px 10px rgba(0,0,0,0.3);
  display:       flex;
  align-items:   center;
  justify-content: center;
  overflow:      hidden;
  transition:    transform var(--spp-transition), box-shadow var(--spp-transition);
}
.spp-card-inner:hover .spp-logo-badge {
  transform:  translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.spp-logo-badge-img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}

/* ── Large logo centred in placeholder (no featured image) ── */
.spp-card-placeholder {
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--spp-surface-2) 0%, var(--spp-card-bg) 100%);
}
.spp-card-placeholder.spp-has-logo {
  background: var(--spp-card-bg);
  padding:    1.25rem;
}
.spp-placeholder-logo {
  max-width:  70%;
  max-height: 70%;
  width:      auto;
  height:     auto;
  object-fit: contain;
  display:    block;
  filter:     drop-shadow(0 2px 8px rgba(0,0,0,0.25));
  transition: transform var(--spp-transition), filter var(--spp-transition);
}
.spp-card-inner:hover .spp-placeholder-logo {
  transform: scale(1.06);
  filter:    drop-shadow(0 4px 14px rgba(0,0,0,0.4));
}

/* ── Auto-initials fallback (no logo, no featured image) ── */
.spp-card-initials {
  font-size:   2rem;
  font-weight: 800;
  color:       var(--spp-text-muted);
  letter-spacing: .05em;
  user-select: none;
  opacity:     .5;
  font-family: var(--spp-font-heading);
}

/* ── Logo in card body (beside title) ── */
.spp-card-logo-row {
  display:     flex;
  align-items: center;
  gap:         .65rem;
}
.spp-card-logo-thumb {
  width:         36px;
  height:        36px;
  object-fit:    contain;
  border-radius: 6px;
  background:    var(--spp-surface-2);
  padding:       3px;
  flex-shrink:   0;
  border:        1px solid var(--spp-card-border);
}
.spp-card-logo-row .spp-card-title {
  flex: 1;
  /* title already styled globally */
}