/*
 * TE v4 – listák: közös tartalomkártya, kártyarács, lapozó, címkefelhő
 * author: Laszlo BLAHO – www.blaho.hu
 *
 *   .te-postgrid > .te-post   kártyarács (layout: te.card.post; terv3 „friss hírek”)
 *   .te-post--row             sor (lista): balra kis kép, mellette felirat, dátum, cím, bevezető
 *   .te-pager                 lapozó (te.pagination, joomla.pagination.list/link)
 *   .te-tagcloud              Leggyakoribb címkék (mod_tags_popular)
 *   .te-list__*               lista-oldal kiegészítők: leírás, szűrő, üres lista
 *
 * Színek: --te-post (a kártya kategóriaszíne, inline), --te-post-ink (betű a címkén).
 * Réteg nélkül, mint a layout.css.
 */

/* ==========================================================================
   Lista-oldal
   ========================================================================== */

.te-list {
   min-width: 0;
}

.te-list__desc {
   margin-bottom: var(--space-6);
}

.te-list__empty {
   padding: var(--space-6);
   border: 1px dashed hsla(var(--darkBlue), .2);
   border-radius: var(--radius-lg);
   color: hsl(var(--midGray));
   text-align: center;
}

.te-list__filters {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3) var(--space-5);
   margin-bottom: var(--space-5);

   :is(input, select) {
      min-height: 40px;
      padding: 6px 12px;
      border: 1px solid hsla(var(--darkBlue), .2);
      border-radius: var(--radius);
      background: hsl(var(--white));
      color: hsl(var(--darkBlue));
      font: inherit;

      &:focus-visible {
         outline: 2px solid hsl(var(--gold));
         outline-offset: 1px;
      }
   }
}

.te-list__search {
   display: flex;
   flex: 1 1 320px;
   flex-wrap: wrap;
   gap: var(--space-2);

   input {
      flex: 1 1 180px;
      min-width: 0;
   }
}

.te-list__limit {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   color: hsl(var(--midGray));
   font-size: var(--fs-sm);
}

.te-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 40px;
   padding: 6px 18px;
   border: 1px solid hsl(var(--blue));
   border-radius: var(--radius);
   background: hsl(var(--blue));
   color: hsl(var(--white));
   font: inherit;
   font-weight: 500;
   cursor: pointer;
   transition: background-color var(--transition-time), color var(--transition-time);

   &:hover,
   &:focus-visible {
      background: hsl(var(--darkBlue));
   }

   &.te-btn--ghost {
      background: transparent;
      color: hsl(var(--blue));

      &:hover,
      &:focus-visible {
         background: hsla(var(--blue), .08);
      }
   }
}

/* „További cikkek” és alkategóriák a lista alatt */
:is(.te-list__more, .te-list__children) {
   margin: var(--space-6) 0;

   ul {
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid hsla(var(--darkBlue), .1);
   }

   li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-3);
      padding: 10px 0;
      border-bottom: 1px solid hsla(var(--darkBlue), .1);
   }

   a {
      color: hsl(var(--blue));
      font-weight: 500;
      text-decoration: none;

      &:hover,
      &:focus-visible {
         text-decoration: underline;
         text-underline-offset: 3px;
      }
   }
}

.te-list__subtitle {
   margin: 0 0 var(--space-3);
   color: hsl(var(--blue));
   font-size: 20px;
   font-weight: 700;
}

.te-list__count {
   flex: none;
   min-width: 24px;
   padding: 1px 7px;
   border-radius: 999px;
   background: hsla(var(--blue), .1);
   color: hsl(var(--blue));
   font-size: 12px;
   font-weight: 700;
   text-align: center;
}

/* ==========================================================================
   Kártyarács
   ========================================================================== */

.te-postgrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
   gap: var(--space-5);
   margin: 0 0 var(--space-7);

   &.te-postgrid--row {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;

      > :first-child {
         padding-top: 0;
      }
   }
}

/* ==========================================================================
   Tartalomkártya
   ========================================================================== */

