/* ==========================================================================
   Szekely Design — [szekely_categories] (category browser v2)
   Loaded only on pages that actually use the shortcode. Tokens (--sd-*,
   --color-*) come from szekely-design.css. New shortcode, entirely
   separate from category_page.php's cloud/list/dropdown and the live
   /kategoriak/ page — nothing here touches either.
   ========================================================================== */

/* Round 8: full screen width (was capped at 987px). The shortcode sits
   inside an alignfull Group with the block theme's global padding and
   constrained layout (checked on the live /kategoriak/ page: 104px of
   side padding on that group, and its "> *" rule caps children at the
   content size) — the padding is removed on that one group only, and
   the wrap's own 34px / 21px padding takes over. */
.has-global-padding:has(> .szc-wrap) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.szc-wrap,
.is-layout-constrained > .szc-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--sd-21);
    box-sizing: border-box;
    width: 100%;
    max-width: var(--sd-1597);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--sd-21) var(--sd-34);
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.szc-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sd-8);
    padding: var(--sd-13) var(--sd-21);
    background: rgba(255, 255, 255, 0.68);
    -webkit-backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    border-radius: var(--sd-21);
    box-shadow: var(--sd-shadow);
    color: var(--sd-text-muted, #555);
}

.szc-search__input {
    flex: 1 1 auto;
    border: none;
    background: none;
    outline: none;
    font-size: var(--sd-16);
    color: var(--sd-text, #2b2b2b);
    min-width: 0;
}

.szc-search__input::placeholder {
    color: var(--sd-text-muted, #555);
}

.szc-empty-state {
    text-align: center;
    padding: var(--sd-21);
    color: var(--sd-text-muted, #555);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Spotlight — "Napi kategória"
   Round 8: one centred column (label, name, count, sample posts,
   button); the 1.618:1 image sits above it on mobile and beside it on
   desktop (see the ≥768px block further down).
   -------------------------------------------------------------------------- */

.szc-spotlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sd-21);
    padding: var(--sd-21);
    border-radius: var(--sd-21);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-four, #0285BA) 13%, white), color-mix(in srgb, var(--color-one, #fff) 89%, transparent));
    -webkit-backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    box-shadow: var(--sd-shadow-raised);
    border: 1px solid color-mix(in srgb, var(--color-four, #0285BA) 13%, transparent);
}

.szc-spotlight__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sd-8);
    min-width: 0;
    text-align: center;
}

.szc-spotlight__media {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    max-width: var(--sd-377);
    aspect-ratio: 1.618 / 1;
    border-radius: var(--sd-21);
    overflow: hidden;
    box-shadow: var(--sd-shadow);
}

.szc-spotlight__media__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No image: a soft brand-tinted panel with a large initial circle. */
.szc-spotlight__media--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-four, #0285BA) 21%, white), color-mix(in srgb, var(--color-four, #0285BA) 8%, white));
}

.szc-spotlight__media__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sd-89);
    height: var(--sd-89);
    border-radius: 50%;
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    font-size: var(--sd-34);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 var(--sd-8) color-mix(in srgb, var(--color-one, #fff) 55%, transparent);
}

.szc-spotlight__eyebrow {
    font-size: var(--sd-13);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-four, #0285BA);
}

.szc-spotlight__reroll {
    display: flex;
    align-items: center;
    gap: var(--sd-5);
    border: none;
    background: rgba(255, 255, 255, 0.68);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-13);
    font-weight: 600;
    padding: var(--sd-5) var(--sd-13);
    border-radius: var(--sd-34);
    cursor: pointer;
    transition: background var(--sd-hover) var(--sd-ease), transform var(--sd-hover) var(--sd-ease);
}

.szc-spotlight__reroll:hover,
.szc-spotlight__reroll:focus-visible {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
}

.szc-spotlight__reroll.szc-spin i {
    animation: szc-spin var(--sd-calm) linear;
}

@keyframes szc-spin {
    to { transform: rotate(360deg); }
}

.szc-spotlight__reroll {
    margin-top: var(--sd-8);
}

