/*
 * TE v4 – aloldali hero (terv3_aloldal), a v3 #articleTopImage utódja
 * author: Laszlo BLAHO – www.blaho.hu
 *
 * Szerkezet: [kék szövegblokk | nyíl | kép], szöveg 55% – kép 45%.
 *
 * Díszítés: a kék terület egy (alapból 4°-kal) elforgatott téglalapnak látszik; bal oldalt a
 * rózsaszín, alul a türkiz mező keretezi, így a két színes elemnek nincs vízszintes vagy
 * függőleges éle. Megvalósítás: a hero háttere kék, a két színes mező egy-egy
 * clip-path sokszög a hero méretű .te-hero__deco rétegen (méret-konténer: cqw/cqh).
 * NINCS óriási forgatott elem és árnyék – azok egyes böngészőkben / GPU-kon fekete
 * foltként renderelődtek.
 *
 * A téglalap bal alsó sarka: C = (stripe ; 100% − band). A vonalak C-n mennek át,
 * meredekségük tan(dőlés) – ezt a PHP számolja ki (--te-hero-tan), így CSS tan() nem kell.
 *
 * Cikkenként állítható (egyedi mezőkből, inline CSS-változóként):
 *   --te-hero-arrow    nyíl        (alap: arany)
 *   --te-hero-c1       bal oldali  (alap: rózsaszín)
 *   --te-hero-c2       alsó        (alap: türkiz)
 *   --te-hero-tan      tan(dőlés), előjeles   (alap: tan 4° = 0.0699)
 *   --te-hero-tan-abs  |tan(dőlés)|
 *   --te-hero-neg      1, ha a dőlés negatív (az alsó mező jobbra emelkedik), különben 0
 */

.te-hero {
   --te-hero-arrow: hsl(var(--gold));
   --te-hero-c1: hsl(var(--pink));
   --te-hero-c2: hsl(var(--turquoise));
   --te-hero-tan: 0.0699;
   --te-hero-tan-abs: 0.0699;
   --te-hero-neg: 0;
   --te-hero-h: clamp(280px, 25vw, 360px);
   --te-hero-stripe: clamp(14px, 2.2vw, 36px);
   --te-hero-band: clamp(40px, 4.6vw, 66px);
   --te-hero-gutter: max(
      calc(var(--te-hero-stripe) + var(--te-hero-h) * 1.3 * var(--te-hero-tan-abs) + 24px),
      calc((100vw - var(--container-max)) / 2 + var(--container-pad))
   );
   /* negatív dőlésnél az alsó mező a szöveg alatt jobbra emelkedik – ennyi plusz hely kell */
   --te-hero-rise: calc(var(--te-hero-neg) * var(--te-hero-tan-abs) * 55vw);

   position: relative;
   display: grid;
   /* szöveg 55% – kép 45% */
   grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
   min-height: var(--te-hero-h);
   overflow: hidden;
   background-color: hsl(var(--blue));
   color: hsl(var(--white));
   isolation: isolate;
}

/* díszítő réteg: a hero teljes mérete, a többi elem alatt */
.te-hero__deco {
   position: absolute;
   inset: 0;
   z-index: -1;
   container-type: size;
   pointer-events: none;
}

.te-hero__c1,
.te-hero__c2 {
   position: absolute;
   inset: 0;
}

/* alsó mező: a C-n átmenő, tan(dőlés) meredekségű vonal ALATT */
.te-hero__c2 {
   background-color: var(--te-hero-c2);
   clip-path: polygon(
      0 calc(100% - var(--te-hero-band) - var(--te-hero-stripe) * var(--te-hero-tan)),
      100% calc(100% - var(--te-hero-band) + (100cqw - var(--te-hero-stripe)) * var(--te-hero-tan)),
      100% 100%,
      0 100%
   );
}

/* bal oldali mező: a C-n átmenő, a függőlegestől dőlés szögben eltérő vonaltól BALRA */
.te-hero__c1 {
   background-color: var(--te-hero-c1);
   clip-path: polygon(
      0 0,
      calc(var(--te-hero-stripe) + (100cqh - var(--te-hero-band)) * var(--te-hero-tan)) 0,
      calc(var(--te-hero-stripe) - var(--te-hero-band) * var(--te-hero-tan)) 100%,
      0 100%
   );
}

