/* Realizowane projekty: accordion under the page hero (colours as in the former Elementor page). */
.sm-projects-page { background: var(--color-surface-brand); padding: var(--space-64) 0; }
.sm-projects-container { max-width: calc(var(--container-max) + 2 * var(--space-page-x)); margin: 0 auto; padding: 0 var(--space-page-x); }
.sm-projects-page > .sm-projects-container > h1 { margin: 0 0 var(--space-32); color: var(--color-heading); }
.sm-projects { display: grid; gap: var(--space-32); }
.sm-project { min-width: 0; }
.sm-project__heading { margin: 0; }
.sm-project__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); width: 100%; padding: var(--space-24); border: 0; border-radius: 0; background: var(--c-blue); color: var(--c-white); text-align: left; white-space: normal; cursor: pointer; transition: background-color 200ms ease; }
/* :focus too: Hello's reset paints a focused button #c36 (red) after a mouse click. */
.sm-project__toggle:is(:hover, :focus) { background: var(--c-navy); color: var(--c-white); }
.sm-project__toggle:focus-visible { outline: 3px solid var(--c-blue-light); outline-offset: 2px; }
.sm-project.is-open .sm-project__toggle { background: var(--c-purple); }
.sm-project__toggle > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* Plus that turns into a minus. */
.sm-project__icon { position: relative; flex: 0 0 16px; height: 16px; }
.sm-project__icon::before, .sm-project__icon::after { content: ""; position: absolute; inset: 7px 0; height: 2px; background: currentColor; transition: transform 200ms ease; }
.sm-project__icon::after { transform: rotate(90deg); }
.sm-project.is-open .sm-project__icon::after { transform: rotate(0deg); }
.sm-project__panel { overflow: hidden; }
.sm-project__panel[hidden] { display: none; }
.sm-project__inner { display: grid; grid-template-columns: minmax(240px, 32%) minmax(0, 1fr); grid-template-areas: "aside main" "bottom bottom"; gap: var(--space-32) 3.5rem; margin-top: var(--space-16); padding: var(--space-24); border-radius: var(--radius-md); background: var(--c-white); }
.sm-project__aside { grid-area: aside; display: grid; align-content: start; gap: var(--space-32); min-width: 0; }
.sm-project__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.sm-project__funding { display: grid; gap: var(--space-12); margin: 0; color: var(--color-text); }
.sm-project__funding div { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.sm-project__funding :is(dt, dd) { margin: 0; }
.sm-project__main { grid-area: main; display: grid; align-content: start; gap: var(--space-16); min-width: 0; color: var(--color-text); overflow-wrap: anywhere; }
.sm-project__main h3 { margin: 0; color: var(--color-heading); }
.sm-project__meta { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-32); margin: 0; }
.sm-project__content > :first-child { margin-top: 0; }
.sm-project__content > :last-child { margin-bottom: 0; }
.sm-project__content a { color: var(--color-brand); }
.sm-project__files { display: grid; gap: var(--space-12); }
.sm-project__files p { margin: 0; color: var(--color-heading); }
.sm-project__files ul { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.sm-project__files a { display: inline-flex; align-items: center; gap: var(--space-12); color: var(--color-brand); text-decoration: none; }
.sm-project__files a:hover { text-decoration: underline; }
.sm-project__file-type { flex: 0 0 auto; min-width: 2.75rem; padding: var(--space-4) var(--space-8); border-radius: var(--radius-sm); background: var(--c-bg-blue); color: var(--c-blue); font-size: var(--text-caption-size); font-weight: var(--font-weight-bold); line-height: var(--line-height-xsm); text-align: center; }
.sm-project__bottom { grid-area: bottom; display: flex; justify-content: center; min-width: 0; }
.sm-project__bottom img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
@media (max-width: 767px) {
    .sm-projects-page { padding: var(--space-32) 0; }
    .sm-projects { gap: var(--space-16); }
    .sm-project__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "main" "bottom"; gap: var(--space-24); }
}
@media (prefers-reduced-motion: reduce) { .sm-project__toggle, .sm-project__icon::before, .sm-project__icon::after { transition: none; } }