.szc-spotlight__title {
    display: block;
    font-size: var(--sd-34);
    font-weight: 700;
    line-height: 1.3;
    color: var(--sd-text, #2b2b2b);
    text-decoration: none;
}

.szc-spotlight__title:hover {
    color: var(--color-four, #0285BA);
}

.szc-spotlight__title--locked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sd-8);
    font-size: var(--sd-21);
    font-weight: 700;
    color: var(--sd-text-muted, #555);
    cursor: help;
}

.szc-spotlight__count {
    font-size: var(--sd-13);
    font-weight: 500;
    color: var(--sd-text-muted, #555);
}

.szc-spotlight__hint {
    margin: var(--sd-5) 0 0;
    font-size: var(--sd-13);
    color: var(--sd-text-muted, #555);
}

.szc-spotlight__posts {
    list-style: none;
    margin: var(--sd-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sd-5);
}

/* Desktop: image beside the text, the text column still centred in the
   remaining space. */
@media (min-width: 768px) {
    .szc-spotlight {
        flex-direction: row;
        justify-content: center;
        gap: var(--sd-34);
        padding: var(--sd-34);
    }

    .szc-spotlight__media {
        width: var(--sd-377);
    }

    .szc-spotlight__body {
        flex: 1 1 auto;
    }
}

.szc-spotlight__posts a {
    color: var(--sd-text, #2b2b2b);
    text-decoration: none;
    font-size: var(--sd-13);
}

.szc-spotlight__posts a:hover {
    color: var(--color-four, #0285BA);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Sections — frosted-glass cards
   -------------------------------------------------------------------------- */

.szc-sections {
    display: flex;
    flex-direction: column;
    gap: var(--sd-13);
}

/* Round 8: masonry on wide screens — CSS columns, so short sections
   (Kérdések, Tények) tuck in under long ones (Idézetek) instead of
   leaving grid-row holes. 1 column <987px, 2 from 987px, 3 from 1597px. */
@media (min-width: 987px) {
    .szc-sections {
        display: block;
        columns: 2;
        column-gap: var(--sd-21);
    }

    .szc-sections > .szc-section {
        break-inside: avoid;
        margin-bottom: var(--sd-21);
    }
}

@media (min-width: 1597px) {
    .szc-sections {
        columns: 3;
    }
}

.szc-section {
    border-radius: var(--sd-21);
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    box-shadow: var(--sd-shadow);
    overflow: hidden;
}

.szc-section--filtered-out {
    display: none;
}

.szc-section__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sd-8);
    padding: var(--sd-13) var(--sd-21);
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--sd-text, #2b2b2b);
}

.szc-section__icon {
    font-size: var(--sd-21);
    line-height: 1;
}

.szc-section__label {
    flex: 1 1 auto;
    font-size: var(--sd-21);
    font-weight: 700;
}

.szc-section__count {
    font-size: var(--sd-13);
    color: var(--sd-text-muted, #555);
    font-weight: 500;
}

.szc-section__chevron {
    font-size: var(--sd-13);
    color: var(--sd-text-muted, #555);
    transition: transform var(--sd-hover) var(--sd-ease);
}

.szc-section--open .szc-section__chevron {
    transform: rotate(180deg);
}

.szc-section__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--sd-hover-slow) var(--sd-ease);
}

.szc-section--open .szc-section__body {
    grid-template-rows: 1fr;
}

.szc-section__body > .szc-pills {
    min-height: 0;
    overflow: hidden;
}

.szc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sd-8);
    padding: 0 var(--sd-21) var(--sd-21);
}

/* --------------------------------------------------------------------------
   Pills — sized in 3 Fibonacci steps by post count
   -------------------------------------------------------------------------- */

.szc-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sd-5);
    padding: var(--sd-5) var(--sd-13);
    border-radius: var(--sd-34);
    background: rgba(255, 255, 255, 0.68);
    color: var(--color-four, #0285BA);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.618;
    isolation: isolate;
    transition: transform var(--sd-hover) var(--sd-ease), box-shadow var(--sd-hover) var(--sd-ease), background var(--sd-hover) var(--sd-ease);
}

/* Round 8: category thumbnail — 21px circle left of the name. A photo
   (term meta or latest featured image) or, without one, the initial in
   a brand-coloured circle. */
.szc-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--sd-21);
    height: var(--sd-21);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-four, #0285BA) 21%, transparent);
}

