/* ==========================================================================
   PODUL — ARTICLE CARD + ARCHIVE GRID

   One card, used by every archive and by the "Podul Card" page-builder block.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Grid

   5 across on wide screens, matching the design's category rows, stepping down
   to 1 on phones.
   -------------------------------------------------------------------------- */

html body .podul-grid {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

@media (min-width: 576px) {
  html body .podul-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  html body .podul-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  html body .podul-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Archives keep a sidebar, so 3 across is the sensible maximum there. */
@media (min-width: 1280px) {
  html body .podul-archive .podul-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

html body .podul-archive .container-wrapper,
html body .podul-archive.mag-box {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 3rem;
}


/* --------------------------------------------------------------------------
   2. Card shell

   Jannah's list styles assume floats and borders between items; the grid needs
   none of that.
   -------------------------------------------------------------------------- */

html body .podul-card {
  display: flex !important;
  flex-direction: column;
  gap: 1.5rem;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  list-style: none;
}

html body .podul-card::before,
html body .podul-card::after {
  display: none !important;
}


/* --------------------------------------------------------------------------
   3. Media

   The hard-shadow surface. Hover grows the shadow by 4px, turns it yellow and
   zooms the image — the design's interaction signature.
   -------------------------------------------------------------------------- */

html body .podul-card__media {
  position: relative;
}

html body .podul-card .post-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--podul-ratio-card);
  overflow: hidden;
  background-color: var(--podul-slate-100);
  border: var(--podul-border-thin) solid var(--podul-black);
  border-radius: var(--podul-radius) !important;
  box-shadow: var(--podul-shadow-md);
  transition: var(--podul-transition);
}

html body .podul-card:hover .post-thumb {
  box-shadow: var(--podul-shadow-md-hover);
}

html body .podul-card .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--podul-transition-slow);
}

html body .podul-card:hover .post-thumb img {
  transform: scale(1.05);
}

/* The post-format badge (play icon on video posts, gallery icon on galleries).
   Jannah paints and positions this — only the colours change here, so the
   feature keeps working exactly as the theme intends. */
html body .podul-card .post-thumb-overlay-wrap {
  z-index: 2;
}

html body .podul-card .tie-media-icon {
  color: var(--podul-white);
}


/* --------------------------------------------------------------------------
   4. Body
   -------------------------------------------------------------------------- */

html body .podul-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Category label — colour comes from the term's cat_color, set as
   --podul-accent on the <li> by the loop template. */
html body .podul-card__cat {
  display: block;
  margin-bottom: 0;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-2xs);
  font-weight: var(--podul-weight-bold);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-accent);
  transition: var(--podul-transition);
}
html body .podul-card__date {
  display: block;
  margin-bottom: 10px;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-2xs);
  font-weight: var(--podul-weight-bold);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-accent);
  transition: var(--podul-transition);
}

html body .podul-card__cat:hover {
  color: var(--podul-ink);
}

html body .podul-card .podul-card__title {
  /* The design clamps card headlines to two lines so the grid rows stay even —
     without this a 40-word title pushes its column far past its neighbours. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 1rem !important;
  font-family: var(--podul-font-display) !important;
  font-size: var(--podul-text-xl) !important;
  font-weight: var(--podul-weight-headline) !important;
  letter-spacing: var(--podul-track-tight) !important;
  line-height: var(--podul-leading-tight) !important;
  text-transform: none !important;
}

@media (min-width: 768px) {
  html body .podul-card .podul-card__title { font-size: var(--podul-text-lg) !important; }
}

/* The yellow highlight hugs the text, so the link is inline — not a block. */
html body .podul-card .podul-card__title a {
  display: inline;
  padding: 2px;
  margin-left: -2px;
  color: var(--podul-ink) !important;
  background-image: linear-gradient(var(--podul-yellow), var(--podul-yellow));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .3s ease;
}

html body .podul-card:hover .podul-card__title a,
html body .podul-card .podul-card__title a:focus-visible {
  background-size: 100% 100%;
}

html body .podul-card__excerpt {
  margin: 0 0 1rem;
  font-size: var(--podul-text-md);
  line-height: 1.5;
  color: var(--podul-slate-600);
}


/* --------------------------------------------------------------------------
   5. Meta row
   -------------------------------------------------------------------------- */

html body .podul-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px 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-400);
}

