/*
 * Archive layouts (category, search, blog index, date/author archives).
 *
 * Naming: this file uses plain, readable class names (unu-archive-*,
 * .unu-empty-state) instead of the older internal "unu-ref-editorial-*" names.
 * The structure is deliberately shallow so the blocks are easy to drag around
 * in the Site Editor:
 *
 *   main.unu-archive-body          full-width page area
 *     .unu-archive-layout          the two-column grid
 *       .unu-archive-primary       left column: the query
 *       [Archive Sidebar]          right column: template part
 *
 * Remove the sidebar template part and the grid collapses to one column on its
 * own, so nobody has to touch CSS to change the page shape.
 */

/* ------------------------------------------------------------ page frame --- */

.unu-archive-body {
  padding-bottom: clamp(4rem, 9vw, 7rem);
  padding-top: clamp(2.25rem, 5vw, 4rem);
  /*
   * The theme's global text centring is meant for marketing sections; inside
   * the archive column it made excerpts sit centred under a left-aligned
   * headline. Reset it here and let the entry rules set their own alignment.
   */
  text-align: left;
}

/*
 * `auto-fit` + `minmax` means the layout is responsive without a media query:
 * when there is room for both columns they sit side by side; when the second
 * column is removed (or the screen is narrow) the single column simply grows to
 * fill the space. No leftover gap, no stranded sidebar.
 *
 * The grid also sets the page width itself, because its parent is a constrained
 * group that would otherwise clamp the whole layout to theme.json's 760px
 * contentSize and squeeze the left column down to ~384px. Resetting the layout
 * tokens keeps core's rule from winning. The width comes from the shared
 * --unu-container token so head, body, and footer all line up.
 */
.unu-archive-layout {
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%;
  align-items: start;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  justify-content: center;
  margin-inline: auto !important;
  max-width: min(var(--unu-container), 100%) !important;
  width: 100%;
}

/* With only one child left, centre a single readable column. */
.unu-archive-layout:has(> :only-child) {
  grid-template-columns: minmax(0, 760px);
}

.unu-archive-primary {
  min-width: 0;
}

.unu-archive-primary > .wp-block-template-part {
  width: 100%;
}