/* --- Szövegblokk -------------------------------------------------------------- */

.te-hero__text {
   position: relative;
   display: flex;
   align-items: center;
   padding: var(--space-7) var(--space-7) calc(var(--space-6) + var(--te-hero-band) + var(--te-hero-rise)) var(--te-hero-gutter);
}

/* vízjel: a címer (media/images/watermark_tf.svg), halványan (5%), a szövegblokk jobb
   felén – nagyobb a hero-nál, alul kilóg. Méretei a szövegblokk magasságához igazodnak. */
.te-hero__mark {
   position: absolute;
   top: 4%;
   right: 10%;
   z-index: 0;
   height: 135%;
   aspect-ratio: 1;
   background-color: hsla(var(--white), .05);
   -webkit-mask: url('../images/watermark_tf.svg') center / contain no-repeat;
   mask: url('../images/watermark_tf.svg') center / contain no-repeat;
   pointer-events: none;
}

.te-hero__textinner {
   position: relative;
   z-index: 2;
   max-width: 760px;
}

.te-hero__eyebrow {
   display: inline-block;
   margin-bottom: var(--space-4);
   padding: 6px 16px;
   border-radius: 999px;
   background-color: hsl(var(--yellow));
   color: hsl(var(--darkBlue));
   font-size: 12px;
   font-weight: 500;
   letter-spacing: .28em;
   line-height: 1.4;
   text-transform: uppercase;
}

.te-hero__title {
   margin: 0;
   color: hsl(var(--white));
   font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -.01em;
   hyphens: manual;
   text-wrap: balance;
}

.te-hero__meta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2) var(--space-3);
   margin-top: var(--space-4);
}

.te-hero__pill {
   display: inline-block;
   padding: 5px 12px;
   border-radius: calc(var(--border-radius) * 3);
   background-color: hsla(var(--white), .16);
   color: hsl(var(--white));
   font-size: 14px;
}

.te-hero__intro {
   margin-top: var(--space-4);
   color: hsla(var(--white), .92);
   font-size: 16px;
   line-height: 1.5;

   p + p {
      margin-top: var(--space-2);
   }

   a {
      color: hsl(var(--yellow));
   }
}

/* --- Kép és nyíl -------------------------------------------------------------- */

/*
 * A nyíl dőlésszöge a logó pajzsának csúcsszögét követi: az élek a függőlegestől 30°-ra
 * dőlnek (vízszintes eltolás = tan 30° × függőleges út ≈ 0,577). Hogy a szög minden
 * képernyőszélességnél és hero-magasságnál azonos maradjon, minden méret a kép-oszlop
 * tényleges magasságához (cqh) van kötve:
 *   csúcs-eltolás  p = tan30° × 50cqh = 28,87cqh
 *   vastagság      t = 14,43cqh  (a teljes szélesség harmada)
 *   szélesség      t + p = 43,30cqh
 */
.te-hero__media {
   position: relative;
   min-height: 100%;
   container-type: size;
   --te-hero-arrow-p: 28.87cqh;
   --te-hero-arrow-w: 43.3cqh;
}

.te-hero__img,
.te-hero__zoom {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   /* a kép bal széle a nyíl külső vonalát követi */
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--te-hero-arrow-p) 50%);
}

.te-hero__img {
   display: block;
   object-fit: cover;
   object-position: center;
}

