/**
 * assets/css/pages/portfolio.css
 * Shared styles for the portfolio-family pages:
 * portfolio.html, project.html, internship.html, tryhackme.html.
 * (All use the Isotope filter grid + GLightbox portfolio items.)
 * Load AFTER assets/css/main.css.
 * ----------------------------------------------------------------- */

/* ============ Portfolio (style.css) ============ */
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 16px 10px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #444444;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
  border-radius: 50px;
}

/* .portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: #fff !important;
  background: #34b7a7;
} */

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: #fff !important; /* Ensure the text color is white */
  background: none !important; /* Remove the background */
  font-weight: bold; /* Make the text bold */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); /* Add a glow effect to make it stand out */
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: #ffffff;
  aspect-ratio: 4 / 3;
}

.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(34, 34, 34, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap img {
  transition: all ease-in-out 0.3s;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  font-style: italic;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #fff;
  margin: 0 5px 0 0;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: #78d9cd;
}

.portfolio .portfolio-wrap:hover::before {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover img {
  transform: scale(1.2);
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}


/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  margin: 0 10px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  font-size: 24px;
  top: calc(50% - 12px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link {
  left: 35%;
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

@media (min-width: 1200px) {
  .portfolio .portfolio-item {
    width: 25%; /* Four items per row on large screens */
  }
}

@media (max-width: 1199px) {
  .portfolio .portfolio-item {
    width: 33.3333%; /* Three items per row on medium screens */
  }
}

@media (max-width: 768px) {
  .portfolio .portfolio-item {
    width: 50%; /* Two items per row on small screens */
  }
}

@media (max-width: 575px) {
  .portfolio .portfolio-item {
    width: 100%; /* One item per row on extra small screens */
  }
}

/* Ensuring image fits within the portfolio item — same box size for every card,
   regardless of the source certificate's original dimensions */
.portfolio .portfolio-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ============ Portfolio / galleries (theme.css) ============ */
/* -----------------------------------------------------------------
   Portfolio / galleries
   ----------------------------------------------------------------- */

.portfolio #portfolio-flters,
#portfolio-flters {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px;
  border-radius: 50px;
}

.portfolio #portfolio-flters li,
#portfolio-flters li {
  color: var(--text-muted) !important;
  margin: 0 !important;
  background: none !important;
  text-shadow: none !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active,
#portfolio-flters li:hover,
#portfolio-flters li.filter-active {
  color: #06110f !important;
  background: var(--accent) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The entrance animation lives on .portfolio-wrap, NOT .portfolio-item.
   Isotope sets inline opacity/transform directly on .portfolio-item to
   filter/hide cards. A CSS animation with fill-mode "both" on that same
   element would permanently win the cascade over Isotope's inline styles
   once it finishes playing, silently breaking the filter tabs (hidden
   cards would never actually disappear). Keeping the animation on the
   inner wrapper gives the same fade/slide-in look without touching the
   element Isotope controls. */
.portfolio-wrap {
  animation: card-in 0.6s var(--ease) both;
}

.portfolio-item:nth-child(1) .portfolio-wrap { animation-delay: 0.05s; }
.portfolio-item:nth-child(2) .portfolio-wrap { animation-delay: 0.1s; }
.portfolio-item:nth-child(3) .portfolio-wrap { animation-delay: 0.15s; }
.portfolio-item:nth-child(4) .portfolio-wrap { animation-delay: 0.2s; }
.portfolio-item:nth-child(5) .portfolio-wrap { animation-delay: 0.25s; }
.portfolio-item:nth-child(6) .portfolio-wrap { animation-delay: 0.3s; }
.portfolio-item:nth-child(7) .portfolio-wrap { animation-delay: 0.35s; }
.portfolio-item:nth-child(8) .portfolio-wrap { animation-delay: 0.4s; }
.portfolio-item:nth-child(9) .portfolio-wrap { animation-delay: 0.45s; }
.portfolio-item:nth-child(n+10) .portfolio-wrap { animation-delay: 0.5s; }

.portfolio .portfolio-wrap {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.portfolio .portfolio-wrap::before {
  background: rgba(6, 10, 15, 0.82);
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: var(--accent-bright);
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: var(--accent);
}

/*--------------------------------------------------------------
# Featured Projects (always-visible case-study cards)
--------------------------------------------------------------*/
.featured-projects {
  margin-bottom: 50px;
}

.featured-projects .lab-disclaimer {
  color: var(--text-muted);
  font-size: 14px;
  margin: -10px 0 30px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-projects .lab-disclaimer i {
  color: var(--accent);
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.project-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-4px);
}

.project-card .project-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.project-card .project-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-card-body h4 {
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 8px;
}

.project-card-body p.project-desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}

.project-card-links {
  display: flex;
  gap: 14px;
  margin-top: auto;
}

.project-card-links a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s var(--ease);
}

.project-card-links a:hover {
  color: var(--accent-bright);
}

.portfolio-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 40px 0;
}

.portfolio-subtitle {
  font-size: 22px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 6px;
}

.portfolio-subtitle-desc {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 25px;
}