/* PRELHE_PUBLIC_HOME_V11 */

:root {
    --pph-bg:#f8f8fb;
    --pph-card:#ffffff;
    --pph-text:#17171b;
    --pph-muted:#71717b;
    --pph-line:#e7e7ec;
    --pph-pink:#da1c82;
    --pph-purple:#7548d8;
}

* {
    box-sizing:border-box;
}

body.pph-body {
    margin:0;
    background:var(--pph-bg);
    color:var(--pph-text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.pph-topbar {
    position:sticky;
    top:0;
    z-index:50;
    min-height:64px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px max(14px,calc((100vw - 1040px)/2));
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--pph-line);
    backdrop-filter:blur(15px);
}

.pph-logo {
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:auto;
    text-decoration:none;
    color:var(--pph-text);
    font-size:22px;
    font-weight:900;
}

.pph-logo-mark {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            var(--pph-pink),
            var(--pph-purple)
        );
}

.pph-top-action {
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    border-radius:12px;
    text-decoration:none;
    font-weight:800;
    color:var(--pph-text);
}

.pph-top-action.primary {
    color:#fff;
    background:
        linear-gradient(
            135deg,
            var(--pph-pink),
            var(--pph-purple)
        );
}

.pph-main {
    width:min(100%,760px);
    margin:0 auto;
    padding:14px 12px 60px;
}

.pph-readonly-note {
    margin:4px 0 14px;
    padding:13px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border:1px solid #eadde6;
    border-radius:16px;
    background:#fff;
}

.pph-readonly-note strong,
.pph-readonly-note span {
    display:block;
}

.pph-readonly-note strong {
    margin-bottom:3px;
}

.pph-readonly-note span {
    color:var(--pph-muted);
    font-size:13px;
}

.pph-readonly-note a {
    flex:none;
    min-height:38px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    border-radius:11px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    background:var(--pph-pink);
}

.pph-section {
    margin-bottom:18px;
}

.pph-section-head {
    padding:8px 2px 10px;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
}

.pph-section-head h2 {
    margin:0;
    font-size:21px;
}

.pph-section-head p {
    margin:3px 0 0;
    color:var(--pph-muted);
    font-size:13px;
}

.pph-section-head a {
    color:var(--pph-pink);
    text-decoration:none;
    font-size:13px;
    font-weight:800;
}

.pph-reel-track {
    display:flex;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:2px 2px 8px;
    scrollbar-width:none;
}

.pph-reel-track::-webkit-scrollbar {
    display:none;
}

.pph-reel {
    position:relative;
    flex:0 0 180px;
    height:310px;
    overflow:hidden;
    scroll-snap-align:start;
    border-radius:18px;
    background:#111;
    box-shadow:
        0 5px 18px rgba(0,0,0,.08);
}

.pph-reel video {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    background:#111;
}

.pph-reel-meta {
    pointer-events:none;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:42px 11px 10px;
    color:#fff;
    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.76)
        );
}

.pph-reel-meta strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}

.pph-reel-meta span {
    display:block;
    margin-top:4px;
    font-size:11px;
    opacity:.92;
}

.pph-feed {
    display:grid;
    gap:14px;
}

.pph-card {
    overflow:hidden;
    border:1px solid var(--pph-line);
    border-radius:18px;
    background:var(--pph-card);
    box-shadow:
        0 3px 14px rgba(20,20,25,.035);
}

.pph-card-head {
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 14px;
}

.pph-avatar {
    width:40px;
    height:40px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    font-size:15px;
    font-weight:900;
    background:
        linear-gradient(
            135deg,
            var(--pph-pink),
            var(--pph-purple)
        );
}

.pph-author {
    min-width:0;
    flex:1;
    color:inherit;
    text-decoration:none;
}

.pph-author strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
}

.pph-author span {
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--pph-muted);
    font-size:12px;
}

