/* ==========================================================================
   PODUL — SINGLE POST

   Jannah already gives us the 8/4 column split and a sticky sidebar, so this is
   mostly typography and the reordering described in section 2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */

html body.single #content.container,
html body.single-post #content.container {
  max-width: var(--podul-container);
  /* The design's article padding — py-12, lg:py-16. It used to be 4/6rem to keep
     the sticky sidebar's last card off the yellow footer band; the read-next
     section now sits in between and brings its own 5–8rem, so the larger value
     only added dead space. Kept non-zero because the band is conditional: it
     disappears when a post has no related articles. */
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  html body.single #content.container,
  html body.single-post #content.container {
    padding-bottom: 4rem;
  }
}

html body.single #the-post.container-wrapper {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* --------------------------------------------------------------------------
   2. Source order

   Jannah prints breadcrumb + category + H1 + meta, and only then the featured
   image. The design puts the image between the breadcrumb and the headline.

   `display: contents` on .entry-header-outer dissolves its box so its children
   become flex items of #the-post, which lets the image be ordered between them
   without touching any template.
   -------------------------------------------------------------------------- */

html body.single #the-post {
  display: flex;
  flex-direction: column;
}

html body.single #the-post .entry-header-outer {
  display: contents;
}

html body.single #the-post #breadcrumb      { order: 1; }
html body.single #the-post .featured-area   { order: 2; }
html body.single #the-post .entry-header    { order: 3; }
html body.single #the-post .entry-content   { order: 4; }
html body.single #the-post > *:not(#breadcrumb):not(.featured-area):not(.entry-header):not(.entry-content) { order: 5; }


/* --------------------------------------------------------------------------
   3. Breadcrumb
   -------------------------------------------------------------------------- */

html body #breadcrumb {
  margin-bottom: 2.5rem;
  padding: 0;
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-wide);
  text-transform: uppercase;
  color: var(--podul-slate-400);
}

html body #breadcrumb a {
  color: var(--podul-slate-400);
  transition: var(--podul-transition);
}

html body #breadcrumb a:hover {
  color: var(--podul-ink);
}

html body #breadcrumb .delimiter {
  margin-inline: .5rem;
  color: var(--podul-slate-300);
  font-style: normal;
}

/* The design's breadcrumb is "Acasă / Categorie" — Jannah appends the full post
   title, which on this site runs to three wrapped lines above the article. */
html body.single #breadcrumb .current,
html body.single #breadcrumb .delimiter:last-of-type {
  display: none;
}

html body #breadcrumb .current {
  color: var(--podul-accent, var(--podul-ink));
}


/* --------------------------------------------------------------------------
   4. Featured image
   -------------------------------------------------------------------------- */

html body.single .featured-area {
  margin-bottom: 3rem;
}

html body.single .featured-area .single-featured-image,
html body.single .featured-area .featured-area-inner {
  margin: 0;
  padding: 0;
}

html body.single .featured-area .single-featured-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--podul-ratio-card);
  background-color: var(--podul-slate-100);
  border: var(--podul-border-thick) solid var(--podul-black);
  border-radius: var(--podul-radius) !important;
  box-shadow: var(--podul-shadow-xl);
  transition: var(--podul-transition);
}

html body.single .featured-area .single-featured-image:hover {
  box-shadow: var(--podul-shadow-xl-hover);
}

html body.single .featured-area .single-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--podul-transition-slow);
}

html body.single .featured-area .single-featured-image:hover img {
  transform: scale(1.03);
}

/* Caption sits outside the framed image, on a hairline. */
html body.single .featured-area figcaption,
html body.single .featured-area .wp-caption-text {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: var(--podul-border-thin) solid var(--podul-slate-200);
  font-size: var(--podul-text-sm);
  font-style: italic;
  line-height: 1.4;
  color: var(--podul-slate-500);
}


/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

html body.single .entry-header {
  margin-bottom: 3rem;
  padding: 0;
}

html body.single .entry-header .post-cat-wrap {
  display: block;
  margin-bottom: 1.5rem;
}

html body.single .entry-header .post-cat {
  display: inline-block;
  padding: 0;
  background: none !important;
  color: var(--podul-accent) !important;
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-wide);
  text-transform: uppercase;
}

/* Headline size.
 *
 * The mockup used 60–72px, but its sample headline was six words. Podul's real
 * headlines run 30–60 words — at 72px this one filled an entire 1400px-tall
 * viewport before the article started. clamp() keeps the design's impact on
 * short headlines and stays readable on long ones.
 *
 * If you want the mockup's exact scale back, replace the clamp with
 * var(--podul-text-7xl) — just check it against your longest live headline first.
 */
