/**
 * All Posts Page Styles
 * Figma Node: 6002:26766 � "All Search Results"
 *
 * Body background override for the dark theme
 */

body.page-template-page-all-posts,
body.search {
    background-color: #13151a;
}

/* Override default site-main padding for this page */
body.page-template-page-all-posts .site-main,
body.search .site-main {
    padding-top: 0;
    padding-bottom: 0;
    min-height: unset;
}

/* Override default heading margins inside cards */
.all-posts-card__title {
    margin-bottom: 0 !important;
}

.all-posts-card h2 {
    margin-bottom: 0;
    color: inherit;
}

/**
 *
 * Design tokens from Figma:
 *   --color-bg-page:       #13151a  (page background)
 *   --color-bg-section:    #1c1e22  (card body, section bg)
 *   --color-bg-frame:      #25272d  (filter buttons, search input)
 *   --color-border:        #30343b  (borders, dividers)
 *   --color-text-primary:  #ffffff
 *   --color-text-secondary:#8f96a3
 *   --color-text-muted:    #c4c8cf
 *   --color-primary:       #1081df
 *   --color-orange:        #f03900
 *   --color-purple:        #401c73
 *   --font-family:         'Vazir', sans-serif
 *
 * @package Strategic_Club
 * @since 1.0.0
 */

/* --- CSS Custom Properties --------------------------------------------------- */
.all-posts-page {
    --ap-bg-page:        #13151a;
    --ap-bg-section:     #1c1e22;
    --ap-bg-frame:       #25272d;
    --ap-border:         #30343b;
    --ap-text-primary:   #ffffff;
    --ap-text-secondary: #8f96a3;
    --ap-text-muted:     #c4c8cf;
    --ap-primary:        #1081df;
    --ap-radius-card:    8px;
    --ap-radius-badge:   4px;
    --ap-radius-btn:     4px;
    --ap-radius-input:   4px;
    --ap-gap-grid:       24px;
    --ap-gap-section:    40px;
    --ap-transition:     0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --ap-font:           'Vazir', 'Vazir', 'Tahoma', sans-serif;
}

/* --- Page Base --------------------------------------------------------------- */
.all-posts-page {
    background-color: var(--ap-bg-page);
    min-height: 100vh;
    direction: rtl;
    font-family: var(--ap-font);
}

/* --- Hero Banner ------------------------------------------------------------- */
.all-posts-hero {
    position: relative;
    width: 100%;
    height: 286px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.all-posts-hero__bg {
    position: absolute;
    inset: 0;
    background-color: #1a1c21;
    z-index: 0;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}
.all-posts-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.all-posts-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(16, 17, 20, 0.90) 0%,
        rgba(25, 26, 30, 0.90) 100%
    );
    z-index: 1;
    border-radius: 0 0 16px 16px;
    border-bottom: 2px solid var(--neutral-07-boarder-dark-hover, #30343B);

    
}

.all-posts-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
}

/* Decorative display text (transparent, behind heading) */
.all-posts-hero__display-text {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(143, 150, 163, 0.20);
    font-family: iransansx;
    font-size: 72px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: transparent;
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
    letter-spacing: 4px;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.all-posts-hero__title {
    font-family: Vazir;
    font-style: normal;
    font-size: 40px;
    font-weight: 400;
    color: var(--ap-text-primary);
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: 0;
}

/* Breadcrumb navigation */
.all-posts-hero__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.all-posts-hero__breadcrumb-link {
    font-family: var(--ap-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--ap-text-secondary);
    text-decoration: none;
    transition: color var(--ap-transition);
}

.all-posts-hero__breadcrumb-link:hover {
    color: var(--ap-text-primary);
}

.all-posts-hero__breadcrumb-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.all-posts-hero__breadcrumb-sep img {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.all-posts-hero__breadcrumb-current {
    font-family: var(--ap-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--ap-text-muted);
}

/* --- Main Section ------------------------------------------------------------ */
.all-posts-section {
    padding: 48px 0 80px;
    background-color: var(--ap-bg-page);
}

.all-posts-container {
    max-width: 1640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 108px;
    display: flex;
    flex-direction: column;
    gap: var(--ap-gap-section);
    align-items: center;
}

/* --- Controls: Search + Filters --------------------------------------------- */
.all-posts-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
}

/* Search */
.all-posts-search-wrap {
    width: 605px;
    align-self: center;
}

.all-posts-search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    background-color: var(--ap-bg-frame);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-input);
    overflow: hidden;
    transition: border-color var(--ap-transition), box-shadow var(--ap-transition);
}

.all-posts-search-form:focus-within {
    border-color: var(--ap-primary);
    box-shadow: 0 0 0 3px rgba(16, 129, 223, 0.15);
}

.all-posts-search-input {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 8px 16px;
    font-family: var(--ap-font);
    font-size: 18px;
    font-weight: 400;
    color: var(--ap-text-primary);
    direction: rtl;
    text-align: right;
    line-height: 1.5;
}

