/* Landing screen budget for the two package pages (2026-07-25).
   Measured on a real iPhone viewport (393x659, Safari UA): the first package
   card sat at 688px on /sportpackages/ and 730px on /music/ — below the fold —
   so the page opened with zero packages, and tapping a team looked like nothing
   happened because the grid it filtered was off-screen.

   Everything here buys vertical space back. Scoped to pages 7 and 8 only, so
   the league pages that share this template are untouched. */

@media (max-width: 767px) {

  /* 1. the SEO paragraph moves under the grid.
        CSS order only — the DOM keeps its position, so desktop and search
        engines see exactly what they saw before. */
  body.page-id-7 .products-page-content,
  body.page-id-8 .products-page-content { display: flex; flex-direction: column; }
  body.page-id-7 .products-page-content > .intro,
  body.page-id-8 .products-page-content > .intro { order: 99; margin-top: 20px; }

  /* 2. the title band already carries a stadium photo, but its ::after covered
        it with an opaque grey starting at 0%. Ramp from the bottom instead so
        the photo is visible — this is the continuity with the homepage cube the
        visitor just tapped, not a new asset. */
  body.page-id-7 .page-title.bg-sports {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 116px; margin: 6px 12px 8px; padding: 0 14px 11px;
    border-radius: 12px; overflow: hidden;
    background-position: center 38%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  }
  body.page-id-7 .page-title.bg-sports:after {
    background-image: linear-gradient(0deg, rgba(7, 11, 26, .92) 0%, rgba(7, 11, 26, .5) 34%,
                                            rgba(7, 11, 26, .12) 58%, rgba(7, 11, 26, 0) 78%);
  }
  body.page-id-7 .page-title.bg-sports h1 { font-size: 21px; }

  /* the shipped strip image is 8KB / 1536x120 — stretched to a 116px band on a
     3x screen it smears. These two are purpose-made 1400x600 crops. */
  body.page-id-7 .page-title.bg-sports {
    background-image: url("/wp-content/uploads/2026/07/hero-sport-packages-mobile.jpg");
  }

  /* the music page renders .page-title.bg-blank — no photo at all until now */
  body.page-id-8 .page-title {
    display: flex; flex-direction: column; justify-content: flex-end;
    position: relative; isolation: isolate;
    min-height: 116px; margin: 6px 12px 8px; padding: 0 14px 11px;
    border-radius: 12px; overflow: hidden;
    background: #20242b url("/wp-content/uploads/2026/07/hero-music-packages-mobile.jpg")
                center 38% / cover no-repeat;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  }
  body.page-id-8 .page-title::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: linear-gradient(0deg, rgba(7, 11, 26, .92) 0%, rgba(7, 11, 26, .5) 34%,
                                            rgba(7, 11, 26, .12) 58%, rgba(7, 11, 26, 0) 78%);
  }
  body.page-id-8 .page-title h1 { color: #fff; font-size: 21px; }

  /* 3. the two stacked full-width buttons become one row of two pills */
  body.page-id-7 .page-switcher ul,
  body.page-id-8 .page-switcher ul { gap: 8px; margin-bottom: 5px; flex-wrap: nowrap; }
  body.page-id-7 .page-switcher .menu-item,
  body.page-id-8 .page-switcher .menu-item { flex: 1 1 0; min-width: 0; }
  body.page-id-7 .page-switcher .menu-item a,
  body.page-id-8 .page-switcher .menu-item a {
    font-size: 14px; padding: 10px 6px; border-radius: 24px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* 4. the selects lose their labels — packages-chips.js puts the meaning back
        inside each one ("כל הליגות" / "כל החודשים") */
  body.page-id-7 #taxonomy-filters > div > label,
  body.page-id-8 #taxonomy-filters > div > label { display: none; }

  /* 4b. the music page carries no league taxonomy, so the "league + month" pair
         leaves it with one lonely control while every other page shows two.
         Sort is the second one here, same as the ticket pages. */
  body.page-id-8 #taxonomy-filters > div.sorting-select-filter {
    display: flex !important; flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 3px) !important; min-width: 0; margin: 0;
  }
  body.page-id-8 #taxonomy-filters > div.month-select-filter {
    flex: 1 1 calc(50% - 6px) !important; max-width: calc(50% - 3px) !important;
  }
  body.page-id-8 #taxonomy-filters { display: flex; flex-wrap: wrap; gap: 6px; }

  /* 5. the chip row runs to the screen edge like the homepage cube grid, so the
        thumb can see there are more teams off to the side */
  body.page-id-7 #taxonomy-filters .term-visual-radio-filters,
  body.page-id-8 #taxonomy-filters .term-visual-radio-filters {
    margin-inline: calc(-1 * var(--inline-padding));
    padding-inline: var(--inline-padding);
    max-width: none;
  }
  body.page-id-7 .chips-heading,
  body.page-id-8 .chips-heading { margin: 0 2px 2px; }

  /* 6. the red date square exists in the theme but is display:none under 767px,
        which is why the mobile rows read as blank white text */
  body.page-id-7 .ticket-loop,
  body.page-id-8 .ticket-loop {
    --gap: .7rem;
    border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  }
  /* the three columns live inside the <a>, and it re-declares --gap itself —
     styling the <li> alone leaves the row wrapping */
  body.page-id-7 .ticket-loop > a:not(.ticket-loop__whatsapp),
  body.page-id-8 .ticket-loop > a:not(.ticket-loop__whatsapp) {
    --gap: .6rem; flex-wrap: nowrap; align-items: center;
  }
  body.page-id-7 .ticket-loop__right,
  body.page-id-8 .ticket-loop__right {
    display: grid; flex: 0 0 46px; aspect-ratio: 1;
    font-size: 13px; border-radius: 10px;
  }
  body.page-id-7 .ticket-loop__right p:first-child,
  body.page-id-8 .ticket-loop__right p:first-child { font-size: 19px; }
  /* the desktop card scales its middle column up by 1.1 — with the date square
     back that overflows the row on a 393px screen */
  body.page-id-7 .ticket-loop__center,
  body.page-id-8 .ticket-loop__center { flex: 1 1 auto; min-width: 0; transform: none; }
  body.page-id-7 .ticket-loop__left,
  body.page-id-8 .ticket-loop__left { flex: 0 0 24%; }

  /* 7. dead space above the first card: the grid's own 2rem top margin, and the
        gaps inside the filter block */
  body.page-id-7 #products-grid,
  body.page-id-8 #products-grid { margin-top: 4px; }
  body.page-id-7 .filter-tab-box,
  body.page-id-8 .filter-tab-box { padding-top: 0; margin-top: 0; }
  body.page-id-7 #taxonomy-filters,
  body.page-id-8 #taxonomy-filters { gap: 4px; margin-bottom: 2px; }
  body.page-id-7 #taxonomy-filters .term-visual-radio-filters,
  body.page-id-8 #taxonomy-filters .term-visual-radio-filters { padding-bottom: 4px; }
  body.page-id-7 .chips-status,
  body.page-id-8 .chips-status { margin-top: 0; }
  /* the theme gives every button a display value, which beats the UA rule for
     [hidden] — so "נקה" stayed on screen with nothing to clear */
  .chips-status__clear[hidden] { display: none; }

  /* The floating share bubble sits bottom-left at z-index 9998. Once the cards
     moved up into the first screen it landed on the first card's "הזמינו" button
     — measured 48% covered on sport, 58% on music, and on music
     document.elementFromPoint at the button's centre returned the share widget,
     i.e. a real tap missed the button. Mobile browsers already have a native
     share sheet, so the bubble is removed here rather than relocated. The
     accessibility widget (legally required) and WhatsApp both stay.
     Scoped to these listing pages only — product pages keep their share button. */
  /* the theme already ships an !important rule for this widget in the same
     media query, so equal specificity loses on source order — qualify it */
  html body #tiktikShareWrap,
  html body .tiktik-share { display: none !important; }
}