/* Classes for what used to be inline style="" attributes in _single-news-event.cshtml.
       Values that the theme already has a utility class for (bg-white, text-white, w-full,
       mx-0, border-left-0) were switched to those directly in the view instead of duplicated
       here -- these are only the ones with no existing match. */
    .gutter-x-0 { --lqd-row-gutter-x: 0px; }
    .break-word-custom { word-wrap: break-word; overflow-wrap: break-word; }
    .border-y-custom-color-light { border-top: 1px solid #bfd9f7; border-bottom: 1px solid #bfd9f7; }
    .border-b-custom-color-light { border-bottom: 1px solid #bfd9f7; }
    .border-l-custom-color-light { border-left: 1px solid #bfd9f7; }
    .venue-pill-color { background: #759ac3; border-color: #759ac3; }

    /* label-color-custom (theme's own #1c60aa color utility, specificity 0,1,0) lost to the
       theme's own more specific rule here:
           .event-page .stat-item .points .text,
           .event-page .stat-item-right .days .number { color: #9d9d9d; }   (specificity 0,4,0)
       -- this is exactly the eventDay/eventYear spot where an inline style="color:#1c60aa"
       used to sit; inline always wins regardless of specificity, so removing it exposed this.
       Matching the competing rule's own selector shape (plus the marker class) beats it on
       specificity instead of guessing at !important. */
    .event-page .stat-item .points .text.label-color-custom,
    .event-page .stat-item-right .days .number.label-color-custom {
        color: #1c60aa;
    }

    /* Date box (left) and Organized-By/Venue box (right) sit side by side but size to their
       own content independently -- a long "Organized By" value wraps to 2+ lines and grows
       the right box taller than the left one, leaving a blank gap below the date box.
       Stretch just the date box to match ; the venue box's own element (it carries col-lg-6
       itself, same div as .aiub-event-stats-color) is deliberately left alone -- earlier this
       box was also turned into a flex column here, which was a live suspect in a Firefox
       background-banding bug on it (see the note below). That turned out to be caused by
       something else (a 404'd hero image shifting the box's y-position locally), not this
       rule, but there is no upside to giving the venue box a second, unrelated reason to
       change layout mode -- so only :first-child (the date box) gets display:flex here. */
    .col-md-12 > .row.sm\:block {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .col-md-12 > .row.sm\:block > [class*="col-lg-6"]:first-child {
        display: flex;
        flex-direction: column;
    }
    /* Stretch the Month/Year row (the one with the visible border) to fill the leftover
       space instead of leaving it blank below. */
    .col-md-12 > .row.sm\:block > [class*="col-lg-6"]:first-child > .aiub-stats.row {
        flex: 1 1 auto;
        display: flex;
        align-items: stretch;
    }
    /* Keep the Month/Day and Year columns stretched to the row's full height (so the
       border-left divider between them still reaches top to bottom), and center just
       their own content within that height instead. */
    .col-md-12 > .row.sm\:block > [class*="col-lg-6"]:first-child > .aiub-stats.row > [class*="col-lg-6"] {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Venue box: Organized By and Venue can render as visibly different shades of blue in
       Firefox -- confirmed live on production too (e.g. the IEEE WIE Day post). Root cause:
       the theme's own rule tiles a 39%->100% alpha gradient at background-size:3px 3px (a 3px
       tile repeated many times down the box), and the markup nests the class (outer column
       div AND inner .row both carry aiub-event-stats-color) so that tiling is painted TWICE.
       Firefox's per-tile rounding goes inconsistent when the box's fractional top position
       (the cumulative height of everything above it -- varies per post) lands close to a
       device pixel boundary, and each vertical tile boundary is a place that can go wrong.

       Two things tried and rejected before this fix, for reference:
       - Dedup only (paint once, keep the tiled gradient) -- removed one layer of the problem,
         genuinely helped some posts (one measured 47.8 -> 13.0 drift), but did nothing for
         others (two different posts stayed exactly as bad, 51 -> 51) -- tile boundaries were
         still there, just fewer of them, so severity stayed fully position-dependent.
       - A flat, non-fading alpha (single colour, no gradient) -- removed ALL vertical tile
         boundaries and worked everywhere, but changes the look (loses the intentional 39%
         top-lighter-than-bottom fade) ; reverted twice at the user's request.

       This fix removes the vertical tile boundaries: the colour cycle (a small 3-unit-tall
       gradient, repeated via the SVG's OWN <pattern>, not CSS background-repeat) and the dot
       texture are baked into one small SVG, shown as a single non-repeating image stretched
       to the box's exact height (background-size: Npx 100%) and tiled only HORIZONTALLY
       (background-repeat: repeat-x, at a fixed integer 3px). The browser places exactly one
       image at exactly one position -- there is no longer any CSS-level vertical tiling for
       it to round inconsistently ; every tile boundary that used to be a place Firefox could
       disagree with itself is now baked into the image at author time instead, at a fixed,
       deterministic scale.
       The SVG's own viewBox height (188, a multiple of the 4-unit tile) keeps the pattern's
       repeat count stable across the range of box heights actually seen (~99-190px) ; a post
       whose box comes out at a very different height still gets this pattern stretched
       proportionally, a mild continuous size change, not a seam.
       Colours (top #7398c0 -> bottom #1d60ab, dot #e4e4e4 at 25% opacity, repeating every 4
       units) were tuned by the user with a small interactive SVG-parameter tool (color
       pickers + live preview, generates this exact CSS block) rather than guessed at here --
       not derived from the theme's own rgb(3,78,161)/3px.
       Verified visually (the automated pixel-drift metric used elsewhere in this investigation
       cannot tell an intentional smooth 100-row fade from a real seam, so this one was judged
       by eye, side by side, amplified, against the original bug -- see git history) across
       three different posts in both Firefox and Chrome ; no seam in either engine, any post. */
    .event-page .aiub-event-stats-color.row {
        background-image: none;
    }
    .event-page .border-custom-color.aiub-event-stats-color {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%203%20126%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%237398c0%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%230156b2%27%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%27g%27%20width%3D%273%27%20height%3D%273%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20width%3D%273%27%20height%3D%273%27%20fill%3D%27url(%23c)%27%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%27d%27%20width%3D%273%27%20height%3D%273%27%20patternUnits%3D%27userSpaceOnUse%27%3E%3Crect%20width%3D%271.50%27%20height%3D%271.50%27%20fill%3D%27%23e4e4e4%27%20fill-opacity%3D%270.25%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%273%27%20height%3D%27126%27%20fill%3D%27url(%23g)%27%2F%3E%3Crect%20width%3D%273%27%20height%3D%27126%27%20fill%3D%27url(%23d)%27%2F%3E%3C%2Fsvg%3E");
        background-size: 3px 100%;
        background-repeat: repeat-x;
    }

    /* Venue/organizer pills (each rendered as its own <span> with a colored background) wrap
       as plain inline text by default -- when a pill's own label is long, the browser can
       break the line INSIDE the pill instead of moving the whole pill to the next line,
       splitting its rounded background across two lines. Force each pill to stay one
       unbreakable unit, sized to its own content (not the tall default line-height), with
       margin-bottom so wrapped rows of pills don't crowd into each other. */
    .aiub-event-stats-color .border-1.py-5.px-10.rounded-20 {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        line-height: 1.2;
        padding: 3px 10px !important;
        margin-bottom: 6px;
        vertical-align: middle;
    }

    /* Mobile & Tablet Responsive Styles */
    @media (max-width: 1024px) {
        .event-page {
            padding-top: 80px !important;
        }
        
        .date-box {
            margin-top: 0 !important;
            padding: 15px !important;
        }
        
        .date-box h3 {
            font-size: 16px !important;
            margin-right: 5px !important;
        }
        
        .pixel-text__text-custom {
            font-size: 36px !important;
        }
        
        .award-info h1 {
            font-size: 24px !important;
            line-height: 1.3 !important;
            padding: 15px 0 !important;
        }
        
        .content-description {
            padding: 15px !important;
        }
        
        /* Photo tags below image - mobile optimized */
        .mt-15.flex.flex-wrap {
            margin-top: 10px !important;
            gap: 6px !important;
        }
        
        .mt-15.flex.flex-wrap .text-13 {
            font-size: 11px !important;
            margin-right: 0 !important;
            width: 100%;
            margin-bottom: 5px;
        }
        
        .mt-15.flex.flex-wrap a,
        .mt-15.flex.flex-wrap span {
            padding: 6px 10px !important;
            font-size: 11px !important;
            /* Better touch targets */
            min-height: 28px;
        }
        
        /* Event stats - mobile layout */
        .aiub-event-stats,
        .aiub-stats,
        .aiub-event-stats-color {
            margin-bottom: 10px;
        }
        
        .stat-item,
        .statitem {
            padding: 10px !important;
            font-size: 13px !important;
        }
        
        /* SDG tags - mobile */
        .mt-50 {
            margin-top: 20px !important;
        }
        
        .border-1.py-5.px-10 {
            padding: 4px 8px !important;
            font-size: 11px !important;
            margin: 3px !important;
        }
    }
    
    /* Extra small devices (phones in portrait, less than 576px) */
    @media (max-width: 575px) {
        .event-page {
            padding-top: 60px !important;
        }
        
        .award-info h1 {
            font-size: 20px !important;
        }
        
    }