.all-posts-search-input::placeholder {
    color: var(--ap-text-secondary);
    font-size: 16px;
}

.all-posts-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    background: transparent;
    border: none;
    border-right: 1px solid var(--ap-border);
    cursor: pointer;
    color: var(--ap-text-secondary);
    transition: color var(--ap-transition), background-color var(--ap-transition);
    flex-shrink: 0;
}

.all-posts-search-btn:hover {
    color: var(--ap-text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Filter Tabs */
.all-posts-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    height: auto;
    align-self: center;
}

.all-posts-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 8px 12px;
    background-color: var(--ap-bg-frame);
    border: none;
    border-radius: var(--ap-radius-btn);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--ap-transition),
        transform var(--ap-transition),
        box-shadow var(--ap-transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.all-posts-filter-btn:hover {
    background-color: #2e3138;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.all-posts-filter-btn--active {
    background-color: var(--ap-primary) !important;
}

.all-posts-filter-btn--active:hover {
    background-color: #1a8fe8 !important;
}

.all-posts-filter-btn__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 4px;
    background-color: var(--ap-border);
    border-radius: 2px;
    font-family: var(--ap-font);
    font-size: 12px;
    font-weight: 400;
    color: var(--ap-text-muted);
    line-height: 1;
    flex-shrink: 0;
}

.all-posts-filter-btn__counter--active {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.all-posts-filter-btn__label {
    font-family: var(--ap-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--ap-text-muted);
    line-height: 1.2;
    direction: rtl;
}

.all-posts-filter-btn--active .all-posts-filter-btn__label {
    color: #ffffff;
}

/* --- Posts Grid -------------------------------------------------------------- */
.all-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ap-gap-grid);
    width: 100%;
    align-items: start;
}

/* --- Post Card --------------------------------------------------------------- */
.all-posts-card {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    border-radius: var(--ap-radius-card);
    overflow: hidden;
    transition:
        transform var(--ap-transition),
        box-shadow var(--ap-transition);
    will-change: transform;
    position: relative;
}

.all-posts-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Card Image */
.all-posts-card__link {
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}

.all-posts-card__image-wrap {
    position: relative;
    width: 100%;
    height: 184px;
    overflow: hidden;
    border-radius: var(--ap-radius-card) var(--ap-radius-card) 0 0;
    background-color: var(--ap-bg-section);
}

.all-posts-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.all-posts-card:hover .all-posts-card__image {
    transform: scale(1.05);
}

.all-posts-card__image-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #25272d 0%, #1c1e22 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.all-posts-card__image-placeholder::after {
    content: '';
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' stroke='%2330343b' stroke-width='1.5'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' stroke='%2330343b' stroke-width='1.5'/%3E%3Cpath d='M21 15L16 10L5 21' stroke='%2330343b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
}

/* Card Body */
.all-posts-card__body {
    background-color: var(--ap-bg-section);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    border-radius: 0 0 var(--ap-radius-card) var(--ap-radius-card);
    flex: 1;
}

/* Category Badge */
.all-posts-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    padding: 4px 8px;
    border-radius: var(--ap-radius-badge);
    text-decoration: none;
    flex-shrink: 0;
    transition:
        filter var(--ap-transition),
        transform var(--ap-transition);
    /* background-color is set inline via PHP */
    align-self: baseline;
}

.all-posts-card__badge:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
}

.all-posts-card__badge-text {
    font-family: var(--ap-font);
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.all-posts-card__badge-icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* Card Title */
.all-posts-card__title {
    margin: 0;
    width: 100%;
    height: 27px;
    overflow: hidden;
    text-align: right;
    direction: rtl;
}

.all-posts-card__title-link {
    display: block;
    font-family: var(--ap-font);
    font-size: 18px;
    font-weight: 400;
    color: var(--ap-text-primary);
    text-decoration: none;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--ap-transition);
}

.all-posts-card__title-link:hover {
    color: var(--ap-primary);
}

/* Card Meta */
.all-posts-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    flex-direction: row-reverse;
}

.all-posts-card__meta-left,
.all-posts-card__meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.all-posts-card__meta-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.all-posts-card__meta-item svg {
    flex-shrink: 0;
    display: block;
}

.all-posts-card__meta-value {
    font-family: var(--ap-font);
    font-size: 12px;
    font-weight: 400;
    color: var(--ap-text-secondary);
    line-height: 1;
    white-space: nowrap;
    direction: rtl;
}

/* --- Pagination -------------------------------------------------------------- */
.all-posts-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

.all-posts-pagination__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
}

.all-posts-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 8px;
    font-family: var(--ap-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--ap-text-primary);
    text-decoration: none;
    line-height: 1.5;
    transition:
        background-color var(--ap-transition),
        color var(--ap-transition),
        transform var(--ap-transition);
    cursor: pointer;
    flex-shrink: 0;
    border: none;
    background: transparent;
}

.all-posts-pagination__btn:hover:not(.all-posts-pagination__btn--current):not(.all-posts-pagination__btn--disabled) {
    background-color: var(--ap-bg-frame);
    transform: scale(1.05);
}

