.brand-typo--primary,
.brand-typo--secondary {
  display: grid;
  gap: var(--wp--custom--space-xxl);
}

.brand-typo--font--primary {
  font-size: clamp(1.1rem, 4vw, 3rem);
  text-transform: none;
  font-weight: 400;
  font-style: normal;
}

.brand-typo--weights--primary,
.brand-typo--weights--secondary {
  display: grid;
  gap: var(--wp--custom--space-sm);
}

@media (min-width: 1200px) {
  .brand-typo--weights--primary,
  .brand-typo--weights--secondary {
    grid-template-columns: 12rem auto;
  }

  /* The big text sample sits on its own full row above the
     label/slider row instead of sharing the 12rem label column. */
  .brand-typo--weights__testarea {
    grid-column: 1 / -1;
  }
}

.brand-typo--weights__slider {
  display: flex;
  align-items: center;
  gap: var(--wp--custom--space-sm);
}

.brand-typo--weights__slider-input {
  --track-height: 6px;
  --thumb-size: 16px;
  --track-color: var(--wp--preset--color--grey-100);
  --track-color-active: #1a1a1a;
  --thumb-color: var(--wp--preset--color--grey-100);

  appearance: none;
  -webkit-appearance: none;
  width: 50%;
  height: var(--thumb-size);
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.brand-typo--weights__slider-input::-webkit-slider-runnable-track {
  height: var(--track-height);
  background: var(--track-color);
  border-radius: calc(var(--track-height) / 2);
}

.brand-typo--weights__slider-input::-moz-range-track {
  height: var(--track-height);
  background: var(--track-color);
  border-radius: calc(var(--track-height) / 2);
}

.brand-typo--weights__slider-input {
  border-radius: calc(var(--track-height) / 2);
  padding: 0;
}

.brand-typo--weights__slider-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  background: var(--thumb-color);
  border: 3px solid var(--wp--preset--color--grey-900);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
  transition: transform 0.15s ease;
}

.brand-typo--weights__slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.brand-typo--weights__slider-input::-webkit-slider-thumb:active {
  transform: scale(1.05);
}

.brand-typo--weights__slider-input::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  background: var(--thumb-color);
  border: 3px solid var(--wp--preset--color--grey-900);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}

.brand-typo--weights__slider-input::-moz-range-thumb:hover {
  transform: scale(1.15);
}

.brand-typo--weights__slider-input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--thumb-color);
  outline-offset: 2px;
}

.brand-typo--weights__slider-input:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--thumb-color);
  outline-offset: 2px;
}

input.brand-typo--weights__slider-input:focus,
input.brand-typo--weights__slider-input:focus-visible {
  outline: none;
  border: none;
}

.brand-typo--font--alternative {
  font-size: clamp(1.1rem, 4vw, 3rem);
  text-transform: none;
  font-weight: 400;
  font-style: normal;
}

.brand-typo--hierarchy {
  display: grid;
  gap: var(--wp--custom--space-md);
}

.brand-typo--hierarchy .item {
  display: grid;
  gap: var(--wp--custom--space-sm);
}

@media (min-width: 1200px) {
  .brand-typo--hierarchy .item {
    grid-template-columns: 12rem auto;
  }
}

.brand-typo--hierarchy .label {
  font-weight: bold;
}

/**
 * custom/typography-secondary (section wrapper around heading, paragraphs
 * and the custom/typography-secondary-specimen child block). Reproduces
 * the previous page-level 33% / 66% columns layout via CSS grid instead,
 * now that the heading/text live inside the block itself.
 */
/*
 * On the frontend, InnerBlocks.Content renders the heading/paragraphs/
 * specimen as DIRECT children of .wp-block-custom-typography-secondary.
 * Inside wp-admin, the SAME wrapper class is present, but it wraps the
 * editor's own ".block-editor-inner-blocks > .block-editor-block-list__layout"
 * structure instead - the actual heading/paragraphs/specimen sit two
 * levels deeper there, not as direct children of the wrapper. So this is
 * two separate rules, not one shared selector: applying "display: grid"
 * to the bare wrapper class unconditionally also matched it in the
 * editor, where its only child is ".block-editor-inner-blocks" - that
 * div became a (pointless, single-item) grid column instead of the real
 * heading/paragraphs/specimen, squeezing the whole editor preview into
 * the first column and leaving the second empty.
 */

/* Frontend only - :not() keeps this from also matching in wp-admin, where
   ".block-editor-block-list__block" is always present on the same wrapper. */
.wp-block-custom-typography-secondary:not(.block-editor-block-list__block) {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto auto;
  align-items: start;
  column-gap: var(--wp--custom--gutter-x);
  margin-top: var(--wp--custom--gutter-y);
}

/* Editor only. !important: WP core adds its own "is-layout-flow" class to
   this same ".block-editor-block-list__layout" element (for the default
   InnerBlocks flow layout) and its own stylesheet sets that class's
   "display" - loaded after ours, so it silently won the cascade even
   though our selector is more specific (the paragraph margin-block:0 rule
   two levels deeper already proved the selector itself matches
   correctly; only "display" was being fought over). */
.wp-block-custom-typography-secondary > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  /* Explicit rows (heading, paragraph 1, paragraph 2) - required for the
     specimen's "grid-row: 2 / -1" below to resolve correctly. Without a
     declared grid-template-rows, "-1" only refers to the last line of the
     (empty) explicit row grid, not to the auto-generated rows the content
     actually creates - the specimen wouldn't reliably span both paragraph
     rows next to them. */
  grid-template-rows: auto auto auto;
  align-items: start;
  column-gap: var(--wp--custom--gutter-x);
}

/* :where() keeps this default at zero specificity. Written as plain
   selectors, the editor variant below (three real classes: the wrapper,
   .block-editor-inner-blocks and .block-editor-block-list__layout) was
   MORE specific than the ".wp-block-...-specimen" rule further down (only
   two classes) - so in the editor specifically, "grid-column: 1" from here
   always won over that rule's "grid-column: 2", no matter the source
   order. The specimen was stuck in column 1, stacked under the heading/
   paragraphs instead of sitting beside them - this is why the grid still
   looked wrong in wp-admin even after the display:grid fix. */
:where(.wp-block-custom-typography-secondary > *, .wp-block-custom-typography-secondary > .block-editor-inner-blocks > .block-editor-block-list__layout > *) {
  grid-column: 1;
}

/* Grid items don't collapse margins with each other the way normal-flow
   elements do, so the paragraphs' own default top/bottom margin was
   stacking on top of row-gap between them - hence the still-too-big gap
   even after row-gap was reduced. row-gap alone now controls the
   spacing between the two paragraphs. */
.wp-block-custom-typography-secondary > .wp-block-paragraph,
.wp-block-custom-typography-secondary > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-paragraph {
  margin-block: 0;
}

/* Heading spans the full row instead of sharing the narrow text column. */
.wp-block-custom-typography-secondary > .wp-block-heading,
.wp-block-custom-typography-secondary > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-heading {
  grid-column: 1 / -1;
}

.wp-block-custom-typography-secondary .wp-block-custom-typography-secondary-specimen {
  grid-column: 2;
  grid-row: 2 / -1;
}

@media (max-width: 781px) {
  .wp-block-custom-typography-secondary,
  .wp-block-custom-typography-secondary > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: 1fr;
  }

  .wp-block-custom-typography-secondary > .wp-block-heading,
  .wp-block-custom-typography-secondary > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-heading {
    grid-column: 1;
  }

  .wp-block-custom-typography-secondary .wp-block-custom-typography-secondary-specimen {
    grid-column: 1;
    grid-row: auto;
  }
}