/* Feed Page Specific Styles - V0 Port */

.feed-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
}

/* Feed List */
/* Feed List - Internal Scroll */
.feed-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 55vh;
    /* Fixed height ~50% of screen */
    overflow-y: auto;
    /* Internal scrolling */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
    padding-bottom: 20px;
    /* Space for sentinel */
    position: relative;
    overscroll-behavior: contain;
    /* Prevent parent scroll chaining */
}

/* Base Card Style */
.feed-card {
    border-radius: var(--radius-lg);
    /* 12px */
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--primary);
    overflow: hidden;
    padding: 0.75rem;

    /* Fallback / Base background */
    background-color: var(--card);
}

/* Feed Item Structure */
.feed-item-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feed-icon {
    flex-shrink: 0;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feed-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.feed-text-container {
    flex: 1;
    min-width: 0;
    /* for truncation */
}

.feed-text {
    font-size: 0.875rem;
    /* text-sm */
    color: var(--foreground);
    margin: 0;
    line-height: 1.5;
    /* Allow text to wrap for multi-line display */
}

.feed-user {
    font-weight: 600;
}

.feed-wine {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--primary);
}

.feed-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    /* text-xs */
    color: var(--muted-foreground);
}

/* Interaction Types / Colors */
/* Using OKLCH approximation for Tailwind colors
   amber-50:  oklch(0.985 0.02 85) approx
   red-50:    oklch(0.98  0.02 20) approx
   purple-50: oklch(0.98  0.02 300) approx
   blue-50:   oklch(0.98  0.02 240) approx
*/

.type-toast {
    background-color: oklch(0.985 0.04 85);
    /* Warm light amber */
}

.type-like {
    background-color: oklch(0.98 0.03 25);
    /* Light red tint */
}

.type-like .feed-icon {
    color: oklch(0.577 0.245 27.325);
    /* Tailwind red-500 equivalent */
}

.type-like .icon-fill {
    fill: currentColor;
}

.type-interaction {
    background-color: oklch(0.98 0.03 310);
    /* Light purple tint */
}

.type-review {
    background-color: oklch(0.98 0.03 260);
    /* Light blue tint */
}

/* Load More Button */
.btn-load-more {
    width: 100%;
    margin-top: 1rem;
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
    font-weight: 500;
}

.btn-load-more:hover {
    background-color: var(--muted);
}

/* Sticky Header */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Above regular content, below nav/modals */
    background-color: var(--background);
    /* Prevent see-through */
    padding-top: env(safe-area-inset-top);
}

/* Top Wines Section */
.top-wines-section {
    padding: 1.5rem 0.5rem 1rem 1rem;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.section-icon {
    color: var(--chart-3);
    width: 1.5rem;
    height: 1.5rem;
}

.wines-scroll-container {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;

    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.wines-scroll-container::-webkit-scrollbar {
    display: none;
}

.wine-card {
    flex-shrink: 0;
    width: 11rem;
    /* w-44 */
    scroll-snap-align: start;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s;
    cursor: pointer;
}

.wine-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.wine-card.rank-1 {
    border: 2px solid var(--chart-3);
    background-color: oklch(0.99 0.05 85);
    /* Light yellow tint */
}

.wine-card-content {
    padding: 1rem;
}

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

.wine-rank {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    /* full */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.rank-bg-1 {
    background-color: var(--chart-3);
    color: white;
}

.rank-bg-2 {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.rank-bg-3 {
    background-color: color-mix(in oklch, var(--accent) 20%, transparent);
    color: var(--accent);
}

.rank-bg-other {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.btn-like-wine {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--foreground);
}

.btn-like-wine:hover {
    background-color: var(--muted);
}

.wine-name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wine-year {
    font-size: 0.75rem;
    color: var(--chart-3);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.wine-location {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bottom Nav Override */
.bottom-nav {
    background-color: var(--primary);
    border-top-color: var(--primary-light);
}

.nav-item {
    color: rgba(255, 255, 255, 0.6);
}

.nav-item.active {
    color: white;
}

.nav-item.scan-highlight {
    background-color: var(--card);
    color: var(--primary);
    border-color: var(--primary);
}

/* Docked Bottom Nav with Notch (Migrated from components.css) */
.bottom-nav-docked {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: var(--primary);
    color: white;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}

.bottom-nav-content {
    position: relative;
    height: 4rem;
    /* 64px */
    width: 100%;
}

.bg-notch-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary);
    /* Cut circle at top center */
    -webkit-mask-image: radial-gradient(circle at 50% 0, transparent 40px, black 40.5px);
    mask-image: radial-gradient(circle at 50% 0, transparent 40px, black 40.5px);
    pointer-events: none;
}

.nav-items-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.nav-section-left,
.nav-section-right {
    flex: 1;
    display: flex;
    justify-content: space-around;
}

.nav-spacer {
    width: 5rem;
    flex-shrink: 0;
}

.nav-item-docked {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    gap: 0.25rem;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s;
}

.nav-item-docked:hover {
    color: rgba(255, 255, 255, 0.9);
}

.nav-item-docked.active {
    color: white;
}

.nav-label {
    font-size: 0.75rem;
    font-weight: 500;
}

.scan-fab-container {
    position: absolute;
    top: -1.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.scan-fab {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: white;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.2s;
}

.scan-fab:hover {
    transform: scale(1.05);
}

/* Sponsor Carousel Styles (Migrated for shared usage) */
.sponsor-carousel {
    position: relative;
    height: 5rem;
    /* Reduced from 6rem */
    background-color: var(--muted);
    overflow: hidden;
}

@media (min-width: 768px) {
    .sponsor-carousel {
        height: 7rem;
        /* Reduced from 8rem */
    }
}

.carousel-slide {
    position: absolute;
    inset: 0;
    transition: opacity 500ms ease-in-out;
    opacity: 0;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    display: flex;
    align-items: flex-end;
    padding: 0.75rem;
}

.carousel-content {
    width: 100%;
}

.carousel-title {
    color: white;
    font-family: "Libre Baskerville", serif;
    /* Fallback for variable */
    font-weight: 600;
    font-size: 0.875rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.carousel-indicators {
    position: absolute;
    bottom: 0.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.indicator {
    height: 0.25rem;
    width: 0.25rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 300ms;
}

.indicator.active {
    width: 1rem;
    background-color: white;
}