/* /domains/gromadan.com/public_html/css/post/style.css
   Страница одиночного поста (post/index.php) */
/* Тело страницы поста: style.css даёт body{overflow:hidden;height:100vh} —
   это нужно только "однооэкранной" версии главной, здесь контент поста
   может быть выше экрана, поэтому возвращаем обычный скролл страницы. */
body.page-post {
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}

/* Точно те же метрики, что у .app в style.css
   padding 28px + max-width 1560px) — это и держит сайдбар/шапку на
   тех же местах, что и на главной странице. Правая колонка просто
   не используется на странице поста. */
.post-app {
    display: grid;
    grid-template-columns: 300px minmax(760px, 1fr) 360px;
    gap: 28px;
    padding: 28px;
    max-width: 1560px;
    margin: 0 auto;
    align-items: start;
}
.post-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.post-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    width: 100%;
    max-width: 760px;
}

.post-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.post-owner-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.post-owner-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}
.post-owner-btn .icon {
    width: 18px;
    height: 18px;
}
.post-owner-btn-edit:hover {
    background: var(--primary-light);
    color: var(--primary);
}
.post-owner-btn-delete:hover {
    background: rgba(255, 107, 107, 0.15);
    color: var(--nope-bg);
}

.post-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.post-author-meta {
    display: flex;
    flex-direction: column;
}

.post-author-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
    text-decoration: none;
}
.post-author-name:hover { color: var(--primary); }

/* Гостьовий автор — не посилання, ховер і I-beam курсор прибираємо */
.post-author-name-guest,
.post-author-name-guest:hover {
    cursor: default;
    color: var(--text-primary);
}

.post-time {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.post-type-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    margin-left: 8px;
}

.post-h1 {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 14px;
    color: var(--text-primary);
}

.post-content-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    margin-bottom: 18px;
}

.post-images {
    display: grid;
    gap: 8px;
    /* border-radius убран — фото теперь прямоугольное сверху/снизу */
    overflow: hidden;
    margin-bottom: 18px;
    /* Растягиваем фото на всю ширину карточки, "съедая" боковой padding
       .post-card (24px 28px) — тот же bleed-приём, что и везде для
       full-width картинок внутри блока с внутренними отступами. */
    margin-left: -28px;
    margin-right: -28px;
}

.post-images-single img {
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    /* border-radius убран — прямые верх/низ */
}

.post-images-grid { grid-template-columns: repeat(2, 1fr); }
.post-images-grid img { width: 100%; height: 260px; object-fit: cover; }

/* === ЗОЛОТА СПІРАЛЬ (тільки повна сторінка поста, до 5 фото) ===
   Сітка 3 колонки x 3 рядки в пропорціях чисел Фібоначчі:
   колонки 21:5:8, рядки 13:5:3 (34:21 — золотий перетин).
   Кожне наступне фото менше попереднього і "закручується"
   за годинниковою стрілкою, як у класичній спіралі Фібоначчі. */
.post-images-spiral {
    display: grid;
    grid-template-columns: 21fr 5fr 8fr;
    grid-template-rows: 13fr 5fr 3fr;
    aspect-ratio: 34 / 21;
}
.post-images-spiral img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 2 фото: перше на всю висоту зліва (велике), друге на всю висоту справа */
.post-images-count-2 img:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.post-images-count-2 img:nth-child(2) { grid-column: 2 / 4; grid-row: 1 / 4; }

/* 3 фото: перше зліва на всю висоту, друге зверху справа, третє знизу справа */
.post-images-count-3 img:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.post-images-count-3 img:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.post-images-count-3 img:nth-child(3) { grid-column: 2 / 4; grid-row: 2 / 4; }

/* 4 фото: нижня частина праворуч ділиться на менше (5) і більше (8) */
.post-images-count-4 img:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.post-images-count-4 img:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.post-images-count-4 img:nth-child(3) { grid-column: 3; grid-row: 2 / 4; }
.post-images-count-4 img:nth-child(4) { grid-column: 2; grid-row: 2 / 4; }

/* 5 фото: найменша клітинка (5) ділиться навпіл — з'являється 5-те, найменше фото */
.post-images-count-5 img:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.post-images-count-5 img:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.post-images-count-5 img:nth-child(3) { grid-column: 3; grid-row: 2 / 4; }
.post-images-count-5 img:nth-child(4) { grid-column: 2; grid-row: 2; }
.post-images-count-5 img:nth-child(5) { grid-column: 2; grid-row: 3; }

.post-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 26px;
}

.post-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}
.post-stat .icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
}
.post-stat-like .icon { color: var(--like-bg); }
.post-stat-dislike .icon { color: var(--nope-bg); }

@media (max-width: 900px) {
    .post-app {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 0;
    }
    .post-main {
        padding: 14px 18px;
        justify-content: stretch;
    }
    .post-card {
        max-width: 100%;
        padding: 18px;
        border-radius: var(--radius-lg);
    }
    .post-images-grid { grid-template-columns: 1fr 1fr; }
    /* На мобильном .post-card padding: 18px (не 28px, как на десктопе),
       поэтому bleed для фото пересчитывается под этот отступ. */
    .post-images {
        margin-left: -18px;
        margin-right: -18px;
    }
}

/* === ЛЕНТА ПОСТОВ (feed/index.php, карточки — feed/card/index.php) ===
   .card-container центрирует .card (max-width:760px) через
   justify-content:center. .post-card тоже max-width:760px, но без
   центрирования был прижат к левому краю .main — отсюда сдвиг влево
   относительно карточки свайпа. align-items:center чинит это. */
.feed-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 4px;
}

/* Обёртка-ссылка вокруг текста/фото в карточке ленты (cardMode=feed) —
   без подчёркивания и своего цвета, чтобы выглядело так же, как cardMode=full */
.post-card-link-wrap {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Ссылки на города/области внутри текста поста (post/linkify.php).
   Цвет зависит от активной темы — тот же переключатель, что и .theme-btn
   (см. post/index.php: setTheme() ставит body.className = 'theme-' + theme). */
.geo-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.geo-link:hover {
    border-bottom-style: solid;
}
body.theme-girls .geo-link {
    color: #ff4f9a;
}
body.theme-boys .geo-link {
    color: #2f80ed;
}