/* 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);
}

/* ---------- Statistikrad: nu tre kort (timmar / utdelade / i kö) ---------- */
.tech-stats-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) {
    .tech-stats-row--3 { grid-template-columns: 1fr; }
}

/* ---------- Klickbar widget-lista (kompakt radvy över byggen) ---------- */
.tech-widget-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-3);
    overflow: hidden;
}
.tech-widget-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: .85rem var(--space-3);
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-surface-border);
    transition: background .2s ease;
}
.tech-widget-row:last-child { border-bottom: none; }
.tech-widget-row:hover { background: rgba(255,255,255,.04); }
.tech-widget-row-tag {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem .6rem;
    border-radius: var(--radius-pill);
    background: rgba(124,110,242,.16);
    color: var(--color-accent-soft);
}
.tech-widget-row-title { flex: 1; font-weight: 600; }
.tech-widget-row-meta { color: var(--color-text-faint); font-size: .85rem; }
.tech-widget-row-arrow { color: var(--color-text-faint); }

/* ---------- Cirkeldiagram för komponentbehov ---------- */
.tech-needs-list--rings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}
.tech-need-ring-card {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
}
.tech-need-ring {
    width: 96px;
    height: 96px;
    position: relative;
}
.tech-need-ring svg { transform: rotate(-90deg); }
.tech-need-ring-track { stroke: rgba(255,255,255,.08); fill: none; }
.tech-need-ring-fill { stroke: var(--color-accent); fill: none; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.tech-need-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
}

/* ---------- Tävlingssteg ---------- */
.tech-contest-steps {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    text-align: left;
}
.tech-contest-steps li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
}
.tech-contest-step-num {
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
}
.tech-contest-social-links {
    display: flex;
    gap: .8rem;
    margin-top: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Kommentarer på ett bygge ---------- */
.tech-comments-section { margin-top: var(--space-4); }
.tech-comment-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.tech-comment-item {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.02);
}
.tech-comment-item-name { font-weight: 700; color: var(--color-accent-soft); font-size: .85rem; }
.tech-comment-item-body { margin: .3rem 0 0; color: var(--color-text-muted); font-size: .92rem; }
.tech-comment-form { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.tech-comment-form input, .tech-comment-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-comment-note { color: var(--color-text-faint); font-size: .78rem; }

/* ---------- Kategori-tagg + "Läs mer"-fot på byggkort (per mockup) ---------- */
.tech-build-tag {
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .25rem .6rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}
.tech-build-tag--speldator { background: rgba(90,200,140,.16); color: #5ac88c; border-color: rgba(90,200,140,.35); }
.tech-build-tag--komplett_paket { background: rgba(124,110,242,.16); color: var(--color-accent-soft); border-color: rgba(124,110,242,.35); }
.tech-build-tag--tillbehorspaket { background: rgba(240,180,60,.16); color: #f0b43c; border-color: rgba(240,180,60,.35); }
.tech-build-tag--telefon { background: rgba(90,170,220,.16); color: #5aaadc; border-color: rgba(90,170,220,.35); }
.tech-build-tag--ovrigt { background: rgba(255,255,255,.08); color: var(--color-text-muted); border-color: var(--color-surface-border); }
.tech-build-card-footer {
    margin-top: auto;
    padding-top: .6rem;
    border-top: 1px dashed var(--color-surface-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}
.tech-build-progress-note { font-size: .8rem; color: var(--color-text-faint); }
.tech-build-cta { color: var(--color-accent-soft); font-weight: 700; text-decoration: none; font-size: .88rem; white-space: nowrap; }
.tech-build-cta:hover { text-decoration: underline; }

/* ---------- Stage-badge i widget-listan (Byggs/Reparation/Klar/I kö) ---------- */
.tech-widget-row-stage {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: var(--radius-pill);
}
.tech-widget-row-stage--i_ko { background: rgba(255,255,255,.08); color: var(--color-text-muted); }
.tech-widget-row-stage--byggs { background: rgba(240,180,60,.18); color: #f0b43c; }
.tech-widget-row-stage--reparation { background: rgba(240,140,60,.18); color: #f08c3c; }
.tech-widget-row-stage--klar { background: rgba(90,200,140,.18); color: #5ac88c; }

/* ---------- Bygglogg (tidsstämplade inlägg på detaljsidan) ---------- */
.tech-buildlog-section { margin-top: var(--space-4); }
.tech-buildlog-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-surface-border);
}
.tech-buildlog-item:last-child { border-bottom: none; }
.tech-buildlog-photo { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.tech-buildlog-date { font-size: .78rem; color: var(--color-text-faint); }
.tech-buildlog-title { margin: .2rem 0; }
.tech-buildlog-body { color: var(--color-text-muted); font-size: .92rem; }