/**
 * JG site-wide utility styles for custom CSS classes used inside Elementor.
 * Loaded on every frontend page via jgb-widgets.php.
 */

/* === Design tokens ============================================================
 * --jg-radius: site-wide rounded-corner radius. Referenced from JG widget PHP
 * files, FluentSnippets, and the kit. Adjust this single value to retune the
 * roundness of cards, info boxes, images, buttons, form fields, dropdowns,
 * the calendar container, etc. Exclusions: the header menu icon-squares
 * (they have their own control), pill shapes (999px), and circles (50%).
 * Range: ~10px on phones, ~14–16px on desktop, ~18px on 4K.
 * ============================================================================ */
:root {
    --jg-radius: clamp(10px, 0.85vw, 18px);
}

/* === .jg-info-box ============================================================
 * Pattern: an Elementor container with 3 column-sub-containers (icon + text).
 *
 * Goal on mobile:
 *   - Keep 3 columns when every column's natural text fits on one line.
 *   - If a column's natural text doesn't fit, drop that column to its own row
 *     (full width) instead of either (a) squeezing the column and overflowing
 *     or (b) breaking words mid-character.
 *
 * Implementation:
 *   - Override the site-level `min-width: 0 !important` on the column with
 *     `min-width: max-content`. Each column is now at least as wide as its
 *     longest unbroken line (e.g. "Oranienburger Straße 28"). When all three
 *     columns' min-widths can't fit on one row, the existing `flex-wrap: wrap`
 *     on the parent pushes the offending column to a new row, where it has
 *     the full container width available.
 *   - Override the existing `overflow-wrap: anywhere` with `normal`. With the
 *     min-width rule above, columns are always wide enough for their words,
 *     so mid-word breaks are never needed. If a future content ever has a
 *     single token wider than the viewport, it'll overflow horizontally —
 *     a deliberate signal to fix the content, not a silent ugly break.
 *   - `text-wrap: auto` overrides any inherited nowrap so soft wrapping at
 *     spaces works normally.
 *
 * Selector specificity:
 *   The existing rule uses `.jg-info-box > .e-con` (2 classes). Adding `.e-con`
 *   to `.jg-info-box` here makes the selector 3 classes — wins the specificity
 *   tie inside the !important tier.
 * ============================================================================ */
@media (max-width: 767px) {
    .jg-info-box.e-con > .e-con,
    .jg-info-box.e-con > .e-con-inner > .e-con {
        min-width: max-content !important;
    }
    .jg-info-box.e-con .elementor-widget-text-editor,
    .jg-info-box.e-con .elementor-widget-text-editor * {
        text-wrap: auto;
        overflow-wrap: normal !important;
    }
}