/* ============================================================
   Portfolio cards — premium polish (works in dark & light mode)
   Applies to the Mellow portfolio grid (.dtr-portfolio-item).
   Additive only: hover lift, image zoom, pill category.
   ============================================================ */

.dtr-portfolio-item__wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--dtr-radius-rounded-medium, 14px);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}

.dtr-portfolio-item__wrapper:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .30);
}

/* Contain the zoom inside the rounded card */
.dtr-portfolio-item__img {
  overflow: hidden;
}

.dtr-portfolio-item__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.dtr-portfolio-item__wrapper:hover .dtr-portfolio-item__img img {
  transform: scale(1.05);
}

/* Category -> compact pill badge for a more "case study" feel */
.dtr-portfolio-item__category {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--dtr-base-color-light, #ffffff);
  color: var(--dtr-text-color-dark, #0a0a0a);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Keep light mode readable: the title sits over the image, stay white */
html[data-theme="light"] .dtr-portfolio-item__heading,
html[data-theme="light"] .dtr-portfolio-item__heading a {
  color: #ffffff !important;
}

/* ============================================================
   Scroll-reveal animation for portfolio cards
   ------------------------------------------------------------
   Isotope controls the .dtr-portfolio-item transform (grid
   position), so we animate the INNER __wrapper instead — that
   way the layout never breaks. The hidden state only applies
   once JS adds .al-anim-ready (so cards still show without JS),
   and is skipped for users who prefer reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  html.al-anim-ready .dtr-portfolio-grid .dtr-portfolio-item__wrapper {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease,
      transform .55s cubic-bezier(.2, .7, .2, 1),
      box-shadow .35s ease;
  }

  html.al-anim-ready .dtr-portfolio-grid .dtr-portfolio-item.al-reveal .dtr-portfolio-item__wrapper {
    opacity: 1;
    transform: translateY(0);
  }

  /* keep the hover lift working after the card has revealed */
  html.al-anim-ready .dtr-portfolio-grid .dtr-portfolio-item.al-reveal .dtr-portfolio-item__wrapper:hover {
    transform: translateY(-6px);
  }

  /* staggered entrance across a 3-column grid */
  html.al-anim-ready .dtr-portfolio-item:nth-child(3n + 2) .dtr-portfolio-item__wrapper { transition-delay: .09s; }
  html.al-anim-ready .dtr-portfolio-item:nth-child(3n + 3) .dtr-portfolio-item__wrapper { transition-delay: .18s; }
}

/* ============================================================
   Design gallery ([al_design_gallery]) — masonry grid + hover
   ============================================================ */
.al-design-gallery {
  columns: 3 280px;
  column-gap: 18px;
  margin-top: 10px;
}

.al-design-gallery .al-dg-item {
  display: block;
  break-inside: avoid;
  margin: 0 0 18px;
  border-radius: var(--dtr-radius-rounded-medium, 12px);
  overflow: hidden;
  border: 1px solid var(--dtr-border-color-main, rgba(255, 255, 255, .10));
  transition: transform .3s ease, box-shadow .3s ease;
}

.al-design-gallery .al-dg-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .30);
}

.al-design-gallery .al-dg-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.al-design-gallery .al-dg-item:hover img {
  transform: scale(1.04);
}

.al-dg-empty {
  opacity: .7;
  font-style: italic;
}

@media (max-width: 600px) {
  .al-design-gallery { columns: 2 150px; column-gap: 12px; }
  .al-design-gallery .al-dg-item { margin-bottom: 12px; }
}