.pph-type {
    padding:5px 8px;
    border-radius:9px;
    background:#fff1f8;
    color:var(--pph-pink);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
}

.pph-copy {
    padding:0 14px 13px;
}

.pph-copy h3 {
    margin:0 0 7px;
    font-size:17px;
    line-height:1.35;
}

.pph-copy p {
    margin:0;
    color:#33333a;
    font-size:14px;
    line-height:1.55;
    white-space:pre-line;
}

.pph-video-wrap {
    position:relative;
    background:#000;
}

.pph-video-wrap video {
    width:100%;
    max-height:520px;
    display:block;
    background:#000;
}

.pph-video-badge {
    position:absolute;
    top:10px;
    right:10px;
    padding:5px 8px;
    border-radius:9px;
    color:#fff;
    background:rgba(0,0,0,.66);
    font-size:11px;
    font-weight:800;
    pointer-events:none;
}

.pph-post-media {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2px;
    background:#eee;
}

.pph-post-media.one {
    grid-template-columns:1fr;
}

.pph-post-media img,
.pph-post-media video {
    width:100%;
    height:280px;
    display:block;
    object-fit:cover;
    background:#111;
}

.pph-post-media.one img,
.pph-post-media.one video {
    height:auto;
    max-height:520px;
    object-fit:contain;
}

.pph-stats {
    padding:10px 14px 0;
    display:flex;
    gap:13px;
    color:var(--pph-muted);
    font-size:12px;
}

.pph-actions {
    padding:9px 10px 11px;
    display:grid;
    grid-template-columns:
        repeat(4,1fr);
    gap:5px;
    border-top:1px solid #f0f0f2;
    margin-top:10px;
}

.pph-actions a {
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:#44444b;
    text-decoration:none;
    font-size:12px;
    font-weight:750;
}

.pph-actions a:hover {
    background:#f8f2f6;
    color:var(--pph-pink);
}

.pph-empty {
    padding:30px 20px;
    text-align:center;
    border:1px solid var(--pph-line);
    border-radius:18px;
    background:#fff;
    color:var(--pph-muted);
}

.pph-footer {
    width:min(100%,760px);
    margin:0 auto;
    padding:22px 14px 40px;
    color:var(--pph-muted);
    font-size:12px;
}

.pph-footer nav {
    display:flex;
    flex-wrap:wrap;
    gap:10px 15px;
    margin-top:10px;
}

.pph-footer a {
    color:inherit;
}

.page {
    width:min(100%,760px);
    margin:0 auto;
    padding:55px 18px;
}

.page .eyebrow {
    color:var(--pph-pink);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.page h1 {
    font-size:42px;
    margin:10px 0 20px;
}

.page > p {
    color:var(--pph-muted);
    line-height:1.7;
}

.page article {
    margin-top:14px;
    padding:18px;
    border:1px solid var(--pph-line);
    border-radius:16px;
    background:#fff;
}

.page article h2 {
    margin-top:0;
}

.page article p {
    color:var(--pph-muted);
    line-height:1.6;
}

.actions {
    margin-top:22px;
}

.button {
    display:inline-flex;
    min-height:42px;
    align-items:center;
    padding:0 16px;
    border-radius:12px;
    text-decoration:none;
    font-weight:800;
}

.button.primary {
    color:#fff;
    background:var(--pph-pink);
}

@media(max-width:600px) {

    .pph-topbar {
        padding-left:11px;
        padding-right:11px;
    }

    .pph-top-action:not(.primary) {
        display:none;
    }

    .pph-main {
        padding-left:8px;
        padding-right:8px;
    }

    .pph-readonly-note {
        align-items:flex-start;
    }

    .pph-reel {
        flex-basis:152px;
        height:270px;
    }

    .pph-card {
        border-radius:14px;
    }

    .pph-post-media img,
    .pph-post-media video {
        height:220px;
    }

    .pph-actions a {
        font-size:11px;
    }

}