/* ============================================================
   /portfolio/<slug>/ — wspólne style stron case study.
   Komponent .work-* (ramka przeglądarki + zrzut) żyje w global.css.
   Tokeny i .section*, .btn*, .hero__* — global.css. Tu tylko układ.
============================================================ */

/* ===== NOTKA SZKICU (usunąć przy publikacji) ===== */
.cs-draft-note {
    margin: 0 auto;
    max-width: 720px;
    padding: .7rem 1.1rem;
    border: 1px dashed rgba(254, 204, 0, .55);
    border-radius: 10px;
    background: rgba(254, 204, 0, .07);
    font-family: var(--font-mono);
    font-size: .68rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .75);
    text-align: center;
}

/* Fragmenty do potwierdzenia przez właściciela — widoczne w szkicu */
.cs-todo {
    background: rgba(254, 204, 0, .12);
    outline: 1px dashed rgba(254, 204, 0, .5);
    outline-offset: 2px;
    border-radius: 3px;
    color: rgba(255, 255, 255, .85);
    padding: 0 .2rem;
}

/* ===== HERO ===== */
.cs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
    padding-top: 9rem;
    overflow: hidden;
}
.cs-hero__content { position: relative; z-index: 2; padding-top: 24px; }
.cs-hero .hero__title { max-width: 640px; }
.cs-hero .hero__subtitle { max-width: 600px; }

.cs-hero__back { display: block; width: fit-content; margin-bottom: 1.4rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; color: rgba(255, 255, 255, .55); text-decoration: none; }
.cs-hero__back:hover { color: var(--yellow); }

.cs-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.cs-meta__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .7);
}
.cs-meta__chip--link { border-color: rgba(254, 204, 0, .5); color: var(--yellow); text-decoration: none; }
.cs-meta__chip--link:hover { background: rgba(254, 204, 0, .1); }

.cs-hero__visual { align-self: center; }
.cs-hero__visual .work-card { max-width: 380px; margin: 0 auto; }

/* ===== TREŚĆ ===== */
.cs-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.cs-prose h2 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 700; color: var(--white); margin-top: 2.6rem; }
.cs-prose h2:first-child { margin-top: 0; }
.cs-prose h2 em { font-style: normal; color: var(--yellow); }
.cs-prose p { margin-top: 1rem; font-size: .88rem; font-weight: 300; line-height: 1.85; color: rgba(255, 255, 255, .68); }
.cs-prose ul { margin-top: 1rem; padding-left: 1.2rem; display: grid; gap: .5rem; }
.cs-prose ul li { font-size: .85rem; font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, .68); }
.cs-prose a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

.cs-aside { position: sticky; top: 110px; display: grid; gap: 1rem; }
.cs-facts { padding: 1.4rem 1.5rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.cs-facts dt { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .45); margin-top: .9rem; }
.cs-facts dt:first-child { margin-top: 0; }
.cs-facts dd { margin: .25rem 0 0; font-size: .82rem; color: rgba(255, 255, 255, .82); }
.cs-facts dd a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

/* ===== DECYZJE PROJEKTOWE ===== */
.cs-decisions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 3rem; }
.cs-decision {
    padding: 1.5rem 1.5rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    transition: border-color .3s ease, transform .3s var(--ease-out-expo);
}
.cs-decision:hover { border-color: rgba(254, 204, 0, .4); transform: translateY(-3px); }
.cs-decision h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--white); }
.cs-decision p { margin-top: .6rem; font-size: .8rem; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .6); }

/* ===== CYTAT ===== */
.cs-quote { max-width: 780px; margin: 0 auto; text-align: center; }
.cs-quote blockquote { margin: 2rem 0 0; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 600; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.cs-quote blockquote::before { content: '„'; color: var(--yellow); }
.cs-quote blockquote::after { content: '"'; color: var(--yellow); }
.cs-quote figcaption { margin-top: 1.4rem; font-family: var(--font-mono); font-size: .72rem; color: rgba(255, 255, 255, .55); }
.cs-quote--placeholder blockquote { color: rgba(255, 255, 255, .35); font-style: italic; }

/* ===== NASTĘPNY CASE ===== */
.cs-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 3rem; padding: 1.6rem 1.8rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.cs-next__label { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .45); display: block; margin-bottom: .35rem; }
.cs-next__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--white); }

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width: 1024px) {
    .cs-hero { grid-template-columns: 1fr; padding-top: 7rem; }
    .cs-hero__visual .work-card { max-width: 420px; margin: 0; }
    .cs-body { grid-template-columns: 1fr; }
    .cs-aside { position: static; }
}
@media (max-width: 768px) {
    .cs-decisions__grid { grid-template-columns: 1fr; }
}