/**
 * Flux - social feed styles.
 * @package     Flux
 * @copyright   Copyright (C) 2026 OUI. All rights reserved.
 *
 * Neutral by design: fonts and text colours are inherited from the site. Override any of the custom
 * properties below from the template stylesheet (e.g. `.com-flux { --flux-accent: #c00; }`):
 *
 *   --flux-columns       columns of grid / wall / carousel (set from the board or menu item option)
 *   --flux-gutter        gap between cards (set from the board option)
 *   --flux-font          font of the board (default: inherit the site font)
 *   --flux-title-font    font of the title (default: inherit)
 *   --flux-title-color   colour of the title and subtitle (default: inherit)
 *   --flux-title-size    title size (default: 2.25rem)
 *   --flux-accent        active filter, links, load-more button, carousel arrows
 *   --flux-card-bg / --flux-card-text / --flux-muted   card background, text, secondary text
 *   --flux-radius / --flux-shadow / --flux-shadow-hover   card shape and elevation
 *   --flux-facebook / --flux-instagram / --flux-tiktok   network badge colours
 */

:root {
    --flux-columns: 3;
    --flux-gutter: 20px;
    --flux-accent: #0b57d0;
    --flux-facebook: #1877f2;
    --flux-instagram: #e4405f;
    --flux-tiktok: #000;
    --flux-card-bg: #fff;
    --flux-card-text: #1c1e21;
    --flux-muted: #65676b;
    --flux-radius: 8px;
    --flux-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --flux-shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.15);
    --flux-transition: all 0.3s ease;
    --flux-title-size: 2.25rem;
}

.com-flux {
    font-family: var(--flux-font, inherit);
    padding: 2rem 0;
}

.flux-board-title {
    font-family: var(--flux-title-font, inherit);
    font-size: var(--flux-title-size);
    color: var(--flux-title-color, inherit);
    margin: 0 0 0.5rem;
    line-height: 1.15;
    opacity: 0;
    transform: translateY(-30px);
    animation: fluxTitleReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
}

.flux-board-subtitle {
    font-family: var(--flux-title-font, inherit);
    font-size: 1.25rem;
    color: var(--flux-title-color, inherit);
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(-20px);
    animation: fluxTitleReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
}

/* Network filters */
.flux-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.flux-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 25px;
    background: var(--flux-card-bg);
    color: var(--flux-card-text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--flux-transition);
}

.flux-filter-btn:hover { box-shadow: var(--flux-shadow); }

.flux-filter-btn.active {
    background: var(--flux-accent);
    border-color: var(--flux-accent);
    color: #fff;
}

/* Grid: CSS columns */
.flux-grid {
    column-count: var(--flux-columns);
    column-gap: var(--flux-gutter);
}

.flux-grid .flux-item {
    break-inside: avoid;
    margin-bottom: var(--flux-gutter);
}

@media (max-width: 992px) {
    .flux-grid { column-count: min(var(--flux-columns), 2); }
}

@media (max-width: 576px) {
    .flux-grid { column-count: 1; }
    .flux-board-title { font-size: 1.75rem; }
}

