/* assets/css/tech-donations.css
   Teknikdonationssidan — bygger på samma tokens (variables.css) och
   kortspråk (.glass-card, .campaign-category, .grid-3) som resten av
   sajten, men med objekt-specifika delar: status-badge istället för
   progress-bar, timmar/utdelningslista istället för kronbelopp.
*/

.tech-section-intro {
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

/* ---------- Statistik ---------- */
.tech-stats-section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
}
.tech-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.tech-stat-card {
    padding: var(--space-4);
    text-align: center;
}
.tech-stat-value {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--color-accent-soft);
}
.tech-stat-label {
    color: var(--color-text-muted);
    margin-top: .4rem;
}
.tech-given-list {
    padding: var(--space-3) var(--space-4);
}
.tech-given-list h3 { margin-top: 0; }
.tech-given-list ul { list-style: none; padding: 0; margin: 0; }
.tech-given-list li {
    padding: .6rem 0;
    border-bottom: 1px solid var(--color-surface-border);
}
.tech-given-list li:last-child { border-bottom: none; }
.tech-given-list a { color: var(--color-accent-soft); text-decoration: none; font-weight: 600; }
.tech-given-list a:hover { text-decoration: underline; }
.tech-given-note { color: var(--color-text-muted); }

@media (max-width: 640px) {
    .tech-stats-row { grid-template-columns: 1fr; }
}

/* ---------- Byggen-kort ---------- */
.tech-builds-section, .tech-needs-section, .tech-contest-section, .tech-offer-section {
    margin: var(--space-5) auto;
}
.tech-build-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    position: relative;
}
.tech-build-status {
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem .65rem;
    border-radius: var(--radius-pill);
}
.tech-build-status--tillganglig { background: rgba(90,200,140,.18); color: #5ac88c; }
.tech-build-status--reserverad { background: rgba(240,180,60,.18); color: #f0b43c; }
.tech-build-status--utdelad { background: rgba(124,110,242,.18); color: var(--color-accent-soft); }
.tech-build-specs {
    color: var(--color-text-muted);
    font-size: .92rem;
}
.tech-build-cta { margin-top: auto; }

/* ---------- Behöver stöd-sektion ---------- */
.tech-needs-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}
.tech-need-card {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
}
.tech-need-build {
    color: var(--color-text-muted);
    font-size: .85rem;
}

/* ---------- Tävlings-CTA ---------- */
.tech-contest-card {
    padding: var(--space-4);
    text-align: center;
}
.tech-contest-card h2 { margin-top: 0; }

/* ---------- Donationsformulär ---------- */
.tech-offer-card {
    padding: var(--space-4);
    max-width: var(--container-narrow);
    margin: 0 auto;
}
.tech-offer-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.tech-offer-form label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-weight: 600;
    font-size: .92rem;
}
.tech-offer-form input,
.tech-offer-form textarea {
    font-family: var(--font-base);
    padding: .65rem .8rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-surface-border);
    background: rgba(255,255,255,.03);
    color: var(--color-text);
}
.tech-offer-success { color: #5ac88c; font-weight: 600; }
.tech-offer-error { color: #e08080; font-weight: 600; }

/* ---------- Detaljsida ---------- */
.tech-detail-wrap {
    max-width: var(--container-narrow);
    margin: var(--space-4) auto var(--space-6);
}
.tech-detail-back {
    display: inline-block;
    margin-bottom: var(--space-3);
    color: var(--color-accent-soft);
    text-decoration: none;
}
.tech-detail-cover {
    width: 100%;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}
.tech-detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.tech-detail-gallery img {
    width: 100%;
    border-radius: var(--radius-md);
}