/* Project home pages: hero, intro, feature grid. */

body.bd-project-home {
  --project-primary: #2563eb;
  --project-accent: #0f766e;
  --project-warm: #e11d48;
  --project-card: #ffffff;
  --project-card-strong: #f6faff;
  --project-media: transparent;
  --project-border: #d8e4f2;
  --project-border-hover: #9fb8e7;
  --project-shadow: 0 14px 34px rgba(28, 45, 74, 0.08);
  --project-shadow-hover: 0 22px 54px rgba(28, 45, 74, 0.12);
  background:
    linear-gradient(180deg, #f5f9ff 0, transparent 23rem),
    var(--pst-color-background, #fff);
}

html[data-bs-theme="dark"] body.bd-project-home,
html[data-theme="dark"] body.bd-project-home {
  --project-primary: #7db7ff;
  --project-accent: #5eead4;
  --project-warm: #fb7185;
  --project-card: #11151c;
  --project-card-strong: #171d26;
  --project-media: transparent;
  --project-border: #2a3442;
  --project-border-hover: #49627d;
  --project-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
  --project-shadow-hover: 0 22px 58px rgba(0, 0, 0, 0.46);
  background:
    linear-gradient(180deg, #111923 0, transparent 23rem),
    var(--pst-color-background, #0f1217);
}

body.bd-project-home .bd-sidebar-primary,
body.bd-project-home .bd-sidebar-secondary,
body.bd-project-home .bd-breadcrumbs {
  display: none !important;
}

body.bd-project-home .bd-main {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

body.bd-project-home .bd-content {
  width: 100%;
  max-width: 100% !important;
  margin: 0;
  padding: 0 1.5rem;
}

body.bd-project-home .bd-article-container,
body.bd-project-home .bd-article-container .bd-article {
  width: 100% !important;
  max-width: 100% !important;
}

body.bd-project-home .bd-article-container .bd-article {
  padding-bottom: 2rem;
}

body.bd-project-home article.bd-article > section {
  max-width: var(--ld-content);
  margin: 0 auto;
}

body.bd-project-home article.bd-article > section > h1:first-of-type {
  display: none !important;
}

.project-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  margin: 2.6rem auto 3rem;
  overflow: hidden;
  border: 1px solid var(--project-border);
  border-radius: var(--ld-radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--project-primary) 7%, transparent), transparent 42%),
    linear-gradient(180deg, var(--project-card), var(--pst-color-background, var(--ld-card)));
  box-shadow: var(--project-shadow);
}

.project-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--project-primary), var(--project-accent));
}

@media (min-width: 720px) {
  .project-hero {
    grid-template-columns: minmax(14rem, 25rem) minmax(0, 1fr);
    align-items: center;
  }
}

.project-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border-right: 1px solid var(--project-border);
  background: transparent;
}

html[data-bs-theme="dark"] .project-hero__media,
html[data-theme="dark"] .project-hero__media {
  background: transparent;
}

.project-hero__image {
  width: min(82%, 17rem);
  max-height: 18rem;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 18px 28px rgba(28, 45, 74, 0.18));
}

html[data-bs-theme="dark"] .project-hero__image,
html[data-theme="dark"] .project-hero__image {
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.34));
}

.project-hero__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.85rem;
  padding: clamp(1.4rem, 4vw, 2.6rem);
}

.project-hero__title {
  display: block !important;
  margin: 0;
  color: var(--pst-color-text-base, var(--ld-ink));
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.08;
}

.project-hero__tagline {
  max-width: 46rem;
  margin: 0;
  color: var(--pst-color-text-muted, var(--ld-muted));
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.78;
}

.project-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.35rem;
}

.project-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.58rem 1.1rem;
  border-radius: 7px;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.project-hero__btn:hover {
  transform: translateY(-1px);
}

.project-hero__btn--primary {
  border: 1px solid transparent;
  background: var(--pst-color-primary, var(--ld-blue));
  color: #fff !important;
}

.project-hero__btn--primary:hover {
  background: var(--pst-color-link-hover, var(--ld-blue-strong));
}

.project-hero__btn--secondary {
  border: 1px solid var(--project-border);
  background: var(--project-card);
  color: var(--pst-color-text-base, var(--ld-ink)) !important;
}