.unu-archive-label {
  color: rgba(6, 46, 53, 0.55);
  font-family: var(--wp--preset--font-family--system-sans, Arial, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}

/*
 * Pagination lives directly inside core/query, as a sibling of the post list.
 *
 * It used to sit inside core/post-template, which is the only place core would
 * hide it on an empty archive — but that placement also made core/render insert
 * the <nav> into the LAST <li>, so the page numbers appeared inside the last
 * card. Core hides pagination on an empty query regardless of where the block
 * lives, so the list is free of it now.
 *
 * These rules are a defensive reset only: if an editor drags the pagination
 * back inside the list, it should still not inherit that card's white surface.
 */
.unu-archive-list > li:has(> .unu-ref-pagination),
.unu-archive-list > li.unu-ref-pagination {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  grid-column: 1 / -1 !important;
  height: auto !important;
  justify-self: center !important;
  list-style: none !important;
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 0 !important;
  width: auto !important;
}

.unu-archive-list > li.unu-ref-pagination::before,
.unu-archive-list > li.unu-ref-pagination::marker {
  content: none !important;
  display: none !important;
}

/*
 * The mixed layout is a two-column grid, and pagination is a grid item like any
 * other — so without this it would land in the second column, beside a card,
 * instead of on its own row underneath. Force it to the bottom, spanning the
 * full width, and reset the row height the cards get.
 */
.unu-archive-list.is-mixed > li:has(> .unu-ref-pagination) {
  grid-column: 1 / -1;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}

/* --------------------------------------------------------------- entries --- */

.unu-archive-list {
  display: grid !important;
  gap: clamp(3rem, 6vw, 4.5rem);
  grid-template-columns: 1fr !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

.unu-archive-entry {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: block;
  margin: 0;
  padding: 0 !important;
}

/*
 * The entry is one visual card: picture, date line, title, excerpt and the
 * "read more" link all share a single white surface.
 *
 * The text gets real inner padding rather than negative margins, so the editor
 * can still drag blocks in and out of the entry group without the layout
 * collapsing. The picture is pulled back to the card edge by the rule below.
 */
.unu-archive-entry {
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%;
  background: #fff;
  border: 1px solid rgba(6, 46, 53, 0.07);
  border-radius: 18px;
  box-shadow: 0 20px 45px -34px rgba(6, 46, 53, 0.45);
  overflow: hidden;
  padding: clamp(1.35rem, 2.4vw, 1.9rem) !important;
  padding-top: 0 !important;
}

/*
 * The card body holds the meta line, the title and the excerpt.
 *
 * It exists so the card has exactly two flex/grid children — the picture and
 * this wrapper — instead of four. That makes the two layouts below (stacked
 * feature, side-by-side digest) a matter of moving two boxes, and it keeps the
 * text padding in one place.
 */
.unu-archive-card-body {
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%;
  min-width: 0;
}

/*
 * ---------------------------------------------------------------------------
 * Mixed archive layout: lead story + digest list.
 * ---------------------------------------------------------------------------
 *
 * A plain stack of nine identical 470px-high pictures is a page you scroll
 * rather than read: the reader sees two headlines in a screenful. The first
 * card keeps the picture (it earns the attention); the rest become rows with a
 * small thumbnail, so a screenful shows five or six headlines.
 *
 * Everything here is opt-in through `.is-mixed` on core/post-template, so the
 * other category templates keep their uniform card stack untouched.
 */
.unu-archive-list.is-mixed {
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
}

/*
 * Two columns above 901px: the lead card and the digest list share a row, so a
 * single screenful shows the lead headline plus six digest headlines. Below
 * that breakpoint the grid collapses to one column in the media block at the
 * bottom of this file.
 */
.unu-archive-list.is-mixed {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

/*
 * Core/post-template wraps every card in an <li>, so the grid cell is the <li>
 * and the card is its child. The <li> must therefore be a plain, invisible box:
 * any background or padding on it would show through around the card.
 */
.unu-archive-list.is-mixed > li {
  background: none;
  border: 0;
  box-shadow: none;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * The lead story spans both columns and STACKS: picture on top, full-width
 * text underneath.
 *
 * A side-by-side split was tried and rejected — at 944px the text column is
 * only ~508px, which broke a normal headline into six short lines. Stacking
 * keeps the headline on ~848px, so it reads in two or three lines, and the
 * picture gets the full card width instead of a tall 433px crop.
 */
.unu-archive-list.is-mixed > li:first-child {
  grid-column: 1 / -1;
}

.unu-archive-list.is-mixed > li:first-child > .unu-archive-entry {
  display: block;
  padding: 0 !important;
}

/*
 * The picture runs edge to edge, so it needs no border radius and no inline
 * margin. Core writes width/height attributes on the <img>, which would set an
 * intrinsic height; the fixed aspect ratio plus `object-fit: cover` overrides
 * that so the crop follows the card width, not the source file.
 */
.unu-archive-list.is-mixed > li:first-child .unu-archive-image {
  aspect-ratio: 2.4 / 1;
  border-radius: 0;
  margin: 0 !important;
  max-width: none !important;
  overflow: hidden;
  width: 100% !important;
}

.unu-archive-list.is-mixed > li:first-child .unu-archive-image img {
  height: 100% !important;
  object-fit: cover;
  width: 100% !important;
}

/* The text sits below the picture and carries the card's padding. */
.unu-archive-list.is-mixed > li:first-child > .unu-archive-entry > .unu-archive-card-body {
  display: block;
  padding: clamp(1.35rem, 2.4vw, 1.9rem) !important;
}

/*
 * Every text block starts at the same x. The meta line is a flex group that
 * core centres by default, so it is pinned left; and any `max-width` on the
 * title would let the constrained layout centre it, hence the 0 margins.
 */
.unu-archive-list.is-mixed > li:first-child .unu-archive-meta {
  justify-content: flex-start !important;
}

.unu-archive-list.is-mixed > li:first-child .unu-archive-card-body > * {
  margin-inline: 0 !important;
  max-width: 100%;
  text-align: left;
}

/*
 * The lead headline lines up with the meta line and the excerpt above/below it.
 * `max-width` alone would shrink the block and let it centre inside the card
 * (the card body is a constrained layout), so the title would start at a
 * different x than the date and the summary. Margins are pinned to 0 instead,
 * and very long headlines are capped by `ch` on the text, not the block.
 */
/* The lead headline gets the full card width — it is the biggest text on screen. */
.unu-archive-list.is-mixed > li:first-child .unu-archive-title {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  margin-inline: 0 !important;
  max-width: 100% !important;
  text-align: left;
}

/*
 * Cards two onward: STACKED — picture on top, full-width text underneath.
 *
 * These were originally digest rows (168px thumbnail on the left, text in a
 * 241px column on the right). That broke down badly at this card width:
 *
 *   - 241px fits only ~25 characters, so a normal headline wrapped to 3-6
 *     short lines ("...Pendampingan dan Evaluasi Capaian Kerja Sama Perguruan
 *     Tinggi Swasta di Provinsi Kalimantan Timur" became six).
 *   - The thumbnail height is fixed at 126px while the text ran 159-235px, and
 *     `align-items: start` pinned the picture to the top. The leftover 75-151px
 *     below it read as a hole in the card.
 *   - Each card sized itself from its own text, so heights ranged 219-295px and
 *     the left and right columns never lined up.
 *
 * Stacking fixes all three: the headline gets the full card width, the picture
 * spans edge to edge, and every card in a row starts from the same shape.
 */
.unu-archive-list.is-mixed > li:not(:first-child) > .unu-archive-entry {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0 !important;
}

/*
 * The picture: full card width, 16/9, flush to the top edge.
 *
 * Core writes width/height attributes on the <img>, which would set an
 * intrinsic height and let the picture dictate the card height. The fixed
 * aspect ratio plus `object-fit: cover` makes the crop follow the card width
 * instead, so every thumbnail in a row is the same height.
 */
.unu-archive-list.is-mixed > li:not(:first-child) > .unu-archive-entry > .unu-archive-image {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  margin: 0 !important;
  max-width: none !important;
  overflow: hidden;
  width: 100% !important;
}

.unu-archive-list.is-mixed > li:not(:first-child) > .unu-archive-entry > .unu-archive-image img {
  height: 100% !important;
  object-fit: cover;
  width: 100% !important;
}

/* The text sits under the picture and supplies the padding the picture lacks. */
.unu-archive-list.is-mixed > li:not(:first-child) > .unu-archive-entry > .unu-archive-card-body {
  display: block;
  flex: 1 1 auto;
  padding: clamp(0.85rem, 1.4vw, 1.05rem) !important;
}

.unu-archive-list.is-mixed > li:not(:first-child) .unu-archive-title {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.3;
  margin-bottom: 0.4rem;
  margin-inline: 0 !important;
  max-width: 100% !important;
  text-align: left;
}

/*
 * The meta line is a flex group that core centres by default. Left-aligning it
 * keeps the date on the same x as the headline below it.
 */
.unu-archive-list.is-mixed > li:not(:first-child) .unu-archive-meta {
  justify-content: flex-start !important;
}

/*
 * Cap the excerpt at two lines so every row is the same height. This only
 * truncates visually; the text an editor types is never changed. Browsers
 * without line-clamp simply show the full excerpt and the row grows.
 */
.unu-archive-list.is-mixed > li:not(:first-child) .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.unu-archive-list.is-mixed > li:not(:first-child) .wp-block-post-excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: none;
}

/* The digest cards are compact: drop the "read more" link, the title is one. */
.unu-archive-list.is-mixed > li:not(:first-child) .wp-block-post-excerpt__more-text {
  display: none;
}

/* Card two onward: meta is smaller than the lead's. */
.unu-archive-list.is-mixed > li:not(:first-child) .unu-archive-meta {
  font-size: 0.76rem;
  margin-bottom: 0.35rem;
}

/*
 * Cap the headline at four lines so a long title cannot stretch one card far
 * past its neighbour. Without this, a six-line headline made its card ~70px
 * taller than the card beside it and the row looked ragged. The text is never
 * changed — only the visible line count.
 */
.unu-archive-list.is-mixed > li:not(:first-child) .unu-archive-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/*
 * A picture that failed to load is removed entirely.
 *
 * The handler in inc/assets.php tags the <img> and the <figure> with
 * `is-broken` / `has-broken-image` when the file 404s. A full-width
 * aspect-ratio box is right for a real photo, but for a failed one it is a
 * 380px empty slab that pushes the lead headline below the fold.
 *
 * Collapsing to zero rather than to a thin tinted strip is deliberate: a strip
 * still reads as a broken-image banner, whereas no box at all reads as a
 * deliberately text-only card. Once real files exist in uploads/ the handler
 * never fires and the picture renders normally.
 */
.unu-archive-image.has-broken-image {
  aspect-ratio: auto !important;
  display: none !important;
}

.unu-archive-image img.is-broken {
  display: none !important;
}

/*
 * With the picture gone the card is a plain text block, so it needs the top
 * padding back: the lead card normally sits flush at the top because the
 * picture provides that spacing.
 */
.unu-archive-list.is-mixed > li:first-child > .unu-archive-entry:has(.unu-archive-image.has-broken-image) {
  padding-top: clamp(1.35rem, 2.4vw, 1.9rem) !important;
}

/*
 * In a digest row the picture is a 168px column. With no artwork to show, that
 * column would read as dead space beside the headline, so collapse the row to a
 * single text column instead of holding a placeholder box open.
 */
.unu-archive-list.is-mixed > li:not(:first-child) > .unu-archive-entry:has(.unu-archive-image.has-broken-image) {
  grid-template-columns: minmax(0, 1fr);
}

.unu-archive-list.is-mixed > li:not(:first-child) .unu-archive-image.has-broken-image {
  display: none;
}

/* -------------------------------------------------------------- archives --- */

/*
 * Full-bleed picture: it keeps square top corners and reaches the card edge,
 * which means cancelling the entry's inline padding and corner radius for this
 * one child.
 */
.unu-archive-entry > .unu-archive-image {
  border-radius: 0;
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
  margin-inline: calc(-1 * clamp(1.35rem, 2.4vw, 1.9rem)) !important;
  max-width: none !important;
  width: calc(100% + 2 * clamp(1.35rem, 2.4vw, 1.9rem)) !important;
}

/*
 * The picture sits above the padded text, not inside it.
 *
 * The card has no top padding so the picture can reach the top edge; the text
 * therefore carries its own padding. `.unu-archive-card-body` is the single
 * element that needs it, which keeps the drag-and-drop structure (picture,
 * then one group of text) easy to reason about in the Site Editor.
 */
.unu-archive-entry > .unu-archive-image + .unu-archive-card-body {
  padding-inline: clamp(1.35rem, 2.4vw, 1.9rem);
  padding-bottom: clamp(1.35rem, 2.4vw, 1.9rem);
}

/* A card whose picture is hidden (no featured image) still needs top room. */
.unu-archive-entry:not(:has(> .unu-archive-image)) > .unu-archive-card-body {
  padding-inline: clamp(1.35rem, 2.4vw, 1.9rem);
  padding-block: clamp(1.35rem, 2.4vw, 1.9rem);
}

/* Headline measure: not a full 780px sweep for every line. */
.unu-archive-entry .unu-archive-title {
  margin-inline: 0 !important;
  max-width: 40ch;
  text-align: left;
}

/*
 * The excerpt gets a shorter measure than the headline. A paragraph that is
 * wider than the title above it reads as a mistake, so keep it clearly inside
 * and flush with the title's left edge.
 *
 * 52ch of the 0.98rem excerpt size is about 700px at this font; the width is
 * spelled out so the paragraph keeps the title's left edge instead of being
 * shrunk below its own intrinsic width and pushed toward the middle by the
 * parent's auto margins.
 */
.unu-archive-entry .wp-block-post-excerpt {
  margin-inline: 0 !important;
  max-width: 40rem;
  text-align: left;
}

.unu-archive-entry .wp-block-post-excerpt__excerpt {
  max-width: 100%;
  text-align: left;
}

.unu-archive-image {
  background:
    linear-gradient(135deg, rgba(0, 137, 145, 0.12), rgba(255, 198, 0, 0.18)),
    rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  /*
   * 2:1 rather than the 16:9 a 784px column would give: at full column width a
   * 16:9 image ran ~440px tall, taller than the title and excerpt together, so
   * every card was mostly picture. 2:1 keeps it wide and calm.
   */
  aspect-ratio: 2 / 1;
  margin-bottom: 1.15rem;
  overflow: hidden;
  position: relative;
}

.unu-archive-image a,
.unu-archive-image img {
  display: block;
}

/*
 * Reserve the picture box even when the post has no featured image. 70 of the
 * 156 published posts have no thumbnail at all, and a broken URL renders as
 * zero-height, so without this the card jumps straight to the title and the
 * list loses its rhythm.
 */
.unu-archive-image a {
  display: block;
  height: 100%;
  width: 100%;
}

.unu-archive-image img {
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/*
 * A broken image prints its alt text as plain text, which literally showed the
 * post title twice on every card. Hide the text so the box stays a clean,
 * tinted placeholder until real media is uploaded. This is a local-preview
 * concern only: once files exist in uploads/ the <img> paints normally.
 */
.unu-archive-image img {
  color: transparent;
  font-size: 0;
}

/*
 * A post with no featured image outputs a bare <figure> with no <img> at all,
 * which would leave an empty gradient slab. Hide the box in that case so the
 * card simply starts with its date line instead of a hole.
 */
.unu-archive-image:not(:has(img)) {
  display: none;
}

/*
 * Date + category on one quiet line above the title. A flex group, so the
 * editor can drop more taxonomy terms in or take them out without breaking the
 * layout.
 */
.unu-archive-meta {
  align-items: center;
  color: rgba(6, 46, 53, 0.6);
  font-size: 0.82rem;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.unu-archive-meta > * {
  margin: 0;
}

.unu-archive-date {
  color: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.unu-archive-cat a {
  background: rgba(0, 124, 136, 0.1);
  border-radius: 999px;
  color: var(--unu-teal-deep, #007c88);
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.62rem;
  text-decoration: none;
  text-transform: uppercase;
}

/*
 * Post terms render a literal ", " between links. On a flex row with gaps that
 * reads as "BERITA , MAHASISWA", so hide the separator and let the gap do the
 * spacing. The comma still shows in text-only contexts (feeds, excerpts).
 */
.unu-archive-cat .wp-block-post-terms__separator {
  display: none;
}

.unu-archive-cat a:hover,
.unu-archive-cat a:focus-visible {
  background: var(--unu-teal-deep, #007c88);
  color: #fff;
}

.unu-archive-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 800;
  line-height: 1.22;
  margin: 0 0 0.6rem;
  text-align: left;
}

.unu-archive-title a {
  color: var(--wp--preset--color--contrast, #062e35);
  text-decoration: none;
}

.unu-archive-title a:hover,
.unu-archive-title a:focus-visible {
  color: var(--unu-teal-deep, #007c88);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.unu-archive-entry .wp-block-post-excerpt {
  color: rgba(6, 46, 53, 0.72);
  font-size: 0.98rem;
  line-height: 1.72;
  margin: 0;
  text-align: left;
}

.unu-archive-entry .wp-block-post-excerpt__more-link {
  color: var(--unu-teal-deep, #007c88);
  display: inline-block;
  font-weight: 700;
  margin-top: 0.4rem;
  text-decoration: none;
}

.unu-archive-entry .wp-block-post-excerpt__more-link:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------- empty state --- */

/*
 * A category with no posts used to render nothing at all: the query column
 * collapsed to 0px high while the sidebar stayed put, so the page looked
 * broken rather than empty. Every query template now includes a
 * core/query-no-results block; this gives it a deliberate, on-brand look.
 */
.unu-empty-state {
  background: #fff;
  border: 1px solid rgba(6, 46, 53, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 40px -28px rgba(6, 46, 53, 0.35);
  padding: clamp(2rem, 4vw, 3rem);
}

.unu-empty-title {
  color: var(--wp--preset--color--contrast, #062e35);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.65rem;
}

.unu-empty-text {
  color: rgba(6, 46, 53, 0.72);
  font-size: 0.98rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------- category hero --- */

/*
 * The coloured band at the top of a category page. It is a normal Group block
 * in the template, so its text and background can be edited in the Site
 * Editor; these rules only provide the default look.
 */
.unu-category-hero {
  background:
    linear-gradient(110deg, rgba(6, 46, 53, 0.92), rgba(0, 124, 136, 0.78)),
    url("../images/Logo_UNU-KALTIM.png"),
    var(--unu-teal-deep);
  background-position: center, calc(100% + 80px) 50%, center;
  background-repeat: no-repeat;
  background-size: cover, min(520px, 58vw), cover;
  color: #fff;
  margin-block-start: 0;
  padding-bottom: clamp(3.5rem, 7vw, 5rem);
  padding-top: clamp(3.5rem, 7vw, 5rem);
}

.unu-category-hero.is-lppm {
  background:
    linear-gradient(110deg, rgba(5, 38, 47, 0.94), rgba(0, 112, 100, 0.78)),
    url("../images/Logo_UNU-KALTIM.png"),
    #087266;
  background-position: center, calc(100% + 80px) 50%, center;
  background-repeat: no-repeat;
  background-size: cover, min(520px, 58vw), cover;
}

.unu-category-hero.is-fakultas {
  background:
    linear-gradient(110deg, rgba(6, 46, 53, 0.92), rgba(145, 72, 0, 0.74)),
    url("../images/Logo_UNU-KALTIM.png"),
    #914800;
  background-position: center, calc(100% + 80px) 50%, center;
  background-repeat: no-repeat;
  background-size: cover, min(520px, 58vw), cover;
}

.unu-category-title {
  color: #fff;
  font-family: var(--wp--preset--font-family--system-sans, Arial, sans-serif);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
  max-width: 760px;
  text-transform: none;
}

/*
 * An archive title such as "Berita" is one short word; at 4rem it reads as a
 * fragment floating above the band. Title Case plus a slightly smaller top end
 * keeps it looking like a heading rather than a stray label.
 */
.unu-category-hero .unu-category-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.unu-category-desc {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.02rem;
  line-height: 1.72;
  margin-top: 0.75rem;
  max-width: 640px;
}

/* ---------------------------------------------------------- single hero --- */

/*
 * The single-post header uses the same coloured band as a category page: same
 * gradient, same watermark logo, same badge. `.unu-category-hero` supplies all
 * of that, so the two pages cannot drift apart — only the differences below
 * are single-specific.
 */
.unu-single-hero .unu-category-hero {
  margin-block-start: 0;
}

/*
 * Badge, then the headline. The badge keeps the small bottom margin that
 * `.unu-ref-badge` already sets, which is exactly the gap the archive hero has
 * between its badge and title.
 */
.unu-single-hero .unu-ref-badge {
  margin-bottom: 1.1rem;
}

/*
 * A post headline is much longer than the one-word archive title "Berita", so
 * it keeps the archive type scale but needs a taller line and a narrower
 * measure — otherwise a three-line headline runs the full 1400px band.
 */
.unu-single-hero .unu-single-title {
  font-size: clamp(1.9rem, 3.6vw, 2.95rem);
  line-height: 1.18;
  max-width: 950px;
  text-wrap: balance;
}

/* Date, author and categories sit on the band, so they take the light palette. */
.unu-single-hero .unu-single-meta {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  gap: 1.1rem;
  margin-top: 1.15rem;
}

.unu-single-hero .unu-single-meta a {
  color: #fff;
}

/*
 * Categories render as plain text by default, which reads as a stray word.
 * Give them the same pill treatment as the badge so the row looks deliberate.
 */
.unu-single-hero .unu-single-meta .wp-block-post-terms a {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.18rem 0.66rem;
  text-decoration: none;
}

.unu-single-hero .unu-single-meta .wp-block-post-terms a:hover,
.unu-single-hero .unu-single-meta .wp-block-post-terms a:focus-visible {
  background: rgba(255, 255, 255, 0.26);
}

/*
 * Core prints a comma between category links (`.wp-block-post-terms__separator`)
 * because in a run of body text "Berita, Mahasiswa" reads naturally. Once each
 * link is a pill, the comma floats between two chips and looks like a typo, so
 * the separators are hidden and the flex gap does the spacing instead.
 */
.unu-single-hero .unu-single-meta .wp-block-post-terms__separator {
  display: none;
}

.unu-single-hero .unu-single-meta .wp-block-post-terms {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 900px) {
  .unu-archive-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Narrower column: 2:1 would be very short on a phone. */
  .unu-archive-image {
    aspect-ratio: 16 / 10;
  }

  /*
   * The mixed layout collapses to a single column. The picture is already on
   * top of every card, so nothing else needs to change — only the ratio.
   */
  .unu-archive-list.is-mixed {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .unu-archive-list.is-mixed > li:first-child {
    grid-column: auto;
  }

  /* The lead picture keeps its full-bleed banner shape; only the ratio shrinks. */
  .unu-archive-list.is-mixed > li:first-child .unu-archive-image {
    aspect-ratio: 16 / 9;
  }

  /*
   * On a phone the logo watermark sits behind the text instead of beside it,
   * so it is faded further and the badge/breadcrumb stop sharing a row.
   */
  .unu-category-hero {
    background-position: center, calc(100% + 40px) 50%, center;
    background-size: cover, min(320px, 72vw), cover;
  }

  .unu-single-hero .unu-single-title {
    font-size: clamp(1.6rem, 6.4vw, 2.1rem);
    line-height: 1.22;
  }
}