/* =========================================================
   CODERN
   PORTFOLIO COMPONENT
   VERSION 4.0.0
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.portfolio-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding-block: clamp(6rem, 10vw, 8rem);

  background:
    linear-gradient(
      180deg,
      var(--color-background, #0a0e27) 0%,
      var(--color-background-secondary, #0d132d) 50%,
      var(--color-background, #0a0e27) 100%
    );
}


/* =========================================================
   BACKGROUND
========================================================= */

.portfolio-background {
  position: absolute;
  inset: 0;
  z-index: -1;

  pointer-events: none;
  overflow: hidden;
}

.portfolio-grid {
  position: absolute;
  inset: 0;

  opacity: 0.025;

  background-image:
    linear-gradient(
      rgb(255 255 255 / 0.8) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgb(255 255 255 / 0.8) 1px,
      transparent 1px
    );

  background-size: 50px 50px;
}

.portfolio-glow {
  position: absolute;

  width: 20rem;
  height: 20rem;

  border-radius: 50%;

  filter: blur(120px);
  opacity: 0.1;
}

.portfolio-glow-left {
  left: -8rem;
  top: 25%;

  background: var(
    --brand-primary,
    #22d3ee
  );
}

.portfolio-glow-right {
  right: -8rem;
  bottom: 25%;

  background: var(
    --brand-accent,
    #8b5cf6
  );
}


/* =========================================================
   CONTAINER
========================================================= */

.portfolio-container {
  position: relative;
  z-index: 1;
}


/* =========================================================
   HEADER
========================================================= */

.portfolio-header {
  width: min(100%, 48rem);

  margin-inline: auto;
  margin-bottom: 3rem;

  text-align: center;
}

.portfolio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  margin-bottom: 1.25rem;
  padding: 0.5rem 1rem;

  border: 1px solid
    var(
      --color-primary-border,
      rgb(34 211 238 / 0.2)
    );

  border-radius: 999px;

  background:
    var(
      --color-primary-soft,
      rgb(34 211 238 / 0.05)
    );

  color: var(
    --color-primary,
    #22d3ee
  );

  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.portfolio-label-icon {
  display: inline-flex;

  width: 1rem;
  height: 1rem;

  flex: 0 0 auto;
}

.portfolio-label-icon svg {
  width: 100%;
  height: 100%;
}

.portfolio-title {
  margin: 0 0 1.5rem;

  color: var(
    --color-text-primary,
    #ffffff
  );

  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.portfolio-title > span:first-child {
  color: var(
    --color-text-primary,
    #ffffff
  );
}

.portfolio-description {
  max-width: 42rem;

  margin-inline: auto;

  color: var(
    --color-text-secondary,
    rgb(255 255 255 / 0.65)
  );

  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.75;
}


/* =========================================================
   FILTERS
========================================================= */

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;

  margin-bottom: 2.5rem;
}

.portfolio-filter {
  appearance: none;

  border: 1px solid
    var(
      --color-border,
      rgb(255 255 255 / 0.1)
    );

  border-radius: 999px;

  padding: 0.625rem 1rem;

  background:
    var(
      --surface-glass,
      rgb(255 255 255 / 0.03)
    );

  color:
    var(
      --color-text-secondary,
      rgb(255 255 255 / 0.6)
    );

  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;

  cursor: pointer;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.portfolio-filter:hover {
  border-color:
    var(
      --color-border-hover,
      rgb(255 255 255 / 0.2)
    );

  background:
    var(
      --surface-glass-hover,
      rgb(255 255 255 / 0.07)
    );

  color:
    var(
      --color-text-primary,
      #ffffff
    );
}

.portfolio-filter:active {
  transform: scale(0.96);
}

.portfolio-filter.is-active {
  border-color:
    var(
      --color-primary,
      #22d3ee
    );

  background:
    var(
      --color-primary,
      #22d3ee
    );

  color:
    var(
      --color-on-primary,
      #031018
    );

  box-shadow:
    var(
      --shadow-primary,
      0 10px 30px rgb(34 211 238 / 0.2)
    );
}

.portfolio-filter:focus-visible {
  outline:
    2px solid
    var(
      --color-primary,
      #22d3ee
    );

  outline-offset: 3px;
}


/* =========================================================
   PROJECT GRID
========================================================= */

.portfolio-grid-list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 2rem;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.portfolio-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  border: 1px solid
    var(
      --color-border,
      rgb(255 255 255 / 0.1)
    );

  border-radius: 1rem;

  background:
    var(
      --surface-glass,
      rgb(255 255 255 / 0.035)
    );

  box-shadow:
    0 20px 60px
    rgb(0 0 0 / 0.12);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  transition:
    transform 350ms ease,
    border-color 350ms ease,
    box-shadow 350ms ease;
}

