/*
 * mod_teeventhero – TE Rendezvény hero slider (TE v4 sablonhoz, v4-hero pozíció)
 * Forgó háttérfotók, rajtuk fix felirat, gombok és kulcskép.
 * A színek, térközök és betűk a TE v4 tokenjeit használják; más sablon alatt a tartalékértékeket.
 * author: Laszlo BLAHO – www.blaho.hu
 */

.te-ehero {
   --te-ehero-fade: 1.4s;

   position: relative;
   isolation: isolate;
   display: grid;
   grid-template-rows: 1fr auto;
   --te-ehero-overlay: var(--blue, 220, 74%, 33%);
   --te-ehero-ov: 1;

   min-height: var(--te-ehero-min, clamp(380px, 32vw, 500px));
   overflow: hidden;
   background: hsl(var(--te-ehero-overlay));
   color: hsl(var(--white, 0, 0%, 100%));
}

/* --- Fotók ------------------------------------------------------------- */

.te-ehero__media {
   position: absolute;
   inset: 0;
   z-index: -2;
}

.te-ehero__photo {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   transform: scale(1.02);
   transition: opacity var(--te-ehero-fade) ease;

   &.is-active {
      opacity: 1;
      /* enyhe ráközelítés a fotó teljes ideje alatt (+ az áttűnés) */
      animation: te-ehero-zoom calc(var(--te-ehero-interval) + var(--te-ehero-fade) * 2) linear forwards;
   }
}

@keyframes te-ehero-zoom {
   from { transform: scale(1.02); }
   to   { transform: scale(1.1); }
}

.te-ehero.is-paused .te-ehero__photo.is-active {
   animation-play-state: paused;
}

/* olvashatóság: bal oldalt az overlay színe (alatta enyhe sötétítés), jobbra kifut; alul a
   vezérlők alatt is. Szín: --te-ehero-overlay (modulbeállítás), erősség: --te-ehero-ov szorzó. */
.te-ehero__shade {
   position: absolute;
   inset: 0;
   z-index: -1;
   background:
      linear-gradient(90deg,
         hsla(var(--te-ehero-overlay), calc(.92 * var(--te-ehero-ov))) 0%,
         hsla(var(--te-ehero-overlay), calc(.8 * var(--te-ehero-ov))) 34%,
         hsla(var(--te-ehero-overlay), calc(.35 * var(--te-ehero-ov))) 64%,
         hsla(var(--te-ehero-overlay), calc(.12 * var(--te-ehero-ov))) 100%),
      linear-gradient(90deg, hsla(0, 0%, 0%, calc(.28 * var(--te-ehero-ov))) 0%, transparent 46%),
      linear-gradient(0deg, hsla(0, 0%, 0%, calc(.35 * var(--te-ehero-ov))) 0%, transparent 32%);
}

.te-ehero--nophoto .te-ehero__shade {
   background:
      linear-gradient(90deg, hsla(0, 0%, 0%, .3), transparent 70%),
      hsl(var(--te-ehero-overlay));
}

/* --- Szöveg és kulcskép ------------------------------------------------ */

.te-ehero__wrap {
   box-sizing: border-box;
   width: 100%;
   max-width: var(--container-max, 1344px);
   margin-inline: auto;
   padding-inline: var(--container-pad, clamp(16px, 3vw, 36px));
}

.te-ehero__inner {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   align-items: center;
   gap: var(--space-6, 32px) var(--space-8, 64px);
   padding-block: var(--space-7, 48px) var(--space-6, 32px);
}

.te-ehero--visual .te-ehero__inner {
   grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

.te-ehero__text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: var(--space-4, 16px);
   max-width: 640px;
}

.te-ehero__name,
.te-ehero__title {
   margin: 0;
   color: hsl(var(--white, 0, 0%, 100%));
   font-family: var(--font-base, inherit);
   font-weight: 700;
   letter-spacing: -.01em;
   text-wrap: balance;
   text-shadow: 0 1px 18px hsla(0, 0%, 0%, .3);
}

/* főoldal: a rendezvény neve a cím */
.te-ehero__name {
   position: relative;
   padding-top: var(--space-4, 16px);
   font-size: clamp(1.875rem, 1.1rem + 2vw, 3rem);
   line-height: 1.05;

   /* rövid színes vonal a név fölött (a kulcskép téglalapjának színe) */
   &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 56px;
      height: 4px;
      border-radius: 2px;
      background: hsl(var(--te-ehero-accent));
   }
}

