/* =============================================================================
   CATEGORY ARCHIVE
   Image-led editorial category browsing. This layer is intentionally scoped to
   category.php so tags, authors and shared card surfaces keep their contracts.
   ============================================================================= */

.geekly-category-archive {
    --gca-page-max: 1400px;
    --gca-mobile-gutter: 16px;
    --gca-tablet-gutter: 32px;
    --gca-desktop-gutter: var(--main-padding-lg, 32px);
    /* Bleed: the negative margin that lets a band span the full viewport.
       It must cancel `.geekly-main`'s horizontal padding EXACTLY, or the band
       grows wider than its container and adds a horizontal scrollbar. That
       padding is 16px until 1280px and 32px from 1280px, so the bleed tracks
       `.geekly-main` and NOT the content gutters above - those are a separate
       concern. Using the tablet gutter here over-cancelled by 16px from 768px
       to 1279px, which put a horizontal scrollbar on every category archive. */
    --gca-bleed: 16px;
    color: var(--clr-text-primary);
}

.geekly-category-archive__masthead {
    position: relative;
    z-index: 0;
    min-height: clamp(286px, 34vw, 360px);
    margin: -24px calc(-1 * var(--gca-bleed)) 0;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--clr-purple) 13%, transparent), transparent 34%),
        var(--clr-bg-deep);
    border-bottom: 1px solid var(--clr-border);
}

.geekly-category-archive__masthead::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    background:
        linear-gradient(90deg, var(--clr-bg-base) 0%, color-mix(in srgb, var(--clr-bg-base) 94%, transparent) 31%, color-mix(in srgb, var(--clr-bg-base) 45%, transparent) 67%, color-mix(in srgb, var(--clr-bg-base) 13%, transparent) 100%),
        linear-gradient(0deg, var(--clr-bg-base) 0%, transparent 42%);
}

.geekly-category-archive__masthead-media {
    position: absolute;
    z-index: -2;
    inset: 0 0 0 36%;
}

.geekly-category-archive__masthead-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    filter: saturate(.82) contrast(.94) brightness(.68);
}

.geekly-category-archive__masthead-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: min(var(--gca-page-max), 100%);
    min-height: clamp(286px, 34vw, 360px);
    margin: 0 auto;
    padding: clamp(34px, 5vw, 64px) var(--gca-mobile-gutter) clamp(30px, 4vw, 48px);
}

.geekly-category-archive__breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--clr-text-secondary);
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
}

.geekly-category-archive__breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.geekly-category-archive__breadcrumbs a:hover { color: var(--clr-text-primary); }
.geekly-category-archive__breadcrumbs svg { width: 13px; height: 13px; color: var(--clr-text-muted); }

.geekly-category-archive__title {
    max-width: 10ch;
    margin: 0;
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 7vw, 7rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .78;
    text-transform: uppercase;
    text-wrap: balance;
}

.geekly-category-archive__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px 13px;
    margin-top: 25px;
    color: var(--clr-text-secondary);
}

.geekly-category-archive__summary p {
    max-width: 540px;
    margin: 0;
    font-size: .925rem;
    line-height: 1.55;
}

.geekly-category-archive__count {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--clr-text-primary) 20%, transparent);
    border-radius: 999px;
    color: var(--clr-text-primary);
    background: color-mix(in srgb, var(--clr-bg-base) 62%, transparent);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.geekly-category-archive__filters {
    position: relative;
    z-index: 2;
    margin: 0 calc(-1 * var(--gca-bleed));
    overflow: hidden;
    background: color-mix(in srgb, var(--clr-bg-deep) 92%, transparent);
    border-bottom: 1px solid var(--clr-border);
}

.geekly-category-archive__filters-inner {
    display: flex;
    align-items: stretch;
    width: min(var(--gca-page-max), 100%);
    min-height: 57px;
    margin: 0 auto;
    padding: 0 var(--gca-mobile-gutter);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.geekly-category-archive__filters-inner::-webkit-scrollbar { display: none; }

.geekly-category-archive__filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: 48px;
    padding: 0 15px;
    color: var(--clr-text-muted);
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--transition-fast, .16s ease);
}

.geekly-category-archive__filter::after {
    position: absolute;
    right: 15px;
    bottom: -1px;
    left: 15px;
    height: 2px;
    content: '';
    background: transparent;
    transition: background-color var(--transition-fast, .16s ease);
}

.geekly-category-archive__filter:hover { color: var(--clr-text-secondary); }
.geekly-category-archive__filter.is-active { color: var(--clr-text-primary); }
.geekly-category-archive__filter.is-active::after { background: var(--clr-brand); }

.geekly-category-archive__content {
    width: min(var(--gca-page-max), 100%);
    margin: 0 auto;
    padding: clamp(30px, 5vw, 72px) var(--gca-mobile-gutter) 72px;
}

.geekly-category-archive__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* Lead story */
.geekly-category-archive__feature {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    background: var(--clr-bg-elevated);
    transition: border-color var(--transition-med, .24s ease), transform var(--transition-med, .24s ease), box-shadow var(--transition-med, .24s ease);
}