/* Feed card */
.flux-item {
    position: relative;
    background: var(--flux-card-bg);
    color: var(--flux-card-text);
    border-radius: var(--flux-radius);
    box-shadow: var(--flux-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.flux-item:hover { box-shadow: var(--flux-shadow-hover); }

.flux-item-media {
    position: relative;
    overflow: hidden;
    background: #f0f2f5;
}

.flux-item-image,
.flux-item-thumbnail {
    width: 100%;
    height: auto;
    display: block;
}

.flux-item-media img { transition: transform 0.4s ease-out; }
.flux-item:hover .flux-item-media img { transform: scale(1.04); }

/* Network badge (brand colours + Font Awesome glyph when the site loads it, else the network name) */
.flux-network-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.flux-badge-facebook { background: var(--flux-facebook); }
.flux-badge-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.flux-badge-tiktok { background: var(--flux-tiktok); }

/* Grid badges are empty: draw the glyph */
.flux-network-badge:empty { width: 36px; padding: 0; font-size: 1.25rem; }
.flux-badge-facebook:empty::before { content: "\f09a"; font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", FontAwesome; }
.flux-badge-instagram:empty::before { content: "\f16d"; font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", FontAwesome; }
.flux-badge-tiktok:empty::before { content: "\e07b"; font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", FontAwesome; }

.flux-item-content {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.flux-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.flux-author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.flux-author-info { flex: 1; }

.flux-author-name {
    font-weight: 600;
    color: var(--flux-accent);
    font-size: 0.95rem;
    text-decoration: none;
    display: block;
}

.flux-item-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--flux-card-text);
    margin: 0 0 1rem;
    flex: 1;
}

.flux-item-text a,
.flux-read-more { color: var(--flux-accent); }
.flux-read-more { font-weight: 500; cursor: pointer; }

/* Share buttons */
.flux-item-share {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.flux-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.875rem;
    text-decoration: none;
    transition: var(--flux-transition);
}

.flux-share-btn:hover { transform: scale(1.1); opacity: 0.9; color: #fff; }
.flux-share-facebook { background: #1877f2; }
.flux-share-twitter { background: #1da1f2; }
.flux-share-pinterest { background: #e60023; }
.flux-share-linkedin { background: #0077b5; }

/* Footer: date and likes */
.flux-item-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
    color: var(--flux-muted);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.flux-item-footer:empty { display: none; }
.flux-item-stats { display: flex; gap: 1rem; }
.flux-stat { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--flux-muted); }
.flux-stat-likes::before { content: "\2605"; color: #f7b928; }

.flux-item-link {
    display: block;
    text-align: center;
    padding: 0.75rem;
    color: var(--flux-accent);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.flux-item-link:hover { background: var(--flux-accent); color: #fff; }

/* Whole card clickable (wall, carousel) */
.flux-item-overlay-link { position: absolute; inset: 0; z-index: 1; }
.flux-wall-item, .flux-carousel-item { position: relative; }

.flux-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--flux-card-bg);
    border-radius: var(--flux-radius);
    color: var(--flux-muted);
}

.flux-empty p { font-size: 1.125rem; margin: 0; }

/* Load more */
.flux-load-more {
    text-align: center;
    margin-top: 2.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.flux-load-more.flux-visible { opacity: 1; transform: translateY(0); }

.flux-load-more-btn {
    padding: 0.75rem 2.25rem;
    background: var(--flux-card-bg);
    border: 2px solid var(--flux-accent);
    border-radius: 25px;
    color: var(--flux-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: var(--flux-transition);
}

.flux-load-more-btn:hover { background: var(--flux-accent); color: #fff; }
.flux-load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Video */
.flux-item-video { position: relative; }

.flux-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    border: 3px solid #fff;
}

/* Scroll reveal (grid cards; flux-feed.js adds .flux-visible) */
.flux-item {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
}

.flux-item.flux-visible { opacity: 1; transform: none; }
.flux-item:nth-child(even).flux-visible { transition-delay: 0.15s, 0.15s, 0s; }

@keyframes fluxTitleReveal { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .flux-board-title, .flux-board-subtitle { animation-duration: 0.01s; }
    .flux-item, .flux-load-more { transition: none; }
}

/* Wall: CSS columns */
.flux-layout-wall .flux-wall {
    column-count: var(--flux-columns);
    column-gap: var(--flux-gutter);
}

.flux-wall-item {
    break-inside: avoid;
    margin-bottom: var(--flux-gutter);
    background: var(--flux-card-bg);
    color: var(--flux-card-text);
    border-radius: var(--flux-radius);
    box-shadow: var(--flux-shadow);
    overflow: hidden;
}

.flux-wall-item .flux-item-image { aspect-ratio: auto; }
.flux-item-text-only { position: relative; min-height: 56px; }

@media (max-width: 992px) { .flux-layout-wall .flux-wall { column-count: min(var(--flux-columns), 2); } }
@media (max-width: 576px) { .flux-layout-wall .flux-wall { column-count: 1; } }

/* Timeline */
.flux-layout-timeline .flux-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.flux-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--flux-facebook), var(--flux-instagram));
    transform: translateX(-50%);
    border-radius: 2px;
}

.flux-timeline-item { position: relative; width: 45%; margin-bottom: 2rem; }
.flux-timeline-left { margin-right: auto; padding-right: 2rem; }
.flux-timeline-right { margin-left: auto; padding-left: 2rem; }

.flux-timeline-content {
    background: var(--flux-card-bg);
    color: var(--flux-card-text);
    border-radius: var(--flux-radius);
    box-shadow: var(--flux-shadow);
    overflow: hidden;
}

.flux-item-body { padding: 0.75rem 1rem; }
.flux-item-body .flux-item-header .flux-network-badge { position: static; }
.flux-item-body .flux-item-footer { padding: 0.5rem 0 0; }

.flux-timeline-marker {
    position: absolute;
    top: 20px;
    width: 16px;
    height: 16px;
    background: var(--flux-card-bg);
    border: 4px solid var(--flux-accent);
    border-radius: 50%;
    z-index: 2;
}

.flux-timeline-left .flux-timeline-marker { right: -8px; }
.flux-timeline-right .flux-timeline-marker { left: -8px; }

@media (max-width: 768px) {
    .flux-timeline-line { left: 20px; }
    .flux-timeline-item { width: 100%; margin-left: 40px; padding-left: 1.5rem; padding-right: 0; }
    .flux-timeline-marker { left: -28px !important; right: auto !important; }
}

/* Carousel: native scroll-snap (no library) */
.flux-carousel { position: relative; padding: 0 24px; }

.flux-carousel-track {
    display: flex;
    gap: var(--flux-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding: 4px 4px 1rem;
}

.flux-carousel-slide {
    flex: 0 0 calc((100% - (var(--flux-columns) - 1) * var(--flux-gutter)) / var(--flux-columns));
    scroll-snap-align: start;
    min-width: 0;
}

@media (max-width: 992px) { .flux-carousel-slide { flex-basis: calc((100% - var(--flux-gutter)) / 2); } }
@media (max-width: 576px) { .flux-carousel-slide { flex-basis: 85%; } }

.flux-carousel-item {
    background: var(--flux-card-bg);
    color: var(--flux-card-text);
    border-radius: var(--flux-radius);
    box-shadow: var(--flux-shadow);
    overflow: hidden;
    height: 100%;
}

.flux-carousel-btn {
    position: absolute;
    top: 40%;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--flux-card-bg);
    color: var(--flux-accent);
    font-size: 1.75rem;
    line-height: 1;
    box-shadow: var(--flux-shadow);
    cursor: pointer;
}

.flux-carousel-prev { left: 0; }
.flux-carousel-next { right: 0; }