.te-post {
   --te-post: var(--blue);
   --te-post-ink: var(--white);

   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   overflow: hidden;
   border: 1px solid hsla(var(--darkBlue), .1);
   border-radius: var(--radius-lg);
   background: hsl(var(--white));
   transition: box-shadow var(--transition-time), border-color var(--transition-time), transform var(--transition-time);

   &:hover,
   &:focus-within {
      border-color: hsla(var(--darkBlue), .18);
      box-shadow: var(--shadow-card);
   }

   &:hover {
      transform: translateY(-2px);
   }

   .te-post__media {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: hsl(var(--blue));

      img {
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 600ms ease;
      }
   }

   &:hover .te-post__media img {
      transform: scale(1.04);
   }

   /* kép nélküli tartalom: kék mező a címer vízjelével */
   .te-post__placeholder {
      position: absolute;
      inset: 0;
      background: hsl(var(--blue));

      &::after {
         content: '';
         position: absolute;
         inset: 18% 30%;
         background-color: hsla(var(--white), .14);
         -webkit-mask: url('../images/watermark_tf.svg') center / contain no-repeat;
         mask: url('../images/watermark_tf.svg') center / contain no-repeat;
      }
   }

   .te-post__body {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
      padding: 18px 20px 22px;
   }

   .te-post__badge {
      margin: 0 0 2px;
      padding: 3px 9px;
      border-radius: var(--radius-sm);
      background: hsl(var(--te-post));
      color: hsl(var(--te-post-ink));
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      line-height: 1.4;
      text-transform: uppercase;
   }

   .te-post__title {
      margin: 0;
      color: hsl(var(--blue));
      font-family: var(--font-base);
      font-size: 19px;
      font-weight: 700;
      line-height: 1.25;
      overflow-wrap: anywhere;
      hyphens: manual;
      text-wrap: pretty;
   }

   /* az egész kártya kattintható */
   .te-post__link {
      color: inherit;
      text-decoration: none;

      &::after {
         content: '';
         position: absolute;
         inset: 0;
         z-index: 1;
      }

      &:hover,
      &:focus-visible {
         text-decoration: underline;
         text-decoration-thickness: 2px;
         text-underline-offset: 3px;
      }

      &:focus-visible {
         outline: none;

         &::after {
            outline: 3px solid hsl(var(--gold));
            outline-offset: -3px;
            border-radius: var(--radius-lg);
         }
      }
   }

   .te-post__date {
      color: hsl(var(--midGray));
      font-size: 13px;
      line-height: 1.3;
   }

   .te-post__intro {
      margin: 4px 0 0;
      color: hsl(var(--midGray));
      font-size: 14px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      overflow: hidden;
   }

   .te-post__author {
      color: hsl(var(--midGray));
      font-size: 13px;
      line-height: 1.3;
   }

   /* címkék a bevezető alatt – linkek, a kifeszített kártyalink fölött */
   .te-post__tags {
      position: relative;
      z-index: 2;
      display: flex;
      flex: 1 0 100%;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 4px 12px;
      margin: 4px 0 0;
      font-size: 14px;
      line-height: 1.4;
   }

   .te-post__tags-label {
      color: hsl(var(--midGray));
   }

   .te-post__tag {
      color: hsl(var(--blue));
      font-weight: 500;
      text-decoration: none;

      &:hover,
      &:focus-visible {
         text-decoration: underline;
         text-underline-offset: 3px;
      }
   }

   .te-post__status {
      margin: 0;
      color: hsl(var(--strawberry));
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
   }

   /* a kártya végére tett plugin-kimenet (pl. értékelés) maradjon kattintható */
   .te-post__body > :not(.te-post__badge, .te-post__title, .te-post__date, .te-post__author, .te-post__intro, .te-post__tags, .te-post__status) {
      position: relative;
      z-index: 2;
   }

   &.te-post--unpublished {
      border-style: dashed;
      border-color: hsla(var(--strawberry), .6);

      .te-post__media {
         opacity: .6;
      }
   }

   /* --- Sor (lista) ----------------------------------------------------------
      A v3 címkelistájához hasonlóan: balra a kép, mellette felirat + dátum egy sorban,
      alatta a cím és a bevezető; a sorok között vékony vonal, keret és árnyék nélkül. */

   &.te-post--row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
      overflow: visible;
      padding: var(--space-5) 0;
      border: 0;
      border-bottom: 1px solid hsla(var(--darkBlue), .1);
      border-radius: 0;
      background: transparent;

      &:hover,
      &:focus-within {
         border-color: hsla(var(--darkBlue), .1);
         box-shadow: none;
         transform: none;
      }

      &.te-post--media {
         grid-template-columns: clamp(140px, 24%, 210px) minmax(0, 1fr);
         align-items: start;
      }

      .te-post__media {
         aspect-ratio: 16 / 9;
         border-radius: var(--radius);
      }

      .te-post__body {
         display: flex;
         flex-flow: row wrap;
         align-items: center;
         gap: 8px 10px;
         padding: 0;
      }

      /* felirat és dátum egy sorban a cím fölött (a DOM-ban a dátum a cím után van) */
      .te-post__badge {
         order: 1;
         margin: 0;
      }

      .te-post__date {
         order: 2;
         padding: 3px 9px;
         border-radius: var(--radius-sm);
         background: hsla(var(--darkBlue), .07);
         color: hsl(var(--darkBlue));
         font-size: 12px;
         font-weight: 500;
         line-height: 1.4;
      }

      .te-post__author {
         order: 2;
         padding: 3px 9px;
         border-radius: var(--radius-sm);
         background: hsla(var(--darkBlue), .07);
         color: hsl(var(--darkBlue));
         font-size: 12px;
         font-weight: 500;
         line-height: 1.4;
      }

      .te-post__title {
         order: 3;
         flex: 1 0 100%;
         margin-top: 2px;
         font-size: clamp(19px, 1.1rem + .4vw, 23px);
         font-weight: 500;
      }

      .te-post__intro {
         order: 4;
         flex: 1 0 100%;
         margin: 0;
         font-size: 15px;
         -webkit-line-clamp: 4;
         line-clamp: 4;
      }

      .te-post__tags {
         order: 5;
      }

      .te-post__body > :not(.te-post__badge, .te-post__title, .te-post__date, .te-post__author, .te-post__intro, .te-post__tags) {
         order: 6;
         flex: 1 0 100%;
      }

      &.te-post--unpublished {
         border-bottom-style: dashed;
         border-bottom-color: hsla(var(--strawberry), .6);
      }

      /* fókusz a kifeszített linkhez: a sor körül, ne a kép sarkaihoz igazodva */
      .te-post__link:focus-visible::after {
         border-radius: var(--radius);
         outline-offset: 2px;
      }
   }

   /* keskeny nézet: kép felül, teljes szélességben */
   @media (width < 576px) {
      &.te-post--row.te-post--media {
         grid-template-columns: minmax(0, 1fr);
         gap: var(--space-3);
      }
   }
}