.geekly-category-archive__feature:hover {
    border-color: color-mix(in srgb, var(--clr-text-primary) 26%, var(--clr-border));
    transform: translateY(-3px);
    box-shadow: 0 22px 52px color-mix(in srgb, var(--clr-bg-base) 66%, transparent);
}

.geekly-category-archive__feature-link {
    display: grid;
    min-height: clamp(332px, 28vw, 390px);
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    color: inherit;
    text-decoration: none;
}

.geekly-category-archive__feature-media {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: var(--clr-bg-raised);
}

.geekly-category-archive__feature-media::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(0deg, color-mix(in srgb, var(--clr-bg-base) 36%, transparent), transparent 50%);
    pointer-events: none;
}

.geekly-category-archive__feature-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.23, 1, .32, 1);
}

.geekly-category-archive__feature:hover .geekly-category-archive__feature-image { transform: scale(1.035); }

.geekly-category-archive__feature-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--clr-bg-active), var(--clr-bg-surface));
}

.geekly-category-archive__feature-body {
    display: flex;
    align-items: flex-start;
    align-self: center;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(26px, 3.2vw, 46px);
}

.geekly-category-archive__feature-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--clr-text-muted);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
}

.geekly-category-archive__feature-meta span[aria-hidden] { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.geekly-category-archive__feature h2 {
    max-width: 17ch;
    margin: 14px 0 var(--space-3);
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 3.4vw, 3.45rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: .92;
    text-wrap: pretty;
}

.geekly-category-archive__feature p {
    max-width: 40ch;
    margin: 0;
    color: var(--clr-text-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.geekly-category-archive__feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-5);
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .075em;
    line-height: 1;
    text-transform: uppercase;
}

.geekly-category-archive__feature-cta span { transition: transform var(--transition-fast, .16s ease); }
.geekly-category-archive__feature:hover .geekly-category-archive__feature-cta span { transform: translateX(4px); }

/* Archive grid */
.geekly-category-archive__section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin: clamp(53px, 7vw, 88px) 0 22px;
}

/* Filtered views and later archive pages begin directly with their listing. */
.geekly-category-archive__content--listing-only .geekly-category-archive__section-heading {
    margin-top: 0;
}

.geekly-category-archive__feature + .geekly-category-archive__visually-hidden + .geekly-category-archive__grid {
    margin-top: clamp(40px, 5vw, 64px);
}

.geekly-category-archive__section-heading h2 {
    margin: 0;
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: .88;
    text-transform: uppercase;
}

.geekly-category-archive__section-heading p {
    max-width: 28ch;
    margin: 0;
    color: var(--clr-text-muted);
    font-size: .78rem;
    line-height: 1.45;
    text-align: right;
}

.geekly-category-archive__grid.geekly-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 18px;
}

.geekly-category-archive .geekly-card {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.geekly-category-archive .geekly-card:hover { transform: none; box-shadow: none; }

.geekly-category-archive .geekly-card__thumb {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background: var(--clr-bg-raised);
}

.geekly-category-archive .geekly-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .42s cubic-bezier(.23, 1, .32, 1), filter .42s cubic-bezier(.23, 1, .32, 1);
}

.geekly-category-archive .geekly-card:hover .geekly-card__thumb img { transform: scale(1.045); filter: brightness(.86); }

.geekly-category-archive .geekly-card__body { padding: 13px 2px 0; }
.geekly-category-archive .geekly-card__meta { gap: 7px; min-height: 14px; margin-bottom: 7px; }

/* A category archive already supplies its own category context. Keep format and date useful. */
.geekly-category-archive .geekly-card__cat:not(.geekly-card__cat--format) { display: none; }
.geekly-category-archive .geekly-card__cat,
.geekly-category-archive .geekly-card__date { color: var(--clr-text-muted); font-size: .7rem; font-weight: 600; }

.geekly-category-archive .geekly-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.42rem, 2.25vw, 1.82rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.03;
    text-wrap: pretty;
}

.geekly-category-archive .geekly-card__title a { color: var(--clr-text-primary); }
.geekly-category-archive .geekly-card:hover .geekly-card__title a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--clr-brand) 72%, transparent); text-underline-offset: 4px; }
.geekly-category-archive .geekly-card__excerpt { display: none; }

.geekly-category-archive__pagination { margin-top: 52px; }

.geekly-category-archive__empty {
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(64px, 12vw, 130px) var(--space-5);
    text-align: center;
}

.geekly-category-archive__empty h2 {
    margin: 0;
    color: var(--clr-text-primary);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: .9;
    text-transform: uppercase;
}

.geekly-category-archive__empty p { margin: var(--space-4) 0 0; color: var(--clr-text-muted); line-height: 1.6; }
.geekly-category-archive__empty a { display: inline-flex; min-height: 44px; align-items: center; margin-top: 18px; color: var(--clr-text-primary); font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; }