html body.single h1.post-title.entry-title {
  margin: 0 0 2rem !important;
  font-family: var(--podul-font-display) !important;
  font-size: clamp(1.75rem, 3.4vw, 3.25rem) !important;
  font-weight: var(--podul-weight-headline) !important;
  letter-spacing: var(--podul-track-tighter) !important;
  line-height: var(--podul-leading-h1) !important;
  text-transform: none !important;
  text-wrap: balance;
}

/* Standfirst — Jannah's optional post subtitle, with the design's yellow rule. */
html body.single .entry-sub-title {
  margin: 0 0 2.5rem !important;
  padding-left: 2rem;
  border-left: var(--podul-border-accent) solid var(--podul-yellow);
  font-family: var(--podul-font-body) !important;
  font-size: var(--podul-text-xl) !important;
  font-style: italic;
  font-weight: var(--podul-weight-medium) !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--podul-slate-600);
}


/* --------------------------------------------------------------------------
   6. Meta row
   -------------------------------------------------------------------------- */

html body.single .single-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.5rem;
  border-top: var(--podul-border-thin) solid var(--podul-rule-faint);
  border-bottom: var(--podul-border-thin) solid var(--podul-rule-faint);
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-slate-500);
}

html body.single .single-post-meta a {
  color: var(--podul-ink);
}

html body.single .single-post-meta .meta-author-avatar img,
html body.single .single-post-meta .author-avatar img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: var(--podul-border-thin) solid var(--podul-black);
  box-shadow: 2px 2px 0 0 var(--podul-yellow);
}

/* On a phone the three groups — byline, date, and the views/reading-time pair —
   cannot share a line, so the third wraps. With the row's 1.5rem gap it dropped
   a long way below and read as a stray line rather than part of the meta. The
   row gap tightens, the avatar comes down a size, and the wrapped group is made
   a deliberate full-width second line instead of an accident of wrapping. */
@media (max-width: 767px) {

  html body.single .single-post-meta {
    gap: .5rem 1rem;
  }

  html body.single .single-post-meta .meta-author-avatar img,
  html body.single .single-post-meta .author-avatar img {
    width: 2.25rem;
    height: 2.25rem;
  }

  html body.single .single-post-meta .tie-alignright {
    flex: 0 0 100%;
    float: none !important;
    text-align: left;
  }
}


/* --------------------------------------------------------------------------
   7. Body copy
   -------------------------------------------------------------------------- */

html body.single .entry-content {
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-lg);
  line-height: var(--podul-leading-body);
  color: var(--podul-slate-800) !important;
}

@media (min-width: 768px) {
  html body.single .entry-content { font-size: var(--podul-text-xl); }
}

html body.single .entry-content > p {
  margin: 0 0 2rem;
}

html body.single .entry-content h2 {
  margin: 3rem 0 1.5rem;
  font-family: var(--podul-font-display);
  font-size: var(--podul-text-3xl);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-tight);
  line-height: 1.2;
  color: var(--podul-ink);
}

html body.single .entry-content h3 {
  margin: 2.5rem 0 1rem;
  font-family: var(--podul-font-display);
  font-size: var(--podul-text-2xl);
  font-weight: var(--podul-weight-headline);
  letter-spacing: var(--podul-track-tight);
  color: var(--podul-ink);
}