.te-ehero--long .te-ehero__name {
   font-size: clamp(1.625rem, 1rem + 1.5vw, 2.375rem);
}

/* aloldal: a név kisebb felirat, alatta az aloldal címe */
.te-ehero--sub {
   .te-ehero__name {
      font-size: clamp(1.125rem, .95rem + .5vw, 1.5rem);
      font-weight: 600;
      line-height: 1.2;
      opacity: .92;
   }

   .te-ehero__title {
      margin-top: calc(var(--space-2, 8px) * -1);
      font-size: clamp(2rem, 1.2rem + 2vw, 3rem);
      line-height: 1.05;
   }
}

.te-ehero__meta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2, 8px);
   margin: 0;

   span {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 4px 14px;
      border: 1px solid hsla(var(--white, 0, 0%, 100%), .28);
      border-radius: 999px;
      background: hsla(var(--te-ehero-overlay), .45);
      backdrop-filter: blur(6px);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;
   }

   /* az első sor (jellemzően a dátum) kiemelve */
   span:first-child {
      border-color: transparent;
      background: hsl(var(--te-ehero-accent));
      color: hsl(var(--darkBlue, 220, 74%, 20%));
      font-weight: 700;
   }
}

.te-ehero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3, 12px);
   margin: var(--space-2, 8px) 0 0;
}

.te-ehero__btn {
   display: inline-flex;
   align-items: center;
   gap: var(--space-3, 12px);
   min-height: 44px;
   padding: 10px 20px;
   border: 1px solid hsla(var(--white, 0, 0%, 100%), .7);
   border-radius: var(--radius, 6px);
   color: hsl(var(--white, 0, 0%, 100%));
   font-size: var(--fs-sm, .875rem);
   font-weight: 600;
   letter-spacing: .05em;
   line-height: 1.1;
   text-decoration: none;
   text-transform: uppercase;
   transition: background-color var(--transition-time, 400ms), border-color var(--transition-time, 400ms), color var(--transition-time, 400ms);

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

   &:hover,
   &:focus-visible {
      border-color: hsl(var(--white, 0, 0%, 100%));
      background: hsla(var(--white, 0, 0%, 100%), .12);
      color: hsl(var(--white, 0, 0%, 100%));

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

   &:focus-visible {
      outline: 3px solid hsl(var(--gold, 45, 100%, 42%));
      outline-offset: 2px;
   }
}

.te-ehero__btn--primary {
   border-color: hsl(var(--white, 0, 0%, 100%));
   background: hsl(var(--white, 0, 0%, 100%));
   color: hsl(var(--blue, 220, 74%, 33%));

   &:hover,
   &:focus-visible {
      background: hsla(var(--white, 0, 0%, 100%), .88);
      color: hsl(var(--blue, 220, 74%, 33%));
   }
}

/* kulcskép: fehér keret, mögötte eltolt színes téglalap (a v3 arany háttérblokkjának utódja) */
.te-ehero__visual {
   position: relative;
   justify-self: end;
   width: min(100%, 520px);
   margin: 0 18px 18px 0;

   &::before {
      content: "";
      position: absolute;
      inset: 18px -18px -18px 18px;
      z-index: -1;
      border-radius: var(--radius-lg, 12px);
      background: hsl(var(--te-ehero-accent));
   }

   img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--radius-lg, 12px);
      box-shadow: 0 18px 40px hsla(0, 0%, 0%, .3);
   }
}

/* --- Vezérlők ---------------------------------------------------------- */

.te-ehero__controls {
   display: flex;
   align-items: center;
   gap: var(--space-3, 12px);
   padding-bottom: var(--space-4, 16px);
}

.te-ehero__bars {
   display: flex;
   gap: 6px;
}

