/* =========================================================================
   MARBLE PROFESSIONAL THEME — v20
   Loaded last so it wins the cascade. Makes the white theme the polished,
   professional default: subtle real marble texture in the background,
   cleaner card surfaces, and support classes for photo cards.
   ========================================================================= */

/* ---------- Marble background (all themes, pure CSS — no external image) ----------
   Crossing vein lines + soft cloud blobs built entirely from each theme's own
   palette variables, so the marble tint always matches the active theme and
   never depends on a network image load. */
html{
  --marble-vein: var(--gold-line);
  --marble-vein2: var(--txt4);
  --marble-overlay: rgba(15,12,8,.55);
}
body{
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(124deg,
      transparent 0 40px, var(--marble-vein) 40px 42px,
      transparent 42px 92px, var(--marble-vein2) 92px 94px,
      transparent 94px 162px, var(--marble-vein) 162px 164px,
      transparent 164px 230px),
    repeating-linear-gradient(-33deg,
      transparent 0 66px, var(--marble-vein2) 66px 68px,
      transparent 68px 144px, var(--marble-vein) 144px 146px,
      transparent 146px 220px),
    radial-gradient(ellipse 70% 45% at 12% 6%,  var(--bg2), transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 18%, var(--bg3), transparent 58%),
    radial-gradient(ellipse 65% 55% at 28% 88%, var(--bg2), transparent 60%),
    radial-gradient(ellipse 55% 45% at 92% 92%, var(--bg3), transparent 58%),
    radial-gradient(ellipse 90% 70% at 50% 40%, var(--bg), transparent 75%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:top center;
  background-size:cover;
  opacity:1;
}
html[data-theme="dark"]{ --marble-overlay: rgba(15,12,8,.55); }
html[data-theme="white"]{
  --marble-vein: rgba(160,105,0,.30);
  --marble-vein2: rgba(90,65,15,.20);
  --marble-overlay: rgba(255,255,255,.55);
}
html[data-theme="gray"]{ --marble-overlay: rgba(11,18,32,.55); }
html[data-theme="emerald"]{ --marble-overlay: rgba(10,23,18,.55); }
html[data-theme="rosegold"]{ --marble-overlay: rgba(28,17,19,.55); }
html[data-theme="purple"]{ --marble-overlay: rgba(20,15,30,.55); }
html[data-theme="crimson"]{ --marble-overlay: rgba(22,11,11,.55); }
html[data-theme="teal"]{ --marble-overlay: rgba(8,22,25,.55); }
html[data-theme="copper"]{ --marble-overlay: rgba(21,22,26,.55); }
html[data-theme="midnight"]{ --marble-overlay: rgba(8,11,26,.55); }
html[data-theme="sepia"]{
  --marble-vein: rgba(140,105,55,.32);
  --marble-vein2: rgba(90,70,30,.20);
  --marble-overlay: rgba(244,238,227,.55);
}
html[data-theme="mono"]{ --marble-overlay: rgba(20,20,20,.55); }
@media(max-width:680px){
  body{ background-attachment:scroll; }
}

.section,
#hero,
#cta-section,
#assistant,
#contact,
#project-request{
  position:relative;
}
.section::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--marble-overlay);
  z-index:-1;
  pointer-events:none;
}

/* ---------- Professional surface refinement ---------- */
[data-theme="white"]{
  --shd:rgba(30,23,10,.08);
}
[data-theme="white"] .skill-card,
[data-theme="white"] .svc-card,
[data-theme="white"] .blog-card,
[data-theme="white"] .demo-card,
[data-theme="white"] .about-main-card,
[data-theme="white"] .aic,
[data-theme="white"] .gc,
[data-theme="white"] .chat-card{
  background:#FFFFFF;
  box-shadow:0 2px 8px rgba(30,23,10,.05), 0 12px 32px rgba(30,23,10,.07);
  border:1px solid rgba(168,106,0,.12);
}
[data-theme="white"] .skill-card:hover,
[data-theme="white"] .svc-card:hover,
[data-theme="white"] .blog-card:hover,
[data-theme="white"] .demo-card:hover{
  box-shadow:0 6px 16px rgba(30,23,10,.08), 0 20px 44px rgba(168,106,0,.12);
  transform:translateY(-3px);
}

/* ---------- Card media (photo header) ---------- */
.card-media{
  position:relative;
  width:100%;
  height:168px;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:16px;
  background:#F0EADC;
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}
.skill-card:hover .card-media img,
.svc-card:hover .card-media img,
.blog-card:hover .card-media img{
  transform:scale(1.06);
}
.card-media-badge{
  position:absolute;
  bottom:10px;
  left:12px;
  z-index:2;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  padding:4px 10px;
  border-radius:100px;
}

/* Blog cards use a taller, wider media crop since they read like article thumbnails */
.blog-card .card-media{height:150px;margin-bottom:14px;}

/* Service cards: media replaces/joins the numbered icon header */
.svc-card .card-media{height:150px;}

/* Keep existing icon-only cards (no media) unaffected */
.skill-card:not(:has(.card-media)) .sk-icon{margin-bottom:14px}