/* ==========================================================================
   Para-Cord — widok pojedynczego wpisu bloga
   Nagłówek wpisu, spis treści, typografia treści, kroki poradnika,
   box z materiałami, autor, udostępnianie, powiązane wpisy i produkty.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Pasek postępu czytania
   -------------------------------------------------------------------------- */

.pc-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--pc-z-header) + 1);
    height: 3px;
    background: transparent;
    pointer-events: none;
}

.pc-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--pc-pink);
}

/* --------------------------------------------------------------------------
   2. Nagłówek wpisu
   -------------------------------------------------------------------------- */

.pc-post-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: var(--pc-block-gap);
}

.pc-post-head__cat {
    padding: 6px 16px;
    border-radius: var(--pc-r-pill);
    background: var(--pc-pink);
    color: #fff;
    font-family: var(--pc-font-display);
    font-size: 12px;
    font-weight: 600;
}

.pc-post-head__title {
    max-width: 24ch;
    font-size: clamp(28px, 6.4vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.028em;
    color: var(--pc-ink);
}

/* Druga część tytułu zawsze w nowej linii — inaczej łamanie wypada w losowym
   miejscu i pojedyncze słowo zostaje na górze. */
.pc-post-head__title em {
    display: block;
    font-style: normal;
    color: var(--pc-pink);
}

.pc-post-head__lead {
    max-width: 62ch;
    font-size: clamp(14px, 3.6vw, 17px);
    line-height: 1.6;
    color: var(--pc-body);
}

.pc-post-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding-top: 14px;
    margin-top: 2px;
    border-top: 1px solid var(--pc-line);
    width: 100%;
    font-size: 12.5px;
    color: var(--pc-muted);
}

.pc-post-head__meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pc-post-head__meta svg {
    width: 16px;
    height: 16px;
    opacity: 0.75;
}

.pc-post-head__author img {
    width: 28px;
    height: 28px;
    border-radius: var(--pc-r-pill);
    object-fit: cover;
    background: var(--pc-surface-alt);
}

/* width: 100% jest tu konieczne — przy samym aspect-ratio + max-height
   przeglądarka zwęża box, żeby utrzymać proporcję, i okładka nie zajmuje
   pełnej szerokości kolumny. */
.pc-post-cover {
    width: 100%;
    margin-top: 18px;
    aspect-ratio: 16 / 9;
    max-height: 460px;
    border-radius: var(--pc-r-lg);
    overflow: hidden;
    background: var(--pc-surface-alt);
}

.pc-post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   3. Układ: treść + kolumna boczna
   -------------------------------------------------------------------------- */

.pc-post-layout {
    display: grid;
    gap: 26px;
    margin-top: 24px;
    align-items: start;
}

/* --- Spis treści --------------------------------------------------------- */

.pc-toc {
    padding: 18px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-md);
    background: var(--pc-surface-soft);
}

.pc-toc__title {
    position: relative;
    margin-bottom: 12px;
    padding-bottom: 9px;
    font-family: var(--pc-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--pc-ink);
}

.pc-toc__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: var(--pc-r-pill);
    background: var(--pc-pink);
}

.pc-toc a {
    display: block;
    padding: 7px 0 7px 14px;
    border-left: 2px solid var(--pc-line-strong);
    font-size: 13px;
    line-height: 1.4;
    color: var(--pc-muted);
    transition: color var(--pc-dur) var(--pc-ease),
                border-color var(--pc-dur) var(--pc-ease);
}

.pc-toc a:hover,
.pc-toc a.is-active {
    color: var(--pc-pink);
    border-left-color: var(--pc-pink);
}

/* --- Udostępnianie ------------------------------------------------------- */

.pc-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 18px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-md);
    background: #fff;
}

.pc-share__label {
    font-family: var(--pc-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-ink);
}

.pc-share__list {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.pc-share__list a,
.pc-share__list button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--pc-r-pill);
    background: var(--pc-surface-alt);
    color: var(--pc-navy-700);
    transition: background-color var(--pc-dur) var(--pc-ease),
                color var(--pc-dur) var(--pc-ease);
}

.pc-share__list a:hover,
.pc-share__list button:hover {
    background: var(--pc-pink);
    color: #fff;
}

/* --------------------------------------------------------------------------
   4. Typografia treści wpisu
   -------------------------------------------------------------------------- */

.pc-prose {
    max-width: 68ch;
    font-size: 15px;
    line-height: 1.75;
    color: var(--pc-body);
}

.pc-prose > * + * {
    margin-top: 18px;
}

.pc-prose h2 {
    margin-top: 34px;
    font-size: clamp(21px, 4.6vw, 27px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pc-ink);
    scroll-margin-top: 110px;
}

.pc-prose h2 em {
    font-style: normal;
    color: var(--pc-pink);
}

.pc-prose h3 {
    margin-top: 26px;
    font-size: 17px;
    font-weight: 700;
    color: var(--pc-ink);
}

.pc-prose strong {
    color: var(--pc-ink);
}

/* Wykluczamy przyciski — inaczej różowy kolor linku z treści nadpisywał
   biały tekst na różowym tle i napis znikał. */
