/* ==========================================================================
   GR Appartements — single-immeuble.css  (mobile first)

   Styles for shortcodes used on single immeuble / appartement pages —
   [gr_immeuble_promo_tag], [gr_immeuble_certification_tag],
   [gr_appartement_taxonomy] (all styles) — as opposed to search.css, which
   is for the search/listing grid (V1 grid + V2 Loop Grid/filters/map).

   Split out because these shortcodes render on single post pages, not the
   search listing — a different context that deserved its own file instead
   of continuing to grow inside search.css. Enqueued directly by the
   shortcodes themselves (see gr_immeuble_tags_enqueue_styles() in
   class-immeuble-tags.php), not tied to is_singular('immeuble') — these
   shortcodes also work on post_type="appartement".
   ========================================================================== */

/* ── Tags promotion / certification ([gr_immeuble_promo_tag] /
   [gr_immeuble_certification_tag]) — image only ─────────────────────────── */
.gr-immeuble-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 4px 0;
}

.gr-immeuble-tag {
    display: inline-block;
    line-height: 0;
}

.gr-immeuble-tag__image {
    display: block;
    width: 75px;
    height: 75px;
}

/* ── Tags immeuble ([gr_appartement_taxonomy] style="pill") — text pills ── */
.gr-immeuble-tag-pill {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    font-size: 0.875rem;
    border-radius: 2px;
}

.gr-immeuble-tag-pill--noir {
    background: #1a1a1a;
    color: #fff;
}

.gr-immeuble-tag-pill--beige {
    background: #EADCBC;
    color: #1a1a1a;
}

/* ── [gr_appartement_taxonomy ... style="image"] — term icon inside the
   Elementor icon-list icon slot. Either an inlined SVG (fill:currentColor
   authored in the file itself picks up the surrounding text color) or a
   plain <img> fallback for non-SVG term images — sized the same either way
   via this wrapper span rather than targeting <img>/<svg> directly. ────── */
.gr-appartement-taxonomy-icon {
    display: block;
    width: 20px;
    height: 20px;
    color: inherit;
}

.gr-appartement-taxonomy-icon svg,
.gr-appartement-taxonomy-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Elementor's own global icon-list CSS sets fill directly on
   `.elementor-icon-list-icon svg` (e.g. fill: var(--e-global-color-primary))
   — that external stylesheet rule overrides a bare fill="currentColor"
   attribute written inside the SVG file itself (a presentation attribute
   always loses to any stylesheet rule, regardless of which loads last).
   Forcing it back to currentColor here so the icon actually follows the
   surrounding text color. Also covers every shape inside the SVG in case
   fill was set per-path rather than on the root <svg> — including via an
   internal <style> block with its own class (e.g. some exported SVGs ship
   <defs><style>.b{fill:#646464;}</style></defs> and class="b" on each
   <path>) — !important beats that regardless of specificity as long as
   that internal rule isn't ALSO !important. */
.elementor-icon-list-icon .gr-appartement-taxonomy-icon svg,
.elementor-icon-list-icon .gr-appartement-taxonomy-icon svg * {
    fill: currentColor !important;
}