.projects-container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.projects-hero{position:relative;isolation:isolate;padding:80px 0;text-align:center;color:#fff;background:url('/assets/images/pexels-daria-nekipelova-112078039-9731981.jpg') center/cover no-repeat}
.projects-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(251,191,36,.30),rgba(180,83,9,.30)),rgba(0,0,0,.20)}
.projects-hero h1{font-size:clamp(2.5rem,5vw,3rem);font-weight:700;line-height:1.2;margin:0 0 16px;text-shadow:0 2px 8px #0007}
.projects-hero p{font-size:1.25rem;max-width:672px;margin:auto;text-shadow:0 2px 8px #0007}
.projects-list{padding:80px 0;background:#f9fafb;color:#111827}
.projects-grid{max-width:1152px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.projects-card{min-width:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:24px;transition:box-shadow .2s}
.projects-card:hover,.projects-card:focus-within{box-shadow:0 10px 18px #00000018}
.projects-card summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start}
.projects-card summary::-webkit-details-marker{display:none}
.projects-icon{font-size:36px;line-height:1.2;margin-bottom:16px}
.projects-title{font-size:20px;font-weight:700;margin-bottom:12px}
.projects-description{color:#374151;margin-bottom:16px;line-height:1.5}
.projects-toggle{display:flex;align-items:center;gap:8px;margin-top:auto;color:#2563eb;font-weight:600}
.projects-chevron{font-size:23px;line-height:1;transition:transform .2s}
.projects-card[open] .projects-chevron{transform:rotate(90deg)}
.projects-card[open] .projects-toggle-text{font-size:0}
.projects-card[open] .projects-toggle-text::after{content:'Zwiń';font-size:16px}
.projects-details{border-top:1px solid #e5e7eb;margin-top:16px;padding-top:16px;font-size:14px;color:#374151;line-height:1.5}
.projects-support{position:relative;isolation:isolate;text-align:center;padding:80px 0;background:var(--background,#fff);color:var(--foreground,#111827)}
.projects-support::before{content:"";position:absolute;inset:0;z-index:-1;background:url('/assets/images/watermark.png') center/contain no-repeat;pointer-events:none}
.projects-support h2{font-size:clamp(2rem,4vw,2.25rem);font-weight:700;margin:0 0 24px}
.projects-support p{max-width:672px;margin:auto;font-size:18px;line-height:1.6}
html.dark .projects-list,[data-theme="dark"] .projects-list{background:#1f2937;color:#fff}
html.dark .projects-card,[data-theme="dark"] .projects-card{background:#111827;border-color:#374151}
html.dark .projects-description,html.dark .projects-details,[data-theme="dark"] .projects-description,[data-theme="dark"] .projects-details{color:#d1d5db}
html.dark .projects-details,[data-theme="dark"] .projects-details{border-color:#374151}
html.dark .projects-toggle,[data-theme="dark"] .projects-toggle{color:#60a5fa}
@media(max-width:1023px){.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.projects-grid{grid-template-columns:1fr}.projects-hero,.projects-list,.projects-support{padding-top:64px;padding-bottom:64px}}


/* TRYB JASNY */

.projects-list {
    background: #f9fafb;
    color: #111827;
}

.projects-card {
    background: #ffffff;
    color: #111827;
    border-color: #e5e7eb;
}

.projects-description,
.projects-details {
    color: #374151;
}

.projects-details {
    border-color: #e5e7eb;
}

.projects-toggle {
    color: #2563eb;
}

.projects-support {
    background: #ffffff;
    color: #111827;
}

.projects-support h2 {
    color: #111827;
}

.projects-support p {
    color: #374151;
}

/* TRYB CIEMNY */

html.dark .projects-list,
html[data-theme="dark"] .projects-list {
    background: #1f2937;
    color: #ffffff;
}

html.dark .projects-card,
html[data-theme="dark"] .projects-card {
    background: #111827;
    color: #ffffff;
    border-color: #374151;
}

html.dark .projects-description,
html.dark .projects-details,
html[data-theme="dark"] .projects-description,
html[data-theme="dark"] .projects-details {
    color: #d1d5db;
}

html.dark .projects-details,
html[data-theme="dark"] .projects-details {
    border-color: #374151;
}

html.dark .projects-toggle,
html[data-theme="dark"] .projects-toggle {
    color: #60a5fa;
}

html.dark .projects-support,
html[data-theme="dark"] .projects-support {
    background: #111827;
    color: #ffffff;
}

html.dark .projects-support h2,
html[data-theme="dark"] .projects-support h2 {
    color: #ffffff;
}

html.dark .projects-support p,
html[data-theme="dark"] .projects-support p {
    color: #d1d5db;
}