/* =========================================================
   Flavor News Pro — Frontend Styles
   ========================================================= */

/* ----------------------------------------------------------
   0. Custom Properties (Design Tokens)
   ---------------------------------------------------------- */
:root {
    --fnp-primary: #1e40af;
    --fnp-primary-hover: #1d4ed8;
    --fnp-accent: #dc2626;
    --fnp-text: #1f2937;
    --fnp-text-light: #6b7280;
    --fnp-bg: #ffffff;
    --fnp-bg-alt: #f9fafb;
    --fnp-border: #e5e7eb;
    --fnp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --fnp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --fnp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --fnp-radius: 8px;
    --fnp-radius-sm: 4px;
    --fnp-transition: 0.3s ease;
    --fnp-gap: 24px;
    --fnp-container: 1200px;
    --fnp-font: inherit;
    --fnp-font-heading: inherit;
}

/* Dark Mode */
.fnp-dark,
[data-fnp-dark="1"] {
    --fnp-text: #f3f4f6;
    --fnp-text-light: #9ca3af;
    --fnp-bg: #111827;
    --fnp-bg-alt: #1f2937;
    --fnp-border: #374151;
    --fnp-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------------
   1. Grid System
   ---------------------------------------------------------- */
.fnp-grid {
    display: grid;
    gap: var(--fnp-gap);
    grid-template-columns: repeat(var(--fnp-columns, var(--fnp-cols, 3)), 1fr);
    background: var(--fnp-grid-bg, transparent);
}

.fnp-grid[style*="--fnp-grid-bg"] {
    padding: 24px;
    border-radius: var(--fnp-radius);
}

.fnp-grid--cols-1 { --fnp-columns: 1; }
.fnp-grid--cols-2, .fnp-grid--2 { --fnp-columns: 2; }
.fnp-grid--cols-3, .fnp-grid--3 { --fnp-columns: 3; }
.fnp-grid--cols-4, .fnp-grid--4 { --fnp-columns: 4; }
.fnp-grid--cols-5, .fnp-grid--5 { --fnp-columns: 5; }
.fnp-grid--cols-6 { --fnp-columns: 6; }

/* Magazine layout: first item spans 2 cols + 2 rows */
.fnp-grid--magazine {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
}
.fnp-grid--magazine > .fnp-item:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* Hero layout: first big, rest sidebar */
.fnp-grid--hero {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
}
.fnp-grid--hero > .fnp-item:first-child {
    grid-row: 1 / 4;
}

/* List layout */
.fnp-grid--list {
    grid-template-columns: 1fr;
}
.fnp-grid--list .fnp-item {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}

/* Masonry — JS handles positioning, CSS provides fallback */
.fnp-grid--masonry {
    display: block;
    position: relative;
    --fnp-cols: var(--fnp-columns, 3);
}
.fnp-grid--masonry > .fnp-item {
    break-inside: avoid;
    margin-bottom: var(--fnp-gap);
}

/* Newspaper layout: first item large left, rest stacked right */
.fnp-grid--newspaper {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto;
}
.fnp-grid--newspaper > .fnp-item:first-child {
    grid-row: 1 / 4;
}
.fnp-grid--newspaper > .fnp-item:not(:first-child) {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    align-items: start;
}
.fnp-grid--newspaper > .fnp-item:not(:first-child) .fnp-item__image {
    aspect-ratio: 1 / 1;
}

/* Uneven layout: 1st large, 2nd horizontal, rest normal grid */
.fnp-grid--uneven {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
}
.fnp-grid--uneven > .fnp-item:nth-child(1) {
    grid-column: 1 / -1;
}
.fnp-grid--uneven > .fnp-item:nth-child(2) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
}

/* Carousel layout */
.fnp-grid--carousel {
    display: flex;
    overflow: hidden;
    position: relative;
    scroll-behavior: smooth;
}
.fnp-grid--carousel > .fnp-grid__track {
    display: flex;
    gap: var(--fnp-gap);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.fnp-grid--carousel .fnp-item {
    flex: 0 0 calc((100% - var(--fnp-gap) * (var(--fnp-columns, 3) - 1)) / var(--fnp-columns, 3));
    min-width: 0;
}

/* Slider layout: full-width one-at-a-time */
.fnp-grid--slider {
    display: block;
    overflow: hidden;
    position: relative;
}
.fnp-grid--slider > .fnp-grid__track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.fnp-grid--slider .fnp-item {
    flex: 0 0 100%;
    min-width: 0;
}

/* Carousel / Slider arrows */
.fnp-grid__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all var(--fnp-transition);
    color: var(--fnp-text);
}
.fnp-grid__arrow:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.fnp-grid__arrow--prev { left: 12px; }
.fnp-grid__arrow--next { right: 12px; }

/* Carousel / Slider dots */
.fnp-grid__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 0;
}
.fnp-grid__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fnp-border);
    border: none;
    cursor: pointer;
    transition: all var(--fnp-transition);
    padding: 0;
}
.fnp-grid__dot--active,
.fnp-grid__dot:hover {
    background: var(--fnp-primary);
    transform: scale(1.2);
}

/* Equal height */
.fnp-grid--equal-height .fnp-item {
    display: flex;
    flex-direction: column;
}
.fnp-grid--equal-height .fnp-item__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.fnp-grid--equal-height .fnp-item__content > :last-child {
    margin-top: auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .fnp-grid {
        grid-template-columns: repeat(var(--fnp-columns-md, 2), 1fr);
    }
    .fnp-grid--magazine { grid-template-columns: repeat(2, 1fr); }
    .fnp-grid--magazine > .fnp-item:first-child { grid-column: 1 / -1; grid-row: auto; }
    .fnp-grid--hero { grid-template-columns: 1fr; }
    .fnp-grid--hero > .fnp-item:first-child { grid-row: auto; }
    .fnp-grid--newspaper { grid-template-columns: 1fr; }
    .fnp-grid--newspaper > .fnp-item:first-child { grid-row: auto; }
    .fnp-grid--newspaper > .fnp-item:not(:first-child) { grid-template-columns: 80px 1fr; }
    .fnp-grid--uneven > .fnp-item:nth-child(2) { grid-template-columns: 1fr; }
    .fnp-grid--masonry { --fnp-cols: var(--fnp-columns-md, 2); }
    .fnp-grid--carousel .fnp-item {
        flex: 0 0 calc((100% - var(--fnp-gap) * 1) / 2);
    }
}

@media (max-width: 768px) {
    .fnp-grid {
        grid-template-columns: repeat(var(--fnp-columns-sm, 1), 1fr);
    }
    .fnp-grid--list .fnp-item { grid-template-columns: 120px 1fr; gap: 12px; }
    .fnp-grid--masonry { --fnp-cols: var(--fnp-columns-sm, 1); }
    .fnp-grid--uneven > .fnp-item:nth-child(1) { grid-column: 1; }
    .fnp-grid--uneven > .fnp-item:nth-child(2) { grid-column: 1; grid-template-columns: 1fr; }
    .fnp-grid--carousel .fnp-item {
        flex: 0 0 100%;
    }
    .fnp-grid__arrow { width: 32px; height: 32px; font-size: 14px; }
    .fnp-grid__arrow--prev { left: 6px; }
    .fnp-grid__arrow--next { right: 6px; }
    :root { --fnp-gap: 16px; }
}

/* ----------------------------------------------------------
   2. Item Card
   ---------------------------------------------------------- */
.fnp-item {
    position: relative;
    background: var(--fnp-bg);
    color: var(--fnp-text);
    border-radius: var(--fnp-radius);
    overflow: hidden;
    transition: transform var(--fnp-transition), box-shadow var(--fnp-transition);
}

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

.fnp-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--fnp-shadow-md);
}

.fnp-item--border {
    border: 1px solid var(--fnp-border);
}

/* Image container */
.fnp-item__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--fnp-bg-alt);
}

.fnp-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.fnp-item:hover .fnp-item__image img {
    transform: scale(1.05);
}

.fnp-item__image--square { aspect-ratio: 1 / 1; }
.fnp-item__image--portrait { aspect-ratio: 3 / 4; }
.fnp-item__image--wide { aspect-ratio: 21 / 9; }

.fnp-item__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 40%, rgba(0,0,0,0.6));
    z-index: 1;
    pointer-events: none;
}

/* Ratio classes matching PHP imageRatio attribute values */
.fnp-image-ratio--auto .fnp-item__image { aspect-ratio: auto; }
.fnp-image-ratio--16-9 .fnp-item__image { aspect-ratio: 16 / 9; }
.fnp-image-ratio--4-3 .fnp-item__image { aspect-ratio: 4 / 3; }
.fnp-image-ratio--3-2 .fnp-item__image { aspect-ratio: 3 / 2; }
.fnp-image-ratio--1-1 .fnp-item__image { aspect-ratio: 1 / 1; }
.fnp-image-ratio--21-9 .fnp-item__image { aspect-ratio: 21 / 9; }
.fnp-image-ratio--3-4 .fnp-item__image { aspect-ratio: 3 / 4; }

/* Focus visible for keyboard navigation */
.fnp-item a:focus-visible,
.fnp-filter-btn:focus-visible,
.fnp-filter-tab:focus-visible,
.fnp-share__btn:focus-visible,
.fnp-pagination__link:focus-visible,
.fnp-cat-carousel__prev:focus-visible,
.fnp-cat-carousel__next:focus-visible,
.fnp-ticker__prev:focus-visible,
.fnp-ticker__next:focus-visible,
.fnp-back-to-top:focus-visible {
    outline: 2px solid var(--fnp-primary);
    outline-offset: 2px;
}

/* Skeleton loading */
.fnp-grid--skeleton .fnp-item {
    pointer-events: none;
}
.fnp-skeleton-pulse {
    background: linear-gradient(90deg, var(--fnp-bg-alt) 25%, rgba(255,255,255,0.3) 50%, var(--fnp-bg-alt) 75%);
    background-size: 200% 100%;
    animation: fnp-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--fnp-radius-sm);
}
@keyframes fnp-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Filter bar empty state */
.fnp-filter-bar--empty {
    padding: 16px;
    text-align: center;
    border: 1px dashed var(--fnp-border);
    border-radius: var(--fnp-radius);
    color: var(--fnp-text-light);
}

/* Empty state */
.fnp-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--fnp-text-light);
    font-size: 0.95rem;
    border: 1px dashed var(--fnp-border);
    border-radius: var(--fnp-radius);
}

/* Overlay image */
.fnp-item--overlay {
    color: #fff;
}
.fnp-item--overlay .fnp-item__image {
    aspect-ratio: auto;
    min-height: 300px;
}
.fnp-item--overlay .fnp-item__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 24px 24px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    z-index: 2;
}
.fnp-item--overlay .fnp-item__title a {
    color: #fff;
}

/* Content area */
.fnp-item__content {
    padding: 16px;
}

.fnp-item__category {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fnp-accent);
    margin-bottom: 6px;
}

.fnp-item__category a {
    color: inherit;
    text-decoration: none;
}

.fnp-item__taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.fnp-item__term {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fnp-primary);
    background: var(--fnp-surface);
    padding: 2px 8px;
    border-radius: var(--fnp-radius-sm);
    text-decoration: none;
    transition: background var(--fnp-transition), color var(--fnp-transition);
}

a.fnp-item__term:hover {
    background: var(--fnp-primary);
    color: #fff;
}

.fnp-item__title {
    font-family: var(--fnp-title-font, var(--fnp-font-heading));
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--fnp-text);
}

.fnp-item__title a {
    color: inherit;
    text-decoration: none;
}

.fnp-item__title a:hover {
    color: var(--fnp-primary);
}

.fnp-item__section {
    font-size: 0.75rem;
    color: var(--fnp-primary, #d43535);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}

.fnp-item__subtitle {
    font-size: 0.95rem;
    color: var(--fnp-text-light);
    line-height: 1.5;
    margin-bottom: 8px;
}

.fnp-item__intro {
    font-size: 0.875rem;
    color: var(--fnp-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
}

.fnp-item__summary {
    font-size: 0.875rem;
    color: var(--fnp-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
}

.fnp-item__synopsis {
    font-size: 0.9rem;
    color: var(--fnp-text);
    line-height: 1.65;
    margin-bottom: 12px;
}

.fnp-item__comments {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--fnp-text-light);
}

.fnp-item__comments-icon {
    font-size: 0.9rem;
}

.fnp-item__comments-count {
    white-space: nowrap;
}

.fnp-item__quote {
    font-style: italic;
    color: var(--fnp-text);
    border-left: 3px solid var(--fnp-primary);
    padding-left: 12px;
    margin: 12px 0;
    font-size: 0.95rem;
}

.fnp-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--fnp-text-light);
}

.fnp-item__meta a {
    color: inherit;
    text-decoration: none;
}

.fnp-item__meta-sep::before {
    content: "·";
}

.fnp-item__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: var(--fnp-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--fnp-radius-sm);
}

.fnp-item__reading-time {
    font-size: 0.8rem;
    color: var(--fnp-text-light);
}

.fnp-item__button {
    display: inline-block;
    padding: 8px 16px;
    background: var(--fnp-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--fnp-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background var(--fnp-transition);
    margin-top: 8px;
}

.fnp-item__button:hover {
    background: var(--fnp-primary-hover);
    color: #fff;
}

/* Separator */
.fnp-item__separator {
    border: none;
    border-top: 1px solid var(--fnp-border);
    margin: 12px 0;
}

/* ----------------------------------------------------------
   3. Filter Bar
   ---------------------------------------------------------- */
.fnp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--fnp-gap);
    align-items: center;
}

.fnp-filters--center { justify-content: center; }
.fnp-filters--between { justify-content: space-between; }

.fnp-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.fnp-filter-group__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fnp-text);
    margin-right: 4px;
}

/* Filter buttons */
.fnp-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--fnp-border);
    border-radius: 9999px;
    background: var(--fnp-bg);
    color: var(--fnp-text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--fnp-transition);
    white-space: nowrap;
}

.fnp-filter-btn:hover,
.fnp-filter-btn--active {
    background: var(--fnp-primary);
    border-color: var(--fnp-primary);
    color: #fff;
}

.fnp-filter-btn__count {
    margin-left: 6px;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Filter tabs */
.fnp-filter-tabs {
    display: flex;
    border-bottom: 2px solid var(--fnp-border);
    gap: 0;
}

.fnp-filter-tab {
    padding: 10px 20px;
    border: none;
    background: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fnp-text-light);
    cursor: pointer;
    position: relative;
    transition: color var(--fnp-transition);
}

