/* =============================================================
   Column — Orque Tech
   Archive (grid + filter) + Single (editorial article).
   Also used for author.php and search.php result lists.
   ============================================================= */

/* -------------------------------------------------------------
   ARCHIVE — FILTER
   ------------------------------------------------------------- */
.column-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.column-filter__item {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-fg-muted);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    letter-spacing: var(--ls-wide);
    transition: color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
}
.column-filter__item:hover {
    color: var(--color-fg-strong);
    border-color: var(--color-fg-strong);
}
.column-filter__item.is-active {
    color: #fff;
    background: var(--color-fg-strong);
    border-color: var(--color-fg-strong);
}

/* -------------------------------------------------------------
   ARCHIVE — GRID
   ------------------------------------------------------------- */
.column-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12) var(--space-10);
}

.column-item {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.column-item__link {
    display: block;
    color: inherit;
}
.column-item__media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}
.column-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-out);
}
.column-item__link:hover .column-item__img {
    transform: scale(1.04);
}
.column-item__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #eeeeee 0%, #e0e0e0 100%);
}

.column-item__info {
    padding: var(--space-6) 0 0;
}
.column-item__cat {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}
.column-item__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-fg-strong);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-3);
    transition: color var(--dur-base) var(--ease-out);
}
.column-item__link:hover .column-item__title {
    color: var(--color-accent);
}
.column-item__excerpt {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--color-fg-muted);
    margin-bottom: var(--space-4);
    max-width: 560px;
}
.column-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.column-item__date {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-fg-subtle);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-serif);
}
.column-item__more {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-fg-strong);
    letter-spacing: var(--ls-wide);
    transition: color var(--dur-base) var(--ease-out);
}
.column-item__link:hover .column-item__more {
    color: var(--color-accent);
}

.column-empty {
    font-size: var(--fs-md);
    color: var(--color-fg-muted);
    text-align: center;
    padding: var(--space-16) 0;
}

/* -------------------------------------------------------------
   PAGINATION (shared by archive/author/search)
   ------------------------------------------------------------- */
.pagination {
    margin-top: var(--space-20);
    padding-top: var(--space-10);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
}
.pagination .nav-links {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-fg);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    letter-spacing: var(--ls-wide);
    transition: color var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.pagination .page-numbers:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.pagination .page-numbers.current {
    color: #fff;
    background: var(--color-fg-strong);
    border-color: var(--color-fg-strong);
}
.pagination .page-numbers.dots {
    border: none;
    color: var(--color-fg-subtle);
}

/* -------------------------------------------------------------
   SINGLE — HERO META
   ------------------------------------------------------------- */
.column-hero__cat {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}
.column-hero__title {
    max-width: 880px;
}
.column-hero__meta {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    font-size: var(--fs-sm);
}
.column-hero__meta time,
.column-hero__meta .column-hero__author {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-fg-strong);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    font-variant-numeric: tabular-nums;
}
.column-hero__meta span {
    font-family: var(--font-serif);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-fg-subtle);
    font-weight: 500;
}
.column-hero__meta a {
    color: inherit;
    border-bottom: 1px solid var(--color-border-strong);
    padding-bottom: 1px;
    transition: color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.column-hero__meta a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* -------------------------------------------------------------
   SINGLE — DETAIL
   ------------------------------------------------------------- */
.column-detail {
    padding: 0;
}
.column-detail__hero {
    margin: 0;
    max-width: var(--container-max);
    margin: var(--space-12) auto var(--space-16);
    padding: 0 var(--page-gutter-x);
}
.column-detail__hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    display: block;
}

.column-detail__content {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    color: var(--color-fg);
    padding-bottom: var(--space-16);
}

/* Rich content rendered from the_content() */
.column-detail__content h2 {
    font-size: clamp(var(--fs-xl), 2.6vw, var(--fs-3xl));
    font-weight: 700;
    color: var(--color-fg-strong);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-snug);
    margin-top: var(--space-16);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.column-detail__content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
}
.column-detail__content h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-fg-strong);
    letter-spacing: var(--ls-tight);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
}
.column-detail__content p {
    margin-bottom: var(--space-5);
    line-height: var(--lh-loose);
}
.column-detail__content ul,
.column-detail__content ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-5);
}
.column-detail__content li {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-2);
}
.column-detail__content img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-8) 0;
    display: block;
}
.column-detail__content a {
    color: var(--color-fg-strong);
    border-bottom: 1px solid var(--color-border-strong);
    transition: color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.column-detail__content a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.column-detail__content blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-6) var(--space-8);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-alt);
    font-style: italic;
    color: var(--color-fg-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

/* -------------------------------------------------------------
   SINGLE — FOOTER (tags, author box, prev/next, back)
   ------------------------------------------------------------- */
.column-detail__footer {
    margin-top: var(--space-12);
    padding-top: var(--space-10);
    border-top: 1px solid var(--color-border);
}

.column-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-10);
}
.column-detail__tag {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    color: var(--color-fg-muted);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.column-detail__tag:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.column-detail__author {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-8);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-12);
}
.column-detail__author-avatar img {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    display: block;
    border: 1px solid var(--color-border);
}
.column-detail__author-label {
    font-family: var(--font-serif);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-fg-subtle);
    margin-bottom: var(--space-1);
}
.column-detail__author-name {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-fg-strong);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-2);
}
.column-detail__author-bio {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--color-fg-muted);
}

