/*
 * mod_tequote – TE idézet (TE v4 sablonhoz, főoldal v4-home pozíció)
 * Teljes szélességű fotó, rajta színes doboz az idézettel, kiemelt szórésszel és szerzővel.
 * 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-quote {
   position: relative;
   isolation: isolate;
   display: flex;
   align-items: center;
   min-height: var(--te-quote-min, clamp(420px, 38vw, 560px));
   overflow: hidden;
   background-color: hsl(var(--darkBlue, 220, 74%, 20%));
   color: hsl(var(--white, 0, 0%, 100%));
}

.te-quote__media {
   position: absolute;
   inset: 0;
   z-index: -1;

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

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

.te-quote--right .te-quote__wrap {
   justify-content: flex-end;
}

.te-quote__box {
   box-sizing: border-box;
   width: min(100%, 620px);
   margin: 0;
   padding: clamp(28px, 3.4vw, 48px);
   border-radius: var(--radius-lg, 12px);
   background-color: hsla(var(--te-quote-box), .94);
   box-shadow: 0 24px 48px -24px hsla(0, 0%, 0%, .5);
}

.te-quote__mark {
   display: block;
   width: clamp(32px, 3vw, 40px);
   height: auto;
   margin-bottom: var(--space-4, 16px);
   color: hsla(var(--white, 0, 0%, 100%), .85);
}

.te-quote__text {
   margin: 0;
   padding: 0;
   border: 0;

   p {
      margin: 0;
      color: hsl(var(--white, 0, 0%, 100%));
      font-family: var(--font-base, inherit);
      font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.01em;
      text-wrap: balance;
   }
}

.te-quote__hl {
   color: hsl(var(--te-quote-accent));
   font-style: normal;
}

.te-quote__cite {
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin-top: var(--space-5, 24px);
   padding-left: var(--space-4, 16px);
   border-left: 3px solid hsl(var(--te-quote-accent));
   font-size: var(--fs-sm, .875rem);
}

.te-quote__author {
   color: hsl(var(--white, 0, 0%, 100%));
   font-size: var(--fs-md, 1rem);
   font-weight: 700;
}

a.te-quote__author {
   text-decoration: none;

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

.te-quote__role {
   color: hsla(var(--white, 0, 0%, 100%), .8);
}

/* 768 px alatt: a fotó felül sávként, a doboz alatta, teljes szélességben */
@media (width < 768px) {
   .te-quote {
      display: block;
      min-height: 0;
      background-color: hsl(var(--te-quote-box));
   }

   .te-quote__media {
      position: relative;
      inset: auto;
      z-index: 0;
      aspect-ratio: 16 / 9;
   }

   .te-quote__wrap {
      padding: 0;
   }

   .te-quote__box {
      width: 100%;
      border-radius: 0;
      background-color: hsl(var(--te-quote-box));
      box-shadow: none;
   }

   .te-quote:not(.te-quote--noimage) .te-quote__box {
      margin-top: -32px;
      position: relative;
      width: calc(100% - var(--container-pad, 16px) * 2);
      margin-inline: auto;
      margin-bottom: var(--container-pad, 16px);
      border-radius: var(--radius-lg, 12px);
   }
}