/* ================================================================
   COMPONENTS.CSS — Buttons, cards, pills, badges, skill tags
================================================================ */

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* background: var(--gold); */
  color: #000;
  padding: 0px 12px 0px 0px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  border: 0px solid var(--gold);
  cursor: pointer;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .18s ease;
}
.btn-primary::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.08); transform: scaleX(0); transform-origin: right; transition: transform .28s cubic-bezier(.4,0,.2,1); border-radius: inherit; z-index: 0; }
.btn-primary:hover::after { transform: scaleX(.51); transform-origin: left; }
.btn-primary:hover {
  /* background: var(--gold-deep);
  border-color: var(--gold-deep); */
  color: #FD2E35; transform: translateY(-1px); }
.btn-primary > * { position: relative; z-index: 1; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* background: transparent; */
  color: var(--text-primary);
  padding: 12px 24px;
  border-radius: 100px;
  /* border: 1.5px solid var(--border-card); */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .22s ease, border-color .22s ease, transform .18s ease;
}
.btn-secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  /* background: var(--gold-dim); */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  border-radius: inherit;
  z-index: 0;
}
.btn-secondary:hover::after { transform: scaleX(1); transform-origin: left; }
.btn-secondary:hover {
  /*border-color: var(--gold-border); */
  color: var(--gold);
  transform: translateY(-1px); }
.btn-secondary > * { position: relative; z-index: 1; }


/* ── PILL TAGS ───────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 100px;
  font-size: var(--size-label);
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--fast), color var(--fast), background var(--transition);;
}
.pill:hover {
  border-color: var(--gold-border);
  color: var(--gold);
}


/* ── GLASS CARD ──────────────────────────────────────────── */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: background .4s ease, border-color .2s ease, box-shadow .2s ease;
}
.glass-card:hover {
  border-color: var(--gold-border);
  box-shadow: var(--shadow-hover);
}


/* ── WORK CARD ───────────────────────────────────────────── */
.work-card {
  background: transparent;
  border: 0px solid var(--border-card);
  /* border-radius: var(--radius-lg); */
  overflow: hidden;
  text-decoration: none;
  display: block;
  position: relative;
  box-shadow: none;
  contain: layout paint;
  will-change: transform;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.work-card:not(.work-card--locked):hover {
  transform: translateY(-4px);
  border-color: var(--gold-border);
  /* box-shadow: var(--shadow-card-hover); */
}


.work-card:not(.work-card--locked):hover .work-card__thumb img {border-radius: 0;}

.work-card--locked {
  cursor: default;
}

.work-card__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
/*   background: var(--bg-layer); */
  transition: background var(--transition);
  /* clip rounded top corners on screenshot/mockup cards */
  /* border-radius: var(--radius-lg) var(--radius-lg) 0 0; */
}
.work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* favour top of mockup screenshots */
  transition: transform 0.5s ease;
  border-radius: 0;
}
.work-card:not(.work-card--locked):hover .work-card__thumb img {
  transform: scale(1.025);
}

.work-card__tag {
  font-size: var(--size-caption);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 6px;
  transition: color var(--transition);
}
.work-card__title {
  font-family: var(--font-display);
  font-size: 1.025rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  transition: color var(--transition);
}

/* Arrow icon on hover */
.work-card__arrow {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.22s, transform 0.22s;
}
.work-card:not(.work-card--locked):hover .work-card__arrow {
  opacity: 1;
  transform: translateY(0);
}
.work-card__arrow svg {
  width: 12px; height: 12px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2.5;
}

/* Coming soon badge */
.coming-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}


/* ── SKILL CARD ──────────────────────────────────────────── */
.skill-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 26px;
  contain: layout paint;
  /*box-shadow: 1px 1px 35px 0 #f0ebeb; */
  transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast), background var(--transition);
}
.skill-card:hover {
  /*border-color: var(--gold-border); */
  border-color: var(--border-card);
  transform: translateY(0px);
  /* box-shadow: 1px 1px 15px 0 #f0f0f0; */
}

.skill-card__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  font-size: 1rem;
  transition: background var(--transition), border-color var(--transition);
}
.skill-card__title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 12px;
  transition: color var(--transition);
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.skill-tag {
  font-size: var(--size-caption);  /* 12px — absolute min */
  color: var(--text-secondary);
  background: var(--gold-shimmer);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  transition: background var(--transition), border-color var(--transition), color var(--transition);;
}
.skill-card:hover .skill-tag {
  border-color: var(--gold-border);
}


/* ── TOOL ITEM ───────────────────────────────────────────── */
.tool-item {
  /* background: var(--bg-card); */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* border: 1px solid var(--border-card); */
  border-radius: var(--radius);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  /* box-shadow: var(--shadow-card); */
  transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast), background var(--transition);;
}
.tool-item:hover {
/*  border-color: var(--gold-border); */
  transform: translateY(-3px);
/*  box-shadow: var(--shadow-hover); */
}
.tool-item img {
  width: 34px; height: 34px;
  object-fit: contain;
}
.tool-item span {
  font-size: var(--size-caption);
  color: var(--text-secondary);
  font-weight: 500;
  text-align: center;
  transition: color var(--transition);
}


/* ── CONTACT ITEM ────────────────────────────────────────── */
.contact-item {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--fast), box-shadow var(--fast), background var(--transition);;
}
.contact-item:hover {
  border-color: var(--gold-border);
  box-shadow: var(--shadow-hover);
}
.contact-item__label {
  font-size: var(--size-caption);  /* 12px min */
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
  transition: color var(--transition);
}
.contact-item a {
  font-size: 0.88rem;
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--fast);
}
.contact-item a:hover {
  color: var(--gold-light);
  text-decoration: underline;
}
[data-theme="light"] .contact-item a:hover {
  color: var(--gold-deep);
}


