/* First-screen casino grid (LivePanthers, 30 Oct 2026).
   On pages with the casino grid, the hero, the grid heading and the cards are compacted so the casino cards start on
   the first screen, on desktop and on phones. The grid's intro line moves below the cards. Nothing is hidden on desktop.
   On phones three hero extras are hidden: the jump menu (the grid it jumps to is now on screen), the "Updated …" bar
   (the hero's author line carries the date) and the provider-review stats block.
   Every rule is scoped to main:has(> #casino-grid) or #casino-grid, so pages without the grid are not affected. */

/* ---------- Above the hero: breadcrumbs and the "Updated …" bar ---------- */
main:has(> #casino-grid) > .lp-visual-breadcrumbs > .container-brutal { padding-top: 8px; padding-bottom: 8px; }
main:has(> #casino-grid) > .lp-freshness-note > .container-brutal { padding-top: 4px; padding-bottom: 4px; }
main:has(> #casino-grid) > .lp-freshness-note p { font-size: 13px; line-height: 1.4; }

/* ---------- Hero: game, betting and guide pages ---------- */
main:has(> #casino-grid) > .page-hero { padding-top: 12px; padding-bottom: 12px; }
main:has(> #casino-grid) > .page-hero .page-hero-title { font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1.15 !important; margin-bottom: 6px !important; }
main:has(> #casino-grid) > .page-hero .page-hero-description { font-size: 15px; line-height: 1.5; margin: 0 0 6px !important; }
main:has(> #casino-grid) > .page-hero .container-brutal > div > div:first-child:not(.hero-author):not(.provider-hero-card) { margin-bottom: 6px; }
main:has(> #casino-grid) > .page-hero .lp-reader-sections { margin-top: 2px; padding-top: 2px; padding-bottom: 2px; }
main:has(> #casino-grid) > .page-hero .lp-reader-sections button { padding-top: 5px; padding-bottom: 5px; }
main:has(> #casino-grid) > .page-hero .lp-reader-sections .lp-reader-offers { padding-top: 3px; padding-bottom: 3px; }
main:has(> #casino-grid) > .page-hero .hero-author { margin: 8px 0 0; }
main:has(> #casino-grid) > .page-hero .hero-author img { width: 36px; height: 36px; }
main:has(> #casino-grid) > .page-hero .btn-hero-cta { margin-top: 8px !important; padding-top: 10px; padding-bottom: 10px; }

/* ---------- Hero: provider reviews ---------- */
main:has(> #casino-grid) > .page-hero .provider-hero-content { padding: 10px 16px !important; }
main:has(> #casino-grid) > .page-hero .provider-hero-content h1 { font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1.15 !important; margin: 0 0 6px; }
main:has(> #casino-grid) > .page-hero .provider-hero-rating { margin-bottom: 6px; }
main:has(> #casino-grid) > .page-hero .provider-hero-description { font-size: 15px; line-height: 1.5 !important; margin: 0 0 8px !important; }
main:has(> #casino-grid) > .page-hero .provider-hero-stats { gap: 6px 24px !important; margin: 0 0 6px !important; }
main:has(> #casino-grid) > .page-hero .provider-hero-stat-value { font-size: 16px; line-height: 1.3; }
main:has(> #casino-grid) > .page-hero .provider-hero-stat-label { font-size: 11px; }
main:has(> #casino-grid) > .page-hero .provider-hero-meta { font-size: 12px; gap: 4px 16px !important; margin: 0 0 8px !important; padding-bottom: 8px !important; }
main:has(> #casino-grid) > .page-hero .provider-hero-cta { padding-top: 10px; padding-bottom: 10px; }
main:has(> #casino-grid) > .page-hero .provider-hero-disclaimer { margin-top: 6px; }

/* ---------- Hero: homepage ---------- */
main:has(> #casino-grid) > .hero-section { padding-top: 16px; padding-bottom: 16px; }
main:has(> #casino-grid) > .hero-section h1 { font-size: clamp(26px, 2.8vw, 40px) !important; line-height: 1.15 !important; margin-top: 6px !important; margin-bottom: 6px !important; }
main:has(> #casino-grid) > .hero-section p { margin-top: 4px; margin-bottom: 4px; }
main:has(> #casino-grid) > .hero-section .container-brutal > div > :last-child { margin-top: 10px; }

/* ---------- Grid heading: smaller, with the intro line moved below the cards ---------- */
#casino-grid { padding-top: 14px !important; }
#casino-grid > .container-brutal { display: flex; flex-direction: column; }
#casino-grid > .container-brutal > div:first-child:not(.casino-grid) { display: contents; }
#casino-grid > .container-brutal > :not(.casino-grid):not(.section-title):not(.section-subtitle):not(:first-child) { order: 3; }
#casino-grid > .container-brutal > .section-title,
#casino-grid > .container-brutal > div:first-child > .section-title {
  order: 0; align-self: flex-start; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; padding-bottom: 8px; margin-bottom: 10px;
}
#casino-grid > .container-brutal > .casino-grid { order: 1; }
#casino-grid > .container-brutal > .section-subtitle,
#casino-grid > .container-brutal > div:first-child > .section-subtitle { order: 2; margin: 16px 0 0; font-size: 15px; line-height: 1.5; }

/* ---------- Cards: slimmer logo area and spacing (nothing is hidden) ---------- */
#casino-grid .casino-card-logo { height: 78px; padding: 7px 10px; }
#casino-grid .casino-card-logo img { max-height: 62px; width: auto; max-width: 100%; object-fit: contain; }
#casino-grid .casino-card-content { padding: 10px 12px 12px; }
#casino-grid .casino-card-name { margin-bottom: 2px; }
#casino-grid .star-rating { margin-bottom: 6px; }
#casino-grid .casino-card-offer,
#casino-grid .casino-card-payments,
#casino-grid .casino-card-perks { margin-bottom: 8px; }
#casino-grid .casino-card-cta { margin-top: auto; }

/* ---------- Desktop: author and CTA share one row under the hero text (tablets keep them stacked) ---------- */
/* auto + minmax(0,1fr) (2 Nov 2026): with max-content, a long hero description widened column 1 past the container
   (Velobet post: 1,288px track in a 929px hero, sideways scroll). Items spanning a flexible track don't size column 1. */
@media (min-width: 1000px) {
  main:has(> #casino-grid) > .page-hero > .container-brutal > div:not(.provider-hero-card) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center; }
  main:has(> #casino-grid) > .page-hero > .container-brutal > div:not(.provider-hero-card) > * { grid-column: 1 / -1; justify-self: start; }
  main:has(> #casino-grid) > .page-hero > .container-brutal > div:not(.provider-hero-card) > .hero-author { grid-column: 1; }
  main:has(> #casino-grid) > .page-hero > .container-brutal > div:not(.provider-hero-card) > .btn-hero-cta { grid-column: 2; margin-top: 8px !important; }
}

/* ---------- Desktop and tablet: provider logo column no taller than the text beside it ---------- */
@media (min-width: 701px) {
  main:has(> #casino-grid) > .page-hero .provider-hero-logo { align-self: flex-start; }
}

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  main:has(> #casino-grid) > .lp-freshness-note { display: none; }
  main:has(> #casino-grid) > .page-hero .page-hero-description,
  main:has(> #casino-grid) > .page-hero .provider-hero-description { font-size: 14.5px; }
  main:has(> #casino-grid) > .page-hero .lp-reader-sections { display: none; }
  main:has(> #casino-grid) > .page-hero .hero-author img { width: 28px; height: 28px; }
  html body main:has(> #casino-grid) > .page-hero.section-brutal .provider-hero-card .provider-hero-logo { height: 52px !important; max-height: 52px !important; padding: 6px 10px !important; }
  html body main:has(> #casino-grid) > .page-hero.section-brutal .provider-hero-card .provider-hero-logo img { height: 38px !important; max-height: 38px !important; }
  main:has(> #casino-grid) > .page-hero .provider-hero-stats { display: none !important; }
  main:has(> #casino-grid) > .page-hero .provider-hero-meta { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; }
  #casino-grid { padding-top: 14px !important; }
  #casino-grid > .container-brutal > .section-title,
  #casino-grid > .container-brutal > div:first-child > .section-title { font-size: 22px; margin-bottom: 10px; }
  #casino-grid .casino-card-logo { height: 64px; padding: 6px 8px; }
  #casino-grid .casino-card-logo img { max-height: 50px; }
  #casino-grid .casino-card-content { padding: 8px; }
}