/* The index and archive pages (2026-07-26).

   The listing work covered pages with a ticket grid. These are the other half
   of the site a visitor reaches from the homepage and the menu: the World Cup
   page, the artist and festival archives, browse-by-city, browse-by-month and
   the guides index. Measured at 393x659 they still opened the old way — a flat
   title, a wall of text, and the first real item below the fold. The World Cup
   page was the worst at 798, with three full-width cubes for its tabs.

   Same four moves as the listing pages, so the whole site reads as one thing. */

/* ---- mobile ------------------------------------------------------------- */
@media (max-width: 767px) {

  /* 1. the SEO paragraph goes under the grid — order only, the DOM is untouched */
  body.tk-index .products-page-content,
  body.tk-index .container.section-padding { display: flex; flex-direction: column; }
  body.tk-index .products-page-content > .intro,
  body.tk-index .container.section-padding > .intro,
  body.tk-index .container.section-padding > .intro-text { order: 9; margin-top: 20px; }

  /* 2. the title band becomes a hero card carrying a photo */
  body.tk-index .page-title {
    display: flex; flex-direction: column; justify-content: flex-end;
    position: relative; isolation: isolate;
    min-height: 110px; margin: 6px 12px 8px; padding: 0 14px 11px;
    border-radius: 12px; overflow: hidden;
    background-color: #20242b;
    background-image: url("/wp-content/uploads/2026/07/hero-sport-packages-mobile.jpg");
    background-position: center 38%; background-size: cover; background-repeat: no-repeat;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  }
  /* the music-side archives get the crowd shot instead of the stadium */
  body.tk-index.post-type-archive-bands .page-title,
  body.tk-index.page-id-59004 .page-title,
  body.tk-index.page-id-36581 .page-title {
    background-image: url("/wp-content/uploads/2026/07/hero-music-packages-mobile.jpg");
  }
  body.tk-index .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.tk-index .page-title h1,
  body.tk-index .page-title .custom-h1 { color: #fff; font-size: 20px; line-height: 1.25; }

  /* 2b. three of these pages have no .page-title element at all — the heading
         is a bare h1 in its own wrapper. Make that wrapper the band, exactly
         like the /tickets/ hubs. Browse-by-city and browse-by-month keep the
         heading and drop the paragraph below the grid; the guides index has
         its own header component with a subtitle. */
  body.tk-index .cities-archive,
  body.tk-index .months-archive { display: flex; flex-direction: column; }
  body.tk-index .cities-archive > .intro,
  body.tk-index .months-archive > .intro { display: contents; }
  body.tk-index .cities-archive > .intro > .intro-text,
  body.tk-index .months-archive > .intro > .intro-text { order: 9; margin-top: 20px; }

  body.tk-index .intro > .custom-h1,
  body.tk-index .gd-header,
  body.tk-index.post-type-archive-festivals h1.elementor-heading-title {
    display: flex; flex-direction: column; justify-content: flex-end;
    position: relative; isolation: isolate;
    min-height: 110px; margin: 4px 0 8px; padding: 12px 14px 11px;
    border-radius: 12px; overflow: hidden;
    color: #fff; font-size: 20px; line-height: 1.25; text-align: start;
    background-color: #20242b; background-size: cover; background-repeat: no-repeat;
    background-position: center 38%;
    background-image: url("/wp-content/uploads/2026/07/hero-music-packages-mobile.jpg");
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  }
  body.tk-index .gd-header,
  body.tk-index.post-type-archive-festivals h1.elementor-heading-title {
    background-image: url("/wp-content/uploads/2026/07/hero-sport-packages-mobile.jpg");
  }
  body.tk-index .intro > .custom-h1::after,
  body.tk-index .gd-header::after,
  body.tk-index.post-type-archive-festivals h1.elementor-heading-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.tk-index .gd-header .gd-header__title { color: #fff; font-size: 20px; margin: 0; }
  body.tk-index .gd-header .gd-header__sub { color: rgba(255, 255, 255, .85); font-size: 13px; }

  /* 3. the World Cup tabs are three full-width cubes, one under the other */
  body.tk-index .page-switcher ul { gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
  body.tk-index .page-switcher .menu-item { flex: 1 1 0; min-width: 0; }
  body.tk-index .page-switcher .menu-item button,
  body.tk-index .page-switcher .menu-item a {
    width: 100%; height: auto; min-height: 0; font-size: 13px;
    padding: 10px 6px; border-radius: 24px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    display: flex; flex-flow: row !important; align-items: center;
    justify-content: center; gap: 6px;
  }
  body.tk-index .page-switcher .menu-item button::before,
  body.tk-index .page-switcher .menu-item img,
  body.tk-index .page-switcher .menu-item svg {
    width: 20px !important; height: 20px !important; flex: 0 0 20px; margin: 0 !important;
  }

  /* 4. the ticket card, where these pages show one */
  body.tk-index .ticket-loop {
    --gap: .7rem; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  }
  body.tk-index .ticket-loop > a:not(.ticket-loop__whatsapp) {
    --gap: .6rem; flex-wrap: nowrap; align-items: center; padding-bottom: 4px;
  }
  body.tk-index .ticket-loop__right {
    display: grid; flex: 0 0 46px; aspect-ratio: 1; font-size: 13px; border-radius: 10px;
  }
  body.tk-index .ticket-loop__right p:first-child { font-size: 19px; }
  body.tk-index .ticket-loop__center { flex: 1 1 auto; min-width: 0; transform: none; }
  body.tk-index .ticket-loop__left { flex: 0 0 104px; }
  body.tk-index .ticket-loop__button {
    font-size: 12px; line-height: 1.25; padding: 7px 6px; white-space: nowrap;
  }

  body.tk-index #products-grid, body.tk-index .products-grid-container { margin-top: 4px; }

  /* the floating share bubble lands on the first card once the cards move up —
     the same reason it went from the listing pages. Accessibility and WhatsApp stay. */
  html body.tk-index #tiktikShareWrap,
  html body.tk-index .tiktik-share { display: none !important; }
}

/* ---- desktop ------------------------------------------------------------ */
@media (min-width: 768px) {

  body.tk-index .products-page-content,
  body.tk-index .container.section-padding { display: flex; flex-direction: column; }
  body.tk-index .products-page-content > .intro,
  body.tk-index .container.section-padding > .intro,
  body.tk-index .container.section-padding > .intro-text { order: 9; margin-top: 26px; }

  body.tk-index .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-color: #20242b;
    background-image: url("/wp-content/uploads/2026/07/hero-sport-packages-mobile.jpg");
    background-position: center 42%; background-size: cover; background-repeat: no-repeat;
  }
  body.tk-index.post-type-archive-bands .page-title,
  body.tk-index.page-id-59004 .page-title,
  body.tk-index.page-id-36581 .page-title {
    background-image: url("/wp-content/uploads/2026/07/hero-music-packages-mobile.jpg");
  }
  body.tk-index .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.tk-index .page-title h1,
  body.tk-index .page-title .custom-h1 { color: #fff; font-size: 34px; }

  body.tk-index .page-switcher ul {
    max-width: 560px; margin: 0 auto 10px; gap: 12px; flex-wrap: nowrap;
  }
  body.tk-index .page-switcher .menu-item { flex: 1 1 0; min-width: 0; }
  body.tk-index .page-switcher .menu-item button,
  body.tk-index .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.tk-index .page-switcher .menu-item button::before,
  body.tk-index .page-switcher .menu-item img {
    width: 22px !important; height: 22px !important; flex: 0 0 22px; margin: 0 !important;
  }
}