/* Deliberate MOBILE-ONLY divergences from ideasfor.events.
   Everything else in this app is a byte-for-byte port of the legacy site;
   these rules are not. Both were measured to behave identically on legacy at
   375px, so they are improvements rather than parity fixes — keep them in
   this file so the distinction stays obvious.

   Breakpoint 599px matches the gallery component's own table
   (concept-gallery.css), which drops to one tile per row at the same width. */

@media (max-width: 599px) {

    /* 1. Side padding.
       responsive.css gives .section `padding: 0 35px` for everything under
       1260px, which is reasonable on a tablet and wasteful on a phone: 70 of
       375 CSS pixels, 19% of the viewport, spent on empty gutters. 15px
       matches Bootstrap's own container gutter and returns ~40px of width to
       the content — concept tiles go from 305px to 345px. */
    .section {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 2. Logotype.
       The banner is an empty div with a background-image sized `contain`, so
       its height comes entirely from min-height and its width from the
       parent. At 375px that means the logo bleeds edge to edge with no
       breathing room, and a tall tenant logo reserves a 150px band.

       Capping height alone does NOT shrink a wide logo: Foto Novelty's is
       1000x81 (12.35:1), so `contain` is width-limited and paints 375x30
       regardless of the height available. The horizontal margins are what
       actually pull it off the edges; max-height is the guard for tenants
       whose logos are tall enough to be height-limited.

       !important is required, not decorative: PartyPlanner.Style is injected
       as an inline <style> AFTER these sheets (see HomeLayout), and tenants
       set min-height/max-width on this exact selector — Foto Novelty sets
       min-height:75px. Same specificity plus later source order means the
       tenant rule wins every tie without it. */
    .party-planner-page > a > .logotype {
        margin-left: 15px !important;
        margin-right: 15px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }
}