@media (prefers-reduced-motion: reduce) {
   .te-post,
   .te-post .te-post__media img {
      transition: none;
   }

   .te-post:hover,
   .te-post:hover .te-post__media img {
      transform: none;
   }
}

/* ==========================================================================
   Lapozó
   ========================================================================== */

.te-pager {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-3);
   margin: var(--space-6) 0;
}

.te-pager__list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.te-pager__item {
   margin: 0;
   padding: 0;
   list-style: none;
}

.te-pager__link,
.te-pager__gap {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 42px;
   height: 42px;
   padding: 0 10px;
   border-radius: var(--radius);
   font-size: 15px;
   font-weight: 500;
   line-height: 1;
}

.te-pager__link {
   border: 1px solid hsla(var(--darkBlue), .15);
   background: hsl(var(--white));
   color: hsl(var(--blue));
   text-decoration: none;
   transition: background-color var(--transition-time), border-color var(--transition-time), color var(--transition-time);

   svg {
      display: block;
   }

   &:is(a):hover,
   &:is(a):focus-visible {
      border-color: hsl(var(--blue));
      background: hsla(var(--lightBlue), .25);
      color: hsl(var(--darkBlue));
   }

   &.is-current {
      border-color: hsl(var(--blue));
      background: hsl(var(--blue));
      color: hsl(var(--white));
      font-weight: 700;
   }

   &.is-disabled {
      opacity: .35;
   }
}

.te-pager__gap {
   min-width: 24px;
   padding: 0;
   color: hsl(var(--midGray));
}

.te-pager__counter {
   margin: 0;
   color: hsl(var(--midGray));
   font-size: 13px;
}

@media (width < 576px) {
   .te-pager__link,
   .te-pager__gap {
      min-width: 38px;
      height: 38px;
   }
}

/* ==========================================================================
   Leggyakoribb címkék
   ========================================================================== */

.te-tagcloud__list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   margin: 0;
   padding: 0;
   list-style: none;

   li {
      margin: 0;
      padding: 0;
   }
}

