/* Home Page - css/pages/home.css */

/* ── Feed Container ─────────────────────────────────────── */
.logs-feed {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 650px;
    margin: 0 auto;
}

/* Desktop: explicit column guards so cards stay in a predictable grid.
   No grid-auto-rows: each card sizes to its own content; with comments
   moved to the full-view overlay, content variance is now small enough
   that cards naturally line up without forced row stretching. */
@media (min-width: 769px) {
    .logs-feed {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        align-items: start;            /* don't stretch cards to row height */
        gap: 1.5rem;
        max-width: 100%;
        padding: 0 2rem;
        align-content: start;
    }

    .feed-card {
        position: relative;
    }
    
    .feed-card::after {
        content: 'Click to view';
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        backdrop-filter: blur(4px);
    }
    
    .feed-card:hover::after {
        opacity: 1;
    }
    
    /* Adjust card padding for desktop grid */
    .feed-card {
        max-width: none;
    }
    
    /* Adjust stories section for desktop */
    .stories-section {
        max-width: 100%;
        margin: 0 2rem 1rem;
    }
    
    /* Adjust feed filters for desktop */
    .feed-filters {
        max-width: 100%;
        margin: 0 2rem 1.25rem;
    }
}

/* Column guards — 3 cards per row on desktop, wider cards */
@media (min-width: 1024px) {
    .logs-feed { 
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        gap: 1.75rem;
        padding: 0;
        max-width: 1380px;
        margin: 0 auto;
        align-items: stretch;
    }
}
@media (min-width: 1400px) {
    .logs-feed { 
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        gap: 2rem;
        max-width: 1500px;
        margin: 0 auto;
    }
}

/* ── Stories Rail ───────────────────────────────────────── */
.stories-section {
    max-width: 650px;
    margin: 0 auto 1rem;
}

.stories-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.stories-rail-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.stories-rail-label i { color: var(--sunset-orange); }

.stories-rail-see-all {
    font-size: 0.8rem;
    color: var(--sunset-orange);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    transition: opacity var(--transition-fast);
}

.stories-rail-see-all:hover { opacity: 0.7; }

.stories-rail {
    display: flex;
    gap: 0.875rem;
    overflow-x: auto;
    padding: 0.375rem 0 0.5rem;
    scrollbar-width: none;
}

.stories-rail::-webkit-scrollbar { display: none; }

.story-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    cursor: pointer;
}

.story-avatar-ring {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    padding: 2.5px;
    background: var(--gradient-adventure);
    transition: transform var(--transition-bounce);
}

.story-avatar-ring:hover { transform: scale(1.08); }

.story-avatar-ring.expired { background: var(--border-strong); }

.story-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bg-card);
    padding: 2px;
    overflow: hidden;
}

.story-name {
    font-size: 0.7rem;
    color: var(--text-muted);
    max-width: 3.75rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Feed Filter Tabs ───────────────────────────────────── */
.feed-filters {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    max-width: 650px;
    margin: 0 auto 1.25rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.feed-filters::-webkit-scrollbar { display: none; }

.feed-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1.5px solid var(--border-subtle);
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.feed-filter.active {
    background: var(--gradient-sunset);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.feed-filter i { font-size: 0.8rem; }

/* ── Feed Cards — Shared ────────────────────────────────── */
.feed-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-normal);
    display: flex;
    flex-direction: column;
    border: 1px solid transparent; /* hidden border stabilizes grid heights */
    height: 100%;
}

.feed-card:hover { box-shadow: var(--shadow-lg); }

/* Memory card */
.feed-card--memory { border-left: 3px solid var(--sunset-orange); }

.feed-card--memory .feed-card-header {
    background: linear-gradient(135deg, rgba(255,107,53,0.04), transparent);
}

/* ── Card Header ────────────────────────────────────────── */
.feed-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.125rem 0.75rem;
    flex-shrink: 0;
    background: var(--bg-card);
}

.feed-card-author-info { flex: 1; min-width: 0; }

