/*
 * theme-extras.css
 *
 * Canonical theme-side delta file (LOCKED, projects/berita-co/decisions.md
 * 2026-09-23 "BRT-045 Phase 0 unblocking decisions LOCKED" sub-point (c)). All
 * CSS/JS/font files copied from the design package are copied VERBATIM
 * (proven by MANIFEST.sha256); any theme-side addition or override belongs
 * here, and only here, enqueued LAST after page-<slug>.css.
 *
 * Phase 0 status: empty on purpose. The mobile-menu class question (sub-point
 * b of the same LOCKED entry) was resolved WITHOUT needing a rule here:
 * global.css already has a full, standalone rule for the unsuffixed
 * `.bc-menu-mobile-link` class (lines 44-47), visually identical to -2/-3/-4
 * except for animation-delay, so items 5+ render correctly using the package
 * CSS alone. See BRT-046 execution report for the verification.
 */

/* ============================================================
 * Phase 1 (BRT-047): Article page body-content delta.
 *
 * the_content() emits bare p, h2, h3, h4, ul, ol, li, strong, a; it never
 * emits page-artikel.css's per-element classes (bc-artikel-body__text-2,
 * __text-3, __text-4, __title-2, __title-3, __title-5, __list, __list-2),
 * since those only exist in the static export's hand-authored sample
 * markup. These rules are scoped inside the body column's own real wrapper
 * class, `.bc-artikel-body__col` (data-bc="body" in single.php), which IS
 * a real package class carrying the base font-size/line-height already, so
 * it is not redeclared here.
 *
 * CORRECTION (2026-09-23, against the LOCKED entry "BRT-047 Phase 1
 * plan-gate decisions LOCKED" sub-point f): that sub-point told Durov to
 * reference `--bc-fs-18`, `--bc-fs-16`, `--bc-fs-22` for the paragraph
 * values 18/16/22. Reading page-artikel.css shows those three numbers are
 * MARGIN-TOP values on the four `__text-*` classes (lines 76,78,80,84), not
 * font sizes; `.bc-artikel-body__col` itself already sets the correct
 * font-size (17px, line 75) for every bare <p>, so no font-size rule
 * belongs on paragraphs at all. Using an `--bc-fs-*` token for a margin
 * would invent a false semantic link between type scale and spacing and
 * would silently break if the type scale is retuned. Corrected mapping
 * below: a SPACE token is used only where its value matches a package
 * margin exactly (16px = --bc-space-4); 18px, 22px, and 14px have no
 * matching entry in the space scale (4,8,12,16,20,24,32...) and are plain
 * literals with a comment, same treatment already used for the pre-existing
 * literals below (36px, 28px, 9px gap).
 *
 * Previous pass had flattened every paragraph to one margin value
 * (reasoning: "most frequent variant"). That lost a rhythm the package
 * deliberately varies by POSITION, not by frequency. Reproduced below from
 * the four samples each carries in the export (artikel.html):
 *   - __text-2, 22px: the body's FIRST paragraph (line 237, dateline).
 *   - __text-3, 18px: a paragraph that FOLLOWS another paragraph
 *     (lines 238, 249, 262, 295) -- the DEFAULT case, so it is the bare
 *     `> p` rule below.
 *   - __text-4, 16px: a paragraph immediately AFTER a heading
 *     (lines 241, 261, 275, 294).
 *   - __text-5, 14px: a paragraph immediately BEFORE a list (line 243).
 *     Only ONE sample exists for this position in the whole export, unlike
 *     the other three which each have four; flagged as an INFERENCE below,
 *     not a four-sample-confirmed rule.
 * ============================================================ */

.bc-artikel-body__col > p {
  margin: 18px 0 0; /* literal: package __text-3, the default "follows another paragraph" case, 4/4 export samples; no exact space token (space-4 16px / space-5 20px bracket 18px) */
  text-wrap: pretty;
}

.bc-artikel-body__col > h2 + p,
.bc-artikel-body__col > h3 + p,
.bc-artikel-body__col > h4 + p {
  margin: var(--bc-space-4) 0 0; /* 16px, package __text-4, paragraph directly after a heading, 4/4 export samples */
}

/* INFERENCE, one sample only (artikel.html line 243): the package's
 * __text-5 (14px) sits on the single paragraph that directly precedes a
 * <ul>; the export's other list, an <ol> at line 275, is preceded by an
 * <h4>, not a paragraph, so this rule has no second case to cross-check
 * against. Kept separate from the two four-sample rules above/below on
 * purpose, so a later reader can tell the confidence level apart. */
.bc-artikel-body__col > p:has(+ ul),
.bc-artikel-body__col > p:has(+ ol) {
  margin: 14px 0 0; /* literal: package __text-5, no exact space token */
}

.bc-artikel-body__col > p:first-child {
  margin: 22px 0 0; /* literal: package __text-2, the body's first paragraph, 4/4 export samples; wins over the two rules above by higher selector specificity since a first child can never also match a "+ p" or ":has()" position in the same document */
}