.fnp-filter-tab::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--fnp-primary);
    transform: scaleX(0);
    transition: transform var(--fnp-transition);
}

.fnp-filter-tab:hover,
.fnp-filter-tab--active {
    color: var(--fnp-primary);
}

.fnp-filter-tab--active::after {
    transform: scaleX(1);
}

/* Filter dropdown */
.fnp-filter-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--fnp-border);
    border-radius: var(--fnp-radius-sm);
    background: var(--fnp-bg);
    color: var(--fnp-text);
    font-size: 0.85rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

/* Filter search */
.fnp-filter-search {
    position: relative;
}

.fnp-filter-search input {
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--fnp-border);
    border-radius: 9999px;
    font-size: 0.85rem;
    width: 200px;
    transition: border-color var(--fnp-transition);
}

.fnp-filter-search input:focus {
    border-color: var(--fnp-primary);
    outline: none;
}

.fnp-filter-search::before {
    content: "\1F50D";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
}

/* Date range filter */
.fnp-filter-date {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fnp-filter-date input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--fnp-border);
    border-radius: var(--fnp-radius-sm);
    font-size: 0.85rem;
}

/* Checkbox / Radio filters */
.fnp-filter-checkbox,
.fnp-filter-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fnp-filter-checkbox label,
.fnp-filter-radio label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Active filters summary */
.fnp-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
}

.fnp-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--fnp-bg-alt);
    border-radius: 9999px;
    font-size: 0.8rem;
    color: var(--fnp-text);
}

.fnp-active-filter__remove {
    cursor: pointer;
    font-weight: bold;
    color: var(--fnp-accent);
    border: none;
    background: none;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

/* ----------------------------------------------------------
   4. Pagination
   ---------------------------------------------------------- */
.fnp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: var(--fnp-gap);
    padding: 16px 0;
}

.fnp-pagination__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.fnp-pagination a,
.fnp-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--fnp-border);
    border-radius: var(--fnp-radius-sm);
    font-size: 0.9rem;
    color: var(--fnp-text);
    text-decoration: none;
    transition: all var(--fnp-transition);
}

.fnp-pagination a:hover {
    background: var(--fnp-primary);
    border-color: var(--fnp-primary);
    color: #fff;
}

.fnp-pagination .current,
.fnp-pagination__link--active {
    background: var(--fnp-primary);
    border-color: var(--fnp-primary);
    color: #fff;
    font-weight: 700;
}

.fnp-load-more {
    display: block;
    width: fit-content;
    margin: var(--fnp-gap) auto 0;
    padding: 12px 32px;
    background: var(--fnp-primary);
    color: #fff;
    border: none;
    border-radius: var(--fnp-radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fnp-transition);
}

.fnp-load-more:hover {
    background: var(--fnp-primary-hover);
}

.fnp-load-more--loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Infinite scroll sentinel */
.fnp-sentinel {
    height: 1px;
    width: 100%;
}

/* ----------------------------------------------------------
   5. News Ticker
   ---------------------------------------------------------- */
.fnp-ticker {
    display: flex;
    align-items: center;
    background: var(--fnp-bg-alt);
    border: 1px solid var(--fnp-border);
    border-radius: var(--fnp-radius-sm);
    overflow: hidden;
    height: 44px;
}

.fnp-ticker__label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    background: var(--fnp-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    height: 100%;
    white-space: nowrap;
}

.fnp-ticker__label::before {
    content: "●";
    animation: fnp-blink 1s infinite;
}

.fnp-ticker__track {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.fnp-ticker__items {
    display: flex;
    gap: 40px;
    white-space: nowrap;
    animation: fnp-ticker-scroll var(--fnp-ticker-speed, 30s) linear infinite;
    padding-left: 100%;
}

.fnp-ticker__item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.fnp-ticker__item a {
    color: var(--fnp-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.fnp-ticker__item a:hover {
    color: var(--fnp-primary);
}

.fnp-ticker__separator {
    color: var(--fnp-border);
    font-size: 0.6rem;
}

.fnp-ticker:hover .fnp-ticker__items {
    animation-play-state: paused;
}

@keyframes fnp-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@keyframes fnp-blink {
    50% { opacity: 0; }
}

/* ----------------------------------------------------------
   6. Category Carousel
   ---------------------------------------------------------- */
.fnp-category-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.fnp-category-carousel::-webkit-scrollbar {
    height: 4px;
}

.fnp-category-carousel::-webkit-scrollbar-thumb {
    background: var(--fnp-border);
    border-radius: 4px;
}

.fnp-category-item {
    scroll-snap-align: start;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--fnp-bg);
    border: 1px solid var(--fnp-border);
    border-radius: var(--fnp-radius);
    text-decoration: none;
    color: var(--fnp-text);
    transition: all var(--fnp-transition);
    min-width: 120px;
    text-align: center;
}

.fnp-category-item:hover {
    border-color: var(--fnp-primary);
    background: var(--fnp-bg-alt);
    transform: translateY(-2px);
}

.fnp-category-item__name {
    font-weight: 600;
    font-size: 0.9rem;
}

.fnp-category-item__count {
    font-size: 0.75rem;
    color: var(--fnp-text-light);
}

/* ----------------------------------------------------------
   7. Author Card
   ---------------------------------------------------------- */
.fnp-author-card {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: var(--fnp-bg);
    border: 1px solid var(--fnp-border);
    border-radius: var(--fnp-radius);
    align-items: flex-start;
}

.fnp-author-card__avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}

.fnp-author-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fnp-author-card__info {
    flex: 1;
}

.fnp-author-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--fnp-text);
}

.fnp-author-card__role {
    font-size: 0.8rem;
    color: var(--fnp-text-light);
    margin-bottom: 8px;
}

.fnp-author-card__bio {
    font-size: 0.875rem;
    color: var(--fnp-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
}

.fnp-author-card__social {
    display: flex;
    gap: 8px;
}

.fnp-author-card__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fnp-bg-alt);
    color: var(--fnp-text-light);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all var(--fnp-transition);
}

.fnp-author-card__social a:hover {
    background: var(--fnp-primary);
    color: #fff;
}

/* ----------------------------------------------------------
   8. Breadcrumbs
   ---------------------------------------------------------- */
.fnp-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--fnp-text-light);
    padding: 8px 0;
}

.fnp-breadcrumbs a {
    color: var(--fnp-text-light);
    text-decoration: none;
}

.fnp-breadcrumbs a:hover {
    color: var(--fnp-primary);
}

.fnp-breadcrumbs__sep {
    margin: 0 2px;
}

/* ----------------------------------------------------------
   9. Table of Contents
   ---------------------------------------------------------- */
.fnp-toc {
    background: var(--fnp-bg-alt);
    border: 1px solid var(--fnp-border);
    border-radius: var(--fnp-radius);
    padding: 20px 24px;
    margin: 24px 0;
}

.fnp-toc__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--fnp-text);
}

.fnp-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fnp-toc__list li {
    margin-bottom: 6px;
}

.fnp-toc__list a {
    color: var(--fnp-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--fnp-transition);
}

.fnp-toc__list a:hover {
    color: var(--fnp-primary);
}

.fnp-toc__list .fnp-toc--h3 { padding-left: 16px; }
.fnp-toc__list .fnp-toc--h4 { padding-left: 32px; }

/* ----------------------------------------------------------
   10. Reading Time
   ---------------------------------------------------------- */
.fnp-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--fnp-text-light);
}

.fnp-reading-time__icon::before {
    content: "⏱";
}

/* ----------------------------------------------------------
   10b. Inline SVG Icons
   ---------------------------------------------------------- */
.fnp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.fnp-icon svg {
    display: block;
    width: 1em;
    height: 1em;
}

/* ----------------------------------------------------------
   11. Share Buttons
   ---------------------------------------------------------- */
.fnp-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}

.fnp-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--fnp-radius-sm);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: opacity var(--fnp-transition);
}

.fnp-share__btn:hover {
    opacity: 0.85;
    color: #fff;
}

.fnp-share__btn--facebook   { background: #1877f2; }
.fnp-share__btn--twitter    { background: #1da1f2; }
.fnp-share__btn--whatsapp   { background: #25d366; }
.fnp-share__btn--telegram   { background: #0088cc; }
.fnp-share__btn--linkedin   { background: #0a66c2; }
.fnp-share__btn--email      { background: #6b7280; }
.fnp-share__btn--copy       { background: #374151; cursor: pointer; border: none; }
.fnp-share__btn--pinterest  { background: #e60023; }
.fnp-share__btn--reddit     { background: #ff4500; }

/* Tamaños */
.fnp-share--size-sm .fnp-share__btn { padding: 5px 10px; font-size: 0.78rem; }
.fnp-share--size-sm .fnp-share__btn svg { width: 14px; height: 14px; }
.fnp-share--size-lg .fnp-share__btn { padding: 11px 20px; font-size: 0.95rem; }
.fnp-share--size-lg .fnp-share__btn svg { width: 20px; height: 20px; }

/* Layout: vertical */
.fnp-share--layout-vertical {
    flex-direction: column;
    align-items: flex-start;
}

/* Layout: grid */
.fnp-share--layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

/* Estilo: rounded (sin icono, pill) */
.fnp-share--rounded .fnp-share__btn {
    border-radius: 999px;
}

/* Estilo: outlined */
.fnp-share--outlined .fnp-share__btn {
    background: transparent;
    border: 2px solid currentColor;
    color: inherit;
}
.fnp-share--outlined .fnp-share__btn:hover {
    opacity: 1;
    filter: brightness(0.9);
}

/* Solo icono (aplica a estilo 'icon' y a 'icons-only' legacy) */
.fnp-share--icon .fnp-share__btn,
.fnp-share--icons-only .fnp-share__btn {
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    justify-content: center;
}
.fnp-share--size-sm.fnp-share--icon .fnp-share__btn,
.fnp-share--size-sm.fnp-share--icons-only .fnp-share__btn { width: 30px; height: 30px; padding: 6px; }
.fnp-share--size-lg.fnp-share--icon .fnp-share__btn,
.fnp-share--size-lg.fnp-share--icons-only .fnp-share__btn { width: 44px; height: 44px; padding: 10px; }

.fnp-share--icon .fnp-share__label,
.fnp-share--icons-only .fnp-share__btn span.fnp-share__label {
    display: none;
}

/* Solo texto */
.fnp-share--text .fnp-share__btn svg {
    display: none;
}

/* ----------------------------------------------------------
   12. Hero Section
   ---------------------------------------------------------- */
.fnp-hero {
    position: relative;
    border-radius: var(--fnp-radius);
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
}

.fnp-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fnp-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fnp-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.8));
}

.fnp-hero__content {
    position: relative;
    z-index: 2;
    padding: 40px;
    color: #fff;
    width: 100%;
}

.fnp-hero__category {
    display: inline-block;
    background: var(--fnp-accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--fnp-radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.fnp-hero__title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
}

.fnp-hero__title a {
    color: #fff;
    text-decoration: none;
}

.fnp-hero__excerpt {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.5;
    max-width: 640px;
    margin-bottom: 12px;
}

.fnp-hero__meta {
    font-size: 0.85rem;
    opacity: 0.8;
    display: flex;
    gap: 12px;
}

@media (max-width: 768px) {
    .fnp-hero { min-height: 280px; }
    .fnp-hero__content { padding: 24px; }
    .fnp-hero__title { font-size: 1.4rem; }
}

/* ----------------------------------------------------------
   13. Most Read / Trending
   ---------------------------------------------------------- */
.fnp-trending {
    counter-reset: trending;
}

.fnp-trending__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--fnp-border);
    counter-increment: trending;
}

.fnp-trending__item:last-child {
    border-bottom: none;
}

.fnp-trending__rank {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--fnp-primary);
}

.fnp-trending__rank--top3 {
    background: var(--fnp-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.85rem;
}

.fnp-trending__content {
    flex: 1;
    min-width: 0;
}

.fnp-trending__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
}

.fnp-trending__title a {
    color: var(--fnp-text);
    text-decoration: none;
}

.fnp-trending__title a:hover {
    color: var(--fnp-primary);
}

.fnp-trending__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--fnp-text-light);
}

.fnp-trending__thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--fnp-radius-sm);
    overflow: hidden;
}

.fnp-trending__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fnp-trending__thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

/* ----------------------------------------------------------
   14. Timeline
   ---------------------------------------------------------- */
.fnp-timeline {
    position: relative;
    padding: 0;
}