.te-hero__zoom {
   padding: 0;
   border: 0;
   background: none;
   cursor: zoom-in;

   .te-hero__img {
      clip-path: none;
   }

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

.te-hero__arrow {
   position: absolute;
   inset: 0 auto 0 0;
   z-index: 2;
   width: var(--te-hero-arrow-w);
   background-color: var(--te-hero-arrow);
   clip-path: polygon(0 0, 33.333% 0, 100% 50%, 33.333% 100%, 0 100%, 66.667% 50%);
   pointer-events: none;
}

/* --- Kép nélkül ----------------------------------------------------------------- */

.te-hero--noimage {
   grid-template-columns: minmax(0, 1fr);
   min-height: 0;

   .te-hero__text {
      padding-right: var(--te-hero-gutter);
   }

   .te-hero__textinner {
      max-width: 900px;
   }
}

/* --- Tablet / mobil ----------------------------------------------------------- */

/* 1040 px alatt (a mobilmenü és az oldalsáv töréspontja) a v3 Sporttudomány Blog
   mobil hero-ja szerint: felül a kép teljes szélességben, az alja kékbe fut, és a
   felirat / cím / címkék rácsúsznak a kép elhalványuló aljára. Nyíl és elválasztó sáv
   nincs; a rózsaszín és a türkiz díszítés csak a kép alatti kék részen látszik. */
@media (width < 1040px) {
   .te-hero {
      /* a kép magassága: 16:9, legfeljebb 440 px vagy a képernyő 60%-a */
      --te-hero-media-h: min(56.25vw, 440px, 60vh);
      /* ennyivel csúszik fel a szöveg a képre */
      --te-hero-overlap: clamp(48px, 9vw, 88px);
      --te-hero-stripe: 12px;
      --te-hero-band: 26px;
      --te-hero-gutter: max(
         calc(var(--container-pad) + 6px + 300px * var(--te-hero-tan-abs)),
         calc(var(--te-hero-stripe) + 24px)
      );
      --te-hero-rise: calc(var(--te-hero-neg) * var(--te-hero-tan-abs) * 100vw);

      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
   }

   .te-hero__media {
      order: -1;
      width: 100%;
      height: var(--te-hero-media-h);
      min-height: 0;

      /* a kép alja (és enyhén a széle) kékbe fut – a v3 blog-hero mobilos átmenete */
      &::after {
         content: '';
         position: absolute;
         inset: -1px;
         z-index: 1;
         pointer-events: none;
         background:
            radial-gradient(ellipse at 50% 35%, hsla(var(--blue), 0) 0%, hsla(var(--blue), 0) 40%, hsla(var(--blue), .45) 80%, hsla(var(--blue), .8) 100%),
            linear-gradient(180deg, hsla(var(--blue), 0) 45%, hsla(var(--blue), .85) 82%, hsl(var(--blue)) 100%);
      }
   }

   .te-hero__arrow {
      display: none;
   }

   .te-hero__img,
   .te-hero__zoom {
      clip-path: none;
   }

   /* a díszítés (rózsaszín bal sáv, türkiz alsó sáv) a kép alatt kezdődik */
   .te-hero--image .te-hero__deco {
      top: calc(var(--te-hero-media-h) - 1px);
   }

   .te-hero__text {
      z-index: 3;
      padding: var(--space-2) var(--container-pad) calc(var(--space-5) + var(--te-hero-band) + var(--te-hero-rise)) var(--te-hero-gutter);
   }

   .te-hero--image .te-hero__text {
      margin-top: calc(var(--te-hero-overlap) * -1);
   }

   .te-hero--noimage .te-hero__text {
      padding-top: var(--space-6);
   }

   .te-hero__title {
      font-size: clamp(1.75rem, 1rem + 4vw, 2.75rem);
      text-shadow: 0 2px 22px hsla(var(--darkBlue), .55);
   }

   .te-hero__meta,
   .te-hero__eyebrow {
      position: relative;
   }

   .te-hero__mark {
      top: 6%;
      right: -6%;
      height: 115%;
   }
}

/* --- Fejléckép nagyító (a v3 #headerLightBox utódja) ---------------------------- */

.te-lightbox {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--space-3);
   padding: var(--space-5);
   background-color: rgba(0, 0, 0, .85);
   cursor: zoom-out;

   img {
      display: block;
      max-width: 92vw;
      max-height: 86vh;
      width: auto;
      height: auto;
      border-radius: var(--radius);
   }

   p {
      max-width: 92vw;
      color: #fff;
      font-size: 14px;
      text-align: center;
   }
}

/* --- Megosztás visszajelzés ----------------------------------------------------- */

.te-toast {
   position: fixed;
   left: 50%;
   bottom: var(--space-6);
   z-index: 1001;
   padding: 10px 18px;
   border-radius: var(--radius);
   background: hsl(var(--darkBlue));
   color: hsl(var(--white));
   font-size: 14px;
   box-shadow: var(--shadow-card);
   transform: translateX(-50%);
}

@media print {
   .te-hero {
      min-height: 0;
      background: none;
      color: #000;

      .te-hero__deco,
      .te-hero__mark,
      .te-hero__arrow {
         display: none;
      }

      .te-hero__title {
         color: #000;
      }
   }
}