/* ── AI BANNER ───────────────────────────────────────────── */
.ai-banner {
  margin-top: 28px;
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: background var(--transition), border-color var(--transition);;
}
.ai-banner__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.ai-banner__text {
  font-size: var(--size-body-sm);   /* 15px */
  color: var(--text-secondary);
  line-height: 1.65;
  transition: color var(--transition);
}
.ai-banner__text strong {
  color: var(--text-primary);
  transition: color var(--transition);
}


/* ── WORK CARD DESC — 2-column richer layout ─────────────── */
.work-card__desc {
  font-size: var(--size-label);
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 6px;
  transition: color 0.22s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-card:not(.work-card--locked):hover .work-card__desc {
  color: var(--text-secondary);
}

/* 2-col cards: 16/9 for a wider, cinematic crop */
.works-grid .work-card__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
}

/* Richer card body padding for 2-col */
.works-grid .work-card__body {
  /*padding: 22px 26px 24px; */
  padding-top: 24px;
}


/* ══════════════════════════════════════════════════════════
   BRANDING CARDS
   Logo / identity images are square or portrait with
   transparent backgrounds — object-fit:cover destroys them.

   Strategy:
   • Thumb becomes a flex stage (display:flex, no overflow crop)
   • Image sized with explicit px height so it never scales
     beyond the card thumb area
   • All base-rule width/height/object-fit overridden cleanly
══════════════════════════════════════════════════════════ */

/* ── Thumb container ───────────────────────────────────── */
.works-grid .work-card[data-category="branding"] .work-card__thumb,
.work-card[data-category="branding"] .work-card__thumb {
  /* Exact same aspect-ratio as all other cards — no exceptions */
  aspect-ratio:     16 / 9;
  /* KEEP overflow:hidden — clips the card radius correctly */
  overflow:         hidden !important;
  /* Flex stage centres the logo */
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  /* Consistent neutral dark bg across all three branding cards */
  background:       #111111 !important;
  /* Internal breathing room so logo never touches edges */
  padding:          0 !important;
  border-radius:    var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:       inset 0 0 0 1px rgba(255,255,255,0.06);
  transition:       background 0.5s ease;
  /* Fix: explicit height via width so all three cards are identical */
  width:            100%;
}

/* ── Logo image ────────────────────────────────────────── */
.works-grid .work-card[data-category="branding"] .work-card__thumb img,
.work-card[data-category="branding"] .work-card__thumb img {
  /* Fill the flex stage fully, then object-fit:contain centres within */
  width:            100% !important;
  height:           100% !important;
  /* object-fit:contain shows the full logo without cropping */
  object-fit:       contain !important;
  object-position:  center center !important;
  /* Internal padding via scale: logo takes ~60% of the card area */
  padding:          18% 22%;
  opacity:          0.92;
  transition:       transform 0.45s ease, opacity 0.3s ease;

}

/* ── Hover: logo lifts, full opacity ───────────────────── */
.work-card[data-category="branding"]:hover .work-card__thumb img {
  transform: scale(1.07) !important;
  opacity:   1;

}

/* ── Light theme ───────────────────────────────────────── */
[data-theme="light"]
.work-card[data-category="branding"] .work-card__thumb {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
}
[data-theme="light"]
.work-card[data-category="branding"] .work-card__thumb img {
  opacity: 0.90;
}

/* ── Coming-soon state ─────────────────────────────────── */
/* locked branding: show image at full quality, no fading */
.work-card--locked[data-category="branding"] .work-card__thumb {
  filter: none;
}
.work-card--locked[data-category="branding"] .work-card__thumb img {
  opacity: 1 !important;
}


/* ================================================================
   RESPONSIVE — Components
================================================================ */

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .work-card__body  { padding: 16px 18px 18px; }
  .work-card__title { font-size: 0.9375rem; }
  .work-card__desc  { display: none; } /* hide desc on tablet to keep cards compact */

  .skill-card       { padding: 18px 16px; gap: 10px; }
  .skill-card__icon { width: 36px; height: 36px; font-size: 1rem; }

  .tool-item img    { height: 32px !important; }
  .tool-item span   { font-size: 0.68rem; }

  /* Buttons */
  .btn-primary, .btn-secondary { padding: 11px 0px; font-size: 0.85rem; }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .work-card__thumb { aspect-ratio: 16 / 10; }
  /* .work-card__body  { padding: 14px 16px 16px; } */
  .work-card__body  { padding:0px; }
  .work-card__tag   { font-size: 0.68rem; }
  .work-card__title { font-size: 0.875rem; }

  .pill             { font-size: 0.72rem; padding: 4px 10px; }
  .skill-tag        { font-size: 0.68rem; padding: 2px 8px; }

  .btn-primary, .btn-secondary { padding: 10px 18px; font-size: 0.84rem; }
}

/* ── Cover-fit cards: fill end-to-end ────────────────────── */
.work-card[data-cover="true"] .work-card__thumb,
.work-card[data-cover="true"][data-category="branding"] .work-card__thumb {
  display: block !important;
  padding: 0 !important;
  background: var(--bg-layer) !important;
  filter: none !important;
}
.work-card[data-cover="true"] .work-card__thumb img,
.work-card[data-cover="true"][data-category="branding"] .work-card__thumb img {
  width:  100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}
/* body panel: solid bg, flush rounded bottom */
.work-card__body {
  /* padding: 14px 16px 16px; */
  padding: 0px;
  /* background: var(--thumb-body-bg); */
  border-top: 0px solid var(--border-card);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}


.mgtop{margin-top:20px !important;}
.left_align{justify-content: unset !important; display: block !important;}