/* =========================================================================
   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 (white theme only) ---------- */
[data-theme="white"] body{
  background-color:#FFFFFF;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 40%, rgba(255,255,255,.94) 100%),
    url('https://images.unsplash.com/photo-1566041510394-cf7c8fe21800?fm=jpg&q=80&w=2400&auto=format&fit=crop');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:top center;
  background-size:cover;
}

/* Soften every section back to a clean white card-like plane so the marble
   reads as an ambient backdrop rather than a busy pattern behind text */
[data-theme="white"] .section,
[data-theme="white"] #hero,
[data-theme="white"] #cta-section,
[data-theme="white"] #assistant,
[data-theme="white"] #contact,
[data-theme="white"] #project-request{
  position:relative;
}
[data-theme="white"] .section::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.86);
  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}