/**
 * @file
 * Round Icon Button atom (Phase 6.2)
 *
 * Reusable circular icon-button atom; CSS-only with JS class bindings.
 * Replaces duplicated round-button CSS that previously lived in two
 * component files (verbatim):
 *   - css/components/section-navigator.css → .section-navigator-next-tab
 *   - css/components/masonry-grid.css      → .masonry-item-expand-arrow,
 *                                             .masonry-drawer-close
 *
 * Class binding sites (emitted by JS or written into Twig):
 *   .section-navigator-next-tab .dck-round-icon-button --size-lg
 *                                                      --glyph-chevron-right
 *                                                      --corner-merge-br
 *   .masonry-item-expand-arrow  .dck-round-icon-button --size-md
 *                                                      --glyph-chevron-down
 *   .masonry-drawer-close       .dck-round-icon-button --size-lg
 *                                                      --glyph-x
 *                                                      --corner-merge-br
 *
 * Modifiers (compose by adding classes):
 *   Size:     --size-md  (36px / 3.5px stroke / 10px glyph / 8px corner)
 *             --size-lg  (44px / 4px   stroke / 12px glyph / 12px corner)  ← default
 *   Glyph:    --glyph-chevron-right
 *             --glyph-chevron-down
 *             --glyph-x
 *   Corner:   --corner-merge-br  (asymmetric border-bottom-right-radius override
 *                                 so the button can sit flush in a card corner)
 *   Gradient: --gradient-{name}  one of 13 §11 icon_button_gradients tokens.
 *                                Default (no modifier) = himmel-kornblume.
 *
 * Token-only constraint (Phase 6.2):
 *   Every consumed CSS property reads through var(--…). Atom-internal
 *   size / stroke / glyph primitives live on the .dck-round-icon-button
 *   root as --rib-* custom properties; the 13 gradient defaults are pulled
 *   from §11 (--icon-btn-gradient-*); hover/active scale and transition
 *   easing are reused from §8 buttons (--btn-scale-hover, --btn-scale-active,
 *   --btn-transition). Per-instance overrides are achieved by setting
 *   --rib-* vars on a wrapping selector in the consumer's CSS (e.g.
 *   section-navigator's mobile shrink keeps living in section-navigator.css).
 */