.bc-artikel-body__col > h2 {
  margin: 36px 0 0; /* no matching token (space scale jumps 24px -> 32px) */
  font-size: var(--bc-fs-26);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}

.bc-artikel-body__col > h3 {
  margin: 28px 0 0; /* no matching token */
  font-size: var(--bc-fs-21);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.bc-artikel-body__col > h4 {
  margin: var(--bc-space-6) 0 0; /* 24px, was __title-5's literal margin */
  font-size: var(--bc-fs-16-5);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.bc-artikel-body__col > ul {
  margin: 14px 0 0; /* no matching token */
  padding-left: var(--bc-space-6); /* 24px, was __list's literal padding-left */
  display: flex;
  flex-direction: column;
  gap: 9px; /* literal, tokens.css defines no gap token (LOCKED exemption) */
}

.bc-artikel-body__col > ol {
  margin: var(--bc-space-3) 0 0; /* 12px, was __list-2's literal margin */
  padding-left: var(--bc-space-6); /* 24px, was __list-2's literal padding-left */
  display: flex;
  flex-direction: column;
  gap: 9px; /* literal, tokens.css defines no gap token (LOCKED exemption) */
}

.bc-artikel-body__col li {
  text-wrap: pretty;
}

.bc-artikel-body__col a {
  color: var(--bc-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bc-artikel-body__col a:hover {
  color: var(--bc-red);
}

/* CORRECTION: previous pass left <strong> entirely unstyled inside
 * the_content(). The package distinguishes two bold weights inside the
 * body (page-artikel.css lines 77 and 87): __strong (800) on <strong>
 * inside a paragraph (artikel.html line 237), __strong-2 (700) on
 * <strong> inside a list item (lines 245-247). Both reproduced below,
 * element-scoped, literal per sub-point f's exemption (tokens.css defines
 * no font-weight token). */
.bc-artikel-body__col p strong {
  font-weight: 800; /* package __strong */
}

.bc-artikel-body__col li strong {
  font-weight: 700; /* package __strong-2 */
}

/* H2 mobile font-size: the export's H2 elements carry a SECOND class,
 * bc-arth2, that page-artikel.css's own 640px media query targets for this
 * resize; the_content() cannot emit that second class, so the same
 * breakpoint and value are reproduced here against the element selector
 * directly. */
@media (max-width: 640px) {
  .bc-artikel-body__col > h2 {
    font-size: var(--bc-fs-22) !important;
  }
}

/* Real featured-image fill for the header figure (article-header.php).
 * page-artikel.css's .bc-artikel-body__foto only ever wrapped a CSS
 * gradient placeholder + a <span class="bc-artikel-body__mono">; it has no
 * rule for a real <img>, which this phase introduces (BRT-047 scope: wire
 * article photos to real post thumbnails at the export's own aspect ratio,
 * decisions.md 2026-09-23 scoping sub-point l). The aspect-ratio itself
 * stays owned by .bc-artikel-body__foto (package verbatim, untouched). */
.bc-artikel-body__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
 * Phase 2 (BRT-049): Channel page (category.php) deltas.
 * ============================================================ */

/* Real featured-image fill for the mosaic's hero and item-2/item-3 photo
 * containers (mosaic.php). page-channel.css's .bc-mosaic__foto and
 * .bc-mosaic__foto-2 only ever wrapped a CSS gradient placeholder plus a
 * mono <span>; this phase wires real post thumbnails into them, the exact
 * same pattern already used for .bc-artikel-body__photo above (Phase 1).
 * The aspect-ratio itself stays owned by the package's own
 * .bc-mosaic__foto / .bc-mosaic__foto-2 rules, untouched. */
.bc-mosaic__photo,
.bc-mosaic__photo-2 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LOCKED decision D4 (decisions.md 2026-09-24 "BRT-045 plan v2 flagged
 * deviations" entry): when the channel has no ANALISIS post to fill
 * item-4, the mosaic grid recomposes instead of leaving a hole. The
 * package's own grid-template-areas ('hero hero a b' / 'hero hero wide
 * wide' / 'r1 r2 r3 r4') is overridden so item-2 ('a') and item-3 ('b')
 * each grow to fill both of the top two rows, since the 7 editorial posts
 * that fill hero/a/b/r1-r4 are unchanged whether or not an 8th ANALISIS
 * post exists; only the 'wide' slot disappears. */
.bc-mosaic--no-analisis {
  grid-template-areas: 'hero hero a b' 'hero hero a b' 'r1 r2 r3 r4';
}

/* FLAGGED ADDITION, not requested verbatim: when fewer than 7 editorial
 * posts exist at all (a young or thin channel, e.g. Opini with 1 post),
 * the fixed rectangular area map above cannot be filled regardless of the
 * ANALISIS slot. Reuses the SAME technique the package's own 1080px
 * breakpoint already applies to this exact class for a different reason
 * (page-channel.css line 61), rather than inventing a bespoke area map
 * per possible post count. */
.bc-mosaic--thin {
  grid-template-areas: none;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.bc-mosaic--thin > * {
  grid-area: auto;
}

/* PROPOSED, not requested (own initiative, reversible, CSS-only): when a
 * channel's Terpopuler AND TAG TERBARU sections both have nothing to show
 * (category.php omits the whole <aside> in that case, e.g. Opini today),
 * the two-column grid degrades to one column instead of reserving a dead
 * 300px-plus-gap track on the right for an element that no longer exists.
 * Scoped with :has() to the specific grid this affects, consistent with
 * the :has() usage already present above in this file (Phase 1). */
.bc-channel-latest__grid:has(> :only-child) {
  grid-template-columns: 1fr;
}

/* ============================================================
 * Phase 3 second half (BRT-050): Homepage Pilihan Editor strip, channel
 * blocks, and Opini dan Analisis band deltas.
 * ============================================================ */

/* Real featured-image fill for card-pilihan and channel-block__foto photo
 * containers, the same pattern already used for
 * .bc-artikel-body__photo (Phase 1) and .bc-mosaic__photo(-2) (Phase 2):
 * the package's own foto container only ever wrapped a CSS gradient
 * placeholder plus a mono span; this phase wires real post thumbnails into
 * it. The aspect-ratio itself stays owned by the package's own
 * .bc-card-pilihan__foto / .bc-channel-block__foto rules, untouched. */
.bc-card-pilihan__photo,
.bc-channel-block__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Plan v2 decision D8 (decisions.md 2026-09-24 "BRT-045 plan v2 flagged
 * deviations" entry): the Pilihan Editor strip and the Opini dan Analisis
 * band render with a compressed grid when fewer posts exist than the
 * design's fixed slot count (4 and 3 respectively), rather than leaving
 * empty slots in the fixed-column layout. Reuses the same
 * repeat(auto-fit, minmax(...)) technique the package's own 1080px
 * breakpoint already applies to .bc-mosaic-2 (page-channel.css line 61)
 * and that theme-extras.css already reused for .bc-mosaic--thin (Phase 2). */
.bc-pilihan-editor__grid--thin {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bc-opini__grid--thin {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* FLAGGED ADDITION (own initiative, reversible, CSS-only), not requested
 * verbatim: page-homepage.css's .bc-channel-block__grid is a fixed
 * 3-track grid (5fr 4fr 3fr, no grid-template-areas), so a track with no
 * child in it renders as a blank gap instead of collapsing. These three
 * :has() rules resize the grid to however many of {featured item, list,
 * tags} channel-block.php actually renders, mirroring the :has() collapse
 * pattern already used for .bc-channel-latest__grid (Phase 2). Only
 * reachable through the artificial empty-state test in this unit's own
 * verification; every channel in today's real data fills all three
 * columns. */
.bc-channel-block__grid:has(> .bc-channel-block__item:only-child) {
  grid-template-columns: 1fr;
}

.bc-channel-block__grid:has(> .bc-chlist:last-child) {
  grid-template-columns: 5fr 4fr;
}

.bc-channel-block__grid:has(> .bc-channel-block__item + .bc-channel-block__col-2) {
  grid-template-columns: 5fr 3fr;
}

/* ============================================================
 * Phase 4 (BRT-053): Search page (search.php) deltas.
 * ============================================================ */

/* The task instruction requires the URUTKAN/WAKTU selects to live INSIDE
 * the search form so the existing CARI button submits them (search.php's
 * own docblock explains why); that reparents the package's
 * div.bc-filters.bc-search-bar__row from a sibling of .bc-search-bar__form
 * to a CHILD of it. .bc-search-bar__form is itself a 2-item flex row
 * (input + button, page-pencarian.css line 8, nowrap by default), so
 * without this rule the added child would render as a third item on that
 * same line instead of starting its own row below, which is not the
 * package's layout. flex-wrap plus a full-width basis on the reparented
 * child reproduces the package's original two-row grouping exactly. */
.bc-search-bar__form {
  flex-wrap: wrap;
}
.bc-search-bar__form > .bc-search-bar__row {
  flex-basis: 100%;
  margin-top: 18px; /* same value as .bc-search-bar__col's own gap (page-pencarian.css line 3), which this child no longer receives now that it moved inside the form */
}

/* T1 (decisions.md 2026-09-24 "BRT-045 Phase 4 plus Phase 5 plan-gate
 * decisions LOCKED" entry sub-point (a)): SIX filter chips instead of the
 * four the package draws. The package's own row already wraps
 * (page-pencarian.css line 12, flex-wrap:wrap) so six chips never overflow
 * or get clipped; this rule only tightens the gap at the narrow breakpoint
 * so six chips plus the two selects still read as one coherent group
 * instead of drifting apart, without shrinking any chip's type size or
 * dropping a chip (both explicitly forbidden by the brief). */
@media (max-width: 640px) {
  .bc-search-bar__row {
    gap: 6px !important;
  }
}

/* ============================================================
 * Phase 4 (BRT-053) continued, Unit B2: Author archive page
 * (author.php) deltas.
 * ============================================================ */

/* The package's own .bc-penulis-rail__foto rule (page-penulis.css line 6)
 * paints a grey diagonal placeholder gradient sized for the package's mono
 * placeholder label text it ships. This slot instead renders the canonical
 * brand-red initials avatar (bc_article_avatar(), inc/article.php, this
 * phase's Commit 1) whenever no real photo exists, the same red-circle
 * pattern every other avatar surface in this theme already uses (Phase 1's
 * .bc-author-box__avatar, Phase 3's .bc-card-opini__avatar), so the
 * placeholder gradient background is overridden to the brand red token and
 * the initials glyph is set to white at a size proportional to the 132px
 * square slot (44px, the same ~0.33-of-slot ratio the 56px and 34px
 * avatars already use: 56px -> 18px, 34px -> 12px). Centering is already
 * the package's own rule (display:flex, align-items/justify-content:
 * center on this class), not duplicated here. The slot stays SQUARE: the
 * package gives it no border-radius, and forcing a circle here would
 * change the package's own rail layout, which this unit must not do. */
.bc-penulis-rail__foto {
  background: var(--bc-red);
  color: var(--bc-white);
  font-size: var(--bc-fs-44);
  font-weight: 800;
}

/* Real featured-image fill for the ARTIKEL PILIHAN card photo container
 * (card-penulis-pilihan.php), the exact same pattern already used for
 * .bc-artikel-body__photo (Phase 1), .bc-mosaic__photo(-2) (Phase 2), and
 * .bc-card-pilihan__photo / .bc-channel-block__photo (Phase 3 second half):
 * the package's own foto container only ever wrapped a CSS gradient
 * placeholder plus a mono span; this phase wires a real post thumbnail into
 * it. The aspect-ratio itself stays owned by the package's own
 * .bc-card-penulis-pilihan__foto rule, untouched. */
.bc-card-penulis-pilihan__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
 * Phase 5 (BRT-054): static legal/about page body deltas
 * (tentang-kami.php, hubungi-kami.php, kebijakan-privasi.php,
 * pedoman-media-siber.php, redaksi.php, all sharing page-named.php).
 *
 * LOCKED decision D52 (decisions.md): these five Pages store their body
 * as a copy of the static export's own text, seeded as SEMANTIC Gutenberg
 * blocks (p, h2, nested ol, ul, dl, a core/group with className bc-box),
 * never as the export's per-element classes (bc-<key>__text-2,
 * __title-2, __grid, etc.), since the_content() cannot emit a class the
 * editor never typed. Every rule below is a DERIVED SELECTOR scoped to
 * the page's own real `.bc-<key>__col` wrapper (a genuine package class,
 * already carrying the base flex-column/gap/padding-top rule from its
 * own page-<slug>.css, so that base rule is not redeclared here), and
 * every declaration is copied from the matching package class. Where the
 * package's markup shape does not exist in the real DOM (a per-row
 * wrapper div, a two-span heading, a decorative arrow glyph), the
 * selector is adapted to the real element tree but the VALUES stay
 * package-literal; each such adaptation is called out below.
 * ============================================================ */

/* ---- tentang-kami.php --------------------------------------------- */

/* package text-2 (page-tentang-kami.css): all bare paragraphs in the
 * column share one style, no position variance like the article body. */
.bc-tentang-kami__col > p {
  margin: 0;
  font-size: var(--bc-fs-17);
  line-height: 1.75;
  text-wrap: pretty;
}
.bc-tentang-kami__col > p a {
  color: var(--bc-red);
  font-weight: 600;
  border-bottom: 1.5px solid var(--bc-red); /* package link-3; link-3:hover sets the same red already inherited, so no hover rule is added, it would be a no-op */
}

/* The export types "Apa yang kamu dapat di sini" as __title-2 and "Cara
 * kami menulis" as __title-3, near-twins that only differ in
 * margin-bottom (16px vs an override to 0px, page-tentang-kami.css
 * lines 14 and 21). the_content() emits one plain h2 for both, so this
 * is normalized to ONE rule. __title-3's 0px would leave zero gap before
 * the very next paragraph (its own text-2 also carries margin:0), which
 * reads as a layout defect, not a design intent; __title-2's 16px is
 * used for both headings so every h2 keeps breathing room below it. */
.bc-tentang-kami__col > h2 {
  margin: 44px 0 16px; /* 44px: no matching space token (scale jumps 32->40->48). 16px = --bc-space-4, kept as var below */
  margin-bottom: var(--bc-space-4);
  padding-top: 26px; /* no matching token */
  border-top: 1px solid var(--bc-line);
  font-size: var(--bc-fs-26);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* package col-2/grid (the "Apa yang kamu dapat di sini" channel list):
 * a 120px/1fr two-column row per channel, border-bottom per row,
 * border-top on the whole block. The export wraps each row's link+label
 * pair in its own div; the seeded dl has no such per-pair wrapper, only
 * dt/dd siblings. A 2-column CSS grid on the dl itself auto-places dt
 * then dd into the same row (2 columns per row, 3 dt/dd pairs = 3 rows),
 * reproducing the grid without inventing a wrapper. The border-bottom is
 * put on BOTH dt and dd (same color, same row) rather than on a row
 * wrapper that does not exist; two abutting same-row borders render
 * identically to one. */
.bc-tentang-kami__col > dl {
  display: grid;
  grid-template-columns: 120px 1fr; /* package literal column widths */
  gap: var(--bc-space-4); /* 16px */
  align-items: baseline;
  border-top: 1px solid var(--bc-line-soft);
  margin: 0;
}
.bc-tentang-kami__col > dl > dt,
.bc-tentang-kami__col > dl > dd {
  padding: var(--bc-space-4) 0; /* 16px, package's row padding:16px 0 */
  border-bottom: 1px solid var(--bc-line-soft);
  margin: 0;
}
.bc-tentang-kami__col > dl > dt > a {
  font-size: var(--bc-fs-12); /* package link-2 declares font-size twice (11px then 12px); the later declaration wins in the cascade, so 12px is the one actually rendered */
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--bc-red);
}
.bc-tentang-kami__col > dl > dd {
  font-size: var(--bc-fs-16);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---- hubungi-kami.php ----------------------------------------------- */

.bc-hubungi-kami__col > h2 {
  margin: 44px 0 var(--bc-space-4); /* 44px no token, 16px = space-4 */
  padding-top: 26px;
  border-top: 1px solid var(--bc-line);
  font-size: var(--bc-fs-26);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* package col-2/link-2/col-3/label-3 (the THREADS/INSTAGRAM channel
 * rows): the export makes the WHOLE row one <a>, flex space-between,
 * holding a stacked kicker+handle (col-3) on the left and a "->" arrow
 * (label-3) vertically centered on the right. The seeded dl gives one
 * <a> per dt only (the label text itself), so dt carries the kicker
 * style and dd carries the handle style as two stacked block lines
 * instead of one flex row; the "->" is restored via dt::after (LOCKED:
 * the glyph is UI ornament, not content, so it must come from CSS, not
 * be typed into the block). KNOWN APPROXIMATION: since dt and dd are
 * plain siblings and not both wrapped by the row's flex container, the
 * arrow can only be centered against dt's own line (top line of the
 * pair), not against the full two-line block like the package does;
 * there is no markup change available to fix this within this unit's
 * scope. */
.bc-hubungi-kami__col > dl {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bc-line);
  margin: 0;
}
.bc-hubungi-kami__col > dl > dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-4); /* 16px */
  padding-top: 22px; /* no matching token, package row padding:22px 0 */
  margin: 0;
  font-size: var(--bc-fs-11);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--bc-red);
}
.bc-hubungi-kami__col > dl > dt::after {
  content: "\2192"; /* the package's own literal glyph, "->" */
  font-size: var(--bc-fs-22);
  font-weight: 800;
  color: var(--bc-red);
}
.bc-hubungi-kami__col > dl > dd {
  margin: 6px 0 0; /* no matching token, package col-3's own gap:6px between the kicker and handle lines */
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bc-line);
  font-size: var(--bc-fs-24);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* package col-4 (the KOREKSI ARTIKEL warm box): a core/group with
 * className bc-box reproduces the box's own background/padding/gap, but
 * Gutenberg wraps a group block's content in an extra
 * .wp-block-group__inner-container div, which becomes the ACTUAL flex
 * child instead of the two paragraphs; the flex/gap is therefore placed
 * on that inner wrapper so the two paragraphs still get the package's
 * gap:8px between them, not on .bc-box itself. First paragraph holds
 * the KOREKSI ARTIKEL label as a <strong>, standing in for the export's
 * separate kicker <span>; second paragraph is the body line. */
.bc-hubungi-kami__col .bc-box {
  background: var(--bc-warm);
  padding: 22px 24px; /* 22px no token, 24px = --bc-space-6 kept literal to match package's own literal usage here */
  margin-top: 12px; /* --bc-space-3 */
}
.bc-hubungi-kami__col .bc-box > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-2); /* 8px */
}
.bc-hubungi-kami__col .bc-box p {
  margin: 0;
}
.bc-hubungi-kami__col .bc-box p:first-child strong {
  font-size: var(--bc-fs-11);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--bc-red);
}
.bc-hubungi-kami__col .bc-box p:last-child {
  font-size: var(--bc-fs-16);
  line-height: 1.65;
  text-wrap: pretty;
}