.te-tagcloud__tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 5px 6px 5px 12px;
   border: 1px solid hsla(var(--darkBlue), .15);
   border-radius: 999px;
   background: hsl(var(--white));
   color: hsl(var(--blue));
   font-size: 14px;
   line-height: 1.3;
   text-decoration: none;
   max-width: 100%;
   overflow-wrap: anywhere;
   transition: background-color var(--transition-time), border-color var(--transition-time), color var(--transition-time);

   &:not(:has(.te-tagcloud__count)) {
      padding-right: 12px;
   }

   &:hover,
   &:focus-visible {
      border-color: hsl(var(--blue));
      background: hsla(var(--lightBlue), .25);
      color: hsl(var(--darkBlue));
   }

   &.is-active {
      border-color: hsl(var(--blue));
      background: hsl(var(--blue));
      color: hsl(var(--white));

      .te-tagcloud__count {
         background: hsla(var(--white), .2);
         color: hsl(var(--white));
      }
   }
}

.te-tagcloud__count {
   flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 22px;
   height: 22px;
   padding: 0 6px;
   border-radius: 999px;
   white-space: nowrap;
   background: hsla(var(--blue), .1);
   color: hsl(var(--blue));
   font-size: 11px;
   font-weight: 700;
}

/* felhő: a betűméret inline (em), a számláló ne nőjön vele */
.te-tagcloud--sized .te-tagcloud__count {
   font-size: 11px;
}

.te-tagcloud__empty {
   margin: 0;
   color: hsl(var(--midGray));
   font-size: 14px;
}

/* ==========================================================================
   Archívum (com_monthlyarchive)
   ========================================================================== */

.te-archive-form {
   margin-bottom: var(--space-6);
   padding: var(--space-4);
   border-radius: var(--radius-lg);
   background: hsla(var(--blue), .05);

   :is(input, select) {
      width: 100%;
      min-height: 40px;
      padding: 6px 12px;
      border: 1px solid hsla(var(--darkBlue), .2);
      border-radius: var(--radius);
      background: hsl(var(--white));
      color: hsl(var(--darkBlue));
      font: inherit;

      &:focus-visible {
         outline: 2px solid hsl(var(--gold));
         outline-offset: 1px;
      }
   }
}

.te-archive-form__fields {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
   gap: var(--space-3);
}

.te-archive-form__field {
   min-width: 0;
}

.te-archive-form__search {
   display: flex;
   grid-column: 1 / -1;
   gap: var(--space-2);

   input {
      flex: 1 1 auto;
      min-width: 0;
   }

   .te-btn {
      flex: none;
   }

   .te-btn--ghost {
      min-width: 40px;
      padding-inline: 10px;
      font-size: 20px;
      line-height: 1;
   }
}

.te-archivepage__back {
   margin: 0 0 var(--space-4);
}

.te-archive-years {
   display: grid;
   gap: var(--space-6);
}

.te-archive-year__title {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   margin: 0 0 var(--space-3);
   padding-bottom: var(--space-2);
   border-bottom: 2px solid hsla(var(--blue), .15);
   font-size: 22px;
   font-weight: 700;

   a {
      color: hsl(var(--blue));
      text-decoration: none;

      &:hover,
      &:focus-visible {
         text-decoration: underline;
         text-underline-offset: 4px;
      }
   }

   .te-list__count {
      font-size: 12px;
      font-weight: 600;
   }
}

.te-archive-year__months {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: var(--space-2);
   margin: 0;
   padding: 0;
   list-style: none;
}

.te-archive-month {
   display: flex;
   flex-direction: column;
   gap: 2px;
   height: 100%;
   padding: 10px 14px;
   border: 1px solid hsla(var(--darkBlue), .12);
   border-left: 4px solid hsl(var(--gold));
   border-radius: var(--radius);
   background: hsl(var(--white));
   color: hsl(var(--darkBlue));
   text-decoration: none;
   transition: background-color var(--transition-time), border-color var(--transition-time);

   &:hover,
   &:focus-visible {
      border-color: hsl(var(--blue));
      background: hsla(var(--blue), .06);
   }
}

.te-archive-month__name {
   font-weight: 600;
}

.te-archive-month__count {
   color: hsl(var(--midGray));
   font-size: var(--fs-sm);
}

/* Keresett szó kiemelése a cikklistában */
.te-post mark {
   padding: 0 2px;
   border-radius: 2px;
   background: hsla(var(--gold), .35);
   color: inherit;
}

/* ==========================================================================
   Eseménynaptár (TE Events) – a komponens saját CSS-e mellé
   ========================================================================== */

/* Az esemény neve, kategóriája és képe a hero-ban van */
.te-events--event :is(.teevents-event-header, .teevents-event-image) {
   display: none;
}