.column-detail__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}
.column-detail__nav-prev,
.column-detail__nav-next {
    min-height: 80px;
}
.column-detail__nav-prev a,
.column-detail__nav-next a {
    display: block;
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    transition: color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.column-detail__nav-prev a:hover,
.column-detail__nav-next a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.column-detail__nav-next {
    text-align: right;
}
.column-detail__nav span {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-fg-subtle);
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.column-detail__back {
    display: flex;
    justify-content: flex-start;
}
.column-detail__back-link {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-fg-strong);
    letter-spacing: var(--ls-wide);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-fg-strong);
    transition: color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.column-detail__back-link:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* -------------------------------------------------------------
   AUTHOR PROFILE (author.php)
   ------------------------------------------------------------- */
.author-profile {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: var(--space-8);
    align-items: start;
    padding: var(--space-10);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-16);
}
.author-profile img {
    width: 128px;
    height: 128px;
    border-radius: var(--radius-full);
    display: block;
    border: 1px solid var(--color-border);
}
.author-profile__label {
    font-family: var(--font-serif);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-fg-subtle);
    margin-bottom: var(--space-2);
}
.author-profile__name {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-fg-strong);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-3);
}
.author-profile__bio {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--color-fg-muted);
    margin-bottom: var(--space-3);
    max-width: 640px;
}
.author-profile__url a {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-fg-strong);
    border-bottom: 1px solid var(--color-border-strong);
    padding-bottom: 1px;
    transition: color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.author-profile__url a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.author-section-title {
    font-size: clamp(var(--fs-xl), 2.4vw, var(--fs-3xl));
    font-weight: 700;
    color: var(--color-fg-strong);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.author-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
}

/* -------------------------------------------------------------
   SEARCH RESULTS (search.php)
   ------------------------------------------------------------- */
.search-summary {
    font-size: var(--fs-md);
    color: var(--color-fg-muted);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-8);
}
.search-summary strong {
    color: var(--color-fg-strong);
    font-weight: 700;
}
.search-summary .search-count {
    font-family: var(--font-serif);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    color: var(--color-accent);
    margin-left: var(--space-2);
}

.search-results .search-form-wrap {
    justify-content: flex-start;
    margin: 0 0 var(--space-12) 0;
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-border);
}

.search-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.search-item {
    border-bottom: 1px solid var(--color-border);
}
.search-item:first-child {
    border-top: 1px solid var(--color-border);
}
.search-item a {
    display: block;
    padding: var(--space-6) 0;
    color: inherit;
    transition: background var(--dur-base) var(--ease-out);
}
.search-item a:hover {
    background: var(--color-surface-alt);
}
.search-type {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 500;
    margin-bottom: var(--space-2);
}
.search-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-fg-strong);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-2);
    transition: color var(--dur-base) var(--ease-out);
}
.search-item a:hover .search-title {
    color: var(--color-accent);
}
.search-date {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-fg-subtle);
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-2);
    display: block;
}
.search-excerpt {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--color-fg-muted);
    max-width: 720px;
}

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 768px) {
    .column-list {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    .column-item__info {
        padding: var(--space-5) 0 0;
    }
    .column-item__title {
        font-size: var(--fs-lg);
    }
    .column-filter {
        gap: var(--space-2);
        margin-bottom: var(--space-10);
    }
    .column-filter__item {
        font-size: var(--fs-xs);
        padding: var(--space-2) var(--space-4);
    }
    .column-hero__meta {
        gap: var(--space-4);
    }
    .column-detail__content h2 {
        margin-top: var(--space-12);
    }
    .column-detail__author {
        grid-template-columns: 72px 1fr;
        gap: var(--space-4);
        padding: var(--space-6);
    }
    .column-detail__author-avatar img {
        width: 72px;
        height: 72px;
    }
    .column-detail__nav {
        grid-template-columns: 1fr;
    }
    .column-detail__nav-next {
        text-align: left;
    }
    .author-profile {
        grid-template-columns: 96px 1fr;
        gap: var(--space-4);
        padding: var(--space-6);
    }
    .author-profile img {
        width: 96px;
        height: 96px;
    }
    .author-profile__name {
        font-size: var(--fs-xl);
    }
    .pagination {
        margin-top: var(--space-14);
    }
    .pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: var(--fs-xs);
    }
}