/* ===========================================================================
 * ParkssiNet CMS — Public Page Builder: structural minimum
 *
 *   The blocks that BlockRendererService emits reach the public side with
 *   almost no styling of their own. This file is what makes them readable.
 *   It is NOT the admin builder stylesheet (that is
 *   /assets/page_builder/builder/builder.css, which is loaded only by the
 *   admin shell and is written against admin tokens), and it is NOT a theme:
 *   a theme still owns brand colour, type personality and decoration.
 *
 *   Load order is front.css → THIS FILE → theme.css. That order is load-
 *   bearing twice over: it is how the embed fix below beats a generic rule in
 *   front.css without `!important`, and it is how a theme keeps the last word
 *   on appearance.
 *
 *   Hard rules this file keeps:
 *     - no admin tokens. `--cms-*` belongs to the admin shell and is simply
 *       not defined out here; builder.css leaks into nothing because it is
 *       never loaded publicly.
 *     - no new custom properties. The public palette is the eight in
 *       front.css and everything below either reuses one or uses a literal.
 *     - every `var()` carries front.css's own value as a fallback. The
 *       legacy /pb/ layout does NOT load front.css, so a bare `var(--text)`
 *       would resolve to nothing there — the same trap builder.css fell
 *       into with admin tokens, just pointing the other way.
 *     - no bare element selectors. Every rule is scoped inside `.cms-block`
 *       or a block modifier, because Classic WYSIWYG content shares this
 *       page and already carries `.cms-embed`, `.cms-callout` and
 *       `.cms-table-wrap` of its own. Nothing here may reach it.
 *     - exactly one `!important`, and it is explained where it lives.
 *
 *   ★ WHAT THIS FILE DELIBERATELY DOES NOT DO. Four blocks already carry
 *     their layout as inline style from the renderer — gallery's grid,
 *     two_column's column ratio, embed's ratio box, hero's alignment. Those
 *     are the renderer's to own. Restating them here would only start a
 *     specificity fight with markup that always wins.
 * ======================================================================== */

/* ---- rhythm --------------------------------------------------------------
 *   Between blocks only. A first or last block that carried its own outer
 *   margin would fight whatever container the theme puts it in. */
.cms-block + .cms-block { margin-top: 32px; }