.feed-card-author-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-card-author-name:hover { color: var(--sunset-orange); }

.feed-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.feed-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: auto;
    flex-shrink: 0;
}

.feed-card-badge--memory {
    background: rgba(255,107,53,0.12);
    color: var(--sunset-orange);
}

.feed-card-options {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.375rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.feed-card-options:hover { color: var(--text-primary); background: var(--bg-elevated); }

/* ── Card Gallery ───────────────────────────────────────── */
.feed-card-gallery {
    position: relative;
    background: #000;
    overflow: hidden;
    /* Ensure media is fully inside the card, no bleeding or gaps */
    display: block;
    line-height: 0;
    font-size: 0;
}

.feed-card-media-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.feed-card-media-main:empty {
    display: none;
}

.feed-card-media-main img,
.feed-card-media-main video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.4s ease;
}

.feed-card-gallery:hover .feed-card-media-main img { transform: scale(1.02); }

.feed-card-thumbnails {
    display: flex;
    gap: 0.3rem;
    padding: 0.375rem 0.625rem;
    overflow-x: auto;
    background: rgba(0,0,0,0.5);
    scrollbar-width: none;
}

.feed-card-thumbnails::-webkit-scrollbar { display: none; }

.feed-card-thumbnails .media-thumb { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-xs); }

/* ── Timer Strip ────────────────────────────────────────── */
.feed-card-timer-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(255,158,109,0.06));
    font-size: 0.8rem;
    color: var(--sunset-orange);
    font-weight: 500;
    border-top: 1px solid rgba(255,107,53,0.15);
}

.feed-card-timer-strip i      { flex-shrink: 0; }
.feed-card-timer-strip button { margin-left: auto; flex-shrink: 0; }

/* ── Caption & Tags ─────────────────────────────────────── */
.feed-card-caption {
    padding: 0.875rem 1.125rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.feed-card-tags     { padding: 0 1.125rem 0.625rem; }
.feed-card-tags-row { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0 1.125rem 0.625rem; }

.feed-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.feed-tag:hover     { opacity: 0.8; }
.feed-tag--trip     { background: rgba(0,168,204,0.1); color: var(--ocean-teal); }
.feed-tag--location { background: rgba(255,107,53,0.1); color: var(--sunset-orange); }
.feed-tag--buddy    { background: rgba(131,56,236,0.1); color: var(--cultural-purple); }

/* ── Reaction Summary ───────────────────────────────────── */
.reaction-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1.125rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.reaction-summary-icons { display: flex; align-items: center; }
.reaction-summary-icons span { font-size: 1rem; margin-right: -2px; }

/* ── Action Bar ─────────────────────────────────────────── */
.feed-card-actions {
    display: flex;
    padding: 0.25rem 0.5rem;
    border-top: 1px solid var(--border-subtle);
}

.feed-card-actions .reaction-btn {
    flex: 1;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    gap: 0.35rem;
}

/* ── Legacy log-card ─────────────────────────────────────── */
.log-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    border-top: 5px solid var(--sunset-orange);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.log-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.log-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.log-user-info h4   { margin-bottom: 0.25rem; font-size: 0.95rem; }
.log-user-meta      { display: flex; align-items: center; gap: 0.75rem; font-size: var(--font-sm); color: var(--text-muted); }

.log-content { padding: 1.25rem 1.5rem; }
.log-text    { line-height: 1.6; margin-bottom: 1rem; }

.log-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    cursor: pointer;
    transition: transform 0.3s;
}

.log-image:hover { transform: scale(1.01); }

.main-media {
    width: 100%;
    max-height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    margin-bottom: 0.75rem;
}

.main-media img,
.main-media video {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.3s;
}

.main-media:hover img { transform: scale(1.02); }

.thumbs-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0;
    margin-bottom: 1rem;
    scrollbar-width: none;
}

.thumbs-row::-webkit-scrollbar { display: none; }

.thumb {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.thumb:hover  { border-color: var(--sunset-orange); transform: scale(1.05); }
.thumb.active { border-color: var(--sunset-orange); }

.log-badges { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }

.log-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
}