/* ── Left-aligned timeline (default) ── */
.fnp-timeline .fnp-grid--timeline {
    display: block;
    position: relative;
    padding-left: 40px;
}
.fnp-timeline .fnp-grid--timeline::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--fnp-border, #e5e5e5);
}
.fnp-timeline .fnp-grid--timeline .fnp-item {
    position: relative;
    padding: 0 0 28px 16px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
}
.fnp-timeline .fnp-grid--timeline .fnp-item::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 6px;
    width: 12px;
    height: 12px;
    background: var(--fnp-primary, #0073aa);
    border-radius: 50%;
    border: 3px solid var(--fnp-bg, #fff);
    z-index: 1;
    transition: transform 0.2s, background 0.2s;
}
.fnp-timeline .fnp-grid--timeline .fnp-item:hover::before {
    background: var(--fnp-accent, #ff6b35);
    transform: scale(1.3);
}
.fnp-timeline .fnp-grid--timeline .fnp-timeline__date {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fnp-primary, #0073aa);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.fnp-timeline .fnp-grid--timeline .fnp-timeline__content {
    padding-bottom: 4px;
}
.fnp-timeline .fnp-grid--timeline .fnp-item__title,
.fnp-timeline .fnp-grid--timeline h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
}
.fnp-timeline .fnp-grid--timeline .fnp-item__title a,
.fnp-timeline .fnp-grid--timeline h4 a {
    color: var(--fnp-text, #1a1a1a);
    text-decoration: none;
}
.fnp-timeline .fnp-grid--timeline .fnp-item__title a:hover,
.fnp-timeline .fnp-grid--timeline h4 a:hover {
    color: var(--fnp-primary, #0073aa);
}
.fnp-timeline .fnp-grid--timeline .fnp-item__intro,
.fnp-timeline .fnp-grid--timeline .fnp-item p {
    font-size: 0.875rem;
    color: var(--fnp-text-light, #666);
    line-height: 1.5;
    margin: 0;
}
.fnp-timeline .fnp-grid--timeline .fnp-item__image {
    margin-bottom: 8px;
    border-radius: var(--fnp-radius, 6px);
    overflow: hidden;
}

/* ── Zig-Zag (center) timeline ── */
.fnp-timeline--zigzag .fnp-grid--timeline {
    padding-left: 0;
    max-width: 900px;
    margin: 0 auto;
}
.fnp-timeline--zigzag .fnp-grid--timeline::before {
    left: 50%;
    transform: translateX(-50%);
}
.fnp-timeline--zigzag .fnp-grid--timeline .fnp-item {
    width: calc(50% - 30px);
    padding: 0 0 32px 0;
}
/* Odd items: left side */
.fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(odd) {
    margin-left: 0;
    margin-right: auto;
    text-align: right;
    padding-right: 24px;
}
.fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(odd)::before {
    left: auto;
    right: -36px;
}
/* Even items: right side */
.fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
    text-align: left;
    padding-left: 24px;
}
.fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(even)::before {
    left: -36px;
    right: auto;
}

/* ── Timeline scroll reveal animation ── */
.fnp-timeline .fnp-grid--timeline .fnp-item.fnp-tl-hidden {
    opacity: 0;
    transform: translateY(30px);
}
.fnp-timeline .fnp-grid--timeline .fnp-item.fnp-tl-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Zig-zag reveal from sides ── */
.fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(odd).fnp-tl-hidden {
    transform: translateX(-30px);
}
.fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(even).fnp-tl-hidden {
    transform: translateX(30px);
}
.fnp-timeline--zigzag .fnp-grid--timeline .fnp-item.fnp-tl-visible {
    transform: translateX(0);
}

/* ── Responsive: zigzag falls back to left on mobile ── */
@media (max-width: 768px) {
    .fnp-timeline--zigzag .fnp-grid--timeline {
        padding-left: 40px;
    }
    .fnp-timeline--zigzag .fnp-grid--timeline::before {
        left: 15px;
        transform: none;
    }
    .fnp-timeline--zigzag .fnp-grid--timeline .fnp-item {
        width: 100%;
        text-align: left;
        padding-left: 16px;
        padding-right: 0;
    }
    .fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(odd),
    .fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(even) {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        padding-left: 16px;
        padding-right: 0;
    }
    .fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(odd)::before,
    .fnp-timeline--zigzag .fnp-grid--timeline .fnp-item:nth-child(even)::before {
        left: -24px;
        right: auto;
    }
}

/* ----------------------------------------------------------
   15. Single Builder — Page Constructor
   ---------------------------------------------------------- */
.fnp-single {
    max-width: 800px;
    margin: 0 auto;
}

/* Sections */
.fnp-single__section {
    margin-bottom: 32px;
}
.fnp-single__section:last-child {
    margin-bottom: 0;
}

/* Section: Breadcrumbs */
.fnp-single__section--breadcrumbs {
    margin-bottom: 16px;
}

/* Section: Header */
.fnp-single__section--header {
    margin-bottom: 24px;
}

.fnp-single__header {
    margin-bottom: 24px;
}

.fnp-single__category {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fnp-accent);
    margin-bottom: 8px;
}

.fnp-single__title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--fnp-text);
}

.fnp-single__subtitle {
    font-size: 1.25rem;
    color: var(--fnp-text-light);
    line-height: 1.5;
    margin-bottom: 16px;
}

.fnp-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--fnp-text-light);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fnp-border);
}

.fnp-single__intro {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--fnp-text);
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fnp-border);
}

.fnp-single__body {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--fnp-text);
}

.fnp-single__quote {
    font-size: 1.2rem;
    font-style: italic;
    border-left: 4px solid var(--fnp-primary);
    padding: 16px 24px;
    margin: 24px 0;
    background: var(--fnp-bg-alt);
    border-radius: 0 var(--fnp-radius) var(--fnp-radius) 0;
    color: var(--fnp-text);
}

.fnp-single__source {
    font-size: 0.85rem;
    color: var(--fnp-text-light);
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--fnp-border);
}

.fnp-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
}

.fnp-single__tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--fnp-bg-alt);
    border-radius: 9999px;
    font-size: 0.8rem;
    color: var(--fnp-text);
    text-decoration: none;
    transition: all var(--fnp-transition);
}

.fnp-single__tag:hover {
    background: var(--fnp-primary);
    color: #fff;
}

/* Section: Hero / Featured Image */
.fnp-single__section--hero {
    margin: 0 0 32px;
}
.fnp-single__featured {
    margin: 0;
    border-radius: var(--fnp-radius);
    overflow: hidden;
}
.fnp-single__featured-img {
    width: 100%;
    height: auto;
    display: block;
}
.fnp-single__caption {
    font-size: 0.8rem;
    color: var(--fnp-text-light);
    padding: 8px 0;
    text-align: center;
}

/* Section: TOC */
.fnp-single__section--toc {
    background: var(--fnp-bg-alt);
    padding: 20px 24px;
    border-radius: var(--fnp-radius);
    border-left: 4px solid var(--fnp-primary);
}

/* Section: Body */
.fnp-single__section--body {
    font-size: 1rem;
    line-height: 1.8;
}

/* Section: Gallery */
.fnp-gallery {
    display: grid;
    grid-template-columns: repeat(var(--fnp-gallery-cols, 3), 1fr);
    gap: 12px;
}
.fnp-gallery__item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--fnp-radius);
}
.fnp-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.fnp-gallery__item:hover .fnp-gallery__img {
    transform: scale(1.05);
}
.fnp-gallery__caption {
    font-size: 0.8rem;
    color: var(--fnp-text-light);
    padding: 6px 0;
}

/* Section: Author Box */
.fnp-single__section--author_box {
    padding: 24px;
    background: var(--fnp-bg-alt);
    border-radius: var(--fnp-radius);
}

/* Section: Share */
.fnp-single__section--share {
    padding: 16px 0;
    border-top: 1px solid var(--fnp-border);
    border-bottom: 1px solid var(--fnp-border);
}

/* Section: Taxonomies */
.fnp-single__section--taxonomies {
    padding: 12px 0;
}
.fnp-taxonomy-group {
    margin-bottom: 6px;
    font-size: 0.9rem;
    line-height: 1.6;
}
.fnp-taxonomy-group__label {
    font-weight: 600;
    color: var(--fnp-text-muted, #6b7280);
}
.fnp-taxonomy-group__term {
    display: inline-block;
    padding: 2px 10px;
    margin: 2px 4px 2px 0;
    background: var(--fnp-bg-alt, #f3f4f6);
    border-radius: var(--fnp-radius-sm, 4px);
    color: var(--fnp-text, #1f2937);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background var(--fnp-transition, 0.2s);
}
.fnp-taxonomy-group__term:hover {
    background: var(--fnp-primary, #1e40af);
    color: #fff;
}

/* Section: Related */
.fnp-single__section--related {
    padding-top: 24px;
}

/* Section: Comments */
.fnp-single__section--comments_section {
    padding-top: 24px;
}

/* Gallery responsive */
@media (max-width: 768px) {
    .fnp-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .fnp-gallery {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------
   16. Skeleton Loading
   ---------------------------------------------------------- */
.fnp-skeleton {
    animation: fnp-pulse 1.5s ease-in-out infinite;
}

.fnp-skeleton-image {
    background: var(--fnp-bg-alt);
    aspect-ratio: 16 / 9;
    border-radius: var(--fnp-radius) var(--fnp-radius) 0 0;
}

.fnp-skeleton-text {
    height: 14px;
    background: var(--fnp-bg-alt);
    border-radius: 4px;
    margin-bottom: 8px;
}

.fnp-skeleton-text--title {
    height: 20px;
    width: 80%;
}

.fnp-skeleton-text--short {
    width: 40%;
}

.fnp-skeleton-content {
    padding: 16px;
}

@keyframes fnp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ----------------------------------------------------------
   17. Visual Effects
   ---------------------------------------------------------- */

/* Hover effects */
.fnp-fx-hover-zoom:hover .fnp-item__image img      { transform: scale(var(--fnp-hover-zoom-scale, 1.1)); }
.fnp-fx-hover-brightness:hover .fnp-item__image img { filter: brightness(1.15); }
.fnp-fx-hover-grayscale .fnp-item__image img        { filter: grayscale(1); transition: filter 0.4s; }
.fnp-fx-hover-grayscale:hover .fnp-item__image img  { filter: grayscale(0); }
.fnp-fx-hover-blur .fnp-item__image img             { transition: filter 0.4s; }
.fnp-fx-hover-blur:hover .fnp-item__image img       { filter: blur(3px); }
.fnp-fx-hover-shadow:hover                          { box-shadow: var(--fnp-shadow-lg); }
.fnp-fx-hover-border:hover                          { border-color: var(--fnp-primary) !important; }
.fnp-fx-hover-lift:hover                            { transform: translateY(-6px); }
.fnp-fx-hover-glow:hover                            { box-shadow: 0 0 20px rgba(30, 64, 175, 0.3); }

/* Hover overlay */
.fnp-fx-hover-overlay .fnp-item__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--fnp-primary);
    opacity: 0;
    transition: opacity 0.3s;
}
.fnp-fx-hover-overlay:hover .fnp-item__image::after {
    opacity: 0.2;
}

/* Entrance animations */
.fnp-fx-entrance-fade     { opacity: 0; transition: opacity 0.6s ease; }
.fnp-fx-entrance-slide-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s, transform 0.6s; }
.fnp-fx-entrance-slide-left  { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s, transform 0.6s; }
.fnp-fx-entrance-slide-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s, transform 0.6s; }
.fnp-fx-entrance-zoom-in  { opacity: 0; transform: scale(0.8); transition: opacity 0.6s, transform 0.6s; }
.fnp-fx-entrance-flip     { opacity: 0; transform: perspective(800px) rotateY(30deg); transition: opacity 0.6s, transform 0.6s; }
.fnp-fx-entrance-bounce   { opacity: 0; transform: translateY(30px); transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fnp-fx-entrance-rotate   { opacity: 0; transform: rotate(-5deg) scale(0.9); transition: opacity 0.6s, transform 0.6s; }

/* Animated state */
.fnp-fx-animated {
    opacity: 1 !important;
    transform: none !important;
}

/* Stagger delay via CSS variable */
.fnp-fx-stagger { transition-delay: calc(var(--fnp-stagger, 0) * 0.1s); }

/* Ken Burns for hero */
.fnp-fx-ken-burns img {
    animation: fnp-ken-burns 15s ease-in-out infinite alternate;
}

@keyframes fnp-ken-burns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, -1%); }
}

/* Parallax */
.fnp-fx-parallax {
    overflow: hidden;
}
.fnp-fx-parallax img {
    will-change: transform;
}

/* Tilt (data-driven via JS) */
.fnp-fx-tilt {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* ----------------------------------------------------------
   18. Loading States
   ---------------------------------------------------------- */
.fnp-loading {
    position: relative;
    min-height: 100px;
}

.fnp-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid var(--fnp-border);
    border-top-color: var(--fnp-primary);
    border-radius: 50%;
    animation: fnp-spin 0.8s linear infinite;
}

@keyframes fnp-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.fnp-grid--loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ----------------------------------------------------------
   19. Related Posts
   ---------------------------------------------------------- */
.fnp-related {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--fnp-border);
}

.fnp-related__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--fnp-text);
}

/* ----------------------------------------------------------
   20. Utility Classes
   ---------------------------------------------------------- */
.fnp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.fnp-no-results {
    text-align: center;
    padding: 48px 24px;
    color: var(--fnp-text-light);
    font-size: 0.95rem;
}

/* RTL support */
[dir="rtl"] .fnp-timeline .fnp-grid--timeline { padding-left: 0; padding-right: 40px; }
[dir="rtl"] .fnp-timeline .fnp-grid--timeline::before { left: auto; right: 15px; }
[dir="rtl"] .fnp-timeline .fnp-grid--timeline .fnp-item::before { left: auto; right: -24px; }
[dir="rtl"] .fnp-item__quote { border-left: none; border-right: 3px solid var(--fnp-primary); padding-left: 0; padding-right: 12px; }
[dir="rtl"] .fnp-single__quote { border-left: none; border-right: 4px solid var(--fnp-primary); border-radius: var(--fnp-radius) 0 0 var(--fnp-radius); }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fnp-ticker__items { animation: none; }
    .fnp-fx-ken-burns img { animation: none; }
    [class*="fnp-fx-entrance-"] { opacity: 1; transform: none; transition: none; }
    .fnp-item__image img { transition: none; }
}

/* ----------------------------------------------------------
   21. Category Carousel Pro
   ---------------------------------------------------------- */
.fnp-cat-carousel {
    position: relative;
    overflow: hidden;
}

.fnp-cat-carousel__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0;
}

.fnp-cat-carousel__track::-webkit-scrollbar { display: none; }

.fnp-cat-carousel__item {
    scroll-snap-align: start;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--fnp-bg);
    border: 1px solid var(--fnp-border);
    border-radius: var(--fnp-radius);
    text-decoration: none;
    color: var(--fnp-text);
    transition: all var(--fnp-transition);
    min-width: 140px;
}

.fnp-cat-carousel__item:hover {
    border-color: var(--fnp-primary);
    transform: translateY(-3px);
    box-shadow: var(--fnp-shadow);
}

.fnp-cat-carousel__image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.fnp-cat-carousel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fnp-cat-carousel__name {
    font-weight: 600;
    font-size: 0.9rem;
}

.fnp-cat-carousel__count {
    font-size: 0.75rem;
    color: var(--fnp-text-light);
    background: var(--fnp-bg-alt);
    padding: 2px 8px;
    border-radius: 9999px;
}

.fnp-cat-carousel__prev,
.fnp-cat-carousel__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fnp-bg);
    border: 1px solid var(--fnp-border);
    color: var(--fnp-text);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--fnp-transition);
    z-index: 5;
    box-shadow: var(--fnp-shadow);
}

.fnp-cat-carousel__prev { left: 4px; }
.fnp-cat-carousel__next { right: 4px; }

.fnp-cat-carousel__prev:hover,
.fnp-cat-carousel__next:hover {
    background: var(--fnp-primary);
    border-color: var(--fnp-primary);
    color: #fff;
}

/* ----------------------------------------------------------
   22. Ticker Controls & Styles
   ---------------------------------------------------------- */
.fnp-ticker__controls {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    padding: 0 8px;
}

.fnp-ticker__prev,
.fnp-ticker__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--fnp-border);
    border-radius: var(--fnp-radius-sm);
    background: var(--fnp-bg);
    color: var(--fnp-text);
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--fnp-transition);
}