/* package text-3 (the closing "Cara kami menyunting..." paragraph,
 * the only bare <p> left in this column once h2/dl/box are accounted
 * for) and link-3 for the Redaksi link inside it. */
.bc-hubungi-kami__col > p {
  margin: 0;
  font-size: var(--bc-fs-17);
  line-height: 1.75;
  text-wrap: pretty;
}
.bc-hubungi-kami__col > p a {
  color: var(--bc-red);
  font-weight: 600;
  border-bottom: 1.5px solid var(--bc-red);
}

/* ---- kebijakan-privasi.php ------------------------------------------ */

.bc-kebijakan-privasi__col > p {
  margin: 0;
  font-size: var(--bc-fs-17);
  line-height: 1.75;
  text-wrap: pretty;
}
.bc-kebijakan-privasi__col > p a {
  color: var(--bc-red);
  font-weight: 600;
  border-bottom: 1.5px solid var(--bc-red); /* package link-2 */
}
.bc-kebijakan-privasi__col > h2 {
  margin: 44px 0 0; /* package title-2's own margin-bottom override is already 0 */
  padding-top: 26px;
  border-top: 1px solid var(--bc-line);
  font-size: var(--bc-fs-26);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* package col-2/grid/mono/label-3 (the "Keamanan Data" numbered list):
 * a 40px/1fr row grid, mono red zero-padded number, border-bottom per
 * row. The export types the numbers as literal "01"/"02"/"03" text
 * spans; LOCKED scope forbids typing generated numbers into content, so
 * a CSS counter reproduces the same zero-padded format via the
 * standard `decimal-leading-zero` counter style, not a hand-rolled
 * padding hack. */
.bc-kebijakan-privasi__col > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bc-line-soft);
  counter-reset: bc-kp-item;
}
.bc-kebijakan-privasi__col > ol > li {
  counter-increment: bc-kp-item;
  display: grid;
  grid-template-columns: 40px 1fr; /* package literal */
  gap: var(--bc-space-4); /* 16px */
  align-items: baseline;
  padding: 14px 0; /* no matching token */
  border-bottom: 1px solid var(--bc-line-soft);
  font-size: var(--bc-fs-16);
  font-weight: 600;
  line-height: 1.55;
  text-wrap: pretty;
}
.bc-kebijakan-privasi__col > ol > li::before {
  content: counter(bc-kp-item, decimal-leading-zero);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-13);
  font-weight: 700;
  color: var(--bc-red);
}