.te-ehero__bar {
   display: grid;
   align-items: center;
   width: 40px;
   height: 24px;
   padding: 0;
   border: 0;
   background: transparent;
   cursor: pointer;

   span {
      position: relative;
      display: block;
      height: 3px;
      overflow: hidden;
      border-radius: 2px;
      background: hsla(var(--white, 0, 0%, 100%), .35);
   }

   span::after {
      content: "";
      position: absolute;
      inset: 0;
      background: hsl(var(--white, 0, 0%, 100%));
      transform: scaleX(0);
      transform-origin: left;
   }

   &.is-done span::after {
      transform: scaleX(1);
   }

   &.is-active span::after {
      animation: te-ehero-bar var(--te-ehero-interval) linear forwards;
   }

   &:hover span {
      background: hsla(var(--white, 0, 0%, 100%), .6);
   }

   &:focus-visible {
      outline: 3px solid hsl(var(--gold, 45, 100%, 42%));
      outline-offset: 2px;
      border-radius: 4px;
   }
}

/* JS nélkül, szüneteltetve és csökkentett mozgásnál az aktív sáv tele */
.te-ehero:not(.is-ready) .te-ehero__bar.is-active span::after,
.te-ehero.is-paused .te-ehero__bar.is-active span::after {
   animation: none;
   transform: scaleX(1);
}

.te-ehero:not(.is-ready) .te-ehero__controls {
   display: none;
}

@keyframes te-ehero-bar {
   to { transform: scaleX(1); }
}

.te-ehero__pause {
   display: inline-grid;
   place-items: center;
   width: 32px;
   height: 32px;
   padding: 0;
   border: 1px solid hsla(var(--white, 0, 0%, 100%), .45);
   border-radius: 50%;
   background: hsla(var(--te-ehero-overlay), .4);
   color: hsl(var(--white, 0, 0%, 100%));
   cursor: pointer;
   transition: background-color var(--transition-time, 400ms), border-color var(--transition-time, 400ms);

   &:hover {
      border-color: hsl(var(--white, 0, 0%, 100%));
      background: hsla(var(--white, 0, 0%, 100%), .15);
   }

   &:focus-visible {
      outline: 3px solid hsl(var(--gold, 45, 100%, 42%));
      outline-offset: 2px;
   }

   .te-ehero__icon-play {
      display: none;
   }

   &[aria-pressed="true"] {
      .te-ehero__icon-pause { display: none; }
      .te-ehero__icon-play  { display: block; }
   }
}

/* --- Kisebb kijelzők --------------------------------------------------- */

@media (width < 1040px) {

   .te-ehero--visual .te-ehero__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
      gap: var(--space-6, 32px);
   }
}

@media (width < 768px) {

   .te-ehero {
      min-height: 0;
   }

   .te-ehero__shade {
      background:
         linear-gradient(0deg,
            hsla(var(--te-ehero-overlay), calc(.95 * var(--te-ehero-ov))) 0%,
            hsla(var(--te-ehero-overlay), calc(.78 * var(--te-ehero-ov))) 55%,
            hsla(var(--te-ehero-overlay), calc(.35 * var(--te-ehero-ov))) 100%),
         linear-gradient(0deg, hsla(0, 0%, 0%, calc(.3 * var(--te-ehero-ov))) 0%, transparent 60%);
   }

   .te-ehero--visual .te-ehero__inner {
      grid-template-columns: minmax(0, 1fr);
   }

   .te-ehero__inner {
      padding-block: var(--space-6, 32px) var(--space-5, 24px);
   }

   /* a kulcskép a szöveg fölé, kisebben */
   .te-ehero__visual {
      order: -1;
      justify-self: start;
      width: min(100% - 18px, 340px);
      margin: 0 18px 10px 0;

      &::before {
         inset: 10px -10px -10px 10px;
      }
   }

   .te-ehero__btn {
      flex: 1 1 auto;
      justify-content: center;
   }
}

/* sötét kiemelőszín (türkiz, zöld, lila, eper): fehér felirat a dátumon */
.te-ehero--accent-dark .te-ehero__meta span:first-child {
   color: hsl(var(--white, 0, 0%, 100%));
}

/* ráközelítés kikapcsolva (modulbeállítás) */
.te-ehero--nozoom .te-ehero__photo,
.te-ehero--nozoom .te-ehero__photo.is-active {
   animation: none;
   transform: none;
}

@media (prefers-reduced-motion: reduce) {

   .te-ehero__photo {
      transition-duration: .3s;

      &.is-active {
         animation: none;
         transform: none;
      }
   }

   .te-ehero__bar.is-active span::after {
      animation: none;
      transform: scaleX(1);
   }
}