.fnp-ticker__prev:hover,
.fnp-ticker__next:hover {
    background: var(--fnp-primary);
    border-color: var(--fnp-primary);
    color: #fff;
}

.fnp-ticker--fade .fnp-ticker__items {
    animation: none;
    padding-left: 12px;
}

.fnp-ticker--slide .fnp-ticker__items {
    animation: none;
    padding-left: 12px;
}

/* ----------------------------------------------------------
   23. Button Variants
   ---------------------------------------------------------- */
.fnp-item__button--sm {
    padding: 5px 12px;
    font-size: 0.8rem;
}

.fnp-item__button--outline {
    background: transparent;
    border: 2px solid var(--fnp-primary);
    color: var(--fnp-primary);
    padding: 6px 16px;
    border-radius: var(--fnp-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    text-decoration: none;
    transition: all var(--fnp-transition);
}

.fnp-item__button--outline:hover {
    background: var(--fnp-primary);
    color: #fff;
}

.fnp-item__button--ghost {
    background: transparent;
    border: none;
    color: var(--fnp-text-light);
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color var(--fnp-transition);
}

.fnp-item__button--ghost:hover {
    color: var(--fnp-primary);
}

/* ----------------------------------------------------------
   24. Opinion Column / Pullquote
   ---------------------------------------------------------- */
.fnp-item__content--opinion {
    text-align: center;
    padding: 24px;
}

.fnp-item__author--featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.fnp-item__author--featured .fnp-item__author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
}

.fnp-item__author--featured .fnp-item__author-name a {
    font-weight: 700;
    color: var(--fnp-primary);
}

.fnp-item__pullquote {
    font-style: italic;
    font-size: 1rem;
    color: var(--fnp-text);
    border: none;
    padding: 0;
    margin: 12px 0;
    quotes: "\201C" "\201D";
}

.fnp-item__pullquote p::before { content: open-quote; }
.fnp-item__pullquote p::after { content: close-quote; }

/* ----------------------------------------------------------
   25. Overlay Content (for overlay templates)
   ---------------------------------------------------------- */
.fnp-item__overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 20px 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff;
    z-index: 2;
}

.fnp-item__overlay-content .fnp-item__title a,
.fnp-item__overlay-content .fnp-item__meta,
.fnp-item__overlay-content .fnp-item__date {
    color: rgba(255,255,255,0.9);
}

.fnp-item__badge--overlay {
    background: var(--fnp-accent);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--fnp-radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 8px;
}

.fnp-item__badge--breaking {
    background: #dc2626;
    animation: fnp-blink 1s infinite;
}

/* ----------------------------------------------------------
   26. Date Accent & Minimal Content
   ---------------------------------------------------------- */
.fnp-item__date-accent {
    color: var(--fnp-primary);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: block;
}

.fnp-item__content--minimal {
    padding: 20px 0;
}

.fnp-item__content--compact {
    padding: 10px 12px;
}

/* ----------------------------------------------------------
   27. First Featured (index 0 in grid)
   ---------------------------------------------------------- */
.fnp-grid--first-featured > .fnp-item--first {
    grid-column: 1 / -1;
}

.fnp-grid--first-featured > .fnp-item--first .fnp-item__title {
    font-size: 1.5rem;
}

.fnp-grid--first-featured > .fnp-item--first .fnp-item__image {
    aspect-ratio: 21/9;
}

/* ----------------------------------------------------------
   28. Grid Responsive Extensions
   ---------------------------------------------------------- */
@media (max-width: 768px) {

    .fnp-cat-carousel__prev,
    .fnp-cat-carousel__next { display: none; }

    .fnp-author-card { flex-direction: column; text-align: center; }
    .fnp-author-card__social { justify-content: center; }
}

/* ----------------------------------------------------------
   29. Back to Top
   ---------------------------------------------------------- */
.fnp-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fnp-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: var(--fnp-shadow-md);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 999;
    pointer-events: none;
}

.fnp-back-to-top--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fnp-back-to-top:hover {
    background: var(--fnp-primary-hover);
}

/* ----------------------------------------------------------
   30. Separator / Spacer in loop items
   ---------------------------------------------------------- */
.fnp-separator {
    border: none;
    border-top: 1px solid var(--fnp-border);
    margin: 8px 0;
}

.fnp-spacer {
    display: block;
}

/* ----------------------------------------------------------
   31. Print Styles
   ---------------------------------------------------------- */
@media print {
    .fnp-ticker, .fnp-filters, .fnp-pagination, .fnp-share,
    .fnp-back-to-top, .fnp-ticker__controls { display: none !important; }
    .fnp-grid { display: block !important; }
    .fnp-item { page-break-inside: avoid; margin-bottom: 24px; }
}

/* ----------------------------------------------------------
   32. Grid-level Hover Effects
   (Applied via hoverEffect attribute → fnp-grid--hover-* class)
   ---------------------------------------------------------- */

/* Zoom image on hover */
.fnp-grid--hover-zoom .fnp-item .fnp-item__image {
    overflow: hidden;
}
.fnp-grid--hover-zoom .fnp-item:hover .fnp-item__image img {
    transform: scale(1.08);
}

/* Lift card on hover */
.fnp-grid--hover-lift .fnp-item {
    transition: transform var(--fnp-transition), box-shadow var(--fnp-transition);
}
.fnp-grid--hover-lift .fnp-item:hover {
    transform: translateY(-7px);
    box-shadow: var(--fnp-shadow-lg);
}

/* Glow on hover */
.fnp-grid--hover-glow .fnp-item:hover {
    box-shadow: 0 0 0 2px var(--fnp-primary), 0 8px 24px rgba(30, 64, 175, 0.25);
}

/* Drop shadow on hover */
.fnp-grid--hover-shadow .fnp-item:hover {
    box-shadow: var(--fnp-shadow-lg);
}

/* Tilt 3D — JS handles perspective, CSS sets base */
.fnp-grid--hover-tilt .fnp-item {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* ----------------------------------------------------------
   33. Grid-level Overlay Styles
   (Applied via overlayStyle attribute → fnp-grid--overlay-* class)
   ---------------------------------------------------------- */

/* Dark gradient overlay on image */
.fnp-grid--overlay-gradient-dark .fnp-item {
    position: relative;
    overflow: hidden;
}
.fnp-grid--overlay-gradient-dark .fnp-item .fnp-item__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 55%);
    z-index: 1;
    pointer-events: none;
}

/* Colored-gradient overlay (uses --fnp-primary) */
.fnp-grid--overlay-gradient-color .fnp-item .fnp-item__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30, 64, 175, 0.6) 0%, transparent 55%);
    z-index: 1;
    pointer-events: none;
}

/* Blur overlay — blurs image on hover */
.fnp-grid--overlay-blur .fnp-item .fnp-item__image img {
    transition: filter 0.4s ease;
}
.fnp-grid--overlay-blur .fnp-item:hover .fnp-item__image img {
    filter: blur(4px);
}
.fnp-grid--overlay-blur .fnp-item:hover .fnp-item__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.4s;
}

/* ----------------------------------------------------------
   34. Full Layout (single column full-width cards)
   ---------------------------------------------------------- */
.fnp-grid--full {
    display: grid;
    grid-template-columns: 1fr;
}
.fnp-grid--full .fnp-item {
    display: grid;
    grid-template-columns: clamp(200px, 35%, 380px) 1fr;
    gap: 0;
    align-items: stretch;
    border-radius: var(--fnp-radius);
    overflow: hidden;
}
.fnp-grid--full .fnp-item .fnp-item__image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 180px;
}
.fnp-grid--full .fnp-item .fnp-item__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 600px) {
    .fnp-grid--full .fnp-item {
        grid-template-columns: 1fr;
    }
    .fnp-grid--full .fnp-item .fnp-item__image {
        min-height: 200px;
    }
}

/* ==========================================================
   PRO 8 EXTRAS — Fase Pro 8 additions
   ========================================================== */

/* ── Dark Mode Toggle Button ── */
.fnp-dark-mode-btn {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fnp-primary, #0073aa);
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--fnp-shadow-md, 0 4px 12px rgba(0,0,0,.15));
    transition: transform 0.25s, background 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.fnp-dark-mode-btn:hover { transform: scale(1.12); }
.fnp-dark-mode-btn:focus-visible { outline: 2px solid var(--fnp-primary, #0073aa); outline-offset: 3px; }

/* ── Trending: views counter + title ── */
.fnp-trending__views {
    color: var(--fnp-primary, #0073aa);
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
}
.fnp-trending__title-text {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ----------------------------------------------------------
   15. Offcanvas Filters
   ---------------------------------------------------------- */

/* ── CSS variables (overridable per-panel) ── */
:root {
    --fnp-ocf-width:          340px;
    --fnp-ocf-ov-opacity:     0.5;
    --fnp-ocf-z-panel:        9999;
    --fnp-ocf-z-overlay:      9998;
    --fnp-ocf-anim-dur:       280ms;
    --fnp-ocf-anim-ease:      cubic-bezier(.4,0,.2,1);
    --fnp-ocf-panel-bg:       #fff;
    --fnp-ocf-header-border:  #e5e7eb;
    --fnp-ocf-group-border:   #f3f4f6;
    --fnp-ocf-radius:         12px;
    --fnp-ocf-badge-bg:       #ef4444;
}

/* ── Trigger wrapper ── */
.fnp-ocf-wrap {
    display: inline-block;
}

/* ── Trigger button base ── */
.fnp-ocf-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: filter var(--fnp-ocf-anim-dur), box-shadow var(--fnp-ocf-anim-dur);
    white-space: nowrap;
    position: relative;
}
.fnp-ocf-trigger:focus-visible {
    outline: 2px solid var(--fnp-primary, #0073aa);
    outline-offset: 2px;
}

/* Styles */
.fnp-ocf-trigger--button {
    background: var(--fnp-primary, #0073aa);
    color: #fff;
    border-radius: 6px;
    padding: 9px 16px;
}
.fnp-ocf-trigger--pill {
    background: var(--fnp-primary, #0073aa);
    color: #fff;
    border-radius: 999px;
    padding: 9px 20px;
}
.fnp-ocf-trigger--outlined {
    background: transparent;
    color: var(--fnp-primary, #0073aa);
    border: 2px solid var(--fnp-primary, #0073aa);
    border-radius: 6px;
    padding: 7px 14px;
}
.fnp-ocf-trigger--ghost {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: 7px 14px;
    opacity: 0.8;
}
.fnp-ocf-trigger--minimal {
    background: transparent;
    color: inherit;
    padding: 6px 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 0;
}

/* Sizes */
.fnp-ocf-trigger--sm { font-size: 0.8rem; }
.fnp-ocf-trigger--md { font-size: 0.875rem; }
.fnp-ocf-trigger--lg { font-size: 1rem; padding-inline: 22px; }

/* Hover */
.fnp-ocf-trigger--button:hover,
.fnp-ocf-trigger--pill:hover {
    filter: brightness(0.9);
}

/* Active state */
.fnp-ocf-trigger--has-filters .fnp-ocf-trigger__text::after {
    content: '';
}

/* Badge */
.fnp-ocf-trigger__badge {
    background: var(--fnp-ocf-badge-bg);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    padding: 0 5px;
}

/* ── Overlay ── */
.fnp-ocf-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, var(--fnp-ocf-ov-opacity, 0.5));
    z-index: var(--fnp-ocf-z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fnp-ocf-anim-dur) var(--fnp-ocf-anim-ease),
                visibility var(--fnp-ocf-anim-dur) var(--fnp-ocf-anim-ease);
}
.fnp-ocf-overlay--open {
    opacity: 1;
    visibility: visible;
}

/* ── Panel base ── */
.fnp-ocf-panel {
    position: fixed;
    z-index: var(--fnp-ocf-z-panel);
    background: var(--fnp-ocf-panel-bg);
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
    transition: transform var(--fnp-ocf-anim-dur) var(--fnp-ocf-anim-ease),
                opacity  var(--fnp-ocf-anim-dur) var(--fnp-ocf-anim-ease),
                visibility var(--fnp-ocf-anim-dur) var(--fnp-ocf-anim-ease);
    visibility: hidden;
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
}

/* Panel: right */
.fnp-ocf-panel--right {
    top: 0; right: 0; bottom: 0;
    width: min(var(--fnp-ocf-width, 340px), 94vw);
    border-radius: var(--fnp-ocf-radius) 0 0 var(--fnp-ocf-radius);
    transform: translateX(110%);
}
/* Panel: left */
.fnp-ocf-panel--left {
    top: 0; left: 0; bottom: 0;
    width: min(var(--fnp-ocf-width, 340px), 94vw);
    border-radius: 0 var(--fnp-ocf-radius) var(--fnp-ocf-radius) 0;
    transform: translateX(-110%);
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
}
/* Panel: bottom */
.fnp-ocf-panel--bottom {
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 80dvh;
    border-radius: var(--fnp-ocf-radius) var(--fnp-ocf-radius) 0 0;
    transform: translateY(108%);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}
/* Panel: modal */
.fnp-ocf-panel--modal {
    top: 50%; left: 50%;
    transform: translate(-50%, -45%) scale(0.96);
    width: min(var(--fnp-ocf-width, 440px), 94vw);
    max-height: 88dvh;
    border-radius: var(--fnp-ocf-radius);
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    opacity: 0;
}

/* ── Fade animation ── */
.fnp-ocf-panel--fade {
    transform: none !important;
    opacity: 0;
}

/* ── Scale animation ── */
.fnp-ocf-panel--scale {
    transform-origin: top right;
}
.fnp-ocf-panel--scale.fnp-ocf-panel--right {
    transform: translateX(110%) scale(0.95);
}
.fnp-ocf-panel--scale.fnp-ocf-panel--left {
    transform: translateX(-110%) scale(0.95);
}
.fnp-ocf-panel--scale.fnp-ocf-panel--modal {
    transform: translate(-50%, -45%) scale(0.92);
    opacity: 0;
}

/* ── Open state (all positions) ── */
.fnp-ocf-panel--open {
    visibility: visible;
}
.fnp-ocf-panel--open.fnp-ocf-panel--right,
.fnp-ocf-panel--open.fnp-ocf-panel--left    { transform: translateX(0); }
.fnp-ocf-panel--open.fnp-ocf-panel--bottom  { transform: translateY(0); }
.fnp-ocf-panel--open.fnp-ocf-panel--modal   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.fnp-ocf-panel--open.fnp-ocf-panel--fade    { opacity: 1; }
.fnp-ocf-panel--open.fnp-ocf-panel--scale.fnp-ocf-panel--right { transform: translateX(0) scale(1); }
.fnp-ocf-panel--open.fnp-ocf-panel--scale.fnp-ocf-panel--left  { transform: translateX(0) scale(1); }

/* ── Panel header ── */
.fnp-ocf-panel__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fnp-ocf-header-border);
    flex-shrink: 0;
}
.fnp-ocf-panel__title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.fnp-ocf-panel__count-label {
    font-size: 0.78rem;
    color: var(--fnp-text-secondary, #6b7280);
    white-space: nowrap;
    padding: 3px 8px;
    background: var(--fnp-ocf-group-border);
    border-radius: 999px;
    transition: all .2s;
}
.fnp-ocf-panel__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: inherit;
    opacity: 0.7;
    display: flex;
    align-items: center;
    transition: opacity .2s, background .2s;
}
.fnp-ocf-panel__close:hover {
    opacity: 1;
    background: var(--fnp-ocf-group-border);
}

/* ── Active filters chips ── */
.fnp-ocf-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--fnp-ocf-group-border);
    flex-shrink: 0;
}
.fnp-ocf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--fnp-primary, #0073aa);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    animation: fnp-chip-in .15s ease;
}
@keyframes fnp-chip-in {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.fnp-ocf-chip__remove {
    background: none;
    border: none;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color .15s;
}
.fnp-ocf-chip__remove:hover { color: #fff; }

/* ── Panel body ── */
.fnp-ocf-panel__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding: 8px 0 12px;
}
.fnp-ocf-panel__body::-webkit-scrollbar { width: 5px; }
.fnp-ocf-panel__body::-webkit-scrollbar-track { background: transparent; }
.fnp-ocf-panel__body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ── Filter group ── */
.fnp-ocf-filter-group {
    border-bottom: 1px solid var(--fnp-ocf-group-border);
}
.fnp-ocf-filter-group:last-child { border-bottom: none; }

/* Collapsible toggle */
.fnp-ocf-filter-group__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 20px;
    text-align: left;
    gap: 8px;
}
.fnp-ocf-filter-group__toggle:hover { background: var(--fnp-ocf-group-border); }

.fnp-ocf-filter-group__title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: inherit;
    flex: 1;
}