.szc-thumb__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.szc-thumb--initial {
    background: color-mix(in srgb, var(--color-four, #0285BA) 13%, white);
}

.szc-thumb__initial {
    font-size: var(--sd-13);
    font-weight: 700;
    line-height: 1;
    color: var(--color-four, #0285BA);
}

.szc-pill--locked .szc-thumb {
    filter: grayscale(1);
    opacity: 0.55;
}

.szc-pill--13 { font-size: var(--sd-13); }
.szc-pill--16 { font-size: var(--sd-16); }
.szc-pill--21 { font-size: var(--sd-21); padding: var(--sd-8) var(--sd-21); }

.szc-pill:hover,
.szc-pill:focus-visible {
    z-index: 2; /* its count bubble above the neighbouring pills */
    transform: translateY(-3px);
    box-shadow: var(--sd-shadow-raised);
    background: rgba(255, 255, 255, 0.89);
}

.szc-pill--hidden {
    display: none;
}

/* Count: a small speech bubble above the pill on hover/focus (round 8 —
   used to widen the pill itself, which shifted every pill after it).
   Absolutely positioned, so the pill keeps its size; fades in and rises
   5px in 233ms. The tail is the ::after triangle. */
.szc-pill__count {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--sd-8));
    padding: var(--sd-3) var(--sd-8);
    border-radius: var(--sd-13);
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    font-size: var(--sd-13);
    font-weight: 600;
    line-height: 1.618;
    white-space: nowrap;
    box-shadow: var(--sd-shadow);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, var(--sd-5));
    transition: opacity var(--sd-hover) var(--sd-ease), transform var(--sd-hover) var(--sd-ease);
}

.szc-pill__count::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: calc(var(--sd-5) * -1);
    border: var(--sd-5) solid transparent;
    border-top-color: var(--color-four, #0285BA);
    border-bottom-width: 0;
}

.szc-pill:hover .szc-pill__count,
.szc-pill:focus-visible .szc-pill__count {
    opacity: 1;
    transform: translate(-50%, 0);
}

.szc-pill--locked {
    color: var(--sd-text-muted, #555);
    background: rgba(0, 0, 0, 0.05);
    cursor: help;
}

.szc-pill--locked:hover,
.szc-pill--locked:focus-visible {
    transform: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.08);
}

/* Ripple: a radial gradient scaling out from the click point, clipped by
   its own layer (.szc-pill__ripple) now that the pill itself isn't
   overflow:hidden (it would clip the count bubble). */
.szc-pill__ripple {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.szc-pill--ripple .szc-pill__ripple::after {
    content: "";
    position: absolute;
    left: var(--szc-ripple-x, 50%);
    top: var(--szc-ripple-y, 50%);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-four, #0285BA) 34%, transparent);
    transform: scale(0);
    opacity: 1;
    animation: szc-ripple var(--sd-hover-slow) var(--sd-ease);
}

@keyframes szc-ripple {
    to {
        transform: scale(21);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   Fade-up / cascade motion (szekely-design-categories.js adds these)
   -------------------------------------------------------------------------- */

.szc-section {
    opacity: 0;
    transform: translateY(var(--sd-13));
    transition: opacity var(--sd-calm) var(--sd-ease), transform var(--sd-calm) var(--sd-ease);
}

.szc-section.szc-in-view {
    opacity: 1;
    transform: none;
}

.szc-pill--stagger {
    opacity: 0;
    transform: translateY(var(--sd-8));
    transition: opacity var(--sd-calm) var(--sd-ease), transform var(--sd-calm) var(--sd-ease), box-shadow var(--sd-hover) var(--sd-ease), background var(--sd-hover) var(--sd-ease);
}

.szc-pill--stagger.szc-in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .szc-section,
    .szc-pill--stagger {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .szc-pill,
    .szc-pill__count,
    .szc-section__body,
    .szc-section__chevron,
    .szc-spotlight__reroll {
        transition: none;
    }

    .szc-pill:hover,
    .szc-pill:focus-visible {
        transform: none;
    }

    .szc-spotlight__reroll.szc-spin i,
    .szc-pill--ripple .szc-pill__ripple::after {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Desktop: sections always open (the collapse behaviour is a mobile
   space-saver), search not sticky.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .szc-section__body {
        grid-template-rows: 1fr;
    }

    .szc-section__header {
        cursor: default;
        pointer-events: none;
    }

    .szc-section__chevron {
        display: none;
    }

    /* Always open here, so nothing needs clipping — and the pills' count
       bubbles (round 8) rise above the first row into the header area. */
    .szc-section,
    .szc-section__body > .szc-pills {
        overflow: visible;
    }
}

/* --------------------------------------------------------------------------
   Mobile: sticky search under the header, 34px tap targets, first
   section open by default (server-rendered szc-section--open class).
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .szc-wrap,
    .is-layout-constrained > .szc-wrap {
        padding: var(--sd-13) var(--sd-21);
    }

    .szc-search {
        position: sticky;
        top: calc(var(--sd-55) + var(--sd-8));
        z-index: 50;
    }

    .szc-search__input,
    .szc-section__header,
    .szc-spotlight__reroll {
        min-height: var(--sd-34);
    }

    .szc-pill {
        min-height: var(--sd-34);
        box-sizing: border-box;
    }

    .szc-spotlight__title {
        font-size: var(--sd-21);
    }
}