/**
 * GNH Portal Dashboard - landing card uniformity
 *
 * Added 2026-08-10. Fixes the Portal Dashboard's (Elementor page ID 1216)
 * landing cards (ISRS Referrals, ISRS Case Notes, My ISRS Tasks, Housing
 * Referrals, Housing Case Notes, Housing Admin Notes, My Housing Tasks,
 * Temp Lodging, etc.) rendering at inconsistent heights/padding next to
 * each other. Root cause (confirmed via a screen recording Teffany sent,
 * reviewed frame-by-frame): the installed Elementor version has no
 * "Stretch" option under a Column's Vertical Align setting, so Columns
 * placed side-by-side in the same Inner Section never natively match
 * height to their tallest sibling - each card's box just shrinks to fit
 * its own content.
 *
 * Fix: rather than fight Elementor's layout system, every dashboard card's
 * Column widget gets a shared "gnh-dash-card" CSS Class (typed into that
 * Column's Advanced tab > CSS Classes field in the Elementor editor - not
 * a code change, Teffany does this by hand per card), and this one rule
 * set gives every card carrying that class the same min-height/padding/
 * spacing regardless of how much text is inside it.
 *
 * TEST PHASE (2026-08-10, ISRS Referrals only) confirmed the height/padding
 * fix looked right. Widened same day, per Teffany's mobile screenshots, to
 * also force full width: on mobile some cards were still rendering at an
 * inconsistent, narrower-than-others width because their Elementor Column
 * kept an explicit desktop width % that didn't collapse to full-width on
 * the mobile breakpoint. width:100% below overrides that regardless of
 * whatever % a given column happens to have set. This rule is harmless on
 * every other page/element since nothing else on the site uses
 * .gnh-dash-card.
 */

/* Added 2026-08-10 (v1.7.33) - confirmed via live DevTools inspection that
 * ISRS Referrals and ISRS Case Notes are 50/50 flex siblings in the SAME
 * elementor-container, not separate rows. Forcing width:100% on each while
 * their shared parent stayed flex-wrap:nowrap meant both cards were fighting
 * over the same horizontal space and getting unevenly flex-shrunk based on
 * their own content length - explains the inconsistent edges. This targets
 * the parent container directly (scoped via :has() so it only affects rows
 * that actually contain a .gnh-dash-card, nothing else on the site) so it
 * wraps properly, and uses the full "flex" shorthand (grow/shrink/basis at
 * once) on the card itself instead of flex-basis alone, so nothing can
 * silently override just one piece of it.
 */
.elementor-container:has(> .gnh-dash-card) {
    flex-wrap: wrap !important;
}

.gnh-dash-card {
    min-height: 260px;
    flex: 0 0 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 24px !important;
    margin-bottom: 20px;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
}

/* Added 2026-08-10 - belt-and-suspenders pass after Teffany's red-border
 * test proved two sibling dashboard cards can still render at inconsistent
 * widths within the SAME shared parent, even with every property above
 * forced on the outer .gnh-dash-card column. Covers the two remaining
 * places width could still be getting silently constrained: the immediate
 * .elementor-widget-wrap child (Elementor sometimes renders the actual
 * visible white card background/border on this inner wrapper, not the
 * outer column, so forcing only the outer box isn't always enough), and
 * that wrapper's own direct children.
 */
.gnh-dash-card > .elementor-widget-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
}