/* =========================================
   WORK IN PROGRESS — "Rozdělané projekty"

   Sekce je tmavá záměrně: skutečné barvy těchto projektů (jantarová Maki,
   modrá Litera) na světlém podkladu nemají dost kontrastu, na tmavém ano.
   Zároveň to dělá rytmus mezi světlým archivem a světlými partnery.
   ========================================= */
.wip-section {
    position: relative;
    background: #0d0d0d;
    color: var(--white);
    padding: 8rem 2rem;
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.wip-container {
    max-width: 1400px;
    margin: 0 auto;
}

.wip-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 3.5rem;
}

.wip-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.wip-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 0;
}

.wip-intro {
    color: #999;
    font-size: 1rem;
    max-width: 52ch;
    line-height: 1.6;
}

.wip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.wip-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color var(--transition-base), background var(--transition-base);
}

.wip-card:hover {
    border-color: var(--wip-accent);
    background: rgba(255, 255, 255, 0.05);
}

/* Dlaždice loga.
   Světlý podklad je záměr: loga (navy Litera, černý piktogram MatlGroup) jsou
   kreslená pro světlé pozadí a na #0d0d0d by zmizela. Jednotná dlaždice pro
   všechny karty drží řádek konzistentní — jako police s ikonami aplikací. */
/* POZOR na `flex-basis` tady: karta se na nejmenších displejích překlápěla
   do sloupce a v tu chvíli basis přestal určovat ŠÍŘKU a začal určovat VÝŠKU.
   Šířka spadla na auto, `.wip-logo { width: 100% }` se nemělo čeho chytit
   a dlaždice se složila do proužku — proto ta loga na telefonu vypadala
   rozbitě. Explicitní width + height drží čtverec v obou směrech. */
.wip-mark {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background: #f4f4f2;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: border-color var(--transition-base);
}

.wip-card:hover .wip-mark {
    border-color: var(--wip-accent);
}

.wip-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* MatlGroup je jediné logo na šířku (157:117), zbytek jsou čtverce. Ve
   čtvercové dlaždici mu proto zbyde jen ~74 % výšky a vedle ostatních působí
   menší, než je. Menší vnitřní odsazení mu tu ztrátu vrací, aby měla všechna
   loga v řádku stejnou optickou váhu. */
.wip-mark.is-wide {
    padding: 0.45rem;
}

/* Zástupný monogram — pro projekty bez použitelného loga */
.wip-mark.is-placeholder {
    background: none;
    border: 1px solid var(--wip-accent);
    border-radius: 0;
    color: var(--wip-accent);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.wip-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.wip-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.wip-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--white);
}

.wip-status {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wip-accent);
    border: 1px solid var(--wip-accent);
    padding: 0.25rem 0.6rem;
    white-space: nowrap;
}

.wip-desc {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.65;
}

.wip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.wip-tags li {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #777;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.25rem 0.55rem;
}

/* Živý odkaz na rozpracovanou verzi.
   Karta zůstává needitovatelná jako celek — klikací je jen odkaz, aby bylo
   jasné, že to nevede na case study, ale ven na běžící web. Poznámka pod ním
   nese verzi nebo varování, aby návštěvník věděl, co ho za odkazem čeká. */
.wip-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 0.5rem;
}

.wip-link {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wip-accent);
    border: 1px solid var(--wip-accent);
    padding: 0.4rem 0.8rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-base), color var(--transition-base);
}

.wip-link:hover,
.wip-link:focus-visible {
    background: var(--wip-accent);
    color: #0d0d0d;
}

.wip-note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: #888;
    line-height: 1.5;
}

/* Varování u klientské zakázky má být vidět dřív než se klikne — proto
   vlastní barva a tečka namísto pouhého šedého textu. */
.wip-note.is-warning {
    color: var(--wip-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.wip-note.is-warning::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wip-accent);
}

@media (max-width: 900px) {
    .wip-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .wip-section { padding: 4rem 1.2rem; }
    .wip-header { margin-bottom: 2.5rem; }
    .wip-card { padding: 1.5rem; gap: 1.1rem; }
    .wip-mark { width: 60px; height: 60px; padding: 0.55rem; font-size: 1.2rem; }
    .wip-mark.is-wide { padding: 0.35rem; }
}

/* Na nejmenších displejích zůstává řádek (dřív se překlápěl do sloupce).
   Osamocená světlá dlaždice nad textem působila jako nalepená samolepka
   a brála výšku; vedle názvu se čte jako ikona aplikace, což je záměr sekce.
   Místo pro text se bere z odsazení karty, ne z rozbití layoutu. */
@media (max-width: 480px) {
    .wip-card { padding: 1.15rem; gap: 0.9rem; }
    .wip-mark { width: 48px; height: 48px; padding: 0.4rem; border-radius: 8px; }
    .wip-mark.is-wide { padding: 0.25rem; }
    .wip-name { font-size: 1.15rem; }
    .wip-desc { font-size: 0.9rem; }
    .wip-live { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
    .wip-link { white-space: normal; }
}