.log-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem;
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.log-action:hover  { background: var(--bg-elevated); color: var(--sunset-orange); }
.log-action.active { color: var(--sunset-orange); font-weight: 600; }

/* ── Empty State ─────────────────────────────────────────── */
.empty-feed {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 650px;
    margin: 0 auto;
}

.empty-feed-icon { font-size: 3.5rem; color: var(--text-muted); opacity: 0.35; margin-bottom: 1.25rem; display: block; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 680px) {
    .logs-feed, .feed-filters, .stories-section { max-width: 100%; }
    .feed-card { border-radius: var(--radius-lg); }
    .feed-card-media-main img,
    .feed-card-media-main video { max-height: 300px; }
    .log-card { border-radius: var(--radius-lg); }
    .log-actions { flex-direction: column; gap: 0.375rem; }
}

@media (max-width: 480px) {
    .feed-card-header   { padding: 0.875rem; }
    .feed-card-caption  { padding: 0.75rem 0.875rem 0.375rem; }
    .feed-card-actions .reaction-btn { padding: 0.625rem 0.25rem; font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════
   FEED CARD v7.1 — consistent container, inline dropdown,
   inline comments, full-view overlay, video
   ═══════════════════════════════════════════════════════════ */

/* Card — full width, uniform structure */
.feed-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl, 16px);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.feed-card + .feed-card { margin-top: .875rem; }

/* Header */
.feed-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem .625rem;
    position: relative;
}
.fc-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--gradient-adventure, linear-gradient(135deg,#ff6b35,#f7931e));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem;
    overflow: hidden; flex-shrink: 0; cursor: pointer;
}
.fc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fc-avatar-initial {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700; color: #fff;
    text-transform: uppercase;
    border-radius: 50%;
    background: transparent;
}
.fc-author-info {
    flex: 1; min-width: 0; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center;
}
.fc-author-name-row {
    display: flex; align-items: center; gap: .35rem;
    min-width: 0;
}
.fc-author-name { display: block; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-author-meta { display: block; font-size: .75rem; color: var(--text-muted); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.25);
    box-shadow: 0 0 6px rgba(37, 211, 102, 0.4);
    flex-shrink: 0;
}
.fc-verified-star {
    width: 1.3rem;
    height: 1.3rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #25d366;
}
.fc-verified-star::before,
.fc-verified-star::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    background: currentColor;
    clip-path: polygon(50% 0%, 62% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 38% 35%);
    border-radius: 4px;
    z-index: 0;
}
.fc-verified-star::after { transform: rotate(45deg); opacity: 0.85; }
.fc-verified-core {
    width: 0.85rem;
    height: 0.85rem;
    background: #0c723c;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.55rem;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}
.fc-verified-core i { color: inherit; }

/* 3-dots + dropdown */
.fc-more-wrap  { position: relative; }
.fc-more-btn   { background: none; border: none; padding: .5rem; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-md, 8px); transition: background .15s; line-height: 1; }
.fc-more-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.fc-dropdown {
    position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl, 14px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    min-width: 180px;
    z-index: 200;
    overflow: hidden;
    animation: fc-dd-in .15s ease;
}
@keyframes fc-dd-in { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } }
.fc-dd-item {
    display: flex; align-items: center; gap: .625rem;
    width: 100%; background: none; border: none;
    padding: .7rem 1rem; font-size: .875rem; color: var(--text-primary);
    cursor: pointer; text-align: left; transition: background .12s;
}
.fc-dd-item:hover  { background: var(--bg-elevated); }
.fc-dd-item i      { width: 1.1rem; color: var(--text-muted); font-size: .85rem; }
.fc-dd-danger      { color: var(--danger-color, #ef4444) !important; }
.fc-dd-danger i    { color: var(--danger-color, #ef4444) !important; }

/* Fading memory timer strip */
.fc-timer {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem 1rem;
    font-size: .78rem; font-weight: 600;
    background: linear-gradient(90deg, rgba(255,107,53,.08), transparent);
    color: var(--sunset-orange, #ff6b35);
    border-top: 1px solid rgba(255,107,53,.12);
}
.fc-timer--urgent { background: linear-gradient(90deg, rgba(239,68,68,.1), transparent); color: #ef4444; }
.fc-timer-pin {
    margin-left: auto; background: none; border: 1px solid currentColor;
    border-radius: 20px; padding: .15rem .6rem; font-size: .7rem;
    cursor: pointer; color: inherit; transition: all .15s;
}
.fc-timer-pin:hover { background: currentColor; color: #fff; }

/* Media — square 1:1 single-image cards; galleries stay the same total height
   by shrinking the main image area to make room for the thumb row. */
.fc-media-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 6;            /* golden balance — slightly taller than square */
    background: var(--bg-elevated);
    overflow: hidden;
    cursor: pointer;
}
.fc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* fill the frame; crop to aspect */
    display: block;
    transition: transform .3s;
}
.fc-media-wrap:hover .fc-img { transform: scale(1.015); }
.fc-expand-hint {
    position: absolute; bottom: .5rem; right: .5rem;
    background: rgba(0,0,0,.55); color: #fff;
    border-radius: 20px; padding: .2rem .55rem;
    font-size: .7rem; opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.fc-media-wrap:hover .fc-expand-hint { opacity: 1; }

/* Gallery — SAME outer 1:1 footprint. Main image + thumbs share the square,
   so all cards in the feed line up at identical heights ("3 phones in a row"). */
.fc-media-wrap.fc-media-gallery {
    aspect-ratio: 5 / 6;
    display: flex;
    flex-direction: column;
}
.fc-gallery-main {
    flex: 1 1 auto;                 /* takes whatever's left after the thumb row */
    min-height: 0;                  /* allow flex child to actually shrink */
    overflow: hidden;
    position: relative;
}
.fc-gallery-main .fc-img,
.fc-gallery-main video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.fc-thumbs-row {
    display: flex; gap: .35rem;
    padding: .35rem .5rem;
    overflow-x: auto;
    background: var(--bg-elevated);
    flex-shrink: 0;                 /* reserve its row inside the square */
}
.fc-thumb {
    flex-shrink: 0; width: 44px; height: 44px;
    border-radius: 6px; border: 2px solid transparent;
    overflow: hidden; padding: 0; background: var(--bg-elevated);
    cursor: pointer; transition: border-color .15s, transform .15s;
}
.fc-thumb img  { width: 100%; height: 100%; object-fit: cover; }
.fc-thumb.active { border-color: var(--sunset-orange, #ff6b35); }
.fc-thumb:hover  { transform: scale(1.08); }
.fc-thumb-more {
    flex-shrink: 0; width: 44px; height: 44px;
    border-radius: 6px; background: var(--bg-elevated);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; color: var(--text-muted);
}

/* Fading badge overlay */
.fc-badge-fading {
    position: absolute; top: .5rem; left: .5rem;
    background: rgba(255,107,53,.85); color: #fff;
    border-radius: 20px; padding: .2rem .6rem;
    font-size: .7rem; font-weight: 700;
    backdrop-filter: blur(4px);
}

/* Video — same square footprint */
.fc-video-wrap { position: relative; width: 100%; aspect-ratio: 5/6; background: #000; }
.fc-video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.fc-vid-play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.28);
    pointer-events: none;
    transition: opacity .2s;
}
.fc-vid-play-overlay i { font-size: 2.5rem; color: rgba(255,255,255,.9); }
.fc-video-wrap.playing .fc-vid-play-overlay { opacity: 0; }
.fc-vid-unmute {
    position: absolute; bottom: .5rem; right: .5rem;
    background: rgba(0,0,0,.55); border: none; color: #fff;
    border-radius: 20px; padding: .25rem .6rem;
    font-size: .75rem; cursor: pointer;
    transition: background .15s;
}
.fc-vid-unmute:hover { background: rgba(0,0,0,.8); }

/* Text-only card — same fixed footprint as fc-media-wrap */
.fc-text-card {
    width: 100%;
    aspect-ratio: 5 / 6;
    background: var(--bg-elevated);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.fc-text-card-inner {
    width: 100%;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    overflow: hidden;
    box-sizing: border-box;
}
.fc-text-card .fc-caption {
    font-size: 1.05rem;
    line-height: 1.65;
    -webkit-line-clamp: 8;
    line-clamp: 8;
}
.fc-text-location {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--text-muted);
}
.fc-text-location i { font-size: .7rem; }

/* Card body — below media, natural height only */
.fc-body {
    padding: .625rem 1rem .25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.fc-body--empty { display: none; }
.fc-caption-wrap { display: flex; flex-direction: column; gap: .35rem; }
.fc-caption {
    font-size: .9rem; line-height: 1.55;
    color: var(--text-primary); margin: 0;
    word-break: break-word;
}
.fc-caption.is-truncated {
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}
.fc-see-more {
    background: none;
    border: none;
    color: var(--sunset-orange, #ff6b35);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-align: left;
}
.fc-see-more:hover { text-decoration: underline; }
.fc-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0; }
.fc-view-hint {
    font-size: .75rem; color: var(--text-muted);
    display: flex; align-items: center; gap: .3rem; padding: .25rem 0;
}

/* Actions */
.fc-actions {
    display: flex; align-items: center;
    padding: .375rem .75rem .5rem;
    gap: .1rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}
.fc-act {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
    background: none; border: none;
    padding: .5rem .25rem; border-radius: var(--radius-lg, 10px);
    font-size: .8rem; color: var(--text-muted);
    cursor: pointer; transition: color .15s, background .15s;
}
.fc-act span {
    min-width: 1.25em;
    display: inline-block;
    text-align: left;
}
.fc-act:hover { background: var(--bg-elevated); color: var(--text-primary); }
.fc-act.active.liked { color: #ef4444; }
.fc-act.active.saved { color: var(--sunset-orange, #ff6b35); }

/* ── Inline comments panel ────────────────────────────────── */
/* Comments list (used by full-view overlay; inline panel was removed) */
.fc-comments-list { padding: 0 .875rem; max-height: 360px; overflow-y: auto; }
.fc-loading { padding: 1rem; text-align: center; color: var(--text-muted); font-size: .85rem; }
.fc-comments-none { padding: .75rem 0; text-align: center; color: var(--text-muted); font-size: .82rem; margin: 0; }
.fc-comments-none, .fc-loading { color: var(--text-muted); }

/* Force the HTML `hidden` attribute to actually hide the reply-context strip.
   Otherwise `display:flex` on the rule below wins and the empty × bar shows. */
.fc-reply-ctx[hidden] { display: none !important; }

/* Comment item */
.fc-comment {
    display: flex; gap: .625rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.fc-comment:last-child { border-bottom: none; }
.fc-comment--reply {
    margin-left: 2rem;
    padding-left: .625rem;
    border-left: 2px solid var(--border-subtle);
}
.fc-comment-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--gradient-adventure, linear-gradient(135deg,#ff6b35,#f7931e));
    color: #fff; font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.fc-comment-body    { flex: 1; min-width: 0; }
.fc-comment-header  { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .2rem; }
.fc-comment-name    { font-size: .83rem; font-weight: 600; }
.fc-comment-time    { font-size: .72rem; color: var(--text-muted); margin-left: auto; }
.fc-comment-text    { font-size: .84rem; line-height: 1.5; margin: 0 0 .3rem; word-break: break-word; }
.fc-comment-actions { display: flex; gap: .75rem; }
.fc-comment-act {
    background: none; border: none; padding: 0;
    font-size: .75rem; color: var(--text-muted);
    cursor: pointer; display: flex; align-items: center; gap: .25rem;
    transition: color .15s;
}
.fc-comment-act:hover, .fc-comment-act.active { color: var(--sunset-orange, #ff6b35); }
.fc-comment-replies { margin-top: .25rem; }

/* Comment composer */
.fc-composer       { padding: .5rem .875rem .625rem; }
.fc-reply-ctx {
    display: flex; align-items: center; gap: .5rem;
    font-size: .78rem; color: var(--text-muted);
    background: var(--bg-card); border-radius: var(--radius-md, 8px);
    padding: .35rem .625rem; margin-bottom: .35rem;
}
.fc-reply-cancel {
    margin-left: auto; background: none; border: none;
    cursor: pointer; color: var(--text-muted); padding: 0; line-height: 1;
}
.fc-composer-row {
    display: flex; align-items: flex-end; gap: .5rem;
}
.fc-composer-input {
    flex: 1; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl, 20px);
    padding: .5rem .875rem; font-size: .875rem;
    background: var(--bg-card); color: var(--text-primary);
    resize: none; outline: none; line-height: 1.4;
    max-height: 120px; overflow-y: auto;
    transition: border-color .15s;
}
.fc-composer-input:focus { border-color: var(--sunset-orange, #ff6b35); }
.fc-composer-send {
    background: var(--sunset-orange, #ff6b35); color: #fff;
    border: none; border-radius: 50%; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; font-size: .875rem;
    transition: transform .15s, opacity .15s;
}
.fc-composer-send:hover    { transform: scale(1.08); }
.fc-composer-send:disabled { opacity: .55; transform: none; cursor: default; }

/* ── Full-view overlay ────────────────────────────────────── */
.fc-fullview {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: flex-end;
}
.fc-fullview.active {
    display: flex;
}
.fc-fv-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
}
.fc-fv-sheet {
    position: relative; z-index: 1;
    width: 100%; max-width: 640px; margin: 0 auto;
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    max-height: 95dvh; display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.fc-fv-sheet.fc-fv-open { transform: translateY(0); }
.fc-fv-handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--border-subtle); margin: .75rem auto .25rem;
    flex-shrink: 0;
}
.fc-fv-close {
    position: absolute; top: .75rem; right: .875rem;
    background: var(--bg-elevated); border: none;
    border-radius: 50%; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); font-size: .85rem;
    transition: background .15s;
}
.fc-fv-close:hover { background: var(--border-subtle); }
.fc-fv-media {
    flex-shrink: 0;
    background: #000;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.fc-fv-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fc-fv-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.fc-fv-slide { flex-shrink: 0; width: 100%; scroll-snap-align: start; }
.fc-fv-scroll {
    flex: 1; overflow-y: auto; padding: .75rem 1rem 1.5rem;
    display: flex; flex-direction: column; gap: .5rem;
}
.fc-fv-author-row    { display: flex; align-items: center; gap: .75rem; }
.fc-fv-caption       { font-size: .9rem; line-height: 1.6; margin: 0; color: var(--text-primary); }
.fc-fv-tags          { display: flex; flex-wrap: wrap; gap: .3rem; }
.fc-fv-actions       { display: flex; gap: .25rem; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: .35rem 0; }
.fc-fv-comments-heading { font-size: .82rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; padding: .25rem 0; }
.fc-fv-comments-list { display: flex; flex-direction: column; }
.fc-fv-composer      { margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--border-subtle); }


/* ═══════════════════════════════════════════════════════
   HOME PAGE v7.2 — TravelMate visual redesign
   ═══════════════════════════════════════════════════════ */

/* Live dashboard strip */
.home-live-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .625rem 0 .875rem;
}
.home-brand-row {
    display: flex;
    align-items: center;
    gap: .625rem;
}
.home-brand-mark {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: radial-gradient(circle at 20% 0%, #fef3c7, #c9a646);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 11px; color: #111827;
    box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 4px 12px rgba(201,166,70,.3);
    flex-shrink: 0;
    letter-spacing: -.02em;
}
.home-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.home-brand-name {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.home-brand-sub {
    font-size: 11px;
    color: var(--text-muted);
}

/* Page header with points pill */
.home-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .75rem;
}
.home-header-left { flex: 1; }
.home-header-right { flex-shrink: 0; padding-top: .2rem; }
.home-points-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    background: rgba(201,166,70,.1);
    border: 1px solid rgba(201,166,70,.3);
    font-size: .75rem;
    font-weight: 700;
    color: var(--gold-light, #f0cc70);
    cursor: pointer;
}
.home-points-pill i { font-size: .7rem; }

/* TravelMate card redesign */
.feed-card {
    background: linear-gradient(
        to bottom right,
        rgba(15, 23, 42, 0.98),
        rgba(10, 16, 35, 0.95)
    );
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
    border-radius: var(--radius-xl);
}

/* Card header — tighter, badge integrated */
.feed-card-header {
    padding: .75rem .875rem .5rem;
}

/* Post type badge in header (top-right) */
.fc-type-badge-wrap {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Journey context line — only rendered when an arc (origin→destination) exists */
.fc-journey-ctx {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .4rem 1rem;
    background: rgba(255, 107, 53, 0.04);
    border-top: 1px solid var(--border-subtle);
    font-size: .78rem; color: var(--text-muted);
}

/* Card body text color — TravelMate muted body */
.fc-caption {
    color: #d0d4e5;
    font-size: .875rem;
    line-height: 1.6;
}

/* Meta row replaces flat action bar for posts with journey context */
.fc-meta-row {
    margin-top: .1rem;
}

/* Discovery card highlight */
.feed-card--discovery {
    border-color: rgba(201, 166, 70, 0.2);
    background: linear-gradient(
        to bottom right,
        rgba(20, 18, 8, 0.98),
        rgba(15, 14, 5, 0.95)
    );
}
.feed-card--discovery .feed-card-header {
    background: linear-gradient(
        to right,
        rgba(201,166,70,.04),
        transparent
    );
}

/* Operator card in feed */
.feed-card--operator {
    border-color: rgba(34, 197, 94, 0.15);
}

/* Post composer — TravelMate copy style */
.home-composer-prompt {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0 0 .75rem;
    line-height: 1.5;
}
.home-composer-prompt strong { color: var(--gold-light, #f0cc70); }

/* Feed filter active state — gold */
.feed-filter.active {
    background: rgba(201, 166, 70, 0.12);
    border-color: rgba(201, 166, 70, 0.35);
    color: var(--gold-light, #f0cc70);
}
.feed-filter {
    border-color: var(--space-border, rgba(255,255,255,.06));
    background: rgba(15, 23, 42, 0.6);
    color: var(--text-muted);
    transition: all .15s;
}
.feed-filter:hover {
    background: rgba(201,166,70,.08);
    color: var(--text-secondary);
}

/* Section dividers */
.home-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 .5rem;
}
.home-section-title h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.home-section-title span {
    font-size: .75rem;
    color: var(--text-muted);
}

/* ── Post type picker in composer ─────────────────────────────── */
.post-type-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .625rem 1rem .375rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-subtle);
    margin-top: .25rem;
}
.post-type-row-label {
    font-size: .72rem;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    padding-top: .2rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.post-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    flex: 1;
}
.post-type-chip {
    padding: .25rem .65rem;
    border-radius: var(--radius-pill);
    font-size: .75rem;
    font-weight: 500;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.post-type-chip:hover {
    background: rgba(201,166,70,.08);
    border-color: rgba(201,166,70,.25);
    color: var(--text-secondary);
}
.post-type-chip.active {
    background: rgba(201,166,70,.14);
    border-color: rgba(201,166,70,.4);
    color: var(--gold-light, #f0cc70);
    font-weight: 700;
}

/* Journey strip in composer */
.post-journey-strip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    font-size: .8rem;
    color: var(--gold-light, #f0cc70);
    background: rgba(201,166,70,.05);
    border-top: 1px solid rgba(201,166,70,.1);
    border-bottom: 1px solid rgba(201,166,70,.1);
}
.post-journey-strip i { flex-shrink: 0; }
.post-journey-strip span { flex: 1; }