.pc-prose a:not(.pc-btn) {
    color: var(--pc-pink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pc-prose ul,
.pc-prose ol {
    display: grid;
    gap: 9px;
    padding-left: 2px;
}

/* Uwaga: NIE używamy tu flexa. Każdy element inline w treści (np. <strong>)
   stałby się osobnym elementem flex i tekst rozpadłby się na kolumny.
   Ikona jest pozycjonowana absolutnie, a tekst zostaje zwykłym akapitem. */
.pc-prose ul li {
    position: relative;
    display: block;
    padding-left: 27px;
}

.pc-prose ul svg {
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    color: var(--pc-pink);
}

.pc-prose blockquote {
    margin-top: 24px;
    padding: 16px 20px;
    border-left: 4px solid var(--pc-pink);
    border-radius: 0 var(--pc-r-sm) var(--pc-r-sm) 0;
    background: var(--pc-surface-alt);
    font-size: 15px;
    font-style: italic;
    color: var(--pc-ink);
}

.pc-prose figure {
    margin: 26px 0 0;
}

.pc-prose figure img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    max-height: 340px;
    object-fit: cover;
    border-radius: var(--pc-r-md);
}

.pc-prose figcaption {
    margin-top: 9px;
    font-size: 12px;
    color: var(--pc-muted);
}

/* --- Box z listą materiałów ---------------------------------------------- */

.pc-materials {
    margin-top: 26px;
    padding: 20px;
    border-radius: var(--pc-r-md);
    background: var(--pc-navy-800);
    color: rgba(255, 255, 255, 0.86);
}

.pc-materials__title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    font-family: var(--pc-font-display);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.pc-materials__title svg {
    color: var(--pc-pink);
}

.pc-materials ul {
    display: grid;
    gap: 9px;
}

.pc-materials li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    line-height: 1.5;
}

.pc-materials svg.pc-materials__check {
    flex: none;
    margin-top: 2px;
    width: 17px;
    height: 17px;
    color: var(--pc-pink);
}

.pc-materials__cta {
    margin-top: 18px;
}

/* --- Kroki poradnika ------------------------------------------------------ */

/* Kroki, autor i nawigacja trzymają tę samą szerokość co treść — inaczej
   prawa krawędź artykułu skakałaby między sekcjami. */
.pc-steps-list {
    display: grid;
    gap: 18px;
    max-width: 68ch;
    margin-top: 24px;
}

.pc-stepcard {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px 14px;
    padding: 18px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-md);
    background: #fff;
    box-shadow: var(--pc-shadow-xs);
}

.pc-stepcard__num {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--pc-r-pill);
    background: var(--pc-pink);
    color: #fff;
    font-family: var(--pc-font-display);
    font-size: 17px;
    font-weight: 800;
}

.pc-stepcard h3 {
    align-self: center;
    font-family: var(--pc-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--pc-ink);
}

.pc-stepcard p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--pc-body);
}

.pc-stepcard figure {
    grid-column: 1 / -1;
    margin: 6px 0 0;
}

.pc-stepcard figure img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--pc-r-sm);
}

/* --------------------------------------------------------------------------
   5. Autor
   -------------------------------------------------------------------------- */

.pc-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    max-width: 68ch;
    margin-top: 30px;
    padding: 20px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-md);
    background: var(--pc-surface-soft);
}

.pc-author__avatar {
    flex: none;
    width: 62px;
    height: 62px;
    border-radius: var(--pc-r-pill);
    object-fit: cover;
    background: var(--pc-surface-alt);
}

.pc-author__body {
    flex: 1 1 240px;
    min-width: 0;
}

.pc-author__name {
    font-family: var(--pc-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--pc-ink);
}

.pc-author__role {
    font-size: 12px;
    color: var(--pc-pink);
}

.pc-author__bio {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--pc-muted);
}

/* --------------------------------------------------------------------------
   6. Nawigacja między wpisami
   -------------------------------------------------------------------------- */

.pc-postnav {
    display: grid;
    gap: 12px;
    max-width: 68ch;
    margin-top: 26px;
}

.pc-postnav a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r-md);
    background: #fff;
    transition: border-color var(--pc-dur) var(--pc-ease),
                transform var(--pc-dur) var(--pc-ease);
}

.pc-postnav a:hover {
    border-color: var(--pc-pink-300);
    transform: translateY(-2px);
}

.pc-postnav svg {
    flex: none;
    color: var(--pc-pink);
}

.pc-postnav small {
    display: block;
    font-size: 11.5px;
    color: var(--pc-muted);
}

.pc-postnav strong {
    font-family: var(--pc-font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pc-ink);
}

.pc-postnav a:last-child {
    flex-direction: row-reverse;
    text-align: right;
}

/* --------------------------------------------------------------------------
   7. Punkty łamania
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
    .pc-stepcard {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .pc-postnav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .pc-post-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 40px;
    }

    .pc-post-aside {
        position: sticky;
        top: 96px;
    }

    .pc-post-head {
        align-items: flex-start;
    }
}