.dck-round-icon-button {
    /* Atom-internal size primitives — atom owns these layout decisions. */
    --rib-size-md: 36px;
    --rib-size-lg: 44px;
    --rib-stroke-md: 3.5px;
    --rib-stroke-lg: 4px;
    --rib-glyph-size-md: 10px;
    --rib-glyph-size-lg: 12px;
    --rib-corner-merge-radius-md: 8px;
    --rib-corner-merge-radius-lg: 12px;
    --rib-glyph-corner-radius: 2px;
    --rib-x-glyph-width-scale: 1.5;

    /* Resolved primitives (default = --size-lg). Overridden by size modifiers. */
    --rib-size: var(--rib-size-lg);
    --rib-stroke: var(--rib-stroke-lg);
    --rib-glyph-size: var(--rib-glyph-size-lg);
    --rib-corner-merge-radius: var(--rib-corner-merge-radius-lg);

    /* Background — overridable via --gradient-{name} modifiers. */
    --rib-bg: var(--icon-btn-gradient-himmel-kornblume);
    --rib-glyph-color: var(--color-surface-base);

    /* Transition — reuses §8 button easing (transform only; consumers layer
       their own opacity transitions on the wrapping selector if needed). */
    --rib-transition: var(--btn-transition);

    width: var(--rib-size);
    height: var(--rib-size);
    border-radius: var(--radius-full);
    background: var(--rib-bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: var(--rib-transition);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /*
     * Position-agnostic by design: the atom does NOT declare position on the
     * base selector — every consumer (section-navigator, masonry-grid …)
     * places the button in its own layout context. The only exception is the
     * --glyph-x modifier, which needs `position: relative` so its absolutely-
     * positioned ::before/::after strokes have a positioning context (see
     * the --glyph-x modifier block below). That `position: relative` is
     * safely supplanted by any consumer-side `position: absolute`, since
     * `position: absolute` also creates a positioning context for descendants.
     */
}

/* ============================================================================
   SIZE MODIFIERS
   ============================================================================ */

.dck-round-icon-button--size-md {
    --rib-size: var(--rib-size-md);
    --rib-stroke: var(--rib-stroke-md);
    --rib-glyph-size: var(--rib-glyph-size-md);
    --rib-corner-merge-radius: var(--rib-corner-merge-radius-md);
}

.dck-round-icon-button--size-lg {
    --rib-size: var(--rib-size-lg);
    --rib-stroke: var(--rib-stroke-lg);
    --rib-glyph-size: var(--rib-glyph-size-lg);
    --rib-corner-merge-radius: var(--rib-corner-merge-radius-lg);
}

/* ============================================================================
   CORNER-MERGE MODIFIER (asymmetric bottom-right radius)
   ============================================================================ */

.dck-round-icon-button--corner-merge-br {
    border-bottom-right-radius: var(--rib-corner-merge-radius);
}

/* ============================================================================
   GLYPH MODIFIERS (rendered via ::before / ::after — no SVG)

   Geometry rule (preserved verbatim from legacy CSS):
     chevron-right  → border-right + border-top, rotate(45deg),
                      margin-left = -1 * stroke (centring trim)
     chevron-down   → border-right + border-bottom, rotate(45deg),
                      margin-top  = -1 * stroke (centring trim, but capped
                      at -3px on mobile in section-navigator legacy — that
                      0.5px delta is below visual threshold and intentional)
     x              → two crossed strokes (::before rotated 45deg,
                      ::after rotated -45deg), absolutely positioned
                      inside the button so they overlap at centre
   ============================================================================ */

.dck-round-icon-button--glyph-chevron-right::before {
    content: '';
    width: var(--rib-glyph-size);
    height: var(--rib-glyph-size);
    border-right: var(--rib-stroke) solid var(--rib-glyph-color);
    border-top: var(--rib-stroke) solid var(--rib-glyph-color);
    border-radius: var(--rib-glyph-corner-radius);
    transform: rotate(45deg);
    margin-left: calc(var(--rib-stroke) * -1);
}

.dck-round-icon-button--glyph-chevron-down::before {
    content: '';
    width: var(--rib-glyph-size);
    height: var(--rib-glyph-size);
    border-right: var(--rib-stroke) solid var(--rib-glyph-color);
    border-bottom: var(--rib-stroke) solid var(--rib-glyph-color);
    border-radius: var(--rib-glyph-corner-radius);
    transform: rotate(45deg);
    margin-top: calc(var(--rib-stroke) * -1);
}

.dck-round-icon-button--glyph-x {
    /*
     * X glyph uses two absolutely-positioned strokes (::before / ::after).
     * The atom needs a positioning context for them — this is the ONLY
     * positioning declaration anywhere in the atom and it is intentionally
     * scoped to the X-glyph modifier so the base selector remains position-
     * agnostic. Consumers that also set `position: absolute` on the button
     * (e.g. .masonry-drawer-close) override this harmlessly; absolute
     * positioning likewise establishes a positioning context for descendants.
     */
    position: relative;
}

.dck-round-icon-button--glyph-x::before,
.dck-round-icon-button--glyph-x::after {
    content: '';
    position: absolute;
    width: calc(var(--rib-glyph-size) * var(--rib-x-glyph-width-scale));
    height: 0;
    border-top: var(--rib-stroke) solid var(--rib-glyph-color);
    border-radius: var(--rib-glyph-corner-radius);
}

.dck-round-icon-button--glyph-x::before {
    transform: rotate(45deg);
}

.dck-round-icon-button--glyph-x::after {
    transform: rotate(-45deg);
}

/* ============================================================================
   INTERACTIVE STATES — reuse §8 button scale + transition tokens
   ============================================================================ */

.dck-round-icon-button:hover {
    transform: scale(var(--btn-scale-hover));
}

.dck-round-icon-button:active {
    transform: scale(var(--btn-scale-active));
    outline: none;
    box-shadow: none;
}

.dck-round-icon-button:focus,
.dck-round-icon-button:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ============================================================================
   GRADIENT VARIANT MODIFIERS (13 — pulled from §11 icon_button_gradients)
   ============================================================================ */

.dck-round-icon-button--gradient-himmel-kornblume {
    --rib-bg: var(--icon-btn-gradient-himmel-kornblume);
}

.dck-round-icon-button--gradient-smaragd-aquamarin {
    --rib-bg: var(--icon-btn-gradient-smaragd-aquamarin);
}

.dck-round-icon-button--gradient-smaragd-erde {
    --rib-bg: var(--icon-btn-gradient-smaragd-erde);
}

.dck-round-icon-button--gradient-meer-smaragd {
    --rib-bg: var(--icon-btn-gradient-meer-smaragd);
}

.dck-round-icon-button--gradient-meer-rubin {
    --rib-bg: var(--icon-btn-gradient-meer-rubin);
}

.dck-round-icon-button--gradient-himmel-erde {
    --rib-bg: var(--icon-btn-gradient-himmel-erde);
}

.dck-round-icon-button--gradient-himmel-rubin {
    --rib-bg: var(--icon-btn-gradient-himmel-rubin);
}

.dck-round-icon-button--gradient-flieder-preussen {
    --rib-bg: var(--icon-btn-gradient-flieder-preussen);
}

.dck-round-icon-button--gradient-flieder-rubin {
    --rib-bg: var(--icon-btn-gradient-flieder-rubin);
}

.dck-round-icon-button--gradient-heide-smaragd {
    --rib-bg: var(--icon-btn-gradient-heide-smaragd);
}

.dck-round-icon-button--gradient-aprikose-smaragd {
    --rib-bg: var(--icon-btn-gradient-aprikose-smaragd);
}

.dck-round-icon-button--gradient-licht-zinnober {
    --rib-bg: var(--icon-btn-gradient-licht-zinnober);
}

.dck-round-icon-button--gradient-amethyst-erde {
    --rib-bg: var(--icon-btn-gradient-amethyst-erde);
}

.dck-round-icon-button--gradient-preussen-aquamarin {
    --rib-bg: var(--icon-btn-gradient-preussen-aquamarin);
}