html body .podul-card__author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The author is a link since 2 September 2026, so it has to be talked out of the
   global link colour: the grey of the meta row is the design, and only the
   pointer state should change. The hover is an underline rather than another
   colour because this row is grey on white here and grey on slate-50 in the
   read-next band — an underline reads on both. */
html body a.podul-card__author {
  color: inherit;
  text-decoration: none;
  transition: var(--podul-transition);
}

html body a.podul-card__author:hover,
html body a.podul-card__author:focus-visible {
  color: var(--podul-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html body .podul-card__time {
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   6. Archive heading

   Styled as the design's section heading: heavy rule, Archivo 900 uppercase.
   -------------------------------------------------------------------------- */

html body .archive-title-wrapper,
html body #category-title-section,
html body #archive-title-section,
html body #search-title-section {
  background: none !important;
  border: 0 !important;
  border-bottom: var(--podul-border-thick) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  box-shadow: none !important;
  padding: 0 0 1rem !important;
  margin-bottom: 2.5rem !important;
}

html body .archive-title-wrapper .page-title {
  margin: 0 !important;
  font-size: var(--podul-text-3xl) !important;
}

@media (min-width: 768px) {
  html body .archive-title-wrapper .page-title { font-size: var(--podul-text-4xl) !important; }
}

html body .taxonomy-description {
  margin-top: 1rem;
  font-size: var(--podul-text-md);
  color: var(--podul-slate-600);
}


/* --------------------------------------------------------------------------
   6b. Category label on a native block's thumbnail

   templates/loops/loop-default.php moves that label out of the thumbnail's
   anchor so it can be a link of its own (an <a> cannot nest inside an <a>).
   Jannah positions it with `.post-thumb .post-cat-wrap`, a selector the label
   no longer matches once it is a sibling of the anchor — so the same corner is
   restored here, against the wrapper the template adds. Everything else about
   the label, colours included, still comes from the parent's `.post-cat`.
   -------------------------------------------------------------------------- */

html body .podul-thumb-wrap {
  position: relative;
  display: block;
}

html body .podul-thumb-wrap > .post-cat-wrap {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  margin: 0;
}


/* --------------------------------------------------------------------------
   7. Pagination
   -------------------------------------------------------------------------- */

/* Archive pagination.
 *
 * Scoped with :not(.podul-section-nav) on purpose. The homepage row arrows reuse
 * Jannah's .pages-nav markup, where the spans are structural wrappers — the
 * outer .first-last-pages and the inner .pagination-icon. Styling every span in
 * here as a button painted a white bordered box around each wrapper and around
 * the chevron glyph itself. Here the span IS the current-page chip, so it should
 * look like a button; there it should not.
 *
 * Jannah also sets overflow:hidden on both .pages-nav and .pages-numbers and
 * floats .first-page / .last-page apart — the same clipped-shadow problem
 * podul-home.css already found and fixed for .podul-section-nav. Same fix
 * here: flex instead of float, overflow visible so the hard shadow isn't cut
 * off, and a margin-bottom so the block doesn't run straight into the footer
 * — .pages-nav only ever gets top padding from the parent theme.
 */
html body .pages-nav:not(.podul-section-nav) {
  overflow: visible;
  margin-bottom: var(--podul-gutter-lg);
}

html body .pages-nav:not(.podul-section-nav) .pages-numbers.pages-standard {
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: visible;
  float: none;
  width: auto;
  flex-wrap: wrap;
}

/* first-page is present but empty when there is no previous page (page 1) —
 * margin-right:auto still pushes last-page to the far right in that case,
 * reproducing Jannah's float:left/float:right without needing to know which
 * side actually has a link. Belt and braces: .first-last-pages itself is a
 * span inside .pages-numbers, so without this reset it also picked up the
 * button border/background/shadow below — invisible under Jannah's
 * overflow:hidden + float layout, but a bare bordered 4x4px box once this
 * file switches that to flex + overflow:visible. */
html body .pages-nav:not(.podul-section-nav) .first-last-pages.first-page {
  float: none;
  margin-right: auto;
}

html body .pages-nav:not(.podul-section-nav) .first-last-pages.last-page {
  float: none;
}

html body .pages-nav:not(.podul-section-nav) .first-last-pages {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body .pages-nav:not(.podul-section-nav) .pages-numbers a,
html body .pages-nav:not(.podul-section-nav) .pages-numbers span:not(.first-last-pages),
html body .pagination-container a,
html body .pages-nav:not(.podul-section-nav) .first-last-pages a {
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  background: var(--podul-white) !important;
  color: var(--podul-ink) !important;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  box-shadow: var(--podul-shadow-md);
  transition: var(--podul-transition);
}

html body .pages-nav:not(.podul-section-nav) .first-last-pages a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.25rem;
  line-height: 1;
}

html body .pages-nav:not(.podul-section-nav) .pages-numbers a:hover,
html body .pagination-container a:hover {
  background: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
  box-shadow: var(--podul-shadow-md-hover);
}

html body .pages-nav:not(.podul-section-nav) .pages-numbers a:active {
  box-shadow: none !important;
  transform: translate(4px, 4px);
}

/* Jannah's tiefonticon glyph at this codepoint (\f106 / \f104) renders as a
 * stack of bars here, not a chevron — a font-version mismatch, not a missing
 * font (document.fonts confirms tiefonticon loads fine; podul-section-nav's
 * arrows use the same font and look correct there). Draw the arrow in CSS
 * instead so archive pagination doesn't depend on that glyph mapping. */
html body .pages-nav:not(.podul-section-nav) .first-last-pages .pagination-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 0;
  line-height: 1;
  float: none !important;
}

html body .pages-nav:not(.podul-section-nav) .first-last-pages .pagination-icon::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border: var(--podul-border-thin) solid currentColor;
  border-width: 2px 2px 0 0;
}