/* ---- redaksi.php ------------------------------------------------------
 * NOTE: the team member cards below the intro text (redaksi-anggota.php)
 * render bc-redaksi-anggota__* classes directly from PHP, not from
 * the_content(), so those already match page-redaksi.css verbatim and
 * need nothing here except the avatar override at the bottom of this
 * file's own section. Only the intro column (p/h2/ol, real Gutenberg
 * content) needs derived selectors. */

.bc-redaksi__col > p {
  margin: 0;
  font-size: var(--bc-fs-17);
  line-height: 1.75;
  text-wrap: pretty;
}
.bc-redaksi__col > h2 {
  margin: 44px 0 var(--bc-space-4); /* package title-2 here carries no margin-bottom override, unlike kebijakan-privasi's and tentang-kami's title-2/title-3 */
  padding-top: 26px;
  border-top: 1px solid var(--bc-line);
  font-size: var(--bc-fs-26);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* package col-2/grid/mono/label-2 (the "Komitmen Kami" list), the exact
 * same row shape as kebijakan-privasi's list above but plain sequential
 * numbers (no zero-padding token used by the export here, just "1."),
 * so a plain decimal counter plus a literal dot suffix is used instead
 * of decimal-leading-zero. */
.bc-redaksi__col > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bc-line-soft);
  counter-reset: bc-rd-item;
}
.bc-redaksi__col > ol > li {
  counter-increment: bc-rd-item;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--bc-space-4);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--bc-line-soft);
  font-size: var(--bc-fs-16);
  font-weight: 600;
  line-height: 1.55;
  text-wrap: pretty;
}
.bc-redaksi__col > ol > li::before {
  content: counter(bc-rd-item) ".";
  font-family: var(--bc-font-mono);
  font-size: var(--bc-fs-13);
  font-weight: 700;
  color: var(--bc-red);
}