/* A v3 _eventcalendar.scss megmaradt szabályai */
#content .container article.te-events ul.teevents-cal-legend {
   margin: 0 0 20px;
}

div.teevents-upcoming {
   margin-bottom: 20px;
}

.teevents-btn.is-active {
   color: hsl(var(--white)) !important;
}

/* A komponens Bootstrap-gombjai (Naptárba mentés, Vissza a naptárhoz) a v4 gombjaként */
#content .container article.te-events .btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 36px;
   margin: 0 6px 6px 0;
   padding: 4px 14px;
   border: 1px solid hsl(var(--blue));
   border-radius: var(--radius);
   background: transparent;
   color: hsl(var(--blue));
   font-size: var(--fs-sm);
   font-weight: 500;
   text-decoration: none;
   transition: background-color var(--transition-time);

   &:hover,
   &:focus-visible {
      background: hsla(var(--blue), .08);
   }
}

/* A TE Events színei a v4 tokenjeire kötve (a komponens CSS-e ezeket a változókat olvassa) */
:is(.te-events, .te-sidecard, .te-page) {
   --link-color: hsl(var(--blue));
   --te-btn-active-bg: hsl(var(--blue));
   --te-btn-color: hsl(var(--darkBlue));
   --border-color: hsla(var(--darkBlue), .15);
}

#content .container article.te-events .teevents-cal-title {
   margin: var(--space-4) 0 var(--space-3);
   color: hsl(var(--blue));
   font-family: 'Kanit', sans-serif;
   font-size: 26px;
   font-weight: 600;
}

/* ==========================================================================
   Teljes szélességű sáv a tartalom fölött (v4-top): slider, hírblokk
   ========================================================================== */

.te-top__inner {
   display: grid;
   gap: var(--space-7);
   padding-top: var(--space-7);
}

/* a sáv alatt a tartalom saját felső térköze elég */
.te-top + .te-page {
   padding-top: var(--space-7);
}

/* ==========================================================================
   Hírblokk (te.news.block – mod_articles „te-news”, mod_articles_news „natural-news”)
   ========================================================================== */

.te-newsblock {
   min-width: 0;
}

.te-newsblock__head {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   margin-bottom: var(--space-5);
}

.te-newsblock__title {
   flex: none;
   margin: 0;
   color: hsl(var(--blue));
   font-family: var(--font-base);
   font-size: var(--fs-xl);
   font-weight: 700;
   line-height: 1.15;
}

.te-newsblock__rule {
   flex: 1 1 auto;
   height: 1px;
   background: hsla(var(--darkBlue), .14);
}

.te-newsblock__more {
   flex: none;
   gap: var(--space-2);
   text-decoration: none;

   svg {
      transition: transform var(--transition-time);
   }

   &:hover svg,
   &:focus-visible svg {
      transform: translateX(3px);
   }
}

.te-newsblock__list {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--space-5);
   margin: 0;
   padding: 0;
   list-style: none;
}

.te-newsblock__item {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;

   > .te-post {
      flex: 1 1 auto;
   }

   &::before {
      content: none;
   }
}

/* 1040 px alatt vízszintesen lapozható sor: a következő kártya széle kilátszik */
@media (width < 1040px) {

   .te-newsblock__list {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - var(--space-5)) / 2.3);
      gap: var(--space-4);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--container-pad);
      /* a sor a konténer széléig fut, a kártyák a konténer vonalában kezdődnek */
      margin-inline: calc(var(--container-pad) * -1);
      padding: 4px var(--container-pad) var(--space-4);
      scrollbar-width: thin;
      scrollbar-color: hsla(var(--blue), .35) transparent;
   }

   .te-newsblock__item {
      scroll-snap-align: start;
   }

   /* érintőképernyőn nincs emelkedés (görgetés közben ugrálna) */
   .te-newsblock .te-post:hover {
      transform: none;
   }
}

@media (width < 576px) {

   .te-newsblock__list {
      grid-auto-columns: 82%;
   }

   .te-newsblock__head {
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-4);
   }

   .te-newsblock__rule {
      display: none;
   }

   .te-newsblock__title {
      flex: 1 1 auto;
   }
}

/* ==========================================================================
   Kiemelt hírek slider (te.news.slider – mod_articles „te-slider”,
   mod_articles_news „slideshow”; a v3 #subpageFeaturedNews utódja)
   ========================================================================== */