html body .pages-nav:not(.podul-section-nav) .first-last-pages.last-page .pagination-icon::before {
  transform: rotate(45deg);
}

html body .pages-nav:not(.podul-section-nav) .first-last-pages.first-page .pagination-icon::before {
  transform: rotate(-135deg);
}


/* Numeric pagination — the second markup Jannah prints for the same job.
 *
 * The archives print `.pages-numbers.pages-standard`, a div of spans, and
 * everything above styles that. A builder block with `pagi = numeric` — the
 * Block #10 on the category pages — prints a `<ul class="pages-numbers">` of
 * `<li>` instead, with no `pages-standard`. The shared rule above gave those
 * links the border, background and shadow, but nothing sized them, so what
 * landed on the page was a row of 40px boxes with the "ULTIMA" button, which is
 * 41px tall and inline-block, sitting on the text baseline a few pixels below
 * the rest. Hence the crooked row reported on 1 September 2026.
 *
 * So: the same buttons as the archive's "Pagina următoare", in a flex row.
 * `li.last-page` is pushed to the far right, which is where the standard markup
 * already puts it (`.first-page { margin-right: auto }` above). Not a copy of
 * those rules — the two markups share the button styling and differ only in
 * layout, so only the layout is written twice.
 */
html body .pages-nav .pages-numbers:not(.pages-standard) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
  text-align: left;
}

html body .pages-nav .pages-numbers:not(.pages-standard) > li {
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  list-style: none;
}

/* "Ultima" belongs at the end of the row, not next to the numbers. */
html body .pages-nav .pages-numbers:not(.pages-standard) > li.last-page {
  margin-left: auto;
}

/* One button size for numbers, the » arrow and the Ultima link alike. The
   min-width keeps single digits square while 302 still fits. */
html body .pages-nav .pages-numbers:not(.pages-standard) > li > a,
html body .pages-nav .pages-numbers:not(.pages-standard) > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 1rem !important;
  line-height: 1 !important;
}

/* You-are-here, in the same yellow the nav uses for the current section. */
html body .pages-nav .pages-numbers:not(.pages-standard) > li.current > span {
  background: var(--podul-yellow) !important;
}

/* The ellipsis is not a control, so it should not look like one. */
html body .pages-nav .pages-numbers:not(.pages-standard) > li.extend > span {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  min-width: 0;
  padding: 0 !important;
}

/* Jannah puts a glyph span after the "Ultima" label — class `fa` here, not
   `pagination-icon` as in the standard markup, and its codepoint renders as a
   4px stub for the same font-version reason documented above. Same CSS arrow,
   pointing right. */
html body .pages-nav .pages-numbers:not(.pages-standard) .first-last-pages .fa {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0;
}

html body .pages-nav .pages-numbers:not(.pages-standard) .first-last-pages .fa::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border: var(--podul-border-thin) solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}