/**
 * RackTrack Page Builder — Blocks.
 * @package RackTrack
 * @updated 1.37.11
 *
 * Two concerns in one file:
 *  1. FRONT-END block output (.rt-block-*) — minimal, since most styling is
 *     inline per-instance from the block settings.
 *  2. ADMIN panel controls (.rt-block-group, .rt-block-quad, .rt-block-rte) —
 *     styling for the settings panel groups + the rich-text toolbar. These are
 *     harmless on the front end (selectors never match there).
 */

/* ---------------------------------------------------------------------- *
 *  Front-end block output
 * ---------------------------------------------------------------------- */
.rt-block { box-sizing: border-box; }
.rt-block-spacer { width: 100%; }
.rt-block-divider hr { border: 0; margin: 0; }
.rt-block-image-fig { display: block; }
.rt-block-image-cap { font-size: 0.85em; opacity: 0.75; margin-top: 6px; }
.rt-block-image-empty,
.rt-block-html-empty {
    padding: 24px; text-align: center; color: #888;
    border: 1px dashed #cbd2dc; border-radius: 6px; background: #f7f8fa;
}
.rt-block-text-el > *:first-child { margin-top: 0; }
.rt-block-text-el > *:last-child { margin-bottom: 0; }
.rt-block-button-el { line-height: 1.2; }

/* ---------------------------------------------------------------------- *
 *  Admin: collapsible control groups
 * ---------------------------------------------------------------------- */
.rt-block-group {
    border: 1px solid #dcdfe4; border-radius: 5px; margin: 10px 0; background: #fff;
}
.rt-block-group > summary {
    cursor: pointer; padding: 8px 10px; font-weight: 600; font-size: 12px;
    list-style: revert; user-select: none;
}
.rt-block-group[open] > summary { border-bottom: 1px solid #eef0f3; }
.rt-block-group-body { padding: 6px 10px 2px; }
.rt-block-group-body p { margin: 8px 0; }

/* Padding/margin quad inputs */
.rt-block-grid-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin: 8px 0 4px; }
.rt-block-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.rt-block-quad label {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10px; color: #6b7280;
}
.rt-block-quad input { width: 100%; text-align: center; padding: 3px; }

/* ---------------------------------------------------------------------- *
 *  Admin: lightweight rich-text control
 * ---------------------------------------------------------------------- */
.rt-block-rte { border: 1px solid #dcdfe4; border-radius: 5px; overflow: hidden; margin-bottom: 10px; }
.rt-block-rte-toolbar {
    display: flex; flex-wrap: wrap; gap: 3px; padding: 5px; background: #f4f5f7;
    border-bottom: 1px solid #e3e6ea;
}
.rt-block-rte-toolbar .button {
    min-width: 28px; height: 26px; line-height: 24px; padding: 0 7px; font-size: 12px;
}
.rt-block-rte-editable {
    min-height: 90px; max-height: 320px; overflow-y: auto; padding: 10px 12px;
    font-size: 13px; line-height: 1.5; background: #fff; outline: none;
}
.rt-block-rte-editable:focus { box-shadow: inset 0 0 0 2px #b7c4f0; }
.rt-block-rte-editable p:first-child { margin-top: 0; }
.rt-block-rte-editable a { color: #2f6fed; }

/* Media picker preview inside the panel */
.rt-block-media-preview { border: 1px solid #e3e6ea; border-radius: 4px; }

/* ---------------------------------------------------------------------- *
 *  Phase 2 front-end
 * ---------------------------------------------------------------------- */
.rt-block-list-el { display: inline-block; text-align: left; }
.rt-block-list-el li:last-child { margin-bottom: 0 !important; }
.rt-block-quote-el { display: block; }
.rt-block-list-empty,
.rt-block-video-empty {
    padding: 24px; text-align: center; color: #888;
    border: 1px dashed #cbd2dc; border-radius: 6px; background: #f7f8fa;
}
.rt-block-video-frame { width: 100%; }
.rt-block-video-share {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;
}
.rt-block-video-share-label { font-size: 0.9em; opacity: 0.8; margin-right: 2px; }
.rt-block-video-share-btn {
    display: inline-block; font: inherit; font-size: 0.85em; line-height: 1;
    padding: 7px 12px; border-radius: 5px; border: 1px solid #d0d5dd;
    background: #f3f5f8; color: #1a1f2b; text-decoration: none; cursor: pointer;
}
.rt-block-video-share-btn:hover { background: #e7ebf1; }

/* ---------------------------------------------------------------------- *
 *  Phase 2 admin: repeater rows (List items)
 * ---------------------------------------------------------------------- */
.rt-block-repeater { margin: 8px 0; }
.rt-block-repeater-row {
    display: flex; align-items: center; gap: 4px; margin-bottom: 5px;
}
.rt-block-repeater-handle { cursor: default; color: #9aa2b1; font-size: 13px; padding: 0 2px; }
.rt-block-repeater-input { flex: 1; }
.rt-block-repeater-row .button {
    min-width: 28px; height: 28px; line-height: 26px; padding: 0 6px; text-align: center;
}
.rt-block-repeater-add { margin-top: 4px; }

/* ---------------------------------------------------------------------- *
 *  Phase 3 front-end
 * ---------------------------------------------------------------------- */
.rt-block-details-el summary { outline: none; }
.rt-block-details-el summary::-webkit-details-marker { color: inherit; }
.rt-block-icon-el { display: inline-flex; align-items: center; justify-content: center; }
.rt-block-table-el { font-variant-numeric: tabular-nums; }
.rt-block-mt-text > *:first-child { margin-top: 0; }
.rt-block-mt-text > *:last-child { margin-bottom: 0; }
.rt-block-social-link { transition: opacity .15s, transform .15s; }
.rt-block-social-link:hover { opacity: 0.85; transform: translateY(-1px); }