.geekly-category-archive a:focus-visible {
    outline: 2px solid #c8a7ff;
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .geekly-category-archive__masthead { margin-right: calc(-1 * var(--gca-bleed)); margin-left: calc(-1 * var(--gca-bleed)); }
    .geekly-category-archive__masthead-inner { padding-right: var(--gca-tablet-gutter); padding-left: var(--gca-tablet-gutter); }
    .geekly-category-archive__filters { margin-right: calc(-1 * var(--gca-bleed)); margin-left: calc(-1 * var(--gca-bleed)); }
    .geekly-category-archive__filters-inner { padding-right: var(--gca-tablet-gutter); padding-left: var(--gca-tablet-gutter); }
    .geekly-category-archive__content { padding-right: var(--gca-tablet-gutter); padding-left: var(--gca-tablet-gutter); }
}

@media (min-width: 1280px) {
    .geekly-category-archive { --gca-bleed: var(--main-padding-lg, 32px); }
    .geekly-category-archive__masthead { margin-top: -40px; margin-right: calc(-1 * var(--gca-bleed)); margin-left: calc(-1 * var(--gca-bleed)); }
    .geekly-category-archive__masthead-inner { padding-right: var(--gca-desktop-gutter); padding-left: var(--gca-desktop-gutter); }
    .geekly-category-archive__filters { margin-right: calc(-1 * var(--gca-bleed)); margin-left: calc(-1 * var(--gca-bleed)); }
    .geekly-category-archive__filters-inner { padding-right: var(--gca-desktop-gutter); padding-left: var(--gca-desktop-gutter); }
    .geekly-category-archive__content { padding-right: var(--gca-desktop-gutter); padding-left: var(--gca-desktop-gutter); }
}

@media (max-width: 899px) {
    .geekly-category-archive__masthead { min-height: 316px; }
    .geekly-category-archive__masthead-inner { min-height: 316px; }
    .geekly-category-archive__masthead-media { left: 24%; }
    .geekly-category-archive__feature-link { min-height: 360px; grid-template-columns: minmax(0, 1fr) minmax(300px, .96fr); }
    .geekly-category-archive__feature-body { padding: 33px; }
    .geekly-category-archive__grid.geekly-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--space-4); }
}

@media (max-width: 639px) {
    .geekly-category-archive__masthead,
    .geekly-category-archive__masthead-inner { min-height: 285px; }

    .geekly-category-archive__masthead-media { left: 12%; }
    .geekly-category-archive__masthead-image { object-position: 63% 42%; }
    .geekly-category-archive__masthead::after {
        background:
            linear-gradient(90deg, var(--clr-bg-base) 0%, color-mix(in srgb, var(--clr-bg-base) 91%, transparent) 39%, color-mix(in srgb, var(--clr-bg-base) 34%, transparent) 100%),
            linear-gradient(0deg, var(--clr-bg-base) 0%, transparent 56%);
    }

    .geekly-category-archive__masthead-inner { padding-top: 29px; padding-bottom: 30px; }
    .geekly-category-archive__breadcrumbs { margin-bottom: var(--space-3); }
    .geekly-category-archive__title { font-size: clamp(3.8rem, 18vw, 5.6rem); }
    .geekly-category-archive__summary { margin-top: 17px; }
    .geekly-category-archive__summary p { display: none; }
    .geekly-category-archive__filters-inner { min-height: 53px; }
    .geekly-category-archive__filter { min-height: 48px; padding-right: var(--space-3); padding-left: var(--space-3); font-size: .82rem; }
    .geekly-category-archive__filter::after { right: 12px; left: 12px; }
    .geekly-category-archive__content { padding-top: 26px; padding-bottom: var(--space-16); }

    .geekly-category-archive__feature { border-radius: var(--radius-lg); }
    .geekly-category-archive__feature-link { display: flex; min-height: 0; flex-direction: column; }
    .geekly-category-archive__feature-media { min-height: 0; aspect-ratio: 16 / 9; }
    .geekly-category-archive__feature-body { padding: 25px var(--space-5) 27px; }
    .geekly-category-archive__feature h2 { max-width: 16ch; margin-top: 14px; font-size: clamp(2.35rem, 11vw, 3rem); }
    .geekly-category-archive__feature p { font-size: .88rem; }
    .geekly-category-archive__feature-cta { margin-top: 23px; }
    .geekly-category-archive__section-heading { gap: 14px; margin: 54px 0 19px; }
    .geekly-category-archive__section-heading h2 { font-size: 2.35rem; }
    .geekly-category-archive__section-heading p { max-width: 15ch; font-size: .72rem; }
    .geekly-category-archive__grid.geekly-card-grid { gap: 26px var(--space-3); }
    .geekly-category-archive .geekly-card__body { padding-top: 10px; }
    .geekly-category-archive .geekly-card__title { font-size: clamp(1.27rem, 6.1vw, 1.54rem); }
    .geekly-category-archive .geekly-card__meta { margin-bottom: 5px; }
}

@media (max-width: 374px) {
    .geekly-category-archive__grid.geekly-card-grid { grid-template-columns: 1fr; gap: 25px; }
    .geekly-category-archive .geekly-card__title { font-size: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .geekly-category-archive *,
    .geekly-category-archive *::before,
    .geekly-category-archive *::after {
        scroll-behavior: auto;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}