/* ==========================================================================
   Podul — video badge
   --------------------------------------------------------------------------
   The play button on articles whose post head is set to Video, in every tile:
   homepage hero, homepage cards, archives, search, the "Citește în Continuare"
   band, the tabs widget, the mega menu.

   What drives it is Jannah's own setting — the `tie_post_head` postmeta, set
   per article in Post Settings → Post Head → Video. Nothing here guesses from
   the article body: an article without that setting gets no badge, however
   many videos its text contains.

   Jannah already emits everything needed. `tie_post_format_icon()` prints
   .post-thumb-overlay-wrap > .post-thumb-overlay > .tie-media-icon into the
   thumbnail, and `tie_post_class()` puts .tie-video on the post. Two things
   stopped it being visible:

     1. Theme Options → thumbnail overlay is off, so Jannah hides it outright:
        `.is-thumb-overlay-disabled .post-thumb-overlay { display: none }`.
     2. When it is shown, it is a hover state — a dark scrim over the whole
        photograph, revealed on :hover — not the always-on button in the design.

   So this sheet keeps the markup and restyles the container: visible at rest,
   centred, and with no scrim over the photograph.

   Every rule is scoped to .tie-video. A post head of gallery, audio or slider
   keeps whatever Jannah does with it today — this sheet only claims video.
   ========================================================================== */


/* `inset: 0` matters: Jannah gives both layers `position: absolute` with a
   width and height but no offsets, so they fall back to their static position.
   That is the top-left corner only while the badge is the first thing inside
   the thumbnail link, which is how Jannah's own loops emit it. Pinning the
   corners lets the badge sit anywhere in the markup — the tabs widget puts it
   after the image, and without this it lands below the thumbnail. */
html body .tie-video .post-thumb-overlay-wrap,
html body .tie-video .post-thumb-overlay {
  inset: 0;
}

/* The wrapper is a marker, not a target — clicks belong to the <a> underneath. */
html body .tie-video .post-thumb-overlay-wrap {
  pointer-events: none;
  z-index: 2;
}

/* Undo the scrim and the hover-reveal. */
html body .tie-video .post-thumb-overlay {
  display: block !important;
  opacity: 1 !important;
  background: transparent !important;
  transform: none !important;
  transition: none !important;
}


/* --------------------------------------------------------------------------
   The button
   -------------------------------------------------------------------------- */

html body .tie-video .post-thumb-overlay .tie-media-icon {
  --podul-play-size: 3.25rem;

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--podul-play-size);
  height: var(--podul-play-size);
  border: 2px solid var(--podul-white);
  border-radius: 50%;
  background: rgba(26, 26, 26, .45);
  color: var(--podul-white);
  font-size: calc(var(--podul-play-size) * .34);
  transition: var(--podul-transition);
}

/* The triangle is drawn here rather than taken from Jannah's icon font.
   `tiefonticon` no longer carries the glyph the theme's own CSS asks for
   (.tie-video .tie-media-icon:before { content: "\e6b6" } renders as tofu in
   7.6.5), and a border triangle cannot break on the next theme update. */
html body .tie-video .post-thumb-overlay .tie-media-icon:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width:
    calc(var(--podul-play-size) * .13) 0
    calc(var(--podul-play-size) * .13)
    calc(var(--podul-play-size) * .22);
  border-color: transparent transparent transparent currentColor;
  margin-left: .12em;   /* optical centring — a play triangle sits left-heavy */
}

/* Hover belongs to the whole card, not the badge (which ignores pointers). */
html body .tie-video .post-thumb:hover .tie-media-icon,
html body li.tie-video:hover .post-thumb-overlay .tie-media-icon {
  background: var(--podul-yellow);
  border-color: var(--podul-yellow);
  color: var(--podul-ink);
}


/* --------------------------------------------------------------------------
   Sizes per tile
   -------------------------------------------------------------------------- */

html body .podul-hero-card.tie-video .post-thumb-overlay .tie-media-icon {
  --podul-play-size: 5rem;
  border-width: 3px;
}

html body .podul-mini.tie-video .post-thumb-overlay .tie-media-icon,
html body .tie-list-item.tie-video .post-thumb-overlay .tie-media-icon,
html body .mega-menu .tie-video .post-thumb-overlay .tie-media-icon {
  --podul-play-size: 2rem;
  border-width: 1px;
}

/* The tabs widget's thumbnail is only 110px wide — anything larger crowds it. */
html body .tabs-widget .tie-video .post-thumb-overlay .tie-media-icon {
  --podul-play-size: 1.625rem;
  border-width: 1px;
}

@media (max-width: 767px) {

  html body .podul-hero-card.tie-video .post-thumb-overlay .tie-media-icon {
    --podul-play-size: 3.5rem;
    border-width: 2px;
  }

  html body .tie-video .post-thumb-overlay .tie-media-icon {
    --podul-play-size: 2.5rem;
  }
}

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

  html body .tie-video .post-thumb-overlay .tie-media-icon {
    transition: none;
  }
}