/* Post Formats Styling */

/* Post Format Badges */
.post-format-badge {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.post-format-standard .post-format-badge {
    @apply bg-gray-100 text-gray-800;
}

.post-format-aside .post-format-badge {
    @apply bg-blue-100 text-blue-800;
}

.post-format-gallery .post-format-badge {
    @apply bg-purple-100 text-purple-800;
}

.post-format-image .post-format-badge {
    @apply bg-green-100 text-green-800;
}

.post-format-video .post-format-badge {
    @apply bg-red-100 text-red-800;
}

.post-format-audio .post-format-badge {
    @apply bg-yellow-100 text-yellow-800;
}

.post-format-quote .post-format-badge {
    @apply bg-indigo-100 text-indigo-800;
}

.post-format-link .post-format-badge {
    @apply bg-teal-100 text-teal-800;
}

.post-format-status .post-format-badge {
    @apply bg-pink-100 text-pink-800;
}

.post-format-chat .post-format-badge {
    @apply bg-orange-100 text-orange-800;
}

/* Gallery Format Styling */
.post-format-gallery .gallery-grid {
    @apply grid gap-2 rounded-lg overflow-hidden;
    padding: 8px;
}

.post-format-gallery .gallery-grid.grid-1 {
    @apply grid-cols-1;
}

.post-format-gallery .gallery-grid.grid-2 {
    @apply grid-cols-2;
}

.post-format-gallery .gallery-grid.grid-3 {
    @apply grid-cols-3;
}

.post-format-gallery .gallery-grid.grid-4 {
    @apply grid-cols-2 grid-rows-2;
}

.post-format-gallery .gallery-item {
    @apply relative overflow-hidden rounded-lg bg-gray-100;
    margin: 4px;
}

.post-format-gallery .gallery-item img {
    @apply w-full h-full object-cover transition-transform duration-300 hover:scale-105;
    border-radius: 8px;
}

.post-format-gallery .gallery-item.main-image {
    @apply col-span-2 row-span-2;
}

.post-format-gallery .gallery-overlay {
    @apply absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center;
}

.post-format-gallery .gallery-count {
    @apply bg-black bg-opacity-70 text-white px-3 py-1 rounded-full text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity;
}

/* Image Format Styling - No padding for single images */
.post-format-image .featured-image {
    @apply relative overflow-hidden rounded-xl;
}

.post-format-image .featured-image img {
    @apply w-full h-auto;
    border-radius: 12px;
}

.post-format-image .image-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300;
}

/* Video Format Styling */
.post-format-video .video-container {
    @apply relative bg-black rounded-xl overflow-hidden;
}

.post-format-video .video-thumbnail {
    @apply relative;
}

.post-format-video .video-thumbnail img {
    @apply w-full h-auto;
}

.post-format-video .play-button {
    @apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 hover:bg-opacity-50 transition-all duration-300;
}

.post-format-video .play-icon {
    @apply w-16 h-16 bg-white bg-opacity-90 rounded-full flex items-center justify-center text-gray-800 hover:bg-opacity-100 transition-all;
}

/* Audio Format Styling */
.post-format-audio .audio-player {
    @apply bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl p-6 text-white;
}

.post-format-audio .audio-controls {
    @apply flex items-center space-x-4;
}

.post-format-audio .play-pause-btn {
    @apply w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition-all;
}

.post-format-audio .audio-info {
    @apply flex-1;
}

.post-format-audio .audio-title {
    @apply font-semibold text-lg;
}

.post-format-audio .audio-duration {
    @apply text-sm opacity-80;
}

/* Quote Format Styling */
.post-format-quote .quote-container {
    @apply bg-gradient-to-br from-indigo-50 to-purple-50 border-l-4 border-indigo-500 rounded-r-xl p-6 my-4;
}

.post-format-quote .quote-text {
    @apply text-xl font-medium text-gray-800 italic leading-relaxed mb-4;
}

.post-format-quote .quote-author {
    @apply text-sm text-gray-600 font-semibold;
}

.post-format-quote .quote-author::before {
    content: "— ";
}

/* Link Format Styling */
.post-format-link .link-preview {
    @apply border border-gray-200 rounded-xl overflow-hidden hover:shadow-md transition-shadow;
}

.post-format-link .link-header {
    @apply bg-teal-50 px-4 py-3 border-b border-gray-200;
}

.post-format-link .link-url {
    @apply text-sm text-teal-600 font-medium;
}

.post-format-link .link-content {
    @apply p-4;
}

.post-format-link .link-title {
    @apply font-semibold text-gray-900 mb-2;
}

.post-format-link .link-description {
    @apply text-gray-600 text-sm;
}

/* Status Format Styling */
.post-format-status .status-container {
    @apply bg-pink-50 border border-pink-200 rounded-xl p-4;
}

.post-format-status .status-text {
    @apply text-gray-800 leading-relaxed;
}

.post-format-status .status-meta {
    @apply flex items-center justify-between mt-3 pt-3 border-t border-pink-200 text-sm text-gray-500;
}

/* Chat Format Styling */
.post-format-chat .chat-container {
    @apply bg-gray-50 rounded-xl p-4 space-y-3;
}

.post-format-chat .chat-message {
    @apply flex items-start space-x-3;
}

.post-format-chat .chat-message.own {
    @apply flex-row-reverse space-x-reverse;
}

.post-format-chat .chat-avatar {
    @apply w-8 h-8 rounded-full bg-gray-300 flex-shrink-0;
}

.post-format-chat .chat-bubble {
    @apply bg-white rounded-lg px-3 py-2 max-w-xs;
}

.post-format-chat .chat-message.own .chat-bubble {
    @apply bg-blue-500 text-white;
}

.post-format-chat .chat-author {
    @apply text-xs font-medium text-gray-500 mb-1;
}

.post-format-chat .chat-text {
    @apply text-sm;
}

/* Aside Format Styling */
.post-format-aside .aside-container {
    @apply bg-blue-50 border-l-4 border-blue-500 rounded-r-xl p-4;
}

.post-format-aside .aside-text {
    @apply text-gray-700 leading-relaxed;
}

/* Post Format Icons */
.post-format-icon {
    @apply w-4 h-4 mr-1;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .post-format-gallery .gallery-grid.grid-3 {
        @apply grid-cols-2;
    }
    
    .post-format-gallery .gallery-grid.grid-4 {
        @apply grid-cols-2;
    }
    
    .post-format-quote .quote-text {
        @apply text-lg;
    }
    
    .post-format-video .play-icon {
        @apply w-12 h-12;
    }
}