.portfolio-card:hover {
  transform: translateY(-7px);

  border-color:
    var(
      --color-primary-border,
      rgb(34 211 238 / 0.2)
    );

  box-shadow:
    0 28px 80px
    rgb(0 0 0 / 0.25),
    0 0 50px
    var(
      --color-primary-glow,
      rgb(34 211 238 / 0.05)
    );
}

.portfolio-card-featured {
  border-color:
    var(
      --color-primary-border-strong,
      rgb(34 211 238 / 0.3)
    );
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.portfolio-image-frame {
  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background:
    var(
      --color-background-deep,
      #080c20
    );
}

.portfolio-project-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform 700ms
    cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-card:hover
.portfolio-project-image {
  transform: scale(1.055);
}

.portfolio-image-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      var(
        --color-background-deep,
        #080c20
      ) 0%,
      rgb(8 12 32 / 0.35) 40%,
      transparent 75%
    );

  opacity: 0.8;
}


/* =========================================================
   PROJECT TYPE
========================================================= */

.portfolio-project-type {
  position: absolute;

  top: 1rem;
  left: 1rem;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.375rem 0.75rem;

  border: 1px solid
    rgb(255 255 255 / 0.1);

  border-radius: 999px;

  background:
    rgb(10 14 39 / 0.8);

  color:
    rgb(255 255 255 / 0.8);

  font-size: 0.75rem;
  font-weight: 500;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.portfolio-status-dot {
  width: 0.375rem;
  height: 0.375rem;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(
      --color-primary,
      #22d3ee
    );

  box-shadow:
    0 0 10px
    var(
      --color-primary-glow-strong,
      rgb(34 211 238 / 0.6)
    );
}


/* =========================================================
   FEATURED BADGE
========================================================= */

.portfolio-featured-badge {
  position: absolute;

  top: 1rem;
  right: 1rem;

  display: inline-flex;
  align-items: center;
  gap: 0.375rem;

  padding: 0.375rem 0.75rem;

  border: 1px solid
    var(
      --color-primary-border,
      rgb(34 211 238 / 0.2)
    );

  border-radius: 999px;

  background:
    var(
      --color-primary-soft-strong,
      rgb(34 211 238 / 0.15)
    );

  color:
    var(
      --color-primary,
      #22d3ee
    );

  font-size: 0.75rem;
  font-weight: 500;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.portfolio-featured-icon {
  display: inline-flex;

  width: 0.75rem;
  height: 0.75rem;
}

.portfolio-featured-icon svg {
  width: 100%;
  height: 100%;
}


/* =========================================================
   HOVER ACTIONS
========================================================= */

.portfolio-hover-actions {
  position: absolute;

  right: 1rem;
  bottom: 1rem;
  left: 1rem;

  display: flex;
  gap: 0.5rem;

  opacity: 0;

  transform: translateY(0.75rem);

  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.portfolio-card:hover
.portfolio-hover-actions,
.portfolio-card:focus-within
.portfolio-hover-actions {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-live-button,
.portfolio-view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-height: 2.75rem;

  padding: 0.625rem 1rem;

  border-radius: 0.625rem;

  font-size: 0.875rem;
  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.portfolio-live-button {
  border: 1px solid transparent;

  background:
    var(
      --color-primary,
      #22d3ee
    );

  color:
    var(
      --color-on-primary,
      #031018
    );
}

.portfolio-live-button:hover {
  background:
    var(
      --color-primary-hover,
      #67e8f9
    );
}

.portfolio-view-button {
  border: 1px solid
    rgb(255 255 255 / 0.2);

  background:
    rgb(0 0 0 / 0.4);

  color: #ffffff;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.portfolio-view-button:hover {
  background:
    rgb(255 255 255 / 0.1);
}

.portfolio-live-button:active,
.portfolio-view-button:active {
  transform: scale(0.97);
}

.portfolio-live-button svg,
.portfolio-view-button svg {
  width: 1rem;
  height: 1rem;

  flex: 0 0 auto;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.portfolio-card-content {
  position: relative;
  z-index: 2;

  padding: 1.5rem;
}

.portfolio-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;

  margin-bottom: 0.75rem;
}

.portfolio-category {
  display: block;

  color:
    var(
      --color-primary,
      #22d3ee
    );

  font-size: 0.75rem;
  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-project-title {
  margin: 0.25rem 0 0;

  color:
    var(
      --color-text-primary,
      #ffffff
    );

  font-size: 1.5rem;
  font-weight: 700;

  line-height: 1.25;
  letter-spacing: -0.02em;
}

.portfolio-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;

  flex: 0 0 auto;

  border: 1px solid
    rgb(255 255 255 / 0.1);

  border-radius: 0.625rem;

  background:
    rgb(255 255 255 / 0.04);

  color:
    rgb(255 255 255 / 0.5);

  transition:
    color 250ms ease,
    border-color 250ms ease,
    background-color 250ms ease;
}

.portfolio-card:hover
.portfolio-card-icon {
  border-color:
    var(
      --color-primary-border,
      rgb(34 211 238 / 0.2)
    );

  background:
    var(
      --color-primary-soft,
      rgb(34 211 238 / 0.08)
    );

  color:
    var(
      --color-primary,
      #22d3ee
    );
}

.portfolio-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.portfolio-project-description {
  margin: 0 0 1.5rem;

  color:
    var(
      --color-text-secondary,
      rgb(255 255 255 / 0.6)
    );

  font-size: 1rem;
  line-height: 1.75;
}


/* =========================================================
   TECHNOLOGIES
========================================================= */

.portfolio-technologies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.portfolio-technologies span {
  display: inline-flex;
  align-items: center;

  padding: 0.375rem 0.625rem;

  border: 1px solid
    rgb(255 255 255 / 0.08);

  border-radius: 0.375rem;

  background:
    rgb(255 255 255 / 0.035);

  color:
    var(
      --color-text-muted,
      rgb(255 255 255 / 0.55)
    );

  font-size: 0.75rem;
  line-height: 1.4;
}


/* =========================================================
   PREMIUM HOVER LIGHT
========================================================= */

.portfolio-hover-border {
  position: absolute;
  inset: 0;

  border: 1px solid transparent;

  border-radius: inherit;

  pointer-events: none;

  transition:
    border-color 500ms ease;
}

.portfolio-card:hover
.portfolio-hover-border {
  border-color:
    var(
      --color-primary-border,
      rgb(34 211 238 / 0.2)
    );
}

.portfolio-hover-light {
  position: absolute;

  right: -6rem;
  bottom: -6rem;

  width: 12rem;
  height: 12rem;

  border-radius: 50%;

  background:
    var(
      --color-primary-soft-strong,
      rgb(34 211 238 / 0.1)
    );

  filter: blur(48px);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 500ms ease;
}

.portfolio-card:hover
.portfolio-hover-light {
  opacity: 1;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.portfolio-empty-state {
  padding-block: 4rem;

  text-align: center;

  color:
    var(
      --color-text-muted,
      rgb(255 255 255 / 0.5)
    );
}

.portfolio-empty-state[hidden] {
  display: none;
}


/* =========================================================
   CTA
========================================================= */

.portfolio-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  margin-top: 3rem;

  padding: 2rem 1.5rem;

  border: 1px solid
    var(
      --color-border,
      rgb(255 255 255 / 0.1)
    );

  border-radius: 1rem;

  background:
    var(
      --surface-glass,
      rgb(255 255 255 / 0.035)
    );

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.portfolio-cta-content {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.portfolio-cta-message {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.portfolio-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;

  flex: 0 0 auto;

  border: 1px solid
    var(
      --color-primary-border,
      rgb(34 211 238 / 0.2)
    );

  border-radius: 0.75rem;

  background:
    var(
      --color-primary-soft-strong,
      rgb(34 211 238 / 0.1)
    );

  color:
    var(
      --color-primary,
      #22d3ee
    );
}

.portfolio-cta-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.portfolio-cta-message h3 {
  margin: 0 0 0.25rem;

  color:
    var(
      --color-text-primary,
      #ffffff
    );

  font-size: clamp(1.25rem, 2vw, 1.5rem);

  font-weight: 700;
  line-height: 1.3;
}

.portfolio-cta-message p {
  margin: 0;

  color:
    var(
      --color-text-muted,
      rgb(255 255 255 / 0.5)
    );

  font-size: 0.9375rem;
  line-height: 1.6;
}

.portfolio-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-height: 3.25rem;

  padding: 0.875rem 1.5rem;

  border-radius: 0.75rem;

  background:
    var(
      --color-primary,
      #22d3ee
    );

  color:
    var(
      --color-on-primary,
      #031018
    );

  font-size: 0.9375rem;
  font-weight: 700;

  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.portfolio-cta-button:hover {
  background:
    var(
      --color-primary-hover,
      #67e8f9
    );

  box-shadow:
    var(
      --shadow-primary,
      0 12px 35px
      rgb(34 211 238 / 0.2)
    );
}

.portfolio-cta-button:active {
  transform: scale(0.97);
}

.portfolio-cta-button svg {
  width: 1.25rem;
  height: 1.25rem;

  transition:
    transform 180ms ease;
}

.portfolio-cta-button:hover svg {
  transform: translateX(0.25rem);
}


/* =========================================================
   CTA BACKGROUND GLOWS
========================================================= */

.portfolio-cta-glow {
  position: absolute;

  width: 12rem;
  height: 12rem;

  border-radius: 50%;

  filter: blur(48px);

  pointer-events: none;
}

.portfolio-cta-glow-left {
  top: -6rem;
  left: -5rem;

  background:
    var(
      --color-primary-soft-strong,
      rgb(34 211 238 / 0.1)
    );
}

.portfolio-cta-glow-right {
  right: -5rem;
  bottom: -6rem;

  background:
    var(
      --brand-accent,
      #8b5cf6
    );
  opacity: 0.1;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.portfolio-section .reveal {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 700ms ease,
    transform 700ms
    cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-section .reveal.is-visible {
  opacity: 1;

  transform: translateY(0);
}

.portfolio-grid-list
.portfolio-card:nth-child(1) {
  transition-delay: 0ms;
}

.portfolio-grid-list
.portfolio-card:nth-child(2) {
  transition-delay: 70ms;
}

.portfolio-grid-list
.portfolio-card:nth-child(3) {
  transition-delay: 140ms;
}

.portfolio-grid-list
.portfolio-card:nth-child(4) {
  transition-delay: 210ms;
}

.portfolio-grid-list
.portfolio-card:nth-child(5) {
  transition-delay: 280ms;
}

.portfolio-grid-list
.portfolio-card:nth-child(6) {
  transition-delay: 350ms;
}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.portfolio-card.is-filter-hidden {
  display: none;
}


/* =========================================================
   LIGHT THEME
   GLOBAL CYAN → PURPLE
========================================================= */

[data-theme="light"] .portfolio-section {
  background:
    linear-gradient(
      180deg,
      var(
        --color-background,
        #ffffff
      ) 0%,
      var(
        --color-background-secondary,
        #f8fafc
      ) 50%,
      var(
        --color-background,
        #ffffff
      ) 100%
    );
}

[data-theme="light"] .portfolio-grid {
  opacity: 0.045;

  background-image:
    linear-gradient(
      rgb(15 23 42 / 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgb(15 23 42 / 0.12) 1px,
      transparent 1px
    );
}

[data-theme="light"] .portfolio-glow-left {
  background:
    var(
      --brand-primary,
      #8b5cf6
    );

  opacity: 0.08;
}

[data-theme="light"] .portfolio-glow-right {
  background:
    var(
      --brand-accent,
      #7c3aed
    );

  opacity: 0.08;
}

[data-theme="light"] .portfolio-label {
  border-color:
    rgb(139 92 246 / 0.2);

  background:
    rgb(139 92 246 / 0.06);

  color:
    var(
      --color-primary,
      #8b5cf6
    );
}

[data-theme="light"] .portfolio-title,
[data-theme="light"] .portfolio-title > span:first-child {
  color:
    var(
      --color-text-primary,
      #0f172a
    );
}

[data-theme="light"] .portfolio-description {
  color:
    var(
      --color-text-secondary,
      #475569
    );
}

[data-theme="light"] .portfolio-filter {
  border-color:
    rgb(15 23 42 / 0.1);

  background:
    rgb(15 23 42 / 0.025);

  color:
    #475569;
}

[data-theme="light"] .portfolio-filter:hover {
  border-color:
    rgb(139 92 246 / 0.25);

  background:
    rgb(139 92 246 / 0.06);

  color:
    #6d28d9;
}

[data-theme="light"] .portfolio-filter.is-active {
  border-color:
    var(
      --color-primary,
      #8b5cf6
    );

  background:
    var(
      --color-primary,
      #8b5cf6
    );

  color:
    var(
      --color-on-primary,
      #ffffff
    );

  box-shadow:
    0 10px 30px
    rgb(139 92 246 / 0.2);
}

[data-theme="light"] .portfolio-card {
  border-color:
    rgb(15 23 42 / 0.1);

  background:
    rgb(255 255 255 / 0.78);

  box-shadow:
    0 20px 60px
    rgb(15 23 42 / 0.08);
}

[data-theme="light"] .portfolio-card:hover {
  border-color:
    rgb(139 92 246 / 0.25);

  box-shadow:
    0 28px 80px
    rgb(15 23 42 / 0.12),
    0 0 50px
    rgb(139 92 246 / 0.06);
}

[data-theme="light"] .portfolio-card-featured {
  border-color:
    rgb(139 92 246 / 0.3);
}

[data-theme="light"] .portfolio-image-frame {
  background:
    #f1f5f9;
}

[data-theme="light"] .portfolio-image-overlay {
  background:
    linear-gradient(
      to top,
      rgb(15 23 42 / 0.55) 0%,
      rgb(15 23 42 / 0.08) 45%,
      transparent 75%
    );
}

[data-theme="light"] .portfolio-project-type {
  border-color:
    rgb(255 255 255 / 0.35);

  background:
    rgb(15 23 42 / 0.68);

  color:
    rgb(255 255 255 / 0.9);
}

[data-theme="light"] .portfolio-status-dot {
  background:
    var(
      --color-primary,
      #8b5cf6
    );

  box-shadow:
    0 0 10px
    rgb(139 92 246 / 0.6);
}

[data-theme="light"] .portfolio-featured-badge {
  border-color:
    rgb(139 92 246 / 0.25);

  background:
    rgb(139 92 246 / 0.12);

  color:
    var(
      --color-primary,
      #8b5cf6
    );
}

[data-theme="light"] .portfolio-view-button {
  border-color:
    rgb(255 255 255 / 0.3);

  background:
    rgb(15 23 42 / 0.55);

  color:
    #ffffff;
}

[data-theme="light"] .portfolio-view-button:hover {
  background:
    rgb(15 23 42 / 0.7);
}

[data-theme="light"] .portfolio-category {
  color:
    var(
      --color-primary,
      #8b5cf6
    );
}

[data-theme="light"] .portfolio-project-title {
  color:
    var(
      --color-text-primary,
      #0f172a
    );
}

[data-theme="light"] .portfolio-card-icon {
  border-color:
    rgb(15 23 42 / 0.08);

  background:
    rgb(15 23 42 / 0.025);

  color:
    #64748b;
}

[data-theme="light"] .portfolio-card:hover
.portfolio-card-icon {
  border-color:
    rgb(139 92 246 / 0.2);

  background:
    rgb(139 92 246 / 0.08);

  color:
    var(
      --color-primary,
      #8b5cf6
    );
}

[data-theme="light"] .portfolio-project-description {
  color:
    var(
      --color-text-secondary,
      #475569
    );
}

[data-theme="light"] .portfolio-technologies span {
  border-color:
    rgb(15 23 42 / 0.08);

  background:
    rgb(15 23 42 / 0.025);

  color:
    #64748b;
}

[data-theme="light"] .portfolio-hover-border {
  border-color: transparent;
}

[data-theme="light"] .portfolio-card:hover
.portfolio-hover-border {
  border-color:
    rgb(139 92 246 / 0.2);
}

[data-theme="light"] .portfolio-hover-light {
  background:
    rgb(139 92 246 / 0.1);
}

[data-theme="light"] .portfolio-empty-state {
  color:
    #64748b;
}

[data-theme="light"] .portfolio-cta {
  border-color:
    rgb(15 23 42 / 0.1);

  background:
    rgb(255 255 255 / 0.78);

  box-shadow:
    0 20px 60px
    rgb(15 23 42 / 0.06);
}

[data-theme="light"] .portfolio-cta-icon {
  border-color:
    rgb(139 92 246 / 0.2);

  background:
    rgb(139 92 246 / 0.08);

  color:
    var(
      --color-primary,
      #8b5cf6
    );
}

[data-theme="light"] .portfolio-cta-message h3 {
  color:
    var(
      --color-text-primary,
      #0f172a
    );
}

[data-theme="light"] .portfolio-cta-message p {
  color:
    #64748b;
}

[data-theme="light"] .portfolio-cta-button {
  background:
    var(
      --color-primary,
      #8b5cf6
    );

  color:
    var(
      --color-on-primary,
      #ffffff
    );
}

[data-theme="light"] .portfolio-cta-button:hover {
  background:
    var(
      --color-primary-hover,
      #7c3aed
    );

  box-shadow:
    0 12px 35px
    rgb(139 92 246 / 0.22);
}

[data-theme="light"] .portfolio-cta-glow-left {
  background:
    rgb(139 92 246 / 0.1);
}

[data-theme="light"] .portfolio-cta-glow-right {
  background:
    rgb(168 85 247 / 0.1);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .portfolio-grid-list {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 768px) {

  .portfolio-section {
    padding-block: 5.5rem;
  }

  .portfolio-header {
    margin-bottom: 2.5rem;
  }

  .portfolio-filters {
    margin-bottom: 2rem;
  }

  .portfolio-cta-content {
    flex-direction: column;

    align-items: center;

    text-align: center;
  }

  .portfolio-cta-message {
    justify-content: center;
  }

}


@media (max-width: 640px) {

  .portfolio-grid-list {
    gap: 1.25rem;
  }

  .portfolio-card-content {
    padding: 1.25rem;
  }

  .portfolio-project-title {
    font-size: 1.3rem;
  }

  .portfolio-project-description {
    font-size: 0.9375rem;
  }

  .portfolio-hover-actions {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
  }

  .portfolio-live-button,
  .portfolio-view-button {
    min-height: 2.625rem;

    padding:
      0.5rem 0.75rem;

    font-size: 0.75rem;
  }

  .portfolio-cta {
    padding:
      1.5rem 1.25rem;
  }

  .portfolio-cta-message {
    flex-direction: column;
  }

  .portfolio-cta-button {
    width: 100%;
  }

}


@media (max-width: 420px) {

  .portfolio-filter {
    padding-inline: 0.8rem;

    font-size: 0.8125rem;
  }

  .portfolio-project-type {
    max-width:
      calc(100% - 2rem);

    font-size: 0.6875rem;
  }

  .portfolio-featured-badge {
    display: none;
  }

  .portfolio-hover-actions {
    flex-direction: column;
  }

  .portfolio-live-button,
  .portfolio-view-button {
    width: 100%;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .portfolio-section .reveal,
  .portfolio-project-image,
  .portfolio-card,
  .portfolio-hover-actions,
  .portfolio-hover-border,
  .portfolio-hover-light,
  .portfolio-card-icon,
  .portfolio-cta-button,
  .portfolio-cta-button svg,
  .portfolio-filter {
    transition: none;
  }

  .portfolio-section .reveal {
    opacity: 1;
    transform: none;
  }

  .portfolio-project-image {
    transform: none;
  }

}