html body.single .entry-content a {
  color: var(--podul-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

html body.single .entry-content a:hover {
  background-color: var(--podul-yellow);
  color: var(--podul-ink);
  text-decoration: none;
}

html body.single .entry-content img {
  border: var(--podul-border-thin) solid var(--podul-black);
  border-radius: var(--podul-radius);
  box-shadow: var(--podul-shadow-md);
}

/* Pull quotes — the one place the design uses a serif. */
html body.single .entry-content blockquote {
  margin: 3rem 0;
  padding: 2.5rem;
  background-color: var(--podul-slate-50);
  border: 0;
  border-left: var(--podul-border-quote) solid var(--podul-yellow);
  border-radius: var(--podul-radius);
  box-shadow: var(--podul-shadow-quote);
  font-family: var(--podul-font-serif);
  font-style: italic;
  font-size: var(--podul-text-lg);
  font-weight: var(--podul-weight-normal);
  line-height: 1.6;
  color: var(--podul-ink);
}

@media (min-width: 768px) {
  html body.single .entry-content blockquote { font-size: var(--podul-text-xl); }
}

html body.single .entry-content blockquote p:last-child {
  margin-bottom: 0;
}

html body.single .entry-content blockquote::before,
html body.single .entry-content blockquote::after {
  content: none !important;
}


/* --------------------------------------------------------------------------
   8. Tags
   -------------------------------------------------------------------------- */

html body.single .post-bottom-meta .post-tags a,
html body.single .post-tags a {
  display: inline-block;
  margin: 0 .5rem .5rem 0;
  padding: .35rem .75rem;
  background: none !important;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  color: var(--podul-ink) !important;
  font-size: var(--podul-text-2xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  transition: var(--podul-transition);
}

html body.single .post-tags a:hover {
  background-color: var(--podul-yellow) !important;
}


/* --------------------------------------------------------------------------
   9. Sidebar promo cards
   -------------------------------------------------------------------------- */

html body .podul-sidebar-promos {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

html body .podul-sidebar-promos .podul-promo {
  border-width: var(--podul-border-card);
  padding: 1.75rem;
}

html body .podul-sidebar-promos .podul-promo__title {
  font-size: var(--podul-text-xl);
}

html body .podul-sidebar-promos .podul-promo__text {
  margin-bottom: 1.5rem;
  font-size: var(--podul-text-base);
  line-height: 1.45;
  color: var(--podul-slate-500);
}


/* --------------------------------------------------------------------------
   10. Read next — the full-width band

   Rendered by podul_read_next() in inc/single.php, on TieLabs/after_main_content,
   so the <section> is a direct child of #tie-wrapper and spans the viewport with
   no negative-margin trickery. Everything inside it reuses classes the archives
   and the homepage already share: .podul-section-head, .podul-grid, .podul-card.

   Jannah's own #related-posts markup is no longer emitted on single posts, so
   there are no .related-posts overrides left here.
   -------------------------------------------------------------------------- */

html body .podul-read-next {
  width: 100%;
  padding-block: 5rem;
  background-color: var(--podul-slate-50);
  border-top: var(--podul-border-thick) solid var(--podul-black);
}

@media (min-width: 992px) {
  html body .podul-read-next { padding-block: 8rem; }
}

html body .podul-read-next__inner {
  max-width: var(--podul-container);
  margin-inline: auto;
  padding-inline: var(--podul-gutter);
}

@media (min-width: 768px) {
  html body .podul-read-next__inner { padding-inline: var(--podul-gutter-lg); }
}

/* Beats the shared .podul-grid breakpoints, which go to 5 across at 1280px. The
   read-next grid is 3 across at every width from md up — with a 5:3 image and a
   two-line headline, five in a 1400px band leaves the titles unreadable.

   Vertical gap is the design's gap-y-20. It only applies once there is more than
   one column; in the single-column mobile stack that much space reads as a break
   between sections rather than between cards. */
html body .podul-read-next .podul-read-next__grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 3rem;
}

@media (min-width: 768px) {
  html body .podul-read-next .podul-read-next__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5rem 3rem;
  }
}


/* --------------------------------------------------------------------------
   10b. Boxes Jannah still renders inside the content column

   The author box and the comments section. Kept as resets so any Jannah box that
   lands in .post-components inherits the design's flat, borderless treatment.
   -------------------------------------------------------------------------- */

html body .post-components .widget-title,
html body .post-components .the-global-title {
  margin-bottom: 2rem;
  padding: 0 0 1rem;
  background: none !important;
  border: 0 !important;
  border-bottom: var(--podul-border-thick) solid var(--podul-black) !important;
  font-family: var(--podul-font-display) !important;
  font-size: var(--podul-text-3xl) !important;
  font-weight: var(--podul-weight-black) !important;
  letter-spacing: var(--podul-track-tighter) !important;
  text-transform: uppercase !important;
  color: var(--podul-ink) !important;
}


/* --------------------------------------------------------------------------
   11. Author box, next/prev, comments
   -------------------------------------------------------------------------- */

html body .post-components .about-author,
html body .post-components .prev-next-post-nav,
html body .post-components #comments {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .post-components .about-author {
  padding: 2rem;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  box-shadow: var(--podul-shadow-md) !important;
}

html body .post-components .about-author .author-avatar img {
  border-radius: 50%;
  border: var(--podul-border-thin) solid var(--podul-black);
}