.project-hero__btn--secondary:hover {
  border-color: var(--project-border-hover);
  background: var(--project-card-strong);
  color: var(--project-primary) !important;
}

body.bd-project-home article.bd-article > section > h2,
body.bd-project-home article.bd-article section > h1:not(:first-child) {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 2.2rem 0 1.1rem;
  border: 0;
  color: var(--pst-color-text-base, var(--ld-ink));
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 850;
  letter-spacing: 0;
}

body.bd-project-home article.bd-article > section > h2::after,
body.bd-project-home article.bd-article section > h1:not(:first-child)::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--project-border), transparent);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
}

.project-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0.9rem;
  margin-bottom: 0.4rem;
}

.project-intro__item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  align-items: center;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--project-border);
  border-radius: var(--ld-radius);
  background: var(--project-card);
  box-shadow: var(--project-shadow);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.project-intro__item:hover {
  border-color: color-mix(in srgb, var(--project-accent) 48%, var(--project-border));
  box-shadow: var(--project-shadow-hover);
}

.project-intro__icon {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  line-height: 1;
  border-radius: 7px;
  background: color-mix(in srgb, var(--project-accent) 13%, transparent);
  color: var(--project-accent);
  font-size: 1rem;
}

.project-intro__icon i,
.feature-card__icon i {
  display: block;
  line-height: 1;
}

.project-intro__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.28rem;
  justify-content: center;
  line-height: 1.55;
}

.project-intro__title {
  color: var(--pst-color-text-base, var(--ld-ink));
  font-size: 0.98rem;
  line-height: 1.35;
}

.project-intro__desc {
  color: var(--pst-color-text-muted, var(--ld-muted));
  font-size: 0.9rem;
  line-height: 1.68;
}

.feature-card {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: 2.1rem auto;
  gap: 0.42rem 0.7rem;
  align-items: start;
  min-height: 9.5rem;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--project-border);
  border-radius: var(--ld-radius);
  background: var(--project-card);
  box-shadow: var(--project-shadow);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.feature-card:hover {
  border-color: var(--project-border-hover);
  box-shadow: var(--project-shadow-hover);
  transform: translateY(-2px);
}

.feature-card__icon {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  line-height: 1;
  border-radius: 7px;
  background: color-mix(in srgb, var(--project-primary) 11%, transparent);
  color: var(--project-primary);
  font-size: 1rem;
}

.feature-card__title {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-height: 2.1rem;
  margin: 0;
  color: var(--pst-color-text-base, var(--ld-ink));
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.35;
}

.feature-card__desc {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: var(--pst-color-text-muted, var(--ld-muted));
  font-size: 0.88rem;
  line-height: 1.68;
}

body.bd-project-home .bd-content .toctree-wrapper {
  display: none;
  margin-top: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--project-border);
  border-radius: var(--ld-radius);
  background: var(--project-card);
  box-shadow: var(--project-shadow);
}

body.bd-project-home .bd-content .toctree-wrapper ul {
  columns: 1;
  margin-bottom: 0;
}

body.bd-project-home .bd-content .toctree-wrapper li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.28rem 0.42rem;
  border-radius: 6px;
  color: var(--pst-color-text-base, var(--ld-ink));
  text-decoration: none;
}

body.bd-project-home .bd-content .toctree-wrapper li > a::before {
  content: "\f105";
  color: var(--pst-color-text-muted, var(--ld-muted));
  font-family: "Font Awesome 6 Free";
  font-size: 0.72rem;
  font-weight: 900;
}

body.bd-project-home .bd-content .toctree-wrapper li > a:hover {
  background: color-mix(in srgb, var(--project-primary) 10%, transparent);
  color: var(--project-primary);
}

@media (min-width: 760px) {
  body.bd-project-home .bd-content .toctree-wrapper ul {
    columns: 2;
  }
}

@media (max-width: 719.98px) {
  body.bd-project-home .bd-content {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .project-hero {
    margin-top: 1.4rem;
  }

  .project-hero__media {
    min-height: 13rem;
    border-right: 0;
    border-bottom: 1px solid var(--project-border);
  }

  .project-hero__actions {
    flex-direction: column;
  }

  .project-hero__btn {
    width: 100%;
  }
}

.video-embed-wrapper {
  margin: 1rem 0;
}

.video-embed-wrapper .video-embed {
  max-width: 100%;
}