/* ---- hero ---------------------------------------------------------------- */
.cms-block--hero .cms-block__title    { margin: 0 0 8px; font-size: 28px; line-height: 1.3; }
.cms-block--hero .cms-block__subtitle { margin: 0 0 16px; color: var(--text-mute, #6b7280); font-size: 16px; }
.cms-block--hero .cms-block__media    { margin: 0 0 16px; }
.cms-block--hero .cms-block__image    { display: block; max-width: 100%; height: auto; }

/* ---- rich text -----------------------------------------------------------
 *   Spacing only. The typography inside belongs to `.page__body` in
 *   front.css, which is the same contract the WYSIWYG output is written
 *   against — a second scale here would quietly compete with it. */
.cms-block__rt > :first-child { margin-top: 0; }
.cms-block__rt > :last-child  { margin-bottom: 0; }

/* ---- image --------------------------------------------------------------- */
.cms-block--image                     { margin: 0; }
.cms-block--image img                 { display: block; max-width: 100%; height: auto; }
.cms-block__caption                   { margin-top: 6px; color: var(--text-mute, #6b7280); font-size: 13px; }

/* ---- gallery -------------------------------------------------------------
 *   The grid, the thumbnails and their aspect ratio are inline on the
 *   markup. `1fr` tracks shrink, so the three-column default stays inside a
 *   390px phone on its own; nothing is needed here and nothing is added.
 *   `data-pb-gallery` is left untouched for the lightbox that BACKLOG-3 will
 *   reconnect — the images are already reachable without it. */

/* ---- embed ---------------------------------------------------------------
 *   ★ THE ONE REAL COLLISION. The renderer builds its ratio box with
 *     `padding-top`, and front.css carries
 *         .cms-embed:not([style*="padding-bottom"]) { padding-bottom:56.25%; height:0 }
 *     as a fallback for WYSIWYG embeds stored before inline ratios existed.
 *     A page-builder embed has `padding-top` in its style attribute and no
 *     `padding-bottom`, so that :not() MATCHES and both paddings land — a
 *     112.5% tall black box instead of 16:9. It only appears on /page/,
 *     because /pb/ never loaded front.css.
 *
 *   ★ Specificity is a deliberate tie: `.cms-block--embed .cms-embed` and
 *     `.cms-embed:not([attr])` are both 0-2-0, so this wins on source order
 *     alone. That is exactly why the load order above is fixed, and why no
 *     `!important` is needed here. */
.cms-block--embed .cms-embed { padding-bottom: 0; height: auto; }

/* The renderer falls back to this callout when a source is not allow-listed.
   front.css names the amber variant `--warn`; the block emits `--warning`,
   so the mapping is made here rather than by renaming either side. Value is
   the one front.css already uses for a warning — there is no token for it. */
.cms-block .cms-callout--warning { border-left-color: #d97706; }

/* ---- form ----------------------------------------------------------------
 *   front.css has no form rules at all, so these are the baseline rather
 *   than an override. Only the controls the template actually emits: there
 *   is no error or success markup, so there is no error or success style. */
.cms-block--form .cms-block__title    { margin: 0 0 8px; font-size: 22px; }
.cms-block--form .cms-block__subtitle { margin: 0 0 16px; color: var(--text-mute, #6b7280); font-size: 14px; }

.cms-block .cms-form          { display: block; }
.cms-block .cms-field         { margin-bottom: 16px; }
.cms-block .cms-field__label  { display: block; margin-bottom: 6px; font-size: 14px; }
.cms-block .cms-field__hint   { margin-top: 6px; color: var(--text-mute, #6b7280); font-size: 13px; }

/* `width:100%` plus border-box is what keeps a control inside a phone. */
.cms-block .cms-input,
.cms-block .cms-textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--bg, #ffffff);
  color: var(--text, #1f2937);
  font: inherit;
}
.cms-block .cms-textarea { min-height: 120px; resize: vertical; }

.cms-block .cms-btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--surface, #f7f8fa);
  color: var(--text, #1f2937);
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.cms-block .cms-btn--primary {
  border-color: var(--accent, #1e6dde);
  background: var(--accent, #1e6dde);
  color: #fff;
}

/* Focus must be visible on its own, not by colour alone — the ring is a
   shape change, so it survives a theme that recolours everything. */
.cms-block .cms-input:focus-visible,
.cms-block .cms-textarea:focus-visible,
.cms-block .cms-btn:focus-visible {
  outline: 2px solid var(--accent, #1e6dde);
  outline-offset: 2px;
}

/* Captcha widgets draw their own UI. Only the gap around them is ours. */
.cms-block [data-pb-captcha] { margin-bottom: 16px; }

/* ---- board list ----------------------------------------------------------- */
.cms-block--board_list .cms-block__title { margin: 0 0 12px; font-size: 22px; }
.cms-block__post-list                    { list-style: none; margin: 0; padding: 0; }
.cms-block__post-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cms-block__post-list li:last-child { border-bottom: 0; }
/* The title link takes the leftover room so a long headline wraps instead of
   pushing the date off the row. `min-width:0` is what allows it to shrink. */
.cms-block__post-list a { flex: 1 1 auto; min-width: 0; color: var(--text, #1f2937); }
.cms-block__post-list img { flex: 0 0 auto; }
.cms-block .cms-text-muted { color: var(--text-mute, #6b7280); font-size: 13px; }
.cms-block .cms-empty      { padding: 24px 0; color: var(--text-mute, #6b7280); text-align: center; }

/* ---- two column ----------------------------------------------------------
 *   The desktop ratio is inline on the section (the renderer writes
 *   `grid-template-columns: 60% 40%` and so on), so it is not restated here.
 *   `min-width:0` is: a grid item defaults to `min-width:auto`, which lets a
 *   wide table or an unbroken URL push the column past its track. */
.cms-block__col { min-width: 0; }

@media (max-width: 640px) {
  /* ★ THE ONLY `!important` IN THIS FILE, and it cannot be avoided.
   *
   *   The column ratio arrives as an inline style attribute, and an inline
   *   declaration outranks every selector a stylesheet can write — only
   *   `!important` reaches it. Without this the two columns stay side by
   *   side on a phone at their desktop percentages.
   *
   *   The alternative was to change two_column.php to emit a custom property
   *   instead; that was weighed in P2-F2 and declined (DECISION-F2-A) to
   *   keep the renderer out of a CSS-only change.
   *
   *   Scope of the exception: this property, this selector, this media
   *   query. Anything else in this file using `!important` is a defect. */
  .cms-block--two_column { grid-template-columns: 1fr !important; }
}