.all-posts-pagination__btn--current {
    background-color: var(--ap-primary);
    color: #ffffff;
    cursor: default;
    pointer-events: none;
}

.all-posts-pagination__btn--nav {
    color: var(--ap-text-primary);
}

.all-posts-pagination__btn--nav svg {
    display: block;
}

.all-posts-pagination__btn--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.all-posts-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: var(--ap-font);
    font-size: 16px;
    color: var(--ap-text-primary);
    line-height: 1.5;
    flex-shrink: 0;
    user-select: none;
}

/* --- Empty State ------------------------------------------------------------- */
.all-posts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
}

.all-posts-empty__icon {
    
}

.all-posts-empty__text {
    font-family: Vazir;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
    color: var(--Primary-01, #FFF);
    margin: 0;
    text-align: center;
    direction: rtl;
}

.all-posts-empty__subtext {
    font-family: Vazir;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: var(--ap-text-secondary, #8f96a3);
    margin: 0;
    text-align: center;
    direction: rtl;
    max-width: 450px;
}

.all-posts-empty__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 8px 20px;
    background-color: var(--ap-primary);
    border-radius: var(--ap-radius-btn);
    font-family: var(--ap-font);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    text-decoration: none;
    transition:
        background-color var(--ap-transition),
        transform var(--ap-transition);
}

.all-posts-empty__link:hover {
    background-color: #1a8fe8;
    transform: translateY(-2px);
}

/* --- Search Query Highlight -------------------------------------------------- */
.all-posts-hero__title-query {
    color: var(--ap-primary);
}

/* --- Card Entrance Animation ------------------------------------------------- */
@keyframes ap-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.all-posts-card {
    animation: ap-card-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Stagger delay for each card in the grid */
.all-posts-card:nth-child(1)  { animation-delay: 0.00s; }
.all-posts-card:nth-child(2)  { animation-delay: 0.05s; }
.all-posts-card:nth-child(3)  { animation-delay: 0.10s; }
.all-posts-card:nth-child(4)  { animation-delay: 0.15s; }
.all-posts-card:nth-child(5)  { animation-delay: 0.20s; }
.all-posts-card:nth-child(6)  { animation-delay: 0.25s; }
.all-posts-card:nth-child(7)  { animation-delay: 0.30s; }
.all-posts-card:nth-child(8)  { animation-delay: 0.35s; }
.all-posts-card:nth-child(9)  { animation-delay: 0.40s; }

/* --- Responsive -------------------------------------------------------------- */

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
    .all-posts-container {
        padding: 0 108px;
    }
}

/* Desktop (1200px�1639px) */
@media (max-width: 1639px) {
    .all-posts-container {
        padding: 0 48px;
    }
}

/* Tablet landscape (1024px�1199px) */
@media (max-width: 1199px) {
    .all-posts-container {
        padding: 0 32px;
    }

    .all-posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Tablet portrait (768px�1023px) */
@media (max-width: 1023px) {
    .all-posts-container {
        padding: 0 24px;
    }

    .all-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .all-posts-hero {
        height: 220px;
    }

    .all-posts-hero__title {
        font-size: 26px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .all-posts-container {
        padding: 0 16px;
        gap: 28px;
    }

    .all-posts-section {
        padding: 32px 0 60px;
    }

    .all-posts-hero {
        height: 180px;
    }

    .all-posts-hero__display-text {
        font-size: 48px;
    }

    .all-posts-hero__title {
        font-size: 22px;
    }

    .all-posts-hero__breadcrumb-link,
    .all-posts-hero__breadcrumb-current {
        font-size: 12px;
    }

    .all-posts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .all-posts-search-wrap {
        width: 100%;
    }

    .all-posts-search-form {
        height: 56px;
    }

    .all-posts-search-input {
        font-size: 16px;
        padding: 8px 16px;
    }

    .all-posts-filters {
        justify-content: center;
        flex-wrap: wrap;
    }

    .all-posts-card__image-wrap {
        height: 200px;
    }

    .all-posts-card__title {
        height: auto;
        white-space: normal;
    }

    .all-posts-card__title-link {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* --- Search Page: match homepage game section container & grid --------------- */
body.search .all-posts-container {
    width: min(1640px, calc(100% - 32px));
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

body.search .all-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    align-items: start;
    column-gap: 24px;
    row-gap: 32px;
    width: 100%;
    justify-items: stretch;
}

/* Mobile (< 768px) – search page grid → single-column flex */
@media (max-width: 767px) {
    body.search .all-posts-grid {
        /* display: flex; */
        /* flex-direction: column; */
        align-items: center;
        gap: 16px;
        align-self: stretch;
        grid-template-columns: 1fr;
    }
}

/* --- Reduced Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .all-posts-card {
        animation: none;
    }

    .all-posts-card,
    .all-posts-card__image,
    .all-posts-card__badge,
    .all-posts-card__title-link,
    .all-posts-filter-btn,
    .all-posts-pagination__btn {
        transition: none;
    }
}