/* Mobile landing screen for every product-listing page (2026-07-25).
   Loaded on the pages functions.php marks with .tk-landing: the league and
   tournament pages, the two /tickets/ hubs and the team archives. The two
   package pages keep packages-landing.css (they carry their own hero photos).

   Measured at 393x659 — the real iPhone Safari fold — the first ticket card sat
   at 982 on /seriaa/, 844 on /ligue1/, 716 on a team page and 1376 on
   /tickets/sports/. Every one of them opened with no tickets on screen at all.
   Everything below buys that space back. */

@media (max-width: 767px) {

  /* ---- 1. the SEO paragraph gets out of the way -------------------------- */

  /* league pages and team archives: the text and the grid are siblings, so
     flex order moves the text under the grid. The DOM is untouched, which is
     what search engines and the desktop layout read. */
  body.tk-landing .products-page-content,
  body.tk-landing .tax-teams-body,
  body.tk-landing .container.section-padding { display: flex; flex-direction: column; }

  body.tk-landing .products-page-content > .intro,
  body.tk-landing .container.section-padding > .intro-text { order: 1; margin-top: 20px; }
  body.tk-landing .products-page-content > .tiktik-pagination,
  body.tk-landing .products-page-content > .text-below-products,
  body.tk-landing .products-page-content > .two-column-area,
  body.tk-landing .products-page-content > .grid-gallery,
  body.tk-landing .products-page-content > .latest-results,
  body.tk-landing .products-page-content > .video-gallery,
  body.tk-landing .products-page-content > .finishing-text { order: 2; }

  /* the /tickets/ hubs wrap the H1 and the paragraph together in one .intro,
     and the grid sits in a different parent — order alone cannot lift the grid
     past the text. display:contents dissolves that wrapper so the H1 can stay
     on top while the paragraph joins the blocks that go below the grid. */
  body.tk-landing .container.section-padding > .intro { display: contents; }
  body.tk-landing .container.section-padding > .intro > .intro-text,
  body.tk-landing .container.section-padding > .intro > .tiktik-injected-h2 { order: 9; }
  body.tk-landing .container.section-padding > .intro > .intro-text { margin-top: 6px; }
  body.tk-landing .custom-h1 { font-size: 21px; margin: 8px 0 4px; }
  body.tk-landing .tiktik-injected-h2 { font-size: 15px; margin: 16px 0 2px; }
  body.tk-landing #breadcrumbs { font-size: 12px; margin: 0; }

  /* ---- 2. the title band becomes a hero card ----------------------------- */

  /* the band already carries a photo; its ::after covered it with an opaque
     grey from 0%. Ramp the scrim from the bottom so the photo is visible. */
  body.tk-landing .page-title.bg-sports {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 110px; margin: 6px 12px 8px; padding: 0 14px 11px;
    border-radius: 12px; overflow: hidden;
    background-image: url("/wp-content/uploads/2026/07/hero-sport-packages-mobile.jpg");
    background-position: center 38%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  }
  body.tk-landing .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.tk-landing .page-title.bg-sports h1 { font-size: 20px; line-height: 1.25; }
  body.tk-landing .page-title #breadcrumbs { display: none; }

  /* ---- 3. the two stacked cubes become one row of pills ------------------ */

  /* league pages stack a 40px icon above each label — 138px of switcher.
     Team archives render the same choice as two big bordered squares. */
  body.tk-landing .page-switcher ul { gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
  body.tk-landing .page-switcher .menu-item { flex: 1 1 0; min-width: 0; }
  body.tk-landing .page-switcher .menu-item button,
  body.tk-landing .page-switcher .menu-item a {
    width: 100%; font-size: 14px; padding: 10px 6px; border-radius: 24px;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-flow: row !important; align-items: center; justify-content: center; gap: 6px;
  }
  body.tk-landing .page-switcher .menu-item button::before {
    width: 20px !important; height: 20px !important; flex: 0 0 20px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
  }
  body.tk-landing .deal-type-filter {
    display: flex; gap: 8px; margin: 4px 0 8px; padding: 0;
  }
  body.tk-landing .deal-type-filter .toggle-loop-filter-item {
    flex: 1 1 0; min-width: 0; height: auto; min-height: 0;
    font-size: 14px; padding: 10px 6px; border-radius: 24px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
  }
  body.tk-landing .deal-type-filter .toggle-loop-filter-item::before,
  body.tk-landing .deal-type-filter .toggle-loop-filter-item img,
  body.tk-landing .deal-type-filter .toggle-loop-filter-item svg {
    width: 20px !important; height: 20px !important; margin: 0 !important;
  }
  body.tk-landing .team-games-h2 { font-size: 16px; margin: 4px 0 6px !important; }

  /* ---- 4. the filter block ---------------------------------------------- */

  /* four stacked label+select pairs cost 336px. Two per row, and the label goes
     inside the control — packages-chips.js writes "כל הקבוצות" and friends into
     each select's first option, so nothing loses its meaning. */
  body.tk-landing #taxonomy-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
  body.tk-landing #taxonomy-filters > div > label { display: none; }
  /* the theme forces one column here (custom-css.css, June 2026) to stop the
     clear button overlapping the sort select. The clear row is hidden below, so
     that conflict is gone — but the !important has to be answered in kind. */
  body.tk-landing #taxonomy-filters > div[class$="select-filter"] {
    flex: 1 1 calc(50% - 6px) !important; max-width: calc(50% - 3px) !important;
    min-width: 0; margin: 0;
  }
  body.tk-landing #taxonomy-filters > div[class$="select-filter"] select { width: 100%; }
  /* Two filters on every page, and on these pages the pair is month + sort.
     packages-mobile.css hides sort everywhere as part of the "league + month"
     rule that the package pages follow — but a league page has no league
     select (the page IS the league), so that rule leaves it with one lonely
     half-width control. Sort is the one that changes what the buyer sees
     first: popular, cheapest, most expensive, newest. */
  body.tk-landing #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; order: 4;
  }
  body.tk-landing #taxonomy-filters > div.month-select-filter { order: 3; }

  /* The /tickets/ hubs run a template that never loads packages-mobile.css, so
     all five of their selects survive. City repeats what the team already says
     and the team select repeats the chip row — leaving league, month and sort,
     which is the same pair as everywhere else plus the one control that is the
     actual navigation on a hub page. */
  body.tk-landing.page-template-template-sports-tickets #taxonomy-filters > div.city-select-filter,
  body.tk-landing.page-template-template-sports-tickets #taxonomy-filters > div.term-select-filter,
  body.tk-landing.page-template-template-music-tickets #taxonomy-filters > div.city-select-filter,
  body.tk-landing.page-template-template-music-tickets #taxonomy-filters > div.term-select-filter {
    display: none !important;
  }

  /* the /tickets/ hubs ask for an explicit apply; keep it, just not on a row
     of its own */
  body.tk-landing #taxonomy-filters > .apply-filters {
    flex: 1 1 calc(50% - 6px) !important; max-width: calc(50% - 3px); margin: 0;
  }
  body.tk-landing #taxonomy-filters > .apply-filters button { width: 100%; height: 44px; }
  body.tk-landing #taxonomy-filters > .term-visual-radio-filters,
  body.tk-landing #taxonomy-filters > .chips-status { flex: 1 1 100%; }
  /* the status line carries its own "נקה", so the theme's clear row is a
     duplicate on mobile */
  body.tk-landing #taxonomy-filters > .clear-filters { display: none; }
  body.tk-landing .chips-status { margin-top: 0; }
  body.tk-landing .chips-status__clear[hidden] { display: none; }

  /* the chip row runs to the screen edge, so the thumb can see there are more
     teams off to the side */
  body.tk-landing #taxonomy-filters .term-visual-radio-filters {
    margin-inline: calc(-1 * var(--inline-padding));
    padding-inline: var(--inline-padding);
    padding-bottom: 4px; max-width: none;
  }
  body.tk-landing .chips-heading { margin: 0 2px 2px; }
  /* the /tickets/ hubs print a full-size club logo in every chip, which makes
     that one row 107px tall against 58px on the league pages */
  body.tk-landing .term-visual-radio-filters .filter-item label img.term-img {
    width: 34px; height: 34px; object-fit: contain;
  }

  /* ---- 5. the ticket card ------------------------------------------------ */

  /* the red date square exists in the theme but is display:none under 767px,
     which is why these rows read as blank white text */
  body.tk-landing .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 */
  body.tk-landing .ticket-loop > a:not(.ticket-loop__whatsapp) {
    --gap: .6rem; flex-wrap: nowrap; align-items: center;
  }
  body.tk-landing .ticket-loop__right {
    display: grid; flex: 0 0 46px; aspect-ratio: 1; font-size: 13px; border-radius: 10px;
  }
  body.tk-landing .ticket-loop__right p:first-child { font-size: 19px; }
  /* the desktop card scales its middle column by 1.1 — with the date square
     back that overflows the row on a 393px screen */
  body.tk-landing .ticket-loop__center { flex: 1 1 auto; min-width: 0; transform: none; }
  body.tk-landing .ticket-loop__left { flex: 0 0 24%; }

  /* ---- 6. dead space above the first card -------------------------------- */

  body.tk-landing #products-grid { margin-top: 4px; }
  body.tk-landing .filter-tab-box { padding-top: 0; margin-top: 0; }
  body.tk-landing .products-grid-container { margin-top: 4px; }

  /* ---- 7. the floating share bubble -------------------------------------- */

  /* It sits bottom-left at z-index 9998. Once the cards move up into the first
     screen it lands on the first card's "הזמינו" button — measured 48% covered
     on the sport page, and 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 it goes rather than moves.
     The accessibility widget (legally required) and WhatsApp both stay.
     The theme ships its own !important rule for this widget in the same media
     query, so equal specificity loses on source order — qualify it. */
  html body.tk-landing #tiktikShareWrap,
  html body.tk-landing .tiktik-share { display: none !important; }
}