/* Non-collapsible group title (search) */
.fnp-ocf-filter-group[data-filter-key="search"] > .fnp-ocf-filter-group__title {
    padding: 12px 20px 6px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.fnp-ocf-chevron {
    flex-shrink: 0;
    transition: transform var(--fnp-ocf-anim-dur);
}
.fnp-ocf-filter-group--collapsed .fnp-ocf-chevron {
    transform: rotate(-90deg);
}

.fnp-ocf-filter-group__body {
    padding: 0 20px 14px;
    overflow: hidden;
    transition: max-height var(--fnp-ocf-anim-dur) var(--fnp-ocf-anim-ease);
}
.fnp-ocf-filter-group--collapsed .fnp-ocf-filter-group__body {
    max-height: 0 !important;
    padding-bottom: 0;
}

/* ── Search field ── */
.fnp-ocf-search {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 20px 12px;
    transition: border-color .2s;
}
.fnp-ocf-search:focus-within { border-color: var(--fnp-primary, #0073aa); }
.fnp-ocf-search__input {
    flex: 1;
    border: none;
    padding: 8px 12px;
    font-size: 0.875rem;
    background: transparent;
    min-width: 0;
}
.fnp-ocf-search__input:focus { outline: none; }
.fnp-ocf-search__btn {
    background: none;
    border: none;
    padding: 8px 12px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* ── Checkboxes ── */
.fnp-ocf-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.fnp-ocf-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 4px;
    transition: background .15s;
}
.fnp-ocf-checkbox:hover { background: var(--fnp-ocf-group-border); padding-inline: 6px; margin-inline: -6px; }
.fnp-ocf-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.fnp-ocf-checkbox__dot {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 3px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
}
.fnp-ocf-checkbox input:checked + .fnp-ocf-checkbox__dot {
    background: var(--fnp-primary, #0073aa);
    border-color: var(--fnp-primary, #0073aa);
}
.fnp-ocf-checkbox input:checked + .fnp-ocf-checkbox__dot::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(43deg) translateY(-1px);
}
.fnp-ocf-checkbox__label {
    flex: 1;
    line-height: 1.3;
}
.fnp-ocf-checkbox__count {
    font-size: 0.75rem;
    color: #9ca3af;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 1px 7px;
}
.fnp-ocf-checkbox input:checked ~ .fnp-ocf-checkbox__count {
    background: color-mix(in srgb, var(--fnp-primary, #0073aa) 15%, white);
    color: var(--fnp-primary, #0073aa);
}

/* ── Tag cloud ── */
.fnp-ocf-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fnp-ocf-tag-btn {
    border: 1px solid #d1d5db;
    background: none;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    color: inherit;
}
.fnp-ocf-tag-btn:hover {
    border-color: var(--fnp-primary, #0073aa);
    color: var(--fnp-primary, #0073aa);
}
.fnp-ocf-tag-btn--active {
    background: var(--fnp-primary, #0073aa);
    border-color: var(--fnp-primary, #0073aa);
    color: #fff;
}

/* ── Radio buttons ── */
.fnp-ocf-radios {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fnp-ocf-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 4px;
    transition: background .15s;
}
.fnp-ocf-radio:hover { background: var(--fnp-ocf-group-border); padding-inline: 6px; margin-inline: -6px; }
.fnp-ocf-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.fnp-ocf-radio__dot {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s;
}
.fnp-ocf-radio input:checked + .fnp-ocf-radio__dot {
    border-color: var(--fnp-primary, #0073aa);
}
.fnp-ocf-radio input:checked + .fnp-ocf-radio__dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--fnp-primary, #0073aa);
    border-radius: 50%;
}
.fnp-ocf-radio__label { flex: 1; line-height: 1.3; }

/* ── Date range ── */
.fnp-ocf-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fnp-ocf-date-range__field {
    flex: 1;
    min-width: 120px;
}
.fnp-ocf-date-range__label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 500;
}
.fnp-ocf-date-range__sep {
    color: #9ca3af;
    font-weight: 600;
    padding-top: 18px;
}
.fnp-ocf-date-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.85rem;
    transition: border-color .2s;
}
.fnp-ocf-date-input:focus {
    outline: none;
    border-color: var(--fnp-primary, #0073aa);
}

/* ── Panel footer ── */
.fnp-ocf-panel__footer {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--fnp-ocf-header-border);
    flex-shrink: 0;
}
.fnp-ocf-btn {
    flex: 1;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, filter .2s, opacity .2s;
    border: none;
    white-space: nowrap;
}
.fnp-ocf-btn--primary {
    background: var(--fnp-primary, #0073aa);
    color: #fff;
}
.fnp-ocf-btn--primary:hover { filter: brightness(.9); }
.fnp-ocf-btn--secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}
.fnp-ocf-btn--secondary:hover { background: #e5e7eb; }
.fnp-ocf-btn--ghost {
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
}
.fnp-ocf-btn--ghost:hover { background: #f9fafb; color: #374151; }
.fnp-ocf-btn--reset { flex: 0 0 auto; }

/* ── Loading state on panel ── */
.fnp-ocf-panel--loading .fnp-ocf-panel__body {
    pointer-events: none;
    opacity: .55;
}
.fnp-ocf-panel--loading .fnp-ocf-btn--apply::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fnp-spin .6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* ── Responsive: mobile bottom sheet override ── */
@media (max-width: 640px) {
    .fnp-ocf-panel--right,
    .fnp-ocf-panel--left {
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 88dvh;
        border-radius: var(--fnp-ocf-radius) var(--fnp-ocf-radius) 0 0;
        transform: translateY(108%);
        box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    }
    .fnp-ocf-panel--open.fnp-ocf-panel--right,
    .fnp-ocf-panel--open.fnp-ocf-panel--left {
        transform: translateY(0);
    }
}
.fnp-trending__title-text a {
    color: var(--fnp-text, #1a1a1a);
    text-decoration: none;
}
.fnp-trending__title-text a:hover { color: var(--fnp-primary, #0073aa); }

/* ── Category Carousel: current item ── */
.fnp-cat-carousel__item--current {
    border-color: var(--fnp-primary, #0073aa) !important;
    background: var(--fnp-primary, #0073aa) !important;
    color: #fff !important;
}
.fnp-cat-carousel__item--current .fnp-cat-carousel__name,
.fnp-cat-carousel__item--current .fnp-cat-carousel__count {
    color: #fff;
}

/* ── Additional entrance animations ── */
.fnp-fx-entrance-slide-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fnp-fx-entrance-zoom-out {
    opacity: 0;
    transform: scale(1.15);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fnp-fx-entrance-stretch {
    opacity: 0;
    transform: scaleX(0.7);
    transform-origin: left center;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Advanced hover extras ── */
.fnp-fx-hover-slide-title .fnp-item__title { transition: transform 0.3s ease; }
.fnp-fx-hover-slide-title:hover .fnp-item__title { transform: translateX(6px); }
.fnp-fx-hover-color-shift:hover { background: var(--fnp-bg-alt, #f8f8f8); }
.fnp-fx-hover-scale { transition: transform 0.25s ease; }
.fnp-fx-hover-scale:hover { transform: scale(1.02); }
.fnp-fx-hover-reveal .fnp-item__intro {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}
.fnp-fx-hover-reveal:hover .fnp-item__intro {
    max-height: 200px;
    opacity: 1;
}

/* ── Skeleton overlay (fnp-grid--loading) ── */
.fnp-grid--loading .fnp-skeleton { pointer-events: none; }
.fnp-grid--loading .fnp-skeleton .fnp-skeleton-image,
.fnp-grid--loading .fnp-skeleton .fnp-skeleton-text {
    animation: fnp-skeleton-pulse 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   ARCHIVE HEADER BLOCK  — CSS Custom Properties Edition
   ═══════════════════════════════════════════════════════════════ */

/* ── Base wrapper ── */
.fnp-archive-header {
    position: relative;
    overflow: hidden;
    background: var(--fnp-archive-bg, var(--fnp-bg, #f5f5f5));
    box-sizing: border-box;
    /* Border & shadow via PHP-injected vars */
    border-style:  var(--fnp-ah-border-style, none);
    border-width:  var(--fnp-ah-border-width, 0);
    border-color:  var(--fnp-ah-border-color, transparent);
    border-radius: var(--fnp-ah-border-radius, 0);
    box-shadow:    var(--fnp-ah-box-shadow, none);
}

/* ── Inner content container ── */
.fnp-archive-header__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
}

/* ── Prefix label ── */
.fnp-archive-header__prefix {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 6px;
}

/* ── Title — all typography via CSS vars ── */
.fnp-archive-header__name {
    font-family:    var(--fnp-ah-title-font, inherit);
    font-size:      var(--fnp-ah-title-size, clamp(1.5rem, 4vw, 2.8rem));
    font-weight:    var(--fnp-ah-title-weight, 700);
    line-height:    var(--fnp-ah-title-lh, 1.2);
    letter-spacing: var(--fnp-ah-title-ls, 0);
    text-transform: var(--fnp-ah-title-transform, none);
    color:          var(--fnp-ah-title-color, currentColor);
    margin: 0 0 12px;
}

/* ── Description ── */
.fnp-archive-header__desc {
    font-size:   var(--fnp-ah-desc-size, 1rem);
    font-weight: var(--fnp-ah-desc-weight, 400);
    line-height: var(--fnp-ah-desc-lh, 1.6);
    color:       var(--fnp-ah-desc-color, currentColor);
    opacity: 0.9;
    margin: 0 0 14px;
    max-width: 700px;
}
.fnp-archive-header__desc p { margin: 0; }

/* ── Count badge ── */
.fnp-archive-header__count {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--fnp-ah-count-radius, 20px);
    background:    var(--fnp-ah-count-bg, rgba(0,0,0,0.1));
    color:         var(--fnp-ah-count-color, currentColor);
    margin-top: 4px;
}

/* ── Image ── */
.fnp-archive-header__img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    display: block;
}
.fnp-archive-header__img--rounded { border-radius: 10px; }
.fnp-archive-header__img--circle  { border-radius: 50%; }
.fnp-archive-header__img--square  { border-radius: 0; }

/* ── Breadcrumbs inside archive header ── */
.fnp-archive-header .fnp-breadcrumbs {
    margin-bottom: 14px;
    font-size: 0.82rem;
    opacity: 0.75;
}

/* ───────────────── OVERLAY ───────────────── */
.fnp-archive-header__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--fnp-ah-overlay-bg, rgba(0,0,0,var(--fnp-overlay-opacity, 0.5)));
}

/* ───────────────── TEXT ALIGNMENT ───────────────── */
.fnp-archive-header--align-center .fnp-archive-header__inner,
.fnp-archive-header--align-center .fnp-archive-header__body { text-align: center; }
.fnp-archive-header--align-center .fnp-archive-header__desc { margin-left: auto; margin-right: auto; }
.fnp-archive-header--align-right  .fnp-archive-header__inner,
.fnp-archive-header--align-right  .fnp-archive-header__body { text-align: right; }
.fnp-archive-header--align-right  .fnp-archive-header__desc { margin-left: auto; }

/* ───────────────── LAYOUT: DEFAULT ───────────────── */
.fnp-archive-header--default {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: var(--fnp-ah-pt, 32px) var(--fnp-ah-pr, 32px) var(--fnp-ah-pb, 32px) var(--fnp-ah-pl, 32px);
}
.fnp-archive-header--default .fnp-archive-header__media { flex: 0 0 140px; }
.fnp-archive-header--default .fnp-archive-header__inner { flex: 1; padding: 0; }

/* ───────────────── LAYOUT: HERO ───────────────── */
.fnp-archive-header--hero {
    background-image:    var(--fnp-ah-bg-img, none);
    background-size:     var(--fnp-ah-bg-size, cover);
    background-position: var(--fnp-ah-bg-pos, center center);
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}
.fnp-archive-header--hero .fnp-archive-header__inner {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 70%, transparent 100%);
    color: #fff;
    width: 100%;
    padding: var(--fnp-ah-pt, 48px) var(--fnp-ah-pr, 40px) var(--fnp-ah-pb, 36px) var(--fnp-ah-pl, 40px);
}
.fnp-archive-header--hero .fnp-archive-header__count { background: rgba(255,255,255,0.2); color: #fff; }
.fnp-archive-header--hero .fnp-breadcrumbs,
.fnp-archive-header--hero .fnp-breadcrumbs a         { color: rgba(255,255,255,0.8); }

/* ───────────────── LAYOUT: OVERLAY ───────────────── */
.fnp-archive-header--overlay {
    background-image:    var(--fnp-ah-bg-img, none);
    background-size:     var(--fnp-ah-bg-size, cover);
    background-position: var(--fnp-ah-bg-pos, center center);
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fnp-archive-header--overlay .fnp-archive-header__inner {
    color: #fff;
    max-width: 860px;
    padding: var(--fnp-ah-pt, 40px) var(--fnp-ah-pr, 32px) var(--fnp-ah-pb, 40px) var(--fnp-ah-pl, 32px);
}
.fnp-archive-header--overlay .fnp-archive-header__count  { background: rgba(255,255,255,0.2); color: #fff; }
.fnp-archive-header--overlay .fnp-breadcrumbs,
.fnp-archive-header--overlay .fnp-breadcrumbs a          { color: rgba(255,255,255,0.8); }

/* ───────────────── LAYOUT: BG-IMAGE ───────────────── */
.fnp-archive-header--bg-image {
    background-image:    var(--fnp-ah-bg-img, none);
    background-size:     var(--fnp-ah-bg-size, cover);
    background-position: var(--fnp-ah-bg-pos, center center);
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}
.fnp-archive-header--bg-image .fnp-archive-header__inner {
    color: #fff;
    padding: var(--fnp-ah-pt, 52px) var(--fnp-ah-pr, 48px) var(--fnp-ah-pb, 52px) var(--fnp-ah-pl, 48px);
}
.fnp-archive-header--bg-image .fnp-archive-header__count { background: rgba(255,255,255,0.2); color: #fff; }
.fnp-archive-header--bg-image .fnp-breadcrumbs,
.fnp-archive-header--bg-image .fnp-breadcrumbs a         { color: rgba(255,255,255,0.8); }

/* ───────────────── FALLBACK: NO IMAGE ───────────────── */
.fnp-archive-header--no-image .fnp-archive-header__media { display: none; }
.fnp-archive-header--no-image.fnp-archive-header--hero,
.fnp-archive-header--no-image.fnp-archive-header--overlay,
.fnp-archive-header--no-image.fnp-archive-header--bg-image { background-image: none !important; }
.fnp-archive-header--no-image.fnp-archive-header--hero .fnp-archive-header__inner { background: none; color: inherit; }
.fnp-archive-header--no-image.fnp-archive-header--overlay .fnp-archive-header__inner,
.fnp-archive-header--no-image.fnp-archive-header--bg-image .fnp-archive-header__inner { color: inherit; }
.fnp-archive-header--no-image .fnp-archive-header__overlay { display: none; }

/* ───────────────── RESPONSIVE VISIBILITY ───────────────── */
@media (min-width: 1025px)                       { .fnp-hide-desktop { display: none !important; } }
@media (min-width: 601px) and (max-width: 1024px){ .fnp-hide-tablet  { display: none !important; } }
@media (max-width: 600px)                        { .fnp-hide-mobile  { display: none !important; } }

/* ───────────────── BOX SHADOW PRESETS ───────────────── */
.fnp-archive-header[style*="--fnp-ah-box-shadow:sm"] { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); }
.fnp-archive-header[style*="--fnp-ah-box-shadow:md"] { box-shadow: 0 4px 6px rgba(0,0,0,0.1),  0 2px 4px rgba(0,0,0,0.08); }
.fnp-archive-header[style*="--fnp-ah-box-shadow:lg"] { box-shadow: 0 10px 15px rgba(0,0,0,0.1),0 4px 6px rgba(0,0,0,0.08); }
.fnp-archive-header[style*="--fnp-ah-box-shadow:xl"] { box-shadow: 0 20px 25px rgba(0,0,0,0.1),0 10px 10px rgba(0,0,0,0.06); }

/* ───────────────── RESPONSIVE (breakpoints) ───────────────── */
@media (max-width: 600px) {
    .fnp-archive-header--default {
        flex-direction: column;
    }
    .fnp-archive-header--default .fnp-archive-header__media { flex: none; }
}

/* ----------------------------------------------------------
   16. Sticky Sidebar
   ---------------------------------------------------------- */

/* ── Block wrapper ── */
.fnp-sticky-sidebar {
    position: sticky;
    top: var(--fnp-ss-top, 30px);
    z-index: var(--fnp-ss-z, 10);
    display: flex;
    flex-direction: column;
    gap: var(--fnp-ss-gap, 24px);
    align-self: start;           /* critical: must be in a flex/grid with align-items != stretch */
    max-height: calc(100dvh - var(--fnp-ss-top, 30px) - 16px);
    /* overflow-x cannot be 'visible' when overflow-y is 'auto' (CSS spec).
       Use clip to avoid clipping children while still allowing scroll. */
    overflow-y: auto;
    overflow-x: clip;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
.fnp-sticky-sidebar::-webkit-scrollbar            { width: 4px; }
.fnp-sticky-sidebar::-webkit-scrollbar-track      { background: transparent; }
.fnp-sticky-sidebar::-webkit-scrollbar-thumb      { background: #d1d5db; border-radius: 2px; }

/* ── Desktop-only mode: disable sticky below breakpoint ── */
/* The JS writes a <style> tag when onlyDesktop is true.
   CSS-only fallback for common breakpoint (1025px): */
@media (max-width: 1024px) {
    .fnp-sticky-sidebar--desktop-only {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* ── Stop-at-selector: JS adds --pinned when stop element reaches viewport ── */
.fnp-sticky-sidebar--pinned {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
}

/* ── Editor preview ── */
.fnp-sticky-sidebar-editor {
    border: 2px dashed rgba(0, 115, 170, 0.25);
    border-radius: 8px;
    padding: 12px;
    background: rgba(0, 115, 170, 0.02);
    min-height: 80px;
}


/* ═══════════════════════════════════════════════════════════════
   17. POST NAVIGATION PRO
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer wrapper = CSS container (children can use @container) ── */
.fnp-post-navigation {
    container-type: inline-size;
    container-name: fnp-pn;
    margin: 32px 0;
}

/* ── Inner flex row ── */
.fnp-pn__inner {
    display: flex;
    gap: 16px;
}

/* ── Items ── */
.fnp-pn__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--fnp-pn-pad-v, 14px) var(--fnp-pn-pad-h, 16px);
    border: var(--fnp-pn-border-w, 1px) solid var(--fnp-pn-border, #e5e7eb);
    border-radius: var(--fnp-pn-radius, 10px);
    background: var(--fnp-pn-bg, #fff);
    text-decoration: none;
    color: var(--fnp-pn-text, inherit);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
    min-width: 0;
}
.fnp-pn__item:hover {
    border-color: var(--fnp-pn-accent, #007cba);
    box-shadow: 0 4px 12px rgba(0,124,186,.12);
    transform: translateY(-2px);
    text-decoration: none;
    background: var(--fnp-pn-hover-bg, #fff);
    color: var(--fnp-pn-hover-text, inherit);
}
.fnp-pn__item--prev { flex-direction: row; }
.fnp-pn__item--next { flex-direction: row-reverse; text-align: right; }

/* ── Arrow ── */
.fnp-pn__arrow {
    flex-shrink: 0;
    font-size: 1.3em;
    color: var(--fnp-pn-accent, #007cba);
    line-height: 1;
    transition: transform 0.2s;
}
.fnp-pn__item--prev:hover .fnp-pn__arrow { transform: translateX(-3px); }
.fnp-pn__item--next:hover .fnp-pn__arrow { transform: translateX(3px); }

/* ── Thumbnail ── */
.fnp-pn__thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--fnp-pn-thumb-radius, 6px);
    overflow: hidden;
    display: block;
    transition: opacity 0.2s;
}
.fnp-pn__item:hover .fnp-pn__thumb { opacity: 0.9; }
.fnp-pn__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Body text ── */
.fnp-pn__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fnp-pn__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
    line-height: 1;
}
.fnp-pn__cat a {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--fnp-pn-accent, #007cba);
    text-decoration: none;
    line-height: 1;
}
.fnp-pn__cat a:hover { text-decoration: underline; }
.fnp-pn__title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--fnp-pn-text, #111827);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.fnp-pn__item:hover .fnp-pn__title { color: var(--fnp-pn-accent, #007cba); }

/* ── Layout: vertical ── */
.fnp-post-navigation--vertical .fnp-pn__inner {
    flex-direction: column;
}
.fnp-post-navigation--vertical .fnp-pn__item--next {
    flex-direction: row;
    text-align: left;
}

/* ── Layout: compact (arrows only — thumb/cat/title hidden by CSS) ── */
.fnp-post-navigation--compact .fnp-pn__item {
    flex: 0 0 auto;
    padding: 10px 20px;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 8px;
}
.fnp-post-navigation--compact .fnp-pn__thumb,
.fnp-post-navigation--compact .fnp-pn__cat,
.fnp-post-navigation--compact .fnp-pn__title { display: none; }

/* ── Responsive: container query on .fnp-pn__inner (descendant of container) ── */
@container fnp-pn (max-width: 520px) {
    .fnp-pn__inner {
        flex-direction: column;
    }
    .fnp-pn__item--next {
        flex-direction: row;
        text-align: left;
    }
    .fnp-pn__thumb { width: 52px; height: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 18 — FNP INLINE RELATED (Pro Edition)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables (defaults; overridden per-block via PHP scoped style tag) ── */
.fnp-inline-related {
    --fnp-ir-accent:     #0073aa;
    --fnp-ir-bg:         transparent;
    --fnp-ir-text:       inherit;
    --fnp-ir-card-bg:    #ffffff;
    --fnp-ir-hover-bg:   #f4f6f8;
    --fnp-ir-hover-text: var(--fnp-ir-accent);
    --fnp-ir-border:     #e5e7eb;
    --fnp-ir-radius:     10px;
    --fnp-ir-border-w:   1px;
    --fnp-ir-gap:        1.25rem;
    --fnp-ir-pad-v:      0px;
    --fnp-ir-pad-h:      0px;
    container-type:  inline-size;
    container-name:  fnp-ir;
    background:      var(--fnp-ir-bg);
    color:           var(--fnp-ir-text);
    margin:          2rem 0;
    padding:         var(--fnp-ir-pad-v) var(--fnp-ir-pad-h);
    border-radius:   4px;
}

/* ── Heading ── */
.fnp-ir__heading {
    font-size:      1.05rem;
    font-weight:    700;
    margin:         0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-left:    3px solid var(--fnp-ir-accent);
    padding-left:   0.65rem;
    color:          var(--fnp-ir-text);
}

/* ── Grid wrapper — padding allows translateY not to be clipped ── */
.fnp-ir__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--fnp-ir-gap);
    /* breathing room: card shadow + translateY(-4px) won't clip */
    padding:               4px 2px 10px;
    overflow:              visible;
}

/* 2 columns (explicit) */
.fnp-inline-related--cols-2 .fnp-ir__grid { grid-template-columns: repeat(2, 1fr); }
/* 3 columns */
.fnp-inline-related--cols-3 .fnp-ir__grid { grid-template-columns: repeat(3, 1fr); }
/* 4 columns */
.fnp-inline-related--cols-4 .fnp-ir__grid { grid-template-columns: repeat(4, 1fr); }
/* list layout */
.fnp-inline-related--list .fnp-ir__grid {
    grid-template-columns: 1fr;
    padding:               0;
}
/* minimal layout */
.fnp-inline-related--minimal .fnp-ir__grid {
    grid-template-columns: 1fr;
    gap:                   0;
    padding:               0;
    counter-reset:         fnp-ir-counter;
}

/* ── Card ── */
.fnp-ir__card {
    background:    var(--fnp-ir-card-bg);
    border:        var(--fnp-ir-border-w) solid var(--fnp-ir-border);
    border-radius: var(--fnp-ir-radius);
    /* overflow: visible — prevents clipping of translateY hover animation */
    overflow:      visible;
    transition:    transform 0.22s ease, box-shadow 0.22s ease, background-color 0.2s;
    will-change:   transform;
    position:      relative;
}
.fnp-ir__card:hover {
    transform:        translateY(-4px);
    box-shadow:       0 12px 30px rgba(0, 0, 0, 0.11);
    background-color: var(--fnp-ir-hover-bg);
    z-index:          1;
}
/* list: no vertical lift, only shadow */
.fnp-inline-related--list .fnp-ir__card {
    border-radius: var(--fnp-ir-radius);
    overflow:      visible;
}
.fnp-inline-related--list .fnp-ir__card:hover {
    transform:  none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}
/* minimal: no background, border-bottom separator, CSS counter number */
.fnp-inline-related--minimal .fnp-ir__card {
    background:    transparent;
    border:        none;
    border-bottom: 1px solid var(--fnp-ir-border);
    border-radius: 0;
    overflow:      visible;
    counter-increment: fnp-ir-counter;
}
.fnp-inline-related--minimal .fnp-ir__card:last-child { border-bottom: none; }
.fnp-inline-related--minimal .fnp-ir__card:hover {
    transform:        none;
    box-shadow:       none;
    background-color: transparent;
}
/* Minimal: numbered counter before each article */
.fnp-inline-related--minimal .fnp-ir__card::before {
    content:        counter(fnp-ir-counter, decimal-leading-zero);
    position:       absolute;
    left:           0;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      1.4rem;
    font-weight:    800;
    line-height:    1;
    color:          var(--fnp-ir-accent);
    opacity:        0.25;
    pointer-events: none;
    select:         none;
}

/* ── Link: clips thumb within card shape ── */
.fnp-ir__link {
    display:         flex;
    flex-direction:  column;
    text-decoration: none;
    color:           var(--fnp-ir-text);
    height:          100%;
    border-radius:   var(--fnp-ir-radius);
    /* overflow: hidden on link clips thumb (NOT on card, to avoid animation clip) */
    overflow:        hidden;
}
/* WCAG 2.1 focus-visible */
.fnp-ir__link:focus-visible {
    outline:        3px solid var(--fnp-ir-accent);
    outline-offset: 3px;
    border-radius:  var(--fnp-ir-radius);
}
/* list layout: horizontal */
.fnp-inline-related--list .fnp-ir__link {
    flex-direction: row;
    align-items:    flex-start;
    gap:            0.75rem;
    padding:        0.75rem;
    overflow:       hidden;
    border-radius:  var(--fnp-ir-radius);
}
/* minimal: text only, no overflow clip */
.fnp-inline-related--minimal .fnp-ir__link {
    border-radius: 0;
    overflow:      visible;
    padding-left:  2.5rem; /* space for the counter */
}

/* ── Thumbnail ── */
.fnp-ir__thumb {
    flex-shrink:  0;
    overflow:     hidden;
    aspect-ratio: 16 / 9;
    position:     relative;
}
.fnp-ir__thumb img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform 0.38s ease;
}
.fnp-ir__card:hover .fnp-ir__thumb img { transform: scale(1.06); }
/* list layout thumb */
.fnp-inline-related--list .fnp-ir__thumb {
    width:         110px;
    flex-shrink:   0;
    aspect-ratio:  4 / 3;
    border-radius: calc(var(--fnp-ir-radius) * 0.5);
    overflow:      hidden;
}
/* minimal: no thumbnail */
.fnp-inline-related--minimal .fnp-ir__thumb { display: none; }

/* ── Body ── */
.fnp-ir__body {
    padding:        0.85rem 1rem;
    display:        flex;
    flex-direction: column;
    gap:            0.28rem;
    flex:           1;
    min-width:      0; /* prevent text overflow in flex */
}
.fnp-inline-related--list    .fnp-ir__body { padding: 0; flex: 1; }
.fnp-inline-related--minimal .fnp-ir__body { padding: 0.6rem 0; }

/* ── Category / taxonomy badge ── */
.fnp-ir__cat {
    display:         inline-block;
    font-size:       0.68rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    color:           var(--fnp-ir-accent);
    text-decoration: none;
    line-height:     1;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    max-width:       100%;
}
.fnp-ir__cat:hover { text-decoration: underline; }

/* ── Title ── */
.fnp-ir__title {
    font-size:           0.9rem;
    font-weight:         700;
    line-height:         1.35;
    margin:              0;
    color:               var(--fnp-ir-text);
    display:             -webkit-box;
    -webkit-line-clamp:  3;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
    transition:          color 0.2s;
}
.fnp-ir__card:hover .fnp-ir__title        { color: var(--fnp-ir-hover-text); }
.fnp-inline-related--list    .fnp-ir__title { -webkit-line-clamp: 2; }
.fnp-inline-related--minimal .fnp-ir__title { -webkit-line-clamp: 2; font-size: 0.88rem; }

/* ── Intro ── */
.fnp-ir__intro {
    font-size:           0.79rem;
    line-height:         1.55;
    margin:              0;
    opacity:             0.72;
    color:               var(--fnp-ir-text);
    display:             -webkit-box;
    -webkit-line-clamp:  3;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
}

/* ── Date ── */
.fnp-ir__date {
    display:        block;
    font-size:      0.68rem;
    font-weight:    500;
    letter-spacing: 0.02em;
    opacity:        0.58;
    margin-top:     auto;
    padding-top:    0.3rem;
}

/* ── Container queries: Responsive ── */
@container fnp-ir (max-width: 640px) {
    .fnp-ir__grid,
    .fnp-inline-related--cols-3 .fnp-ir__grid,
    .fnp-inline-related--cols-4 .fnp-ir__grid     { grid-template-columns: 1fr 1fr; }
}
@container fnp-ir (max-width: 400px) {
    .fnp-ir__grid,
    .fnp-inline-related--cols-3 .fnp-ir__grid,
    .fnp-inline-related--cols-4 .fnp-ir__grid     { grid-template-columns: 1fr; }
    .fnp-inline-related--list .fnp-ir__link       { flex-direction: column; }
    .fnp-inline-related--list .fnp-ir__thumb      { width: 100%; aspect-ratio: 16 / 9; }
}
/* ----------------------------------------------------------
   Section 19 — Article Header Pro (fnp-article-header)
   ---------------------------------------------------------- */
.fnp-article-header {
    --fnp-ah-bg:          transparent;
    --fnp-ah-text:        inherit;
    --fnp-ah-accent:      #c0392b;
    --fnp-ah-overlay:     rgba(0,0,0,.45);
    --fnp-ah-border:      transparent;
    --fnp-ah-border-w:    0;
    --fnp-ah-radius:      0;
    --fnp-ah-max-width:   100%;
    --fnp-ah-pad-v:       2rem;
    --fnp-ah-pad-h:       0;
    --fnp-ah-title-size:  clamp(2rem, 5vw, 3.5rem);
    --fnp-ah-title-weight:800;
    --fnp-ah-family:      inherit;
    --fnp-ah-title-color: inherit;
    --fnp-ah-title-lh:    1.1;
    --fnp-ah-title-ls:    -.02em;
    --fnp-ah-title-max:   100%;
    --fnp-ah-sub-size:    1.15rem;
    --fnp-ah-sub-color:   #555;
    --fnp-ah-sub-weight:  400;
    --fnp-ah-sub-spacing: .6rem;
    --fnp-ah-meta-color:  #888;
    --fnp-ah-meta-size:   .85rem;
    background-color: var(--fnp-ah-bg);
    color:            var(--fnp-ah-text);
    padding:          var(--fnp-ah-pad-v) var(--fnp-ah-pad-h);
    border:           var(--fnp-ah-border-w) solid var(--fnp-ah-border);
    border-radius:    var(--fnp-ah-radius);
    container-type:   inline-size;
    container-name:   fnp-ah;
}
.fnp-ah__inner {
    max-width: var(--fnp-ah-max-width);
    width:     100%;
}
/* Alignment */
.fnp-ah--align-center .fnp-ah__inner { margin-inline: auto; text-align: center; }
.fnp-ah--align-right  .fnp-ah__inner { margin-inline-start: auto; text-align: right; }

/* Title */
.fnp-ah__title {
    font-size:      var(--fnp-ah-title-size);
    font-weight:    var(--fnp-ah-title-weight);
    color:          var(--fnp-ah-title-color);
    line-height:    var(--fnp-ah-title-lh);
    letter-spacing: var(--fnp-ah-title-ls);
    max-width:      var(--fnp-ah-title-max);
    margin:         0 0 .35em;
    font-family:    var(--fnp-ah-family);
}
/* Subtitle */
.fnp-ah__subtitle {
    font-size:    var(--fnp-ah-sub-size);
    color:        var(--fnp-ah-sub-color);
    font-weight:  var(--fnp-ah-sub-weight);
    margin:       0 0 var(--fnp-ah-sub-spacing);
    line-height:  1.4;
    font-family:  var(--fnp-ah-family);
}
/* Meta bar */
.fnp-ah__meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         .4rem .7rem;
    font-size:   var(--fnp-ah-meta-size);
    color:       var(--fnp-ah-meta-color);
    margin-top:  .6rem;
}
.fnp-ah__meta-item   { display: inline-flex; align-items: center; gap: .25rem; }
.fnp-ah__icon        { font-size: .9em; opacity: .7; }
.fnp-ah__sep         { opacity: .4; }

/* Section / category labels before title */
.fnp-ah__labels {
    display: flex; gap: .4rem; flex-wrap: wrap;
    margin-bottom: .6rem;
}
.fnp-ah__label {
    display: inline-block; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .2em .75em; border-radius: 3px; line-height: 1.5;
}
.fnp-ah__section  { background: #2c3e50; color: #fff; }
.fnp-ah__category { background: var(--fnp-ah-accent, #c0392b); color: #fff; }

/* Title link */
.fnp-ah__title-link { color: inherit; text-decoration: none; }
.fnp-ah__title-link:hover { text-decoration: underline; }

/* Layouts */
/* ── newspaper ── full width, left-aligned + decorative top-border */
.fnp-ah--newspaper                { --fnp-ah-title-size: clamp(2.2rem, 6vw, 4rem); border-top: 4px solid var(--fnp-ah-accent); padding-top: 1.25rem; }
.fnp-ah--newspaper .fnp-ah__title { font-family: Georgia, 'Times New Roman', serif; }

/* ── magazine ── large colored accent line + compact spacing */
.fnp-ah--magazine   { --fnp-ah-title-size: clamp(1.8rem, 4.5vw, 3rem); --fnp-ah-title-ls: -.03em; padding-bottom: 1.5rem; border-top: 3px solid var(--fnp-ah-accent); padding-top: 1rem; border-bottom: 1px solid rgba(0,0,0,.08); }

/* ── minimal ── stripped back, smaller title */
.fnp-ah--minimal    { --fnp-ah-title-size: clamp(1.5rem, 3.5vw, 2.5rem); --fnp-ah-title-weight: 700; padding-bottom: .75rem; border-left: 4px solid var(--fnp-ah-accent); padding-left: .85rem; }

/* ── hero ── full-bleed image with overlay */
.fnp-ah--hero {
    position:         relative;
    min-height:       60vh;
    background-image: var(--fnp-ah-hero-img,none);
    background-size:  cover;
    background-position: center;
    display:          flex;
    align-items:      flex-end;
    padding:          3rem 2rem;
    color:            #fff;
    border-top:       4px solid var(--fnp-ah-accent);
}
.fnp-ah--hero::before {
    content:    '';
    position:   absolute; inset: 0;
    background: var(--fnp-ah-overlay);
}
.fnp-ah--hero .fnp-ah__inner  { position: relative; z-index: 1; }
.fnp-ah--hero .fnp-ah__title  { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.fnp-ah--hero .fnp-ah__subtitle { color: rgba(255,255,255,.85); }
.fnp-ah--hero .fnp-ah__meta   { color: rgba(255,255,255,.7); }

/* ── centered-elegant ── NYT/Vogue-inspired centred */
.fnp-ah--centered-elegant .fnp-ah__inner { margin-inline: auto; text-align: center; }
.fnp-ah--centered-elegant              { --fnp-ah-title-size: clamp(2rem, 5.5vw, 4rem); --fnp-ah-title-weight: 700; --fnp-ah-title-ls: .02em; padding-top: 1rem; border-top: 2px solid var(--fnp-ah-accent); }
.fnp-ah--centered-elegant .fnp-ah__title    { font-family: Georgia, serif; }
.fnp-ah--centered-elegant .fnp-ah__subtitle { font-style: italic; }
.fnp-ah--centered-elegant .fnp-ah__meta     { justify-content: center; }

@container fnp-ah (max-width:600px) {
    .fnp-ah__title { font-size: clamp(1.4rem, 7vw, 2.2rem); }
}

/* ----------------------------------------------------------
   Section 20 — Intro Pro (fnp-intro-pro)
   ---------------------------------------------------------- */
.fnp-intro-pro {
    --fnp-intro-color:    inherit;
    --fnp-intro-bg:       transparent;
    --fnp-intro-size:     1.25rem;
    --fnp-intro-weight:   500;
    --fnp-intro-lh:       1.65;
    --fnp-intro-max:      740px;
    --fnp-intro-mt:       1.5rem;
    --fnp-intro-mb:       1.5rem;
    --fnp-intro-pad-v:    0;
    --fnp-intro-pad-h:    0;
    --fnp-intro-bl-color: #c0392b;
    --fnp-intro-bl-width: 4px;
    --fnp-intro-family:   inherit;
    --fnp-intro-fstyle:   normal;
    --fnp-intro-ls:       0;
    display:           block;
    max-width:         var(--fnp-intro-max);
    background-color:  var(--fnp-intro-bg);
    padding:           var(--fnp-intro-pad-v) var(--fnp-intro-pad-h);
    margin-top:        var(--fnp-intro-mt);
    margin-bottom:     var(--fnp-intro-mb);
}
.fnp-intro__icon { margin-right: .4rem; font-size: 1.1em; }
.fnp-intro__text {
    margin:         0;
    font-size:      var(--fnp-intro-size);
    font-weight:    var(--fnp-intro-weight);
    line-height:    var(--fnp-intro-lh);
    color:          var(--fnp-intro-color);
    font-family:    var(--fnp-intro-family, inherit);
    font-style:     var(--fnp-intro-fstyle, normal);
    letter-spacing: var(--fnp-intro-ls, 0);
}

/* Border-left modifier */
.fnp-intro--border-left {
    border-left:  var(--fnp-intro-bl-width) solid var(--fnp-intro-bl-color);
    padding-left: 1.25rem;
}

/* Presets — vars en el bloque raíz para que los overrides del usuario (#id) siempre ganen */
/* newspaper: bold, serif, full-width */
.fnp-intro--newspaper { --fnp-intro-size: clamp(1.1rem, 2vw, 1.35rem); --fnp-intro-weight: 600; --fnp-intro-family: Georgia, 'Times New Roman', serif; }
/* magazine: larger, lighter, italic */
.fnp-intro--magazine  { --fnp-intro-size: clamp(1.15rem, 2.2vw, 1.5rem); --fnp-intro-weight: 300; --fnp-intro-fstyle: italic; --fnp-intro-ls: .01em; }
/* elegant: NatGeo / NYT style */
.fnp-intro--elegant   { --fnp-intro-size: 1.2rem; --fnp-intro-fstyle: italic; --fnp-intro-ls: .02em; --fnp-intro-color: #333; }
/* minimal: plain, clean */
.fnp-intro--minimal   { --fnp-intro-size: 1rem; --fnp-intro-weight: 400; --fnp-intro-color: #555; }

/* ----------------------------------------------------------
   Section 21 — Body Pro (fnp-body-pro)
   ---------------------------------------------------------- */
.fnp-body-pro {
    --fnp-body-color:      inherit;
    --fnp-body-bg:         transparent;
    --fnp-body-size:       1.0625rem;
    --fnp-body-lh:         1.78;
    --fnp-body-para-gap:   1.4em;
    --fnp-body-ls:         .01em;
    --fnp-body-max:        720px;
    --fnp-body-max-mobile: 100%;
    --fnp-body-link:       #0066cc;
    --fnp-body-link-hover: #c0392b;
    --fnp-body-heading:    inherit;
    --fnp-body-progress:   #c0392b;
    --fnp-body-pad-v:      0;
    --fnp-body-pad-h:      0;
    --fnp-body-family:     inherit;
    --fnp-body-accent:     #c0392b;
    background-color: var(--fnp-body-bg);
    padding:          var(--fnp-body-pad-v) var(--fnp-body-pad-h);
    container-type:   inline-size;
    container-name:   fnp-body;
}
.fnp-body__content {
    max-width:      var(--fnp-body-max);
    font-size:      var(--fnp-body-size);
    line-height:    var(--fnp-body-lh);
    letter-spacing: var(--fnp-body-ls);
    color:          var(--fnp-body-color);
    font-family:    var(--fnp-body-family, inherit);
    margin-inline:  auto;
    margin-inline-start: 0;
}
.fnp-body__content p {
    margin-top:    0;
    margin-bottom: var(--fnp-body-para-gap);
}
.fnp-body__content a              { color: var(--fnp-body-link); text-decoration: underline; }
.fnp-body__content a:hover        { color: var(--fnp-body-link-hover); }
.fnp-body__content h2,.fnp-body__content h3,
.fnp-body__content h4,.fnp-body__content h5,
.fnp-body__content h6 { color: var(--fnp-body-heading); }

/* Drop cap */
.fnp-body--dropcap .fnp-body__content > p:first-of-type::first-letter,
.fnp-body--dropcap .fnp-body__content p:first-child::first-letter {
    float:         left;
    font-size:     4.5em;
    line-height:   .8;
    font-weight:   800;
    margin:        .05em .12em 0 0;
    color:         var(--fnp-body-accent);
    font-family:   var(--fnp-body-family, Georgia, serif);
}
/* First paragraph highlight */
.fnp-body--first-hl .fnp-body__content > p:first-of-type {
    font-size:   1.12em;
    font-weight: 600;
    color:       #222;
}
/* Indent */
.fnp-body--indent .fnp-body__content p { text-indent: 1.5em; }
.fnp-body--indent .fnp-body__content p:first-of-type { text-indent: 0; }

/* Multi-column */
.fnp-body--cols-2 .fnp-body__content { columns: 2; column-gap: 2.5rem; max-width: 100%; }
.fnp-body--cols-3 .fnp-body__content { columns: 3; column-gap: 2rem;   max-width: 100%; }
.fnp-body--cols-2 .fnp-body__content > *,
.fnp-body--cols-3 .fnp-body__content > * { break-inside: avoid; }

/* Presets — vars en el bloque raíz para que los overrides del usuario (#id) siempre ganen */
.fnp-body--newspaper  { --fnp-body-size: clamp(.95rem, 1.5vw, 1.05rem); --fnp-body-lh: 1.65;  --fnp-body-family: Georgia, 'Times New Roman', serif; }
.fnp-body--magazine   { --fnp-body-size: 1.1rem;  --fnp-body-ls: .01em; --fnp-body-lh: 1.85; }
.fnp-body--blog-premium { --fnp-body-size: 1.0625rem; --fnp-body-lh: 1.78; }
.fnp-body--editorial  { --fnp-body-size: clamp(1rem, 1.8vw, 1.125rem); --fnp-body-lh: 1.8; --fnp-body-family: Georgia, 'Times New Roman', serif; --fnp-body-para-gap: 1.6em; --fnp-body-max: 780px; }
.fnp-body--compact    { --fnp-body-size: .9375rem; --fnp-body-lh: 1.55; --fnp-body-para-gap: 1em; --fnp-body-max: 640px; }

/* Progress track */
.fnp-body__progress-track {
    position: fixed; top: 0; left: 0; right: 0;
    height:   3px;
    background: rgba(0,0,0,.08);
    z-index:  9999;
}
.fnp-body__progress-bar {
    height:     100%;
    width:       0%;
    background: var(--fnp-body-progress);
    transition: width .1s linear;
    will-change: width;
}

/* Reading info */
.fnp-body__reading-info {
    display:     flex;
    gap:         1.2rem;
    font-size:   .82rem;
    color:       #888;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom:  1px solid rgba(0,0,0,.07);
}
.fnp-body__reading-time,
.fnp-body__word-count { display: inline-flex; align-items: center; gap: .3rem; }

/* Dark mode */
.fnp-body--dark {
    --fnp-body-color: #e8e6e3;
    --fnp-body-bg:    #1a1a1a;
    --fnp-body-link:  #7bafd4;
}

/* Reading mode */
.fnp-body--reading-mode { max-width: 640px; margin-inline: auto; }

@container fnp-body (max-width:640px) {
    .fnp-body--cols-2 .fnp-body__content,
    .fnp-body--cols-3 .fnp-body__content { columns: 1; }
    .fnp-body__content { max-width: var(--fnp-body-max-mobile); }
}

/* ----------------------------------------------------------
   Section 22 — Highlight Quote Pro (fnp-highlight-quote)
   ---------------------------------------------------------- */
.fnp-highlight-quote {
    --fnp-hq-color:    #222;
    --fnp-hq-bg:       transparent;
    --fnp-hq-accent:   #c0392b;
    --fnp-hq-border:   currentColor;
    --fnp-hq-border-w: 0px;
    --fnp-hq-radius:   0;
    --fnp-hq-size:     1.4rem;
    --fnp-hq-weight:   500;
    --fnp-hq-lh:       1.55;
    --fnp-hq-max:      680px;
    --fnp-hq-pad-v:    1.75rem;
    --fnp-hq-pad-h:    2rem;
    --fnp-hq-family:   inherit;
    --fnp-hq-ls:       0;
    max-width:      var(--fnp-hq-max);
    background:     var(--fnp-hq-bg);
    border-radius:  var(--fnp-hq-radius);
    border:         var(--fnp-hq-border-w) solid var(--fnp-hq-border);
    padding:        0;
    margin:         2rem 0;
}
.fnp-hq--centered { margin-inline: auto; text-align: center; }

.fnp-hq__quote {
    margin: 0;
    padding: var(--fnp-hq-pad-v) var(--fnp-hq-pad-h);
    position: relative;
}
.fnp-hq__text {
    font-size:      var(--fnp-hq-size);
    font-weight:    var(--fnp-hq-weight);
    line-height:    var(--fnp-hq-lh);
    color:          var(--fnp-hq-color);
    font-family:    var(--fnp-hq-family, inherit);
    letter-spacing: var(--fnp-hq-ls, 0);
    margin:         0;
}
.fnp-hq__caption {
    padding:    .5rem var(--fnp-hq-pad-h) var(--fnp-hq-pad-v);
    font-size:  .85rem;
    opacity:    .65;
    font-style: normal;
}

/* Decorative quotes */
.fnp-hq--deco .fnp-hq__quote::before {
    content:     '"';
    display:     block;
    font-size:   5rem;
    line-height: .7;
    color:       var(--fnp-hq-accent);
    opacity:     .25;
    font-family: Georgia, serif;
    font-weight: 900;
    margin-bottom: .2rem;
}

/* Side border */
.fnp-hq--side-border .fnp-hq__quote {
    border-left: 5px solid var(--fnp-hq-accent);
    padding-left: 1.5rem;
}

/* Shadow */
.fnp-hq--shadow { box-shadow: 0 8px 32px rgba(0,0,0,.10); }

/* Styles — vars en el bloque raíz para que los overrides del usuario (#id) siempre ganen */
/* national-geographic: bold accent line + bold text */
.fnp-hq--national-geographic {
    background:      #f9f5ee;
    border-top:      5px solid #f2b600;
    --fnp-hq-size:   clamp(1.3rem, 3vw, 1.8rem);
    --fnp-hq-weight: 700;
    --fnp-hq-color:  #1a1a1a;
}
.fnp-hq--national-geographic .fnp-hq__caption { color: #555; }

/* newspaper: serif, balanced */
.fnp-hq--newspaper {
    border-left:     var(--fnp-hq-border-w, 4px) solid var(--fnp-hq-border, #222);
    padding-left:    0;
    --fnp-hq-family: Georgia, serif;
}
.fnp-hq--newspaper .fnp-hq__quote { padding-left: 1.5rem; }

/* modern-magazine: minimal, large typographic */
.fnp-hq--modern-magazine {
    --fnp-hq-size:   clamp(1.5rem, 4vw, 2.5rem);
    --fnp-hq-weight: 300;
    --fnp-hq-ls:     .02em;
    --fnp-hq-color:  #111;
}
.fnp-hq--modern-magazine.fnp-hq--deco .fnp-hq__quote::before { font-size: 8rem; opacity: .12; }

/* minimal: plain */
.fnp-hq--minimal { --fnp-hq-size: 1.15rem; --fnp-hq-color: #444; }
.fnp-hq--minimal.fnp-hq--deco .fnp-hq__quote::before { display: none; }

/* ----------------------------------------------------------
   Section 23 — Summary / Synopsis Pro (fnp-summary-synopsis)
   ---------------------------------------------------------- */
.fnp-summary-synopsis {
    --fnp-ss-color:    #333;
    --fnp-ss-bg:       #f7f8fa;
    --fnp-ss-label:    #111;
    --fnp-ss-accent:   #c0392b;
    --fnp-ss-border:   rgba(0,0,0,.1);
    --fnp-ss-size:     1rem;
    --fnp-ss-lh:       1.65;
    --fnp-ss-max:      100%;
    --fnp-ss-pad-v:    1.25rem;
    --fnp-ss-pad-h:    1.5rem;
    --fnp-ss-radius:   .5rem;
    --fnp-ss-border-w: 1px;
    --fnp-ss-gap:      1rem;
    display:       flex;
    flex-direction:column;
    gap:           var(--fnp-ss-gap);
    max-width:     var(--fnp-ss-max);
    margin:        1.5rem 0;
}
.fnp-ss__block {
    background:    var(--fnp-ss-bg);
    color:         var(--fnp-ss-color);
    padding:       var(--fnp-ss-pad-v) var(--fnp-ss-pad-h);
    border-radius: var(--fnp-ss-radius);
    border:        var(--fnp-ss-border-w) solid var(--fnp-ss-border);
}
.fnp-ss__label-bar {
    display:       flex;
    align-items:   center;
    gap:           .4rem;
    margin-bottom: .6rem;
}
.fnp-ss__label-text {
    font-size:   .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:       var(--fnp-ss-label);
}
.fnp-ss__icon   { font-size: 1em; }
.fnp-ss__text   { margin: 0; font-size: var(--fnp-ss-size); line-height: var(--fnp-ss-lh); }

/* Accent left border on each block */
.fnp-ss__summary  { border-left: 4px solid var(--fnp-ss-accent); }
.fnp-ss__synopsis { border-left: 4px solid rgba(192,57,43,.45); }
@supports (background: color-mix(in srgb, red, blue)) {
    .fnp-ss__synopsis { border-left: 4px solid color-mix(in srgb, var(--fnp-ss-accent) 50%, transparent); }
}

/* ----------------------------------------------------------
   Section 24 — Meta Bar Pro (fnp-meta-bar)
   ---------------------------------------------------------- */
.fnp-meta-bar {
    --fnp-mb-color:     #666;
    --fnp-mb-bg:        transparent;
    --fnp-mb-accent:    #c0392b;
    --fnp-mb-border:    rgba(0,0,0,.08);
    --fnp-mb-border-w:  1px;
    --fnp-mb-size:      .85rem;
    --fnp-mb-weight:    400;
    --fnp-mb-max:       100%;
    --fnp-mb-pad-v:     .6rem;
    --fnp-mb-pad-h:     0;
    --fnp-mb-radius:    0;
    background:    var(--fnp-mb-bg);
    padding:       var(--fnp-mb-pad-v) var(--fnp-mb-pad-h);
    border-radius: var(--fnp-mb-radius);
    max-width:     var(--fnp-mb-max);
}
.fnp-mb__bar {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         .3rem .6rem;
    font-size:   var(--fnp-mb-size);
    font-weight: var(--fnp-mb-weight);
    color:       var(--fnp-mb-color);
}
.fnp-mb__item { display: inline-flex; align-items: center; gap: .2rem; }
.fnp-mb__icon { opacity: .6; font-size: .9em; color: var(--fnp-mb-accent); }
.fnp-mb__sep  { opacity: .35; margin: 0 .1rem; }

/* New meta-bar item styles */
.fnp-mb__author-link { color: inherit; text-decoration: none; }
.fnp-mb__author-link:hover { color: var(--fnp-mb-accent, #c0392b); text-decoration: underline; }
.fnp-mb__date:hover,
.fnp-mb__modified:hover,
.fnp-mb__author:hover { color: var(--fnp-mb-accent); }

.fnp-mb--top    { border-bottom: var(--fnp-mb-border-w, 1px) solid var(--fnp-mb-border); margin-bottom: 1rem; }
.fnp-mb--bottom { border-top:    var(--fnp-mb-border-w, 1px) solid var(--fnp-mb-border); margin-top:    1rem; }
.fnp-mb--both   {
    border-bottom: var(--fnp-mb-border-w, 1px) solid var(--fnp-mb-border);
    border-top:    var(--fnp-mb-border-w, 1px) solid var(--fnp-mb-border);
    margin: .5rem 0;
    padding: .6rem 0;
}

/* ----------------------------------------------------------
   Section 25 — Pro Block Shared Hover & Transition Fixes
   ---------------------------------------------------------- */

/* Smooth transitions for all Pro standalone blocks */
.fnp-article-header,
.fnp-intro-pro,
.fnp-body-pro,
.fnp-highlight-quote,
.fnp-summary-synopsis,
.fnp-meta-bar {
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Hover zoom for standalone Pro blocks (scale the whole block) */
.fnp-article-header.fnp-fx-hover-zoom:hover,
.fnp-intro-pro.fnp-fx-hover-zoom:hover,
.fnp-body-pro.fnp-fx-hover-zoom:hover,
.fnp-highlight-quote.fnp-fx-hover-zoom:hover,
.fnp-summary-synopsis.fnp-fx-hover-zoom:hover,
.fnp-meta-bar.fnp-fx-hover-zoom:hover {
    transform: scale(1.01);
}

/* Tilt also needs transition base */
.fnp-fx-hover-tilt { transform-style: preserve-3d; }

/* Ensure lift & shadow work on Pro blocks (already defined globally but needs transition) */
.fnp-article-header.fnp-fx-hover-lift:hover,
.fnp-intro-pro.fnp-fx-hover-lift:hover,
.fnp-body-pro.fnp-fx-hover-lift:hover,
.fnp-highlight-quote.fnp-fx-hover-lift:hover,
.fnp-summary-synopsis.fnp-fx-hover-lift:hover,
.fnp-meta-bar.fnp-fx-hover-lift:hover {
    transform: translateY(-4px);
}

.fnp-article-header.fnp-fx-hover-glow:hover,
.fnp-intro-pro.fnp-fx-hover-glow:hover,
.fnp-highlight-quote.fnp-fx-hover-glow:hover,
.fnp-summary-synopsis.fnp-fx-hover-glow:hover {
    box-shadow: 0 0 24px rgba(192,57,43,.18);
}

/* stagger/slide-down/zoom-out/stretch entrance definitions (used in CSS from line 3206) */
/* Already defined above; expose them also for Pro blocks via the shared animated system */