/**
 * Project card presentation — CSS driven by SSOT consts
 * (project-card-presentation.mjs → CSS vars on :root / .project).
 * Change title size in the JS const; do not hardcode rem here for titles.
 */

:root {
  --pf-card-title-size: 1.45rem;
  --pf-card-title-lh: 1.12;
  --pf-card-title-size-open: 1.62rem;
  --pf-card-title-lh-open: 1.08;
  --pf-card-title-bar-pad-y: 0.22rem;
  --pf-card-stack-size: 0.68rem;
  --pf-card-tag-pad-y: 0.22rem;
  --pf-card-tag-pad-x: 0.55rem;
  --pf-card-min-block: 11rem;
  --pf-card-angle: 0deg;
}

.project {
  min-height: var(--pf-card-min-block);
}

.project__title {
  font-size: var(--pf-card-title-size) !important;
  line-height: var(--pf-card-title-lh) !important;
}

.project__stack li {
  font-size: var(--pf-card-stack-size) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pf-card-tag-pad-y) var(--pf-card-tag-pad-x);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-project-title-bar='1'] .project__title-row {
  padding-top: var(--pf-card-title-bar-pad-y) !important;
  padding-bottom: var(--pf-card-title-bar-pad-y) !important;
  align-items: center;
}

[data-project-title-bar='1'] .project__title-row .project__stack {
  align-items: center;
  align-self: center;
}

[data-project-title-bar='1'] .project.is-open .project__title-row {
  padding-top: var(--pf-card-title-bar-pad-y) !important;
  padding-bottom: var(--pf-card-title-bar-pad-y) !important;
}

[data-project-title-bar='1'] .project.is-open .project__title {
  font-size: var(--pf-card-title-size-open) !important;
  line-height: var(--pf-card-title-lh-open) !important;
}

/* Size presets (data-card-size) — vars still win when set inline from JS */
.project[data-card-size='sm'] {
  --pf-card-min-block: 8rem;
  --project-media-col: 10rem;
}
.project[data-card-size='md'] {
  --pf-card-min-block: 11rem;
  --project-media-col: 14rem;
}
.project[data-card-size='lg'] {
  --pf-card-min-block: 14rem;
  --project-media-col: 18rem;
}
.project[data-card-size='xl'] {
  --pf-card-min-block: 18rem;
  --project-media-col: 24rem;
}
.project[data-card-size='hero'] {
  --pf-card-min-block: 22rem;
  --project-media-col: 28rem;
}