/* =================================================================
   TEAM
   Our Team page: Loop Grid CTA gate.
   Loaded by inc/enqueue.php (order matters: see the list there).
   ================================================================= */

/* ---------------------------------------------------------------
   Team CTA — #team-cta is authored as a normal container after the
   team Loop Grid, then moved into the grid as its last cell by
   assets/js/loop-grid-cta.js, which spans the remaining columns and
   matches the card's box to the attorneys' square image tiles.

   Hidden until placed so it never flashes below the grid. The hide
   is gated on html.ipgcta-js (added pre-paint by inc/gates.php): if the
   script bails, errors, or never runs, the gate is lifted and the
   CTA simply shows in its authored spot — never stuck hidden.
   On mobile (<= 767px) the script stands down entirely: the grid is
   one column so the authored spot IS the last cell. Visual styling
   of the card itself lives in Elementor.
--------------------------------------------------------------- */
.ipgcta-js #team-cta {
    display: none;
}
.ipgcta-js #team-cta.team-cta--placed {
    display: flex;
}

/* ---------------------------------------------------------------
   Contact boxes — the phone / email / LinkedIn Icon Boxes on team
   profiles. Put [ipg_staff_contact …] in the Icon Box TITLE or
   DESCRIPTION as its only text, leave the widget's own Link empty,
   then EITHER add the class contact-box to each Icon Box OR add
   contact-boxes once to the container that holds them all.
   See inc/shortcodes.php for the shortcode.

   - Dynamic: when the ACF field is empty the shortcode outputs
     nothing, Elementor then omits the whole .elementor-icon-box-content
     wrapper, and a box with no content is hidden — icon included.
     No mobile, no box; no LinkedIn, no box.
   - The whole box is clickable: the link's ::after is stretched over
     the widget (the "stretched link" pattern).
   - Phone boxes reveal the number on hover / focus: label and number
     are stacked in the same grid cell and cross-fade, so nothing
     reflows. On touch (no hover) the label stays and a tap just dials.
--------------------------------------------------------------- */
:is(.contact-box, .contact-boxes .elementor-widget-icon-box) {
    position: relative;
}
:is(.contact-box, .contact-boxes .elementor-widget-icon-box):not(:has(.elementor-icon-box-content)) {
    display: none;
}
:is(.contact-box, .contact-boxes .elementor-widget-icon-box) .ipg-contact::after {
    content: "";
    position: absolute;
    inset: 0;
}
.ipg-contact {
    color: inherit;
    text-decoration: none;
}

/* hover-to-reveal (phone). The box is only ever as wide as what's
   showing: label and number sit side by side, each in its own
   single-column grid, and the columns animate 1fr <-> 0fr (the inner
   span has min-width:0 so it can collapse). A column at 0.5fr is
   exactly half its content width, so the total glides from the
   label's width to the number's width with no bulge and no reserved
   space. Set the Icon Box's Width to "Inline (auto)" in Elementor so
   the widget itself follows. */
.ipg-contact--reveal {
    display: inline-flex;
    vertical-align: top;
}
.ipg-contact--reveal > span {
    display: grid;
    grid-template-columns: 1fr;
    white-space: nowrap;
    transition: grid-template-columns 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease;
}
.ipg-contact--reveal > span > span {
    min-width: 0;
    overflow: hidden;
}
.ipg-contact--reveal .ipg-contact-value {
    grid-template-columns: 0fr;
    opacity: 0;
}
@media (hover: hover) {
    :is(.contact-box, .contact-boxes .elementor-widget-icon-box):is(:hover, :focus-within) .ipg-contact--reveal .ipg-contact-label {
        grid-template-columns: 0fr;
        opacity: 0;
    }
    :is(.contact-box, .contact-boxes .elementor-widget-icon-box):is(:hover, :focus-within) .ipg-contact--reveal .ipg-contact-value {
        grid-template-columns: 1fr;
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ipg-contact--reveal > span { transition: opacity 0.2s ease; }
}