/* ==========================================================================
   Szekely Design — carousel pages (/napi-plusz/, /listak/)
   Loaded only where includes/carousels.php finds carousels (body.sd-carousels).
   Markup: block groups (".horizontal-scroll-container", from the page
   content) around one ul.sd-carousel__track each — unified .sd-card items
   (archive-cards.php, compact) or category chips. Behaviour:
   assets/js/szekely-design-carousels.js (arrows, edge fades, entrance).

   - One centred content column for the whole page (gutter 21 / 55 / 89px,
     max 1597px): titles, subtitles, every track and the grid below start
     AND end on the same two lines. It is fed into WordPress' own
     root-padding variable, so "alignfull" blocks still bleed edge to edge
     without the old 100vw / calc(50% - 50vw) hacks.
   - 55px between sections: 34px track padding (room for the shadow) +
     21px above the next title.
   - Cards of one track are equally tall: text 4 lines, title 2 lines,
     image 1.618:1, the author row pinned to the bottom. Text cards get a
     larger text and a faint quote mark, so they never look empty.
   - ⭐ always top right: on the image (glass circle) or on the pill's line.
   - Mobile: native swipe + scroll-snap; desktop: 55px round glass arrows,
     in the gutter, outside the cards (or over the faded edge when the
     gutter is narrower than an arrow).
   - Edges fade out only towards the side that still has cards.
   - Entrance: 610ms fade-up, 89ms stagger; nothing moves with
     prefers-reduced-motion. docs/STYLE-INDEX.md §13.
   ========================================================================== */

@property --sd-fade-l {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --sd-fade-r {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

.sd-carousels {
    --sd-carousel-gutter: var(--sd-21);
    --sd-carousel-card: var(--sd-233);
    --sd-carousel-card-h: var(--sd-377);   /* minden kártya egy szakaszon belül (és az oldalon) ennyi magas */
    --sd-carousel-fade: var(--sd-34);
}

@media (min-width: 768px) {
    .sd-carousels {
        --sd-carousel-gutter: var(--sd-55);
        --sd-carousel-card: var(--sd-377);
        --sd-carousel-fade: var(--sd-55);
    }
}

@media (min-width: 1280px) {
    .sd-carousels {
        --sd-carousel-gutter: max(var(--sd-89), calc((100vw - var(--sd-1597)) / 2));
    }
}

/* WordPress pads .has-global-padding with these and pulls .alignfull
   children back out by the same amount — one value keeps both in step. */
.sd-carousels .entry-content.has-global-padding {
    --wp--style--root--padding-left: var(--sd-carousel-gutter);
    --wp--style--root--padding-right: var(--sd-carousel-gutter);
}

/* --------------------------------------------------------------------------
   Section shells — the page's block groups become plain boxes. The
   Kép válogatás group sits one level deeper (inside a padded group): its
   alignfull pull-out must not apply there, or it starts left of the screen.
   -------------------------------------------------------------------------- */
.sd-carousels .horizontal-scroll-container,
.sd-carousels .timeline_list_container {
    position: relative;
    max-width: none;
    padding: 0;
    background: none;
    overflow: visible;
}

.sd-carousels .horizontal-scroll-container .alignfull {
    margin-inline: 0;
}

.sd-carousels .random-posts-container {
    margin: 0;
}

/* The page's groups bring WordPress' block gap (1.2rem) and 16px of top
   padding around some lists, and one section ends in an empty group —
   together 22–35px extra in a few places (partly inline styles). Spacing here comes only from
   the title (21px) and the track padding (21 / 34px). */
.sd-carousels .netflix-horizontal .wp-block-group:has(.sd-carousel__track),
.sd-carousels .netflix-horizontal .horizontal-scroll-container {
    margin-block: 0 !important; /* inline block-editor spacing */
    padding-block: 0 !important;
}

.sd-carousels .horizontal-scroll-container > .wp-block-group:not(:has(*)) {
    display: none;
}

.sd-carousels .random-posts-loader {
    display: none !important; /* inline style from the plugin; never used here */
}

/* --------------------------------------------------------------------------
   Section title: icon badge + title, one-line subtitle under the text.
   Font and case come inline from the block editor (uppercase, 700) —
   overridden here for the calmer sentence case.
   -------------------------------------------------------------------------- */
.sd-carousels .sd-carousel__title {
    display: flex;
    align-items: center;
    gap: var(--sd-13);
    margin: var(--sd-21) 0 0;
    padding: 0 var(--sd-carousel-gutter);
    color: var(--color-two, #013A63);
    font-size: var(--sd-21);
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none !important;
}

/* The very first title only (Kép válogatás sits two groups deep). */
.sd-carousels .entry-content > :first-child > :first-child > .sd-carousel__title:first-child {
    margin-top: var(--sd-34);
}

/* The categories heading sits in its own padded group: its inline
   padding-left would push it off the shared line. */
.sd-carousels .wp-block-group:has(> .sd-carousel__title) {
    padding: 0 !important;
}

/* A kis ▶ a szakasz címe mellett (play-buttons.php, a szakasz saját témalistájával). */
.sd-carousels .sd-carousel__title > .sd-play-mini {
    flex: none;
}

.sd-carousel__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sd-34);
    height: var(--sd-34);
    border-radius: 50%;
    background: var(--sd-tint);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-13);
}

