/* ============================================================
Projects: project cards, filters and project details
============================================================ */

/* Projects page: category and sort dropdowns */
#selectedCategory,
#sortBy {
  cursor: pointer;
}

/* --- Project Cards (Home and Projects page) START --- */
.card-project {
  transition: all 0.2s ease;
  cursor: pointer;
}

.card-project .card-text {
  max-height: 4rem;
  overflow: hidden;
}

.card-project .card-img-top {
  /* height: 12rem; */
  height: 220px;
  object-fit: contain;
}

.card-project:hover {
  box-shadow: 5px 6px 6px 2px #e9ecef;
  transform: scale(1.04);
}

.card-project .card-title {
  color: #223847; /* logo navy */
}

.card-project .card-category {
  color: #52627a;
}

/* Title, category and date: own section with a little space above and more below */
.card-project .card-info {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* "View details" button: a bit off the white card, same border as the card, filled red when the card is hovered */
.card-project .btn-project {
  color: var(--bs-secondary-color);
  background-color: #fbfbfb;
  border: 1px solid var(--bs-border-color);
}

/* Red button on mouse hover, and for keyboard users when the card link has focus */
.card-project:hover .btn-project,
.card-project:focus-within .btn-project {
  color: #fff;
  background-color: #A93339;
  border-color: #A93339;
}
/* --- Project Cards END --- */

/* --- Project Detail START --- */
/* Card with rounded corners and a soft shadow */
.project-card {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 2px 30px rgba(168, 182, 218, 0.25);
}

/* Same side space as the gallery images (56px for the scroll buttons + 16px), so the text lines up with them */
.project-body {
  padding: 2rem 72px 2.5rem;
}

/* Project logo + title in one row (centered on small screens, left on large screens) */
.project-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.75rem;
}

.project-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 4px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
}

.project-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #223847; /* logo navy */
  margin-bottom: 0;
}

/* Same width as the description, so the red line is as wide as the text below */
.project-title-wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* Red line under the title */
.project-title-line {
  width: 100%;
  margin: 0 0 1.5rem;
}

/* Description: readable width, keeps its line breaks (e.g. feature lists) */
.project-description {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
  white-space: pre-line;
  color: #495057;
}

/* Facts (category, completion date, links, go back): below the description on small screens */
.project-facts {
  max-width: 760px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
}

.project-fact {
  margin-bottom: 1.5rem;
}

/* Values start where the label text starts (after the icon) */
.project-fact-value {
  padding-left: 1.35rem;
}

.project-fact-value {
  margin: 0;
  font-size: 1rem;
  color: #495057;
}

.project-section-title {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c757d;
}

.project-section-title i {
  margin-right: 0; /* fa-fw and the space after the icon are enough */
  color: #A93339;
}

/* Project links: a row of link buttons (.link-btn in buttons.css) */
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Large screens: description on the left, facts in a column on the right */
@media (min-width: 992px) {
  .project-body {
    padding: 2.5rem 72px;
  }

  .project-main {
    padding-right: 2.5rem;
  }

  .project-title-wrap,
  .project-description {
    margin: 0;
  }

  /* 9px at the top: the first label lines up with the top of the title letters
     (the title sits lower because it is centered next to the 48px logo) */
  .project-facts {
    margin: 0;
    padding: 9px 0 0 2.5rem;
    border-top: 0;
    border-left: 1px solid #e9ecef;
  }
}
/* --- Project Detail END --- */

/* ---------------------------------------------------
  MEDIA QUERIES
----------------------------------------------------- */
/* Extra small devices (phones, 575px and down) */
@media (max-width: 575.98px) {
  /* Project Detail: less padding */
  .project-body {
    padding: 1.5rem 1rem 2rem;
  }
}

/* ---------------------------------------------------
  DARK THEME (set by the theme toggle)
----------------------------------------------------- */
/* Project cards: darker shadow on hover */
[data-bs-theme="dark"] .card-project:hover {
  box-shadow: 5px 6px 6px 2px rgba(0, 0, 0, 0.35);
}

/* Project images: white area like in light mode (many logos have a white or transparent background) */
[data-bs-theme="dark"] .card-project .card-img-top {
  background-color: #fff;
}

/* Details part and button: keep the dark look */
[data-bs-theme="dark"] .card-project .card-title {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card-project .card-category {
  color: var(--bs-secondary-color);
}

/* Button a bit darker than the dark card (same small step as #fbfbfb in light mode) */
[data-bs-theme="dark"] .card-project .btn-project {
  color: var(--bs-secondary-color);
  background-color: #1d2125;
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .card-project:hover .btn-project,
[data-bs-theme="dark"] .card-project:focus-within .btn-project {
  color: #fff;
  background-color: #A93339;
  border-color: #A93339;
}

/* Project Detail: card */
[data-bs-theme="dark"] .project-card {
  border-color: #495057;
  box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.35);
}

/* Logo stays on white (many logos need a light background) */
[data-bs-theme="dark"] .project-logo {
  border-color: #495057;
}

[data-bs-theme="dark"] .project-title,
[data-bs-theme="dark"] .project-description,
[data-bs-theme="dark"] .project-fact-value {
  color: #dee2e6;
}

[data-bs-theme="dark"] .project-facts {
  border-color: #495057;
}

[data-bs-theme="dark"] .project-section-title {
  color: #adb5bd;
}