/* Pinterest-Style Post Tiles */

/* Pinterest Grid Layout - Row-based chronological order */
.pinterest-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    overflow: visible;
    align-items: flex-start;
    align-content: flex-start;
}

/* Individual Pinterest Item - Polaroid Card Style (Now a clickable link) */
.pinterest-item {
    flex: 0 0 calc(33.333% - 14px);
    margin-bottom: 20px;
    background: white;
    border-radius: 2px;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 
        0 3px 10px rgba(0, 0, 0, 0.15),
        0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    align-self: flex-start;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Hover: straighten, lift, and scale */
.pinterest-item:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.02) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* Post Image Container - keep overflow hidden for images */
.post-image-container {
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}

/* Pinned Post Styling */
.pinterest-item.pinned-post {
    border: 3px solid var(--sunset-orange);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.pinterest-item.pinned-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

/* Pin Badge - Top Right Corner */
.pin-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: linear-gradient(135deg, var(--sunset-orange), #ff8787);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 5px;
    animation: pinPulse 2s ease-in-out infinite;
}

.pin-badge i,
.pin-badge .pin-icon {
    font-size: 0.9rem;
    transform: rotate(-45deg);
}

/* SVG Pin Icons */
.pin-badge svg {
    width: 16px;
    height: 16px;
    transform: rotate(-45deg);
}

/* Alternative Pin Badge Variants */
.pin-badge.featured {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.pin-badge.new {
    background: linear-gradient(135deg, var(--forest-green), #4CAF50);
}

.pin-badge.trending {
    background: linear-gradient(135deg, #FF4500, #FF6347);
}

.pin-badge.favorite {
    background: linear-gradient(135deg, #E91E63, #F06292);
}

.pin-badge svg.fire-icon {
    transform: rotate(0deg);
    animation: flicker 1.5s ease-in-out infinite;
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.pin-badge svg.star-pin-icon {
    animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(10deg); }
}

/* Pin Icon using CSS (if Font Awesome not available) */
.pin-badge::before {
    content: '??';
    font-size: 1rem;
    filter: grayscale(100%) brightness(200%);
}

/* Pulse Animation for Pin Badge */
@keyframes pinPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Pinned Post Ribbon (Alternative Style) */
.pin-ribbon {
    position: absolute;
    top: 15px;
    left: -5px;
    z-index: 10;
    background: var(--sunset-orange);
    color: white;
    padding: 5px 15px 5px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
}

.pin-ribbon::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid #cc3333;
    border-bottom: 5px solid transparent;
}

/* Corner Pin Flag (Another Alternative) */
.pin-corner-flag {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 60px 60px 0;
    border-color: transparent var(--sunset-orange) transparent transparent;
}

.pin-corner-flag::after {
    content: '??';
    position: absolute;
    top: 5px;
    right: -52px;
    color: white;
    font-size: 1.2rem;
    transform: rotate(45deg);
    filter: grayscale(100%) brightness(200%);
}

/* Glow Effect for Pinned Posts */
.pinterest-item.pinned-post::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--sunset-orange), #ffba08, var(--sunset-orange));
    border-radius: 5px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pinterest-item.pinned-post:hover::before {
    opacity: 0.3;
    animation: borderGlow 2s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* Post Image Container - Polaroid Style */
.post-image-container {
    position: relative;
    width: 100%;
    min-height: 220px;
    overflow: visible;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 10px;
    padding-bottom: 30px;
    border-radius: 2px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Inner image wrapper for the actual photo area */
.post-image-container::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 30px;
    background: #f8f9fa;
    z-index: 0;
    pointer-events: none;
}

.post-image {
    max-width: calc(100% - 20px);
    width: auto;
    height: auto;
    max-height: 600px;
    display: block;
    transition: transform 0.3s ease;
    object-fit: contain;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Ensure images fill width if they're wide enough */
.post-image-container img[style*="width"] {
    width: calc(100% - 20px) !important;
    height: auto !important;
}

.pinterest-item:hover .post-image {
    transform: scale(1.03);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pinterest-grid {
        gap: 20px;
        padding: 0 30px;
    }
    
    .pinterest-item {
        flex: 0 0 calc(33.333% - 14px);
    }
    
    .post-image-container {
        min-height: 200px;
    }
}

@media (max-width: 992px) {
    .pinterest-grid {
        gap: 20px;
        padding: 0 25px;
    }
    
    .pinterest-item {
        flex: 0 0 calc(50% - 10px);
    }
    
    .post-image-container {
        min-height: 220px;
    }
}

@media (max-width: 768px) {
    .pinterest-grid {
        gap: 15px;
        padding: 0 20px;
    }

    .pinterest-item {
        flex: 0 0 calc(50% - 8px);
    }
    
    .post-image-container {
        min-height: 180px;
    }
}

@media (max-width: 576px) {
    .pinterest-grid {
        gap: 15px;
        padding: 0 15px;
    }
    
    .pinterest-item {
        flex: 0 0 100%;
    }
    
    .post-image-container {
        min-height: 250px;
    }
}

/* ============================================
   FLOATING BACKGROUND ELEMENTS
   ============================================ */

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.float-item {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.2;
    animation: float var(--duration, 20s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    filter: blur(0.5px);
}

/* Specific positioning for each floating element - INCREASED DENSITY */
.float-item.cloud-1 { top: 5%; left: 8%; }
.float-item.cloud-2 { top: 40%; right: 12%; }
.float-item.cloud-3 { top: 75%; left: 22%; }
.float-item.cloud-4 { top: 20%; right: 35%; }

.float-item.star-1 { top: 15%; right: 20%; font-size: 2rem; }
.float-item.star-2 { top: 65%; left: 15%; font-size: 1.8rem; }
.float-item.star-3 { top: 80%; right: 25%; font-size: 2.2rem; }
.float-item.star-4 { top: 35%; left: 45%; font-size: 1.9rem; }
.float-item.star-5 { top: 50%; right: 40%; font-size: 2.1rem; }

.float-item.leaf-1 { top: 55%; left: 5%; }
.float-item.leaf-2 { top: 25%; right: 8%; }
.float-item.leaf-3 { top: 90%; right: 15%; }
.float-item.leaf-4 { top: 12%; left: 35%; }

.float-item.balloon-1 { top: 35%; left: 18%; }
.float-item.balloon-2 { top: 70%; right: 18%; }
.float-item.balloon-3 { top: 45%; right: 5%; }
.float-item.balloon-4 { top: 60%; left: 40%; }

.float-item.sparkle-1 { top: 10%; left: 30%; font-size: 1.5rem; }
.float-item.sparkle-2 { top: 50%; right: 30%; font-size: 1.7rem; }
.float-item.sparkle-3 { top: 85%; left: 40%; font-size: 1.6rem; }
.float-item.sparkle-4 { top: 28%; left: 52%; font-size: 1.55rem; }
.float-item.sparkle-5 { top: 72%; right: 42%; font-size: 1.65rem; }

.float-item.heart-1 { top: 18%; left: 12%; font-size: 2rem; }
.float-item.heart-2 { top: 62%; right: 22%; font-size: 1.9rem; }
.float-item.heart-3 { top: 82%; left: 28%; font-size: 2.05rem; }

.float-item.butterfly-1 { top: 32%; right: 48%; font-size: 2.2rem; }
.float-item.butterfly-2 { top: 58%; left: 25%; font-size: 2.1rem; }
.float-item.butterfly-3 { top: 42%; left: 8%; font-size: 2.15rem; }

/* Floating animation */
@keyframes float {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.2;
    }
    25% { 
        transform: translate(25px, -30px) rotate(8deg);
        opacity: 0.3;
    }
    50% { 
        transform: translate(-20px, -50px) rotate(-5deg);
        opacity: 0.25;
    }
    75% { 
        transform: translate(15px, -35px) rotate(3deg);
        opacity: 0.22;
    }
}

/* Mobile: reduce floating elements opacity */
@media (max-width: 768px) {
    .float-item {
        opacity: 0.1;
        font-size: 1.8rem;
    }
    
    .float-item.star-1,
    .float-item.star-2,
    .float-item.star-3,
    .float-item.star-4,
    .float-item.star-5,
    .float-item.sparkle-1,
    .float-item.sparkle-2,
    .float-item.sparkle-3,
    .float-item.sparkle-4,
    .float-item.sparkle-5 {
        font-size: 1.2rem;
    }
    
    .float-item.heart-1,
    .float-item.heart-2,
    .float-item.heart-3,
    .float-item.butterfly-1,
    .float-item.butterfly-2,
    .float-item.butterfly-3 {
        font-size: 1.5rem;
    }
}

.post-tag-badge.more-tags {
    font-size: 0.7rem;
    background: rgba(108, 117, 125, 0.15);
    padding: 3px 6px;
    border-radius: 6px;
    color: #6c757d;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pinterest-grid {
        gap: 20px;
        padding: 0 30px;
    }
    
    .pinterest-item {
        flex: 0 0 calc(33.333% - 14px);
    }
}

@media (max-width: 992px) {
    .pinterest-grid {
        gap: 20px;
        padding: 0 25px;
    }
    
    .pinterest-item {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .pinterest-grid {
        gap: 15px;
        padding: 0 20px;
    }

    .pinterest-item {
        flex: 0 0 calc(50% - 8px);
    }
}

@media (max-width: 576px) {
    .pinterest-grid {
        gap: 15px;
        padding: 0 15px;
    }
    
    .pinterest-item {
        flex: 0 0 100%;
    }
}