/* ▶ Vetítés — főoldali szerkezet (body.home), ▶ gombok, kategória-chipek és -csoportok, archívum-cím.
   Markup: includes/play-buttons.php. Csak a --color-one / --color-four márkaszínek és származékaik
   (0.08 / 0.13 / 0.21 / 0.34 / 0.55 / 0.89), Fibonacci méretek, 233–377 ms visszajelzés,
   610 ms belépő, 89 ms léptetés, csak transform és opacity mozog, prefers-reduced-motion. */

.sd-play__icon {
    flex: none;
    display: block;
}

.sd-play__label {
    white-space: nowrap;
}

@keyframes sd-play-in {
    from { opacity: 0; transform: translateY(var(--sd-13)); }
    to   { opacity: 1; transform: none; }
}

@keyframes sd-play-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* --- Gombok ------------------------------------------------------------------ */

.sd-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sd-8);
    max-width: 100%;
    min-height: var(--sd-55);
    padding: 0 var(--sd-34);
    border-radius: var(--sd-34);
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    font-size: var(--sd-21);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: 0 var(--sd-3) var(--sd-8) color-mix(in srgb, var(--color-four, #0285BA) 34%, transparent);
    transition: transform var(--sd-hover) var(--sd-ease), box-shadow var(--sd-hover) var(--sd-ease);
}

.sd-play-btn .sd-play__label {
    white-space: normal;
}

.sd-play-btn:hover,
.sd-play-btn:focus-visible {
    color: var(--color-one, #fff);
    transform: scale(1.03);
    box-shadow: 0 var(--sd-8) var(--sd-21) color-mix(in srgb, var(--color-four, #0285BA) 34%, transparent);
}

.sd-play-btn:active {
    transform: scale(1);
}

.sd-play-btn--small {
    min-height: var(--sd-34);
    padding: 0 var(--sd-21);
    font-size: var(--sd-16);
}

.sd-play-btn:focus-visible,
.sd-play-mini:focus-visible,
.sd-play-group:focus-visible,
.sd-home-tv__link:focus-visible,
.sd-home-tv__start:focus-visible {
    outline: var(--sd-3) solid color-mix(in srgb, var(--color-four, #0285BA) 55%, transparent);
    outline-offset: var(--sd-3);
}

/* --- Főoldal: új szerkezet a tartalom fölött (body.home) ----------------------- */

/* A téma constrained elrendezése a gyerekeket a tartalom-szélességre fogja
   (:where, nulla specificitás), ezért itt elég egy osztály a 987 px-hez. */
body.home .sd-home {
    max-width: var(--sd-987);
    margin: 0 auto;
    padding: var(--sd-21) var(--sd-21) 0;
    color: var(--sd-text, #2b2b2b);
}

body.home .sd-home__heading {
    margin: var(--sd-55) 0 var(--sd-21);
    font-size: var(--sd-21);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

body.home .sd-home__heading--browse {
    margin-top: var(--sd-89);
    padding-top: var(--sd-34);
    border-top: 1px solid color-mix(in srgb, var(--color-four, #0285BA) 13%, transparent);
}

/* A) HERO: szöveg + TV-keretes élő előnézet (1 : 1,618) */
body.home .sd-home-hero {
    display: grid;
    gap: var(--sd-34);
    align-items: center;
    animation: sd-play-in var(--sd-calm) var(--sd-ease) both;
}

body.home .sd-home-hero > * {
    min-width: 0;
}

body.home .sd-home-hero__text {
    text-align: center;
}

body.home .sd-home-hero__eyebrow {
    margin: 0 0 var(--sd-8);
    font-size: var(--sd-13);
    font-weight: 700;
    letter-spacing: var(--sd-2);
    text-transform: uppercase;
    color: var(--color-four, #0285BA);
}

body.home .sd-home-hero__title {
    margin: 0 0 var(--sd-13);
    font-size: var(--sd-34);
    font-weight: 700;
    line-height: 1.3;
}

body.home .sd-home-hero__lead {
    margin: 0 0 var(--sd-21);
    font-size: var(--sd-16);
    line-height: 1.618;
    color: var(--sd-text-muted, #555);
}

/* TV: keret (bezel) + 1,618:1 képernyő + talp */
body.home .sd-home-tv {
    margin: 0;
}

body.home .sd-home-tv__bezel {
    padding: var(--sd-8);
    border-radius: var(--sd-21);
    background: var(--color-four, #0285BA);
    box-shadow: var(--sd-shadow-raised);
}

body.home .sd-home-tv__screen {
    position: relative;
    aspect-ratio: 1.618 / 1;
    overflow: hidden;
    border-radius: var(--sd-13);
    background: color-mix(in srgb, var(--color-four, #0285BA) 89%, transparent);
}

body.home .sd-home-tv__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* A poszter addig látszik, amíg az előnézet be nem töltődött (vagy nem indult el). */
body.home .sd-home-tv__poster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-one, #fff);
    transition: opacity var(--sd-hover-slow) var(--sd-ease);
}

body.home .sd-home-tv__icon {
    display: block;
    animation: sd-play-pulse var(--sd-calm-slow) var(--sd-ease) infinite;
}

body.home .sd-home-tv.is-playing .sd-home-tv__poster {
    opacity: 0;
}

/* Átlátszó linkréteg a keret fölött: kattintásra a teljes /play/ nyílik új lapon. */
body.home .sd-home-tv__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

body.home .sd-home-tv__start {
    position: absolute;
    right: 0;
    bottom: var(--sd-21);
    left: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--sd-8);
    width: max-content;
    min-height: var(--sd-34);
    margin: 0 auto;
    padding: 0 var(--sd-21);
    border: 0;
    border-radius: var(--sd-34);
    background: var(--color-one, #fff);
    color: var(--color-four, #0285BA);
    font: inherit;
    font-size: var(--sd-16);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--sd-hover) var(--sd-ease);
}

body.home .sd-home-tv__start[hidden] {
    display: none;
}

body.home .sd-home-tv__start:hover {
    transform: scale(1.05);
}

body.home .sd-home-tv::after {
    content: "";
    display: block;
    width: var(--sd-144);
    height: var(--sd-8);
    margin: var(--sd-8) auto 0;
    border-radius: var(--sd-8);
    background: color-mix(in srgb, var(--color-four, #0285BA) 34%, transparent);
}

body.home .sd-home-tv__caption {
    margin-top: var(--sd-8);
    font-size: var(--sd-13);
    text-align: center;
    color: var(--sd-text-muted, #555);
}

/* B) CSATORNÁK: kártyák (5 kártya: 3 + 2, középre igazítva) */
body.home .sd-home-channels__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sd-13);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.home .sd-home-card {
    display: flex;
    flex: 1 1 var(--sd-233);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sd-8);
    max-width: var(--sd-377);
    margin: 0;
    padding: var(--sd-21);
    border: 1px solid color-mix(in srgb, var(--color-four, #0285BA) 13%, transparent);
    border-radius: var(--sd-21);
    background: color-mix(in srgb, var(--color-one, #fff) 89%, transparent);
    box-shadow: var(--sd-shadow);
    transition: transform var(--sd-hover) var(--sd-ease), box-shadow var(--sd-hover) var(--sd-ease);
    animation: sd-play-in var(--sd-calm) var(--sd-ease) both;
}

body.home .sd-home-card:nth-child(1) { animation-delay: var(--sd-stagger-fast); }
body.home .sd-home-card:nth-child(2) { animation-delay: calc(var(--sd-stagger-fast) * 2); }
body.home .sd-home-card:nth-child(3) { animation-delay: calc(var(--sd-stagger-fast) * 3); }
body.home .sd-home-card:nth-child(4) { animation-delay: calc(var(--sd-stagger-fast) * 4); }
body.home .sd-home-card:nth-child(5) { animation-delay: calc(var(--sd-stagger-fast) * 5); }

body.home .sd-home-card:hover {
    transform: translateY(calc(var(--sd-3) * -1));
    box-shadow: var(--sd-shadow-raised);
}

/* Vonalikonok (inline SVG, play-buttons.php): méret és szín csak innen */
.sd-ico {
    display: block;
    flex: none;
    color: color-mix(in srgb, var(--color-four, #0285BA) 89%, transparent);
    transition: transform var(--sd-hover) var(--sd-ease);
}

.sd-ico--lg {
    width: var(--sd-34);
    height: var(--sd-34);
}

.sd-ico--sm {
    width: var(--sd-21);
    height: var(--sd-21);
}

/* Az ikon a cím ELSŐ sorához igazodik: a 21 px-es ikon a 21 px * 1,3 = 27,3 px-es sor közepére
   kerül (a különbség fele, kb. 3 px). Többsoros címnél nem csúszik a sorok közé. */
body.home .sd-home-step__title .sd-ico,
body.home .sd-home-why__title .sd-ico {
    margin-top: var(--sd-3);
}

body.home .sd-home-card:hover .sd-ico,
.sd-bcard:hover .sd-ico {
    transform: scale(1.05);
}

body.home .sd-home-card__head {
    display: flex;
    align-items: center;
    gap: var(--sd-13);
}

body.home .sd-home-card__icon {
    display: flex;
}

body.home .sd-home-card__title {
    margin: 0;
    font-size: var(--sd-21);
    font-weight: 700;
    line-height: 1.3;
}

body.home .sd-home-card__text {
    flex: 1 1 auto;
    margin: 0 0 var(--sd-8);
    font-size: var(--sd-16);
    line-height: 1.618;
    color: var(--sd-text-muted, #555);
}

/* C) HOGYAN MŰKÖDIK: 3 számozott lépés */
body.home .sd-home-how__list,
body.home .sd-home-why__list {
    display: grid;
    gap: var(--sd-21);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.home .sd-home-how__list {
    counter-reset: sd-step;
}

body.home .sd-home-step {
    position: relative;
    margin: 0;
    padding-left: calc(var(--sd-34) + var(--sd-13));
    counter-increment: sd-step;
}

body.home .sd-home-step::before {
    content: counter(sd-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sd-34);
    height: var(--sd-34);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-four, #0285BA) 13%, transparent);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-16);
    font-weight: 700;
}

body.home .sd-home-step__title,
body.home .sd-home-why__title {
    display: flex;
    align-items: flex-start;
    gap: var(--sd-8);
    margin: 0 0 var(--sd-5);
    font-size: var(--sd-21);
    font-weight: 700;
    line-height: 1.3;
}

body.home .sd-home-step__text,
body.home .sd-home-why__text {
    margin: 0;
    font-size: var(--sd-16);
    line-height: 1.618;
    color: var(--sd-text-muted, #555);
}

/* D) MIÉRT A SZÉKELY INFÓ: 3 pont */
body.home .sd-home-why__item {
    margin: 0;
    padding: var(--sd-21);
    border-left: var(--sd-5) solid color-mix(in srgb, var(--color-four, #0285BA) 34%, transparent);
    border-radius: var(--sd-8);
    background: color-mix(in srgb, var(--color-four, #0285BA) 8%, transparent);
}

@media (min-width: 610px) {
    body.home .sd-home__heading {
        font-size: var(--sd-34);
    }

    body.home .sd-home-how__list,
    body.home .sd-home-why__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 987px) {
    body.home .sd-home-hero {
        grid-template-columns: 1fr 1.618fr;
    }

    body.home .sd-home-hero__text {
        text-align: left;
    }
}

/* --- Böngésző-kártyák (főoldal "Böngéssz tovább" + Napi plusz) ---------------- */

.sd-browse {
    max-width: var(--sd-987);
    margin: 0 auto var(--sd-55);
    padding: 0 var(--sd-21);
    color: var(--sd-text, #2b2b2b);
}

.sd-browse--page {
    margin-top: var(--sd-34);
}

.sd-browse__heading {
    margin: 0 0 var(--sd-8);
    font-size: var(--sd-21);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.sd-browse__lead {
    margin: 0 0 var(--sd-21);
    font-size: var(--sd-16);
    line-height: 1.618;
    text-align: center;
    color: var(--sd-text-muted, #555);
}

.sd-browse__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sd-13);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-bcard {
    display: flex;
    flex: 1 1 var(--sd-233);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sd-8);
    max-width: var(--sd-377);
    margin: 0;
    padding: var(--sd-21);
    border: 1px solid color-mix(in srgb, var(--color-four, #0285BA) 13%, transparent);
    border-radius: var(--sd-21);
    background: color-mix(in srgb, var(--color-one, #fff) 89%, transparent);
    box-shadow: var(--sd-shadow);
    transition: transform var(--sd-hover) var(--sd-ease), box-shadow var(--sd-hover) var(--sd-ease);
    animation: sd-play-in var(--sd-calm) var(--sd-ease) both;
}

.sd-bcard:nth-child(1) { animation-delay: var(--sd-stagger-fast); }
.sd-bcard:nth-child(2) { animation-delay: calc(var(--sd-stagger-fast) * 2); }
.sd-bcard:nth-child(3) { animation-delay: calc(var(--sd-stagger-fast) * 3); }
.sd-bcard:nth-child(4) { animation-delay: calc(var(--sd-stagger-fast) * 4); }
.sd-bcard:nth-child(5) { animation-delay: calc(var(--sd-stagger-fast) * 5); }

.sd-bcard:hover {
    transform: translateY(calc(var(--sd-3) * -1));
    box-shadow: var(--sd-shadow-raised);
}

.sd-bcard__head {
    display: flex;
    align-items: center;
    gap: var(--sd-13);
}

.sd-bcard__icon {
    display: flex;
}

.sd-bcard__title {
    margin: 0;
    font-size: var(--sd-21);
    font-weight: 700;
    line-height: 1.3;
}

.sd-bcard__text {
    flex: 1 1 auto;
    margin: 0 0 var(--sd-8);
    font-size: var(--sd-16);
    line-height: 1.618;
    color: var(--sd-text-muted, #555);
}

.sd-bcard__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sd-8) var(--sd-21);
}

.sd-bcard__open {
    display: inline-flex;
    align-items: center;
    gap: var(--sd-5);
    min-height: var(--sd-34);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-16);
    font-weight: 600;
    text-decoration: none;
}

.sd-bcard__open:hover,
.sd-bcard__open:focus-visible {
    text-decoration: underline;
}

.sd-bcard__open:focus-visible {
    outline: var(--sd-3) solid color-mix(in srgb, var(--color-four, #0285BA) 55%, transparent);
    outline-offset: var(--sd-3);
}

@media (min-width: 610px) {
    .sd-browse__heading {
        font-size: var(--sd-34);
    }
}

/* --- Rólunk / Info oldal ([szekely_about], includes/about-page.php) ------------ */

.sd-about {
    max-width: var(--sd-987);
    margin: 0 auto;
    padding: var(--sd-21) var(--sd-21) 0;
    color: var(--sd-text, #2b2b2b);
}

.sd-about__hero {
    margin-bottom: var(--sd-55);
    padding: var(--sd-34) var(--sd-21);
    border: 1px solid color-mix(in srgb, var(--color-four, #0285BA) 13%, transparent);
    border-radius: var(--sd-21);
    background: color-mix(in srgb, var(--color-four, #0285BA) 8%, transparent);
    text-align: center;
    animation: sd-play-in var(--sd-calm) var(--sd-ease) both;
}

.sd-about__eyebrow {
    margin: 0 0 var(--sd-8);
    font-size: var(--sd-13);
    font-weight: 700;
    letter-spacing: var(--sd-2);
    text-transform: uppercase;
    color: var(--color-four, #0285BA);
}

.sd-about__title {
    margin: 0 0 var(--sd-13);
    font-size: var(--sd-34);
    font-weight: 700;
    line-height: 1.3;
}

.sd-about__lead {
    max-width: var(--sd-610);
    margin: 0 auto var(--sd-21);
    font-size: var(--sd-16);
    line-height: 1.618;
    color: var(--sd-text-muted, #555);
}

.sd-about__section {
    margin: 0 0 var(--sd-55);
}

.sd-about__heading {
    margin: 0 0 var(--sd-21);
    font-size: var(--sd-21);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.sd-about__section p {
    max-width: var(--sd-610);
    margin: 0 auto var(--sd-13);
    font-size: var(--sd-16);
    line-height: 1.618;
}

.sd-about a:not(.sd-play-btn) {
    color: var(--color-four, #0285BA);
}

.sd-about__features,
.sd-about__steps {
    display: grid;
    gap: var(--sd-21);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-about__steps {
    counter-reset: sd-about-step;
}

.sd-about__feature {
    margin: 0;
    padding: var(--sd-21);
    border-left: var(--sd-5) solid color-mix(in srgb, var(--color-four, #0285BA) 34%, transparent);
    border-radius: var(--sd-8);
    background: color-mix(in srgb, var(--color-four, #0285BA) 8%, transparent);
}

.sd-about__feature p {
    max-width: none;
    margin: 0;
    color: var(--sd-text-muted, #555);
}

.sd-about__feature-title,
.sd-about__step-title {
    display: flex;
    align-items: flex-start;
    gap: var(--sd-8);
    margin: 0 0 var(--sd-5);
    font-size: var(--sd-21);
    font-weight: 700;
    line-height: 1.3;
}

.sd-about__feature-title .sd-ico,
.sd-about__step-title .sd-ico {
    margin-top: var(--sd-3);
}

.sd-about__step {
    position: relative;
    margin: 0;
    padding-left: calc(var(--sd-34) + var(--sd-13));
    counter-increment: sd-about-step;
}

.sd-about__step::before {
    content: counter(sd-about-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sd-34);
    height: var(--sd-34);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-four, #0285BA) 13%, transparent);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-16);
    font-weight: 700;
}

.sd-about__step-text {
    margin: 0;
    font-size: var(--sd-16);
    line-height: 1.618;
    color: var(--sd-text-muted, #555);
}

.sd-about__details {
    max-width: var(--sd-610);
    margin: var(--sd-21) auto 0;
}

.sd-about__details summary {
    display: flex;
    align-items: center;
    min-height: var(--sd-34);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-16);
    font-weight: 600;
    cursor: pointer;
}

.sd-about__levels {
    display: grid;
    gap: var(--sd-8);
    margin: var(--sd-13) 0 0;
    padding: 0;
    list-style: none;
}

.sd-about__level {
    display: flex;
    align-items: center;
    gap: var(--sd-13);
    font-size: var(--sd-16);
}

.sd-about__level-no {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--sd-34);
    height: var(--sd-34);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-four, #0285BA) 13%, transparent);
    color: var(--color-four, #0285BA);
    font-weight: 700;
}

.sd-about__level-body {
    display: flex;
    flex-direction: column;
}

.sd-about__level-xp {
    font-size: var(--sd-13);
    color: var(--sd-text-muted, #555);
}

.sd-about__credits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sd-5) var(--sd-21);
    margin: var(--sd-13) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--sd-13);
}

.sd-about__credits a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sd-34);
}

.sd-about__closing {
    margin: 0 0 var(--sd-34);
    text-align: center;
}

@media (min-width: 610px) {
    .sd-about__heading {
        font-size: var(--sd-34);
    }

    .sd-about__features {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-about__steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .sd-about__credits a {
        min-height: var(--sd-55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-about__hero {
        animation: none;
    }
}

/* --- Archívum: cím + gomb -------------------------------------------------- */

.sd-play-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sd-13);
}

/* --- Kategóriák oldal: kis ▶ a chip mellett, csoport-gomb a fejlécen ------- */

.szc-pillwrap {
    display: inline-flex;
    align-items: center;
    gap: var(--sd-5);
}

/* A keresés elrejtett chipjével a ▶ is eltűnik. */
.szc-pillwrap:has(> .szc-pill--hidden) {
    display: none;
}

.sd-play-mini,
.sd-play-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--color-four, #0285BA);
    background: color-mix(in srgb, var(--color-four, #0285BA) 13%, transparent);
    text-decoration: none;
    transition: transform var(--sd-hover) var(--sd-ease), background var(--sd-hover) var(--sd-ease), color var(--sd-hover) var(--sd-ease);
}

/* Láthatatlan, nagyobb érintési felület: 34 + 2 * 8 = 50 px magas. */
.sd-play-mini::after,
.sd-play-group::after {
    content: "";
    position: absolute;
    inset: calc(var(--sd-8) * -1) calc(var(--sd-5) * -1);
}

.sd-play-mini {
    width: var(--sd-34);
    height: var(--sd-34);
    border-radius: 50%;
}

.sd-play-mini:hover,
.sd-play-mini:focus-visible,
.sd-play-group:hover,
.sd-play-group:focus-visible {
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    transform: scale(1.05);
}

.szc-section {
    position: relative;
}

.sd-play-group {
    position: absolute;
    top: var(--sd-8);
    right: var(--sd-89);
    gap: var(--sd-5);
    height: var(--sd-34);
    padding: 0 var(--sd-13);
    border-radius: var(--sd-34);
    font-size: var(--sd-13);
    font-weight: 600;
    z-index: 1;
}

/* Asztalon nincs lenyíló nyíl, a gomb a darabszám mellé kerül. */
@media (min-width: 768px) {
    .sd-play-group {
        right: var(--sd-55);
    }
}

/* Mobil: 55 px-es gombok; 610 px alatt a csoport-gomb csak ikon (az aria-label megmarad). */
@media (max-width: 767px) {
    .sd-play-btn--small,
    .sd-bcard__open {
        min-height: var(--sd-55);
    }
}

@media (max-width: 610px) {
    .sd-play-group .sd-play__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .sd-play-group {
        width: var(--sd-34);
        padding: 0;
    }
}

@media (max-width: 377px) {
    body.home .sd-home {
        padding-right: var(--sd-13);
        padding-left: var(--sd-13);
    }

    .sd-play-btn {
        padding: 0 var(--sd-21);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home .sd-home-hero,
    body.home .sd-home-card,
    .sd-bcard,
    body.home .sd-home-tv__icon {
        animation: none;
    }

    .sd-play-btn,
    .sd-play-mini,
    .sd-play-group,
    body.home .sd-home-card,
    .sd-bcard,
    .sd-ico,
    body.home .sd-home-tv__start,
    body.home .sd-home-tv__poster {
        transition: none;
    }

    .sd-play-btn:hover,
    .sd-play-btn:focus-visible,
    .sd-play-mini:hover,
    .sd-play-mini:focus-visible,
    .sd-play-group:hover,
    .sd-play-group:focus-visible,
    body.home .sd-home-card:hover,
    .sd-bcard:hover,
    body.home .sd-home-card:hover .sd-ico,
    .sd-bcard:hover .sd-ico,
    body.home .sd-home-tv__start:hover {
        transform: none;
    }
}

/* --- Főoldal: Telepítés és kijelző (3 kártya a hero és a csatornák között; includes/play-buttons.php) --------
   Ugyanaz a kártya (.sd-home-card), mint a csatornáké; itt csak a lista, a lépések, a kioszk-szakasz és az [hidden] védelem. */

body.home .sd-home-install__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sd-13);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A kártyák display-e felülírná a hidden attribútumot: itt visszaállítjuk. */
body.home .sd-home-card [hidden] {
    display: none;
}

/* Már telepített alkalmazásban (standalone) a "Tedd a főképernyőre" kártya CSS-sel is rejtett (villanás nélkül; a JS is elrejti). */
@media (display-mode: standalone) {
    body.home .sd-home-card--install {
        display: none;
    }
}

body.home .sd-install-steps {
    display: grid;
    gap: var(--sd-8);
    width: 100%;
    margin: 0 0 var(--sd-8);
    padding: 0;
    list-style: none;
    counter-reset: sd-step;
}

body.home .sd-install-steps__item {
    display: flex;
    align-items: center;
    gap: var(--sd-13);
    margin: 0;
    font-size: var(--sd-16);
    line-height: 1.3;
    counter-increment: sd-step;
}

/* A lépés sorszáma: márkakék kör (a szám CSS-számlálóból jön, nem kerül a szövegbe). */
body.home .sd-install-steps__item::before {
    content: counter(sd-step);
    flex: none;
    width: var(--sd-21);
    height: var(--sd-21);
    border-radius: 50%;
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    font-size: var(--sd-13);
    font-weight: 700;
    line-height: var(--sd-21);
    text-align: center;
}

body.home .sd-install-steps__ico {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--sd-55);
    height: var(--sd-55);
    border-radius: var(--sd-13);
    background: color-mix(in srgb, var(--color-four, #0285BA) 8%, transparent);
}

body.home .sd-install-steps__text b {
    font-weight: 700;
    overflow-wrap: anywhere;
}

body.home .sd-install__thanks {
    font-weight: 700;
    color: var(--color-four, #0285BA);
}

/* Kioszk mód: összecsukható szakasz */
body.home .sd-home-card__more {
    width: 100%;
}

body.home .sd-home-card__more-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sd-13);
    min-height: var(--sd-55);
    font-size: var(--sd-16);
    font-weight: 700;
    color: var(--color-four, #0285BA);
    list-style: none;
    cursor: pointer;
}

body.home .sd-home-card__more-title::-webkit-details-marker {
    display: none;
}

body.home .sd-home-card__more-title::after {
    content: "";
    flex: none;
    width: var(--sd-8);
    height: var(--sd-8);
    border-right: var(--sd-2) solid currentColor;
    border-bottom: var(--sd-2) solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sd-hover) var(--sd-ease);
}

body.home .sd-home-card__more[open] .sd-home-card__more-title::after {
    transform: rotate(-135deg);
}

body.home .sd-home-card__more-title:focus-visible {
    outline: var(--sd-3) solid color-mix(in srgb, var(--color-four, #0285BA) 55%, transparent);
    outline-offset: var(--sd-3);
    border-radius: var(--sd-8);
}

body.home .sd-kiosk {
    margin: 0 0 var(--sd-8);
}

body.home .sd-kiosk__name {
    margin: var(--sd-13) 0 var(--sd-3);
    font-size: var(--sd-16);
    font-weight: 700;
    line-height: 1.3;
}

body.home .sd-kiosk__text {
    margin: 0;
    font-size: var(--sd-16);
    line-height: 1.618;
    color: var(--sd-text-muted, #555);
}

@media (prefers-reduced-motion: reduce) {
    body.home .sd-home-card__more-title::after {
        transition: none;
    }
}

/* A "Telepítés" gomb <button>: a link-gombok (.sd-play-btn) alapját kapja, a böngésző keretezése és betűje nélkül. */
button.sd-play-btn {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

button.sd-play-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}