.te-slider {
   --te-slide-title: hsl(var(--blue));
   --te-slide-text: hsl(var(--midGray));
   --te-slide-btn: var(--blue);
   --te-slide-btn-ink: var(--white);

   position: relative;
   min-width: 0;
   padding: var(--space-5);
   border: 1px solid hsla(var(--lightBlue), .45);
   border-radius: var(--radius-lg);
   background: hsla(var(--lightBlue), .1);

   /* JavaScript nélkül (és betöltés előtt) az első dia látszik – a Splide alap CSS-e
      az egész slidert elrejtené */
   &.splide {
      visibility: visible;
   }

   &:not(.is-initialized) .splide__slide:not(:first-child),
   &:not(.is-initialized) .te-slider__nav {
      display: none;
   }

   &:not(.is-initialized) .splide__slide {
      width: 100%;
   }
}

.te-slider__heading {
   margin: 0 0 var(--space-4);
   color: hsl(var(--blue));
   font-size: var(--fs-lg);
   font-weight: 700;
}

.te-slide {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-5) var(--space-7);
   margin: 0;
   list-style: none;

   &::before {
      content: none;
   }

   &.te-slide--noimage {
      grid-template-columns: minmax(0, 1fr);
   }
}

.te-slide__media {
   position: relative;
   aspect-ratio: 2 / 1;
   overflow: hidden;
   border-radius: var(--radius);
   background: hsl(var(--blue));

   img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
}

.te-slide__body {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: var(--space-4);
   min-width: 0;
   /* a nyilak és a számláló alul jobbra: ne takarja a gombot */
   padding-bottom: var(--space-6);
}

.te-slide__title {
   margin: 0;
   color: var(--te-slide-title);
   font-family: var(--font-base);
   font-size: clamp(20px, 1.2rem + .6vw, 26px);
   font-weight: 700;
   line-height: 1.15;
   text-wrap: balance;
}

.te-slide__intro {
   margin: 0;
   color: var(--te-slide-text);
   font-size: clamp(14px, .85rem + .2vw, 16px);
   line-height: 1.45;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 6;
   line-clamp: 6;
   overflow: hidden;
}

.te-slide__btn {
   display: inline-flex;
   align-items: center;
   gap: var(--space-3);
   min-height: 40px;
   padding: 8px 18px;
   border-radius: var(--radius);
   background: hsl(var(--te-slide-btn));
   color: hsl(var(--te-slide-btn-ink));
   font-size: var(--fs-sm);
   font-weight: 600;
   letter-spacing: .05em;
   line-height: 1.1;
   text-decoration: none;
   text-transform: uppercase;
   transition: background-color var(--transition-time), box-shadow var(--transition-time);

   svg {
      flex: none;
      transition: transform var(--transition-time);
   }

   &:hover,
   &:focus-visible {
      background: hsla(var(--te-slide-btn), .85);
      color: hsl(var(--te-slide-btn-ink));

      svg {
         transform: translateX(3px);
      }
   }

   &:focus-visible {
      outline: 3px solid hsl(var(--gold));
      outline-offset: 2px;
   }
}

/* fehér gomb a világos dobozon: kerettel */
.te-slide[style*="--te-slide-btn: var(--white)"] .te-slide__btn {
   box-shadow: inset 0 0 0 1px hsla(var(--blue), .35);
}

.te-slider__nav {
   position: absolute;
   right: var(--space-5);
   bottom: var(--space-5);
   z-index: 1;
   display: flex;
   align-items: center;
   gap: var(--space-1);
}

.te-slider__arrow {
   display: inline-grid;
   place-items: center;
   width: 32px;
   height: 32px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   color: hsl(var(--blue));
   cursor: pointer;
   opacity: .45;
   transition: opacity var(--transition-time), background-color var(--transition-time);

   &.splide__arrow--prev svg {
      transform: scaleX(-1);
   }

   &:hover,
   &:focus-visible {
      opacity: 1;
      background: hsla(var(--blue), .08);
   }

   &:focus-visible {
      outline: 3px solid hsl(var(--gold));
      outline-offset: 0;
   }

   &:disabled {
      opacity: .2;
      cursor: default;
   }
}

.te-slider__counter {
   min-width: 3ch;
   color: hsl(var(--blue));
   font-size: var(--fs-sm);
   font-variant-numeric: tabular-nums;
   text-align: center;
}

@media (width < 768px) {

   .te-slider {
      padding: var(--space-4);
   }

   .te-slide {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      gap: var(--space-4);
   }

   .te-slider__nav {
      right: var(--space-3);
      bottom: var(--space-3);
   }
}