.sd-carousels .sd-carousel__subtitle {
    margin: var(--sd-3) 0 0;
    padding: 0 var(--sd-carousel-gutter) 0 calc(var(--sd-carousel-gutter) + var(--sd-34) + var(--sd-13));
    color: var(--sd-text-muted);
    font-size: var(--sd-13);
    line-height: 1.618;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Phones: under the icon too, so the line has room. */
@media (max-width: 767px) {
    .sd-carousels .sd-carousel__subtitle {
        padding-left: var(--sd-carousel-gutter);
    }
}

/* --------------------------------------------------------------------------
   Track — the list itself scrolls, inside the content column: it starts on
   the titles' line and ends on the mirrored line, with the fade there.
   8px of inline padding (pulled back by the margin) keeps the cards on the
   line while their shadow still has room; the snap lands on the same line.
   Vertical padding leaves room for the hover lift and the card shadow.
   -------------------------------------------------------------------------- */
.sd-carousel__viewport {
    position: relative;
}

.sd-carousels .sd-carousel__track {
    --sd-fade-l: 0px;
    --sd-fade-r: var(--sd-carousel-fade);
    display: flex;
    align-items: stretch;
    gap: var(--sd-21);
    margin: 0 calc(var(--sd-carousel-gutter) - var(--sd-8));
    padding: var(--sd-21) var(--sd-8) var(--sd-34);
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sd-8);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sd-fade-l), #000 calc(100% - var(--sd-fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--sd-fade-l), #000 calc(100% - var(--sd-fade-r)), transparent);
    transition: --sd-fade-l var(--sd-hover) var(--sd-ease), --sd-fade-r var(--sd-hover) var(--sd-ease);
}

.sd-carousels .sd-carousel__track::-webkit-scrollbar {
    display: none;
}

/* With JS the fades follow the scroll position (is-ready set by the script). */
.sd-carousel__viewport.is-ready:not(.is-start) > .sd-carousel__track {
    --sd-fade-l: var(--sd-carousel-fade);
}

.sd-carousel__viewport.is-ready.is-end > .sd-carousel__track {
    --sd-fade-r: 0px;
}

/* Cards: fixed width, all as tall as the tallest of the track (stretch);
   the author row sits on the bottom, so every card ends on one line. The
   tallest is bounded: image 1.618:1, title 2 lines, text 4 lines. */
.sd-carousels .sd-carousel__track > .sd-card {
    box-sizing: border-box;
    flex: 0 0 var(--sd-carousel-card);
    width: var(--sd-carousel-card);
    height: var(--sd-carousel-card-h);
    scroll-snap-align: start;
}

.sd-carousels .sd-carousel__track .sd-card__meta {
    margin-top: auto;
}

.sd-carousels .sd-carousel__track .sd-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--sd-16);
}

.sd-carousels .sd-carousel__track .sd-card__text {
    -webkit-line-clamp: 5;
}

/* Under a picture the text is a caption: 2 lines are enough. */
.sd-carousels .sd-carousel__track .sd-card--has-image .sd-card__text {
    -webkit-line-clamp: 2;
}

/* Text cards: the text is the content — one step larger, in the title
   colour, with a faint closing quote mark behind the lower right. */
.sd-carousels .sd-carousel__track .sd-card:not(.sd-card--has-image) .sd-card__text {
    color: var(--color-two, #013A63);
    font-size: var(--sd-16);
}

/* In a card stretched taller than its text, the text (with its title, if
   shown) floats between the pill and the author row instead of hanging
   from the top over an empty lower half. */
.sd-carousels .sd-carousel__track .sd-card:not(.sd-card--has-image) .sd-card__text,
.sd-carousels .sd-carousel__track .sd-card:not(.sd-card--has-image) .sd-card__title:not(.sd-card__title--hidden) {
    margin-block: auto;
}

.sd-carousels .sd-carousel__track .sd-card:not(.sd-card--has-image) .sd-card__title:not(.sd-card__title--hidden) {
    margin-bottom: 0;
}

.sd-carousels .sd-carousel__track .sd-card:not(.sd-card--has-image) .sd-card__title:not(.sd-card__title--hidden) + .sd-card__text {
    margin-top: 0;
}

.sd-carousels .sd-carousel__track .sd-card:not(.sd-card--has-image)::before {
    content: "\201D";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -38%);
    color: var(--color-four, #0285BA);
    font: 700 var(--sd-144) / 0.618 Georgia, "Times New Roman", serif;
    opacity: 0.08;
    pointer-events: none;
}

/* ⭐ on a text card: top right, centred on the pill's line (the pill is
   21px from the top and 13px × 1.618 + 2 × 3px tall); the pill stops
   short of it. */
.sd-card__save--corner {
    top: calc(var(--sd-21) + (var(--sd-13) * 1.618 + var(--sd-3) * 2 - var(--sd-34)) / 2);
    right: var(--sd-21);
}

.sd-carousels .sd-card:not(.sd-card--has-image) .sd-card__pill {
    max-width: calc(100% - var(--sd-34) - var(--sd-8));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .sd-carousels .sd-carousel__track .sd-card__title {
        font-size: var(--sd-21);
    }
}

/* Kép válogatás: the picture is the content — no text under it. */
.sd-carousels .horizontal-scroll-container-kepek .sd-card__text {
    display: none;
}

/* Compact author row: author, then the date or the ranking number on the
   right. */
.sd-carousels .sd-card__meta {
    justify-content: flex-start;
    padding-top: 0;
}

.sd-card__metric {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sd-5);
    margin-left: auto;
    color: var(--color-four, #0285BA);
    font-size: var(--sd-13);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sd-carousels .sd-card__date {
    margin-left: auto;
}

/* 233px cards: the author's name wins over the date. */
@media (max-width: 767px) {
    .sd-carousels .sd-carousel__track .sd-card__date {
        display: none;
    }
}

/* Empty list: one calm line in the gutter instead of a blank strip. */
.sd-carousels .sd-carousel__empty {
    flex: 1 0 100%;
    margin: 0;
    padding: var(--sd-21) var(--sd-34);
    border-radius: var(--sd-21);
    background: var(--sd-glass-strong);
    border: 1px dashed var(--sd-glass-border);
    color: var(--sd-text-muted);
    font-size: var(--sd-13);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Category chips (A legnépszerűbb kategóriák) — markup kept from
   emoji-listak.php: li > a > .category-title, .category-view-count.
   -------------------------------------------------------------------------- */
.sd-carousel__track--chips > li {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--sd-13);
    box-sizing: border-box;
    height: var(--sd-55);
    min-width: var(--sd-144);
    padding: var(--sd-8) var(--sd-13) var(--sd-8) var(--sd-21);
    border-radius: var(--sd-21);
    background: var(--color-one, #fff);
    box-shadow: var(--sd-shadow);
    scroll-snap-align: start;
    transition: transform var(--sd-hover) var(--sd-ease);
}

.sd-carousel__track--chips > li::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--sd-shadow-raised);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sd-hover) var(--sd-ease);
}

.sd-carousel__track--chips a {
    color: var(--color-two, #013A63);
    text-decoration: none;
}

/* Whole chip clickable (stretched link). */
.sd-carousel__track--chips a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.sd-carousel__track--chips a:focus-visible {
    outline: none;
}

.sd-carousel__track--chips a:focus-visible::before {
    outline: var(--sd-3) solid var(--color-four, #0285BA);
    outline-offset: var(--sd-3);
}

.sd-carousel__track--chips .category-title {
    font-size: var(--sd-16);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.sd-carousel__track--chips .category-view-count {
    display: inline-flex;
    align-items: center;
    gap: var(--sd-5);
    color: var(--sd-text-muted);
    font-size: var(--sd-13);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* A kis ▶ a chip jobb szélén, a nyújtott link fölött (szekely-design-play.css .sd-play-mini). */
.sd-carousel__track--chips > li > .sd-play-mini {
    z-index: 2;
    grid-row: 1 / span 2;
    grid-column: 2;
}

.sd-carousel__track--chips .category-view-count i {
    color: var(--color-four, #0285BA);
    font-size: var(--sd-13);
}

@media (hover: hover) {
    .sd-carousel__track--chips > li:hover {
        transform: translateY(calc(var(--sd-3) * -1));
    }

    .sd-carousel__track--chips > li:hover::after {
        opacity: 1;
    }

    .sd-carousel__track--chips > li:hover .category-title {
        color: var(--color-four, #0285BA);
    }
}

/* --------------------------------------------------------------------------
   Arrows — 55px round glass buttons, desktop (fine pointer) only. Hidden at
   the matching end and when everything fits; touch screens swipe. They sit
   in the gutter, 13px off the cards, so they never cover a card or its ⭐;
   where the gutter is narrower (768–1279px: 55px) they keep 8px from the
   screen edge and overlap only the transparent end of the fade.
   -------------------------------------------------------------------------- */
.sd-carousel__arrow {
    display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .sd-carousel__arrow {
        position: absolute;
        top: calc(50% - var(--sd-55) / 2);
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--sd-55);
        height: var(--sd-55);
        padding: 0;
        border: 1px solid var(--sd-glass-border);
        border-radius: 50%;
        background: var(--sd-glass-strong);
        -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);
        color: var(--color-two, #013A63);
        font-size: var(--sd-16);
        cursor: pointer;
        opacity: 0.89;
        transition: opacity var(--sd-hover) var(--sd-ease), transform var(--sd-hover) var(--sd-ease), color var(--sd-hover) var(--sd-ease);
    }

    .sd-carousel__arrow--prev {
        left: max(var(--sd-8), calc(var(--sd-carousel-gutter) - var(--sd-55) - var(--sd-13)));
    }

    .sd-carousel__arrow--next {
        right: max(var(--sd-8), calc(var(--sd-carousel-gutter) - var(--sd-55) - var(--sd-13)));
    }

    .sd-carousel__arrow:hover,
    .sd-carousel__arrow:focus-visible {
        opacity: 1;
        color: var(--color-four, #0285BA);
        transform: scale(1.08);
    }

    .sd-carousel__arrow:focus-visible {
        outline: 2px solid var(--color-four, #0285BA);
        outline-offset: 2px;
    }

    .sd-carousel__viewport.is-start > .sd-carousel__arrow--prev,
    .sd-carousel__viewport.is-end > .sd-carousel__arrow--next {
        opacity: 0;
        transform: scale(0.89);
        pointer-events: none;
    }
}

/* --------------------------------------------------------------------------
   Grid under the carousels ([szekely_tabs]): on the shared gutter line.
   -------------------------------------------------------------------------- */
.sd-carousels .szekely-tab-container {
    max-width: none;
    margin: var(--sd-21) 0 var(--sd-89);
    padding: 0;
}

/* Minden is: the same rule as the tracks — the cards of a row are equally
   tall, the text stops after 6 lines with "…", and the whole card links
   to the post (the excerpt link is stretched over it, see cards.css). */
.sd-carousels .szekely-posts-container {
    align-items: stretch;
}

.sd-carousels .szekely-post-content {
    flex: 1;
}

.sd-carousels .szekely-post-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Entrance — 610ms fade-up, 89ms stagger (--sd-i set by the script for
   the items that come into view together). Only ever set by JS, and never
   with prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.sd-carousels .sd-carousel__track > .sd-reveal-pending,
.sd-carousels .szekely-posts-container > .sd-reveal-pending {
    opacity: 0;
    transform: translateY(var(--sd-13));
}

.sd-carousels .sd-carousel__track > .sd-reveal-in,
.sd-carousels .szekely-posts-container > .sd-reveal-in {
    transition:
        opacity var(--sd-calm) var(--sd-ease) calc(var(--sd-i, 0) * 89ms),
        transform var(--sd-calm) var(--sd-ease) calc(var(--sd-i, 0) * 89ms);
}

/* --------------------------------------------------------------------------
   Egységes kártyaméret (2026-10-23): minden kártya 233 (telefon) / 377 (asztal) px széles és 377 px
   magas, border-box — az oldal minden körhintáján (korábban 232–485 px között ugráltak, a szélesség
   a belső margóval 275 / 419 px volt).
   - Kép-kártya: a kép a kártya teljes szélességében, 1,618 : 1 arányban (object-fit: cover), a téma-chip
     (pill) a képen, a cím, a szöveg és az alsó sor a kép alatt, a keret szélétől 21 px-re. Asztalon:
     377 = 233 (kép) + 144 (cím, szöveg, szerző); telefonon: 144 (kép) + 233.
   - Szöveg-kártya: a szöveg a függőleges közepén, legfeljebb 5 sor, a szerző és a dátum / szám mindig
     alul; a háttér-idézőjel is középen áll.
   -------------------------------------------------------------------------- */
.sd-carousels .sd-carousel__track > .sd-card--has-image {
    gap: 0;
    padding: 0;
}

.sd-carousels .sd-carousel__track .sd-card--has-image .sd-card__media {
    flex: none;
    width: 100%;
    border-radius: var(--sd-21) var(--sd-21) 0 0;
}

.sd-carousels .sd-carousel__track .sd-card--has-image .sd-card__pill {
    position: absolute;
    top: var(--sd-13);
    left: var(--sd-13);
    max-width: calc(100% - var(--sd-89));
    overflow: hidden;
    background: var(--sd-glass-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-carousels .sd-carousel__track .sd-card--has-image > .sd-card__title,
.sd-carousels .sd-carousel__track .sd-card--has-image > .sd-card__text,
.sd-carousels .sd-carousel__track .sd-card--has-image > .sd-card__meta {
    margin-inline: var(--sd-21);
}

.sd-carousels .sd-carousel__track .sd-card--has-image > .sd-card__title {
    margin-top: var(--sd-13);
}

.sd-carousels .sd-carousel__track .sd-card--has-image > .sd-card__text {
    margin-top: var(--sd-5);
}

.sd-carousels .sd-carousel__track .sd-card--has-image > .sd-card__meta {
    margin-top: auto;
    margin-bottom: var(--sd-13);
}

/* Telefon (233 × 377): a kép 144 magas, alatta 233 px — 2 soros cím, 3 soros szöveg. */
.sd-carousels .sd-carousel__track .sd-card--has-image .sd-card__title {
    -webkit-line-clamp: 2;
}

.sd-carousels .sd-carousel__track .sd-card--has-image .sd-card__text {
    -webkit-line-clamp: 3;
}

/* Asztal (377 × 377): a kép 233 magas, alatta 144 px — 1 soros cím, 2 soros szöveg; ahol nincs
   szöveg a kép alatt (Kép válogatás), a cím 2 soros lehet. */
@media (min-width: 768px) {
    .sd-carousels .sd-carousel__track .sd-card--has-image .sd-card__title {
        -webkit-line-clamp: 1;
    }

    .sd-carousels .sd-carousel__track .sd-card--has-image .sd-card__text {
        -webkit-line-clamp: 2;
    }

    .sd-carousels .horizontal-scroll-container-kepek .sd-card--has-image .sd-card__title {
        -webkit-line-clamp: 2;
    }

    /* Szöveg-kártya: a szöveg 21 px, 5 sor = 170 px a 377 px magas kártyában. */
    .sd-carousels .sd-carousel__track .sd-card:not(.sd-card--has-image) .sd-card__text {
        font-size: var(--sd-21);
    }
}

/* Szöveg-kártya: a (látható) cím egy sorban, a #téma-chip fix helyen, felül. */
.sd-carousels .sd-carousel__track .sd-card:not(.sd-card--has-image) .sd-card__title:not(.sd-card__title--hidden) {
    -webkit-line-clamp: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sd-carousels .sd-carousel__track {
        transition: none;
    }

    .sd-carousels .sd-carousel__track > .sd-reveal-pending,
    .sd-carousels .szekely-posts-container > .sd-reveal-pending {
        opacity: 1;
        transform: none;
    }

    .sd-carousel__track--chips > li,
    .sd-carousel__track--chips > li::after,
    .sd-carousel__arrow {
        transition: none;
    }

    .sd-carousel__track--chips > li:hover,
    .sd-carousel__arrow:hover,
    .sd-carousel__arrow:focus-visible {
        transform: none;
    }
}