/* Avatar slot override, same technique already used above in this file
 * for .bc-penulis-rail__foto (Phase 4, Unit B2): the package's own
 * .bc-redaksi-anggota__foto (page-redaksi.css line 20) paints a grey
 * hatched placeholder sized for a corner-anchored mono label the export
 * ships; this slot instead renders bc_article_avatar()'s brand-red
 * initials, the same canonical avatar every other surface in this theme
 * uses. DECISION (Durov, this unit): the package's 1px border is DROPPED
 * here, since it belongs to the hatched-placeholder look, not to a real
 * avatar, and no other avatar surface in this theme (.bc-author-box__avatar,
 * .bc-card-opini__avatar, .bc-penulis-rail__foto) carries a border either.
 * The hatched repeating-linear-gradient background is replaced by the
 * brand red token, and the corner-anchored flex-end alignment is
 * replaced by centered, matching every other avatar surface. Font-size
 * follows the same ~0.33-of-slot ratio already established
 * (.bc-author-box__avatar 56px->18px, .bc-card-opini__avatar 34px->12px,
 * .bc-penulis-rail__foto 132px->44px): 112px * 0.33 = ~37px, and the
 * nearest available fs token is 40px (34px would be 3.3px short, 40px
 * is 2.7px over; 40px is the closer token). */
.bc-redaksi-anggota__foto {
  background: var(--bc-red);
  border: none; /* DEVIATION: package's 1px border(--bc-line) dropped, see comment above. Observed result: a flat red square, consistent with the other three avatar surfaces in this theme, none of which carry a border */
  color: var(--bc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* package's padding:6 plus align-items:flex-end positioned the placeholder label in the bottom-left corner; centered content needs no corner offset */
  font-size: var(--bc-fs-40);
  font-weight: 800;
}

/* ---- pedoman-media-siber.php ----------------------------------------- */

.bc-pedoman-media-siber__col > p {
  margin: 0;
  font-size: var(--bc-fs-17);
  line-height: 1.75;
  text-wrap: pretty;
}
.bc-pedoman-media-siber__col > p a {
  color: var(--bc-red);
  font-weight: 600;
  border-bottom: 1.5px solid var(--bc-red); /* package link-2 */
}

/* package title-2 (page-pedoman-media-siber.css line 16) also sets
 * display:flex/gap:12px to separate a "1." <span> from a title <span>.
 * The export instead types the number straight into the heading text
 * ("1. Ruang Lingkup", one text node, confirmed in the rendered output),
 * so there are no two spans to flex; the space character already in the
 * text does the job the 12px gap did, so display/gap is not reproduced,
 * it has no matching structure to attach to. Every other declaration on
 * this class (margin, padding-top, border-top, font-size, weight,
 * letter-spacing, line-height) is copied as-is. */
.bc-pedoman-media-siber__col > h2 {
  margin: 44px 0 0; /* title-2's own margin-bottom override here is already 0, same as kebijakan-privasi's */
  padding-top: 26px;
  border-top: 1px solid var(--bc-line);
  font-size: var(--bc-fs-26);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* package col-2/grid/label-3/label-4 (level-1 numbered clauses) and
 * col-4/grid-2/label-5/label-6 (level-2 lettered sub-clauses), reused
 * from the export's own two nested ordered lists (2 ol > li > ol
 * pattern, confirmed in the rendered output, see report for the count).
 * The export wraps each numbered row's number+text in its own div
 * (.grid) and, when a row has sub-items, further wraps the row's text
 * and its sub-list together in a stacking div (.col-3); the seeded
 * <li> instead holds its own text node and, where present, a nested
 * <ol> directly, with no such per-row wrapper. The number/letter column
 * (28px+8px gap for level 1, 24px+10px gap for level 2) is reproduced as
 * padding-left on the li itself plus an absolutely positioned ::before
 * counter, since there is no separate wrapper div available to be the
 * grid's own left column. */
.bc-pedoman-media-siber__col > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-3); /* 12px, package col-2 */
  counter-reset: bc-pm-item;
}
.bc-pedoman-media-siber__col > ol > li {
  position: relative;
  counter-increment: bc-pm-item;
  padding-left: 36px; /* 28px number column + 8px gap, package grid */
  font-size: var(--bc-fs-16); /* package label-4 */
  line-height: 1.6;
  text-wrap: pretty;
}
.bc-pedoman-media-siber__col > ol > li::before {
  content: counter(bc-pm-item) "."; /* package label-3 types the number span as literal "1." text, reproduced with counter() + a literal dot suffix rather than typing the number into content */
  position: absolute;
  left: 0;
  font-size: var(--bc-fs-16); /* package label-3 */
  line-height: 1.6;
}
.bc-pedoman-media-siber__col > ol ol {
  list-style: none;
  counter-reset: bc-pm-sub;
  margin: var(--bc-space-2) 0 0; /* 8px, package col-4's own gap between the row's text line and its sub-list */
  padding: 0 0 0 2px; /* package col-4 padding-left:2px */
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-2); /* 8px, package col-4 */
}
.bc-pedoman-media-siber__col > ol ol > li {
  position: relative;
  counter-increment: bc-pm-sub;
  padding-left: 34px; /* 24px number column + 10px gap, package grid-2 */
  font-size: var(--bc-fs-15-5); /* package label-6 */
  line-height: 1.6;
  color: var(--bc-ink-2);
  text-wrap: pretty;
}
.bc-pedoman-media-siber__col > ol ol > li::before {
  content: counter(bc-pm-sub, lower-alpha) "."; /* package label-5 types the letter span as literal "a."/"b." text, reproduced with a lower-alpha counter + literal dot, same technique as the level-1 list above */
  position: absolute;
  left: 0;
  font-size: var(--bc-fs-15-5); /* package label-5 */
  line-height: 1.6;
  color: var(--bc-ink-2);
}

/* package box/text-3 (the Rp500.000.000 sanction callout), same
 * inner-container caveat as hubungi-kami's box above; this box only
 * ever holds ONE paragraph in the export and in the seeded content, so
 * no flex/gap is needed on the inner wrapper here. */
.bc-pedoman-media-siber__col .bc-box {
  background: var(--bc-warm);
  padding: 18px 22px; /* package literal, no matching token */
  margin-top: 6px; /* no matching token */
}
.bc-pedoman-media-siber__col .bc-box p {
  margin: 0;
  font-size: var(--bc-fs-15-5);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ============================================================
 * BRT-058: image containment defect fixes.
 *
 * Root cause (Unit 1 investigation): every OTHER photo slot in this
 * theme (.bc-card-pilihan__foto, .bc-channel-block__foto,
 * .bc-mosaic__foto(-2), .bc-artikel-body__foto,
 * .bc-card-penulis-pilihan__foto) already got a theme-extras.css rule
 * above (Phases 1 to 4) that fills the child img to 100% width/height
 * with object-fit:cover, so the package's own aspect-ratio on the
 * wrapper div wins regardless of the image's natural dimensions. The
 * hero slot (.bc-hero__foto / .bc-hero__photo, lead-hero.php) never got
 * that rule: page-homepage.css's .bc-hero__foto only ever wrapped a CSS
 * gradient placeholder, exactly like the other wrappers before their
 * Phase 1 to 4 fix, so the same gap exists here and the same fix
 * applies. Without it, the flex wrapper's align-items:center does not
 * stretch the img, so the img renders at its own natural pixel size and
 * (since flex items default to min-height:auto, i.e. they refuse to
 * shrink below their content's intrinsic size) drags the wrapper's
 * height along with it past the package's aspect-ratio:16/9, which then
 * overflows the row when the image is wide or square (confirmed:
 * post 79 on attachment 181, Rendy's own reported photo, before this
 * fix: 1024x683 rendered slot at 1080px viewport instead of 1032x581).
 * ============================================================ */

.bc-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar slot containment (all four real-photo avatar surfaces).
 * bc_article_avatar() (inc/article.php) puts the selector class DIRECTLY
 * on the <img> when a real photo exists (no wrapper div), and on a
 * fallback <span> with initials otherwise; object-fit only affects
 * replaced elements, so it is a harmless no-op on the span. Each of
 * these four classes already carries a fixed pixel width/height from the
 * package (page-homepage.css, page-artikel.css, page-penulis.css) or an
 * earlier theme-extras.css phase (.bc-penulis-rail__foto,
 * .bc-redaksi-anggota__foto above), so there is no overflow risk the way
 * there was for the hero's aspect-ratio-driven slot fixed above; the
 * only defect is object-fit's default value of fill, which stretches or
 * squishes any real photo that is not already square. WP's "thumbnail"
 * image size (used by bc_article_avatar()) IS hard-cropped square by
 * default, so this has not been visually reachable with today's data,
 * but nothing in bc_article_avatar() or its four callers (author.php,
 * opini-band.php, author-box.php, redaksi-anggota.php) guarantees a
 * square source, so it is fixed here defensively with the same
 * object-fit:cover already applied above to every other real-photo slot
 * in this file. Verified against user 1's bc_avatar_id set to attachment
 * 185 (384x2560 portrait, an extreme non-square source): all four boxes
 * stayed at their package size (132, 34, 56, 112px) with no stretch. */
.bc-penulis-rail__foto,
.bc-card-opini__avatar,
.bc-author-box__avatar,
.bc-redaksi-anggota__foto {
  object-fit: cover;
}

/* BRT-062 (Unit U2): kicker/label uppercase moved from PHP to CSS.
 * Root cause: WordPress core stores taxonomy term names with the
 * ampersand already HTML-entity-encoded in the database (e.g. "Travel
 * &amp; Wisata"). mb_strtoupper() ran on that already-encoded string in
 * PHP before esc_html(), turning "&amp;" into "&AMP;" (not a valid
 * entity), so esc_html() then re-encoded the remaining "&" into
 * "&amp;AMP;", rendering as "TRAVEL &AMP; WISATA". Uppercase casing is a
 * presentation concern, not a data concern, so it is applied here via
 * text-transform on the wrapping element instead of mutating the string
 * in PHP. No mb_strtoupper() call remains for any string sourced from
 * term names, tag names, or author job-title (bc_jabatan) meta; each
 * class below is the exact wrapper class of one of those call sites. */
.bc-pencarian__kicker,
.bc-penulis-rail__kicker,
.bc-card-404-terbaru__label-2,
.bc-card-terkait__kicker,
.bc-card-rail__kicker,
.bc-artikel-body__kicker,
.bc-arsip-entri__label-5,
.bc-channel-list-item__kicker,
.bc-card-pilihan__kicker,
.bc-hero__kicker,
.bc-card-hero-sub__kicker,
.bc-arsip-entri-penulis__kicker,
.bc-card-mosaic__kicker,
.bc-author-box__kicker,
.bc-card-penulis-pilihan__kicker,
.bc-arsip-entri__label-2,
.bc-redaksi-anggota__kicker,
.bc-channel-latest__title-2 {
  text-transform: uppercase;
}