/* Desktop half of the listing landing screen (2026-07-26).

   The mobile sheet lives entirely inside max-width:767px, so desktop kept the
   old look: a flat grey title band hiding its own photo, two 74px cubes for the
   tickets/packages switch, three rows of team tiles, and the SEO paragraph
   above everything. Measured at 1280x900 the first ticket on /laliga/ sat at
   989 — a full screen of scrolling before a single price.

   Same four moves as mobile, desktop proportions. Covers the package pages too
   (they are excluded from .tk-landing because their mobile sheet is separate,
   but on desktop they are the same page type). */

@media (min-width: 768px) {

  /* 1. the SEO paragraph moves under the grid — CSS order only, the DOM and
        therefore what search engines read is untouched */
  body:is(.tk-landing, .page-id-7, .page-id-8) .products-page-content {
    display: flex; flex-direction: column;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .products-page-content > .intro {
    order: 1; margin-top: 26px;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .products-page-content > .tiktik-pagination,
  body:is(.tk-landing, .page-id-7, .page-id-8) .products-page-content > .text-below-products,
  body:is(.tk-landing, .page-id-7, .page-id-8) .products-page-content > .two-column-area,
  body:is(.tk-landing, .page-id-7, .page-id-8) .products-page-content > .grid-gallery,
  body:is(.tk-landing, .page-id-7, .page-id-8) .products-page-content > .latest-results,
  body:is(.tk-landing, .page-id-7, .page-id-8) .products-page-content > .video-gallery,
  body:is(.tk-landing, .page-id-7, .page-id-8) .products-page-content > .finishing-text {
    order: 2;
  }
  /* team archives keep the paragraph and the grid as siblings of one container */
  body.tk-landing.tax-product_teams .container.section-padding {
    display: flex; flex-direction: column;
  }
  body.tk-landing.tax-product_teams .container.section-padding > .intro-text {
    order: 1; margin-top: 26px;
  }

  /* 2. the title band shows the photo it already carries.
        Its ::after ramps grey from the top at 100% opacity, which is why the
        band reads as a flat slab — ramp from the bottom instead. */
  body:is(.tk-landing, .page-id-7) .page-title.bg-sports,
  body.page-id-8 .page-title {
    display: flex; flex-direction: column; justify-content: flex-end;
    position: relative; isolation: isolate;
    min-height: 150px; padding: 0 34px 20px; margin-bottom: 10px;
    background-position: center 42%; background-size: cover;
  }
  body:is(.tk-landing, .page-id-7) .page-title.bg-sports {
    background-image: url("/wp-content/uploads/2026/07/hero-sport-packages-mobile.jpg");
  }
  body.page-id-8 .page-title {
    background: #20242b url("/wp-content/uploads/2026/07/hero-music-packages-mobile.jpg")
                center 42% / cover no-repeat;
  }
  /* tennis page, not football — this centre-court shot was already in the
     library, uploaded for social sharing and never used on the page */
  body.tk-landing.page-id-85829 .page-title.bg-sports {
    background-image: url("/wp-content/uploads/2026/06/og-tennis-tiktik.jpg");
    background-position: center 55%;
  }
  body:is(.tk-landing, .page-id-7) .page-title.bg-sports:after,
  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) 36%,
                                            rgba(7, 11, 26, .12) 62%, rgba(7, 11, 26, 0) 82%);
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .page-title h1 { color: #fff; font-size: 34px; }

  /* 3. the switch: two 105x74 cubes with a 40px icon stacked over the label
        become two pills on one centred row */
  body:is(.tk-landing, .page-id-7, .page-id-8) .page-switcher ul {
    max-width: 430px; margin: 0 auto 10px; gap: 12px; flex-wrap: nowrap;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .page-switcher .menu-item {
    flex: 1 1 0; min-width: 0;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .page-switcher .menu-item button,
  body:is(.tk-landing, .page-id-7, .page-id-8) .page-switcher .menu-item a {
    width: 100%; height: auto; min-height: 0; font-size: 16px;
    padding: 12px 14px; border-radius: 26px; white-space: nowrap;
    display: flex; flex-flow: row !important; align-items: center;
    justify-content: center; gap: 8px;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .page-switcher .menu-item button::before {
    width: 22px !important; height: 22px !important; flex: 0 0 22px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
  }
  body.tk-landing.tax-product_teams .deal-type-filter {
    display: flex; gap: 12px; max-width: 430px; margin: 0 auto 10px;
  }
  /* The per-card WhatsApp badge is pinned to the card's top-left at 40x40, and
     in RTL that corner is where the price sits — measured 784px² of overlap on
     every card, on every listing page. It predates this work (identical with
     these stylesheets disabled), but it lands on the number the visitor came
     for. Smaller badge, and the price column starts below it. */
  body:is(.tk-landing, .tk-index, .page-id-7, .page-id-8) .ticket-loop__whatsapp {
    width: 26px; height: 26px; top: 3px; left: 3px;
  }
  body:is(.tk-landing, .tk-index, .page-id-7, .page-id-8) .ticket-loop__whatsapp img,
  body:is(.tk-landing, .tk-index, .page-id-7, .page-id-8) .ticket-loop__whatsapp svg {
    width: 100%; height: 100%;
  }
  body:is(.tk-landing, .tk-index, .page-id-7, .page-id-8) .ticket-loop__left {
    padding-top: 26px;
  }

  /* packages on the right, tickets on the left — CSS only, so nothing moves
     after the page has been drawn */
  body.tk-landing .deal-type-filter .tog-packages { order: 1; }
  body.tk-landing .deal-type-filter .def-tickets { order: 2; }
  body.tk-landing .page-switcher ul { flex-direction: row-reverse; }

  /* Every club stays on screen. A single scrolling row was tried and read as
     though clubs had been deleted — nine of twenty visible and the rest off to
     the side. They wrap instead, which is what a desktop has room for. */
  body:is(.tk-landing, .page-id-7, .page-id-8) .term-visual-radio-filters {
    flex-wrap: wrap; overflow: visible; padding-bottom: 4px;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .term-visual-radio-filters .filter-item {
    flex: 0 0 auto;
  }
  /* the team archive builds this switch from two square buttons that stack a
     large icon over the label; without forcing the row direction the buttons
     only got narrower and taller — 82x90 against the 106x76 they started at */
  body.tk-landing.tax-product_teams .deal-type-filter .toggle-loop-filter-item {
    flex: 1 1 0; width: auto; height: auto; min-height: 0; font-size: 16px;
    padding: 12px 14px; border-radius: 26px;
    display: flex; flex-direction: row !important; align-items: center;
    justify-content: center; gap: 8px; white-space: nowrap;
  }
  body.tk-landing.tax-product_teams .deal-type-filter .toggle-loop-filter-item::before,
  body.tk-landing.tax-product_teams .deal-type-filter .toggle-loop-filter-item img,
  body.tk-landing.tax-product_teams .deal-type-filter .toggle-loop-filter-item svg {
    width: 22px !important; height: 22px !important; margin: 0 !important; flex: 0 0 22px;
  }

  /* 4. the team tiles were grey squares with white text — measured at 2.1:1
        contrast, and a different component from the white pill the phone
        shows. Same pill here, so the two screens read as one product. */
  body:is(.tk-landing, .page-id-7, .page-id-8) .term-visual-radio-filters {
    gap: 10px; justify-content: flex-start;
  }
  /* the artist row paints the photo as the tile background — excluded, or the
     white pill erases the artists */
  body:is(.tk-landing, .page-id-7, .page-id-8) .term-visual-radio-filters.img-as-bg .filter-item label {
    width: 92px; height: 92px; aspect-ratio: 1; border-radius: 12px; padding: 6px;
    font-size: 12px; color: #fff; background-color: rgba(0, 0, 0, .35); border: 0;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .term-visual-radio-filters.img-as-bg .filter-item label img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
    object-fit: cover; border-radius: 12px; z-index: -1; flex: none;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .term-visual-radio-filters:not(.img-as-bg) .filter-item label {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    width: auto; height: 48px; padding: 6px 14px 6px 8px;
    background: #fff; color: #111; border: 1px solid #e5e5e5; border-radius: 999px;
    font-size: 13px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .term-visual-radio-filters:not(.img-as-bg) .filter-item input:checked + label {
    border: 2px solid #b53b3b;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .term-visual-radio-filters.img-as-bg .filter-item input:checked + label {
    outline: 2px solid #b53b3b; outline-offset: 1px;
  }
  body:is(.tk-landing, .page-id-7, .page-id-8) .term-visual-radio-filters:not(.img-as-bg) .filter-item img {
    width: 30px; height: 30px; max-height: none; object-fit: contain; flex: 0 0 30px;
  }

  /* 5. the /tickets/ hubs: a six-line SEO paragraph and a forty-tile grid stood
        between the visitor and the first price — 1039px of it. The phone
        already puts that paragraph under the grid; do the same here. */
  body.tk-landing:is(.page-template-template-sports-tickets, .page-template-template-music-tickets)
    .container.section-padding { display: flex; flex-direction: column; }
  body.tk-landing:is(.page-template-template-sports-tickets, .page-template-template-music-tickets)
    .container.section-padding > .intro { display: contents; }
  body.tk-landing:is(.page-template-template-sports-tickets, .page-template-template-music-tickets)
    .container.section-padding > .intro > .intro-text,
  body.tk-landing:is(.page-template-template-sports-tickets, .page-template-template-music-tickets)
    .container.section-padding > .intro > .tiktik-injected-h2 { order: 9; }
  /* two rows of tiles is the browsing aid; the rest is a wall */
  body.tk-landing:is(.page-template-template-sports-tickets, .page-template-template-music-tickets)
    .term-visual-radio-filters { max-height: 116px; overflow-y: auto; }
}