/* v177 mobile video follow-up: CSS-only delta over v176b, no desktop/card/template/content changes. */

@media (max-width: 720px) {
  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero,
  html body:not(.admin-private-page) main .bonus-hub-hero.bonus-hub-hero.bonus-hub-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero .no-deposit-hero-copy,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero .no-deposit-hero-copy {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(20px, 6vw, 26px) !important;
    overflow: visible !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero .bonus-hero-summary.bonus-hero-summary.bonus-hero-summary,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero .bonus-hero-summary.bonus-hero-summary.bonus-hero-summary,
  html body:not(.admin-private-page) main .bonus-hub-hero.bonus-hub-hero.bonus-hub-hero .bonus-hero-summary.bonus-hero-summary.bonus-hero-summary,
  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero .bonus-hero-summary.bonus-hero-summary.bonus-hero-summary:is(:hover, :focus, :focus-visible, :focus-within, :active),
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero .bonus-hero-summary.bonus-hero-summary.bonus-hero-summary:is(:hover, :focus, :focus-visible, :focus-within, :active),
  html body:not(.admin-private-page) main .bonus-hub-hero.bonus-hub-hero.bonus-hub-hero .bonus-hero-summary.bonus-hero-summary.bonus-hero-summary:is(:hover, :focus, :focus-visible, :focus-within, :active) {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero .bonus-hero-summary-card.bonus-hero-summary-card.bonus-hero-summary-card,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero .bonus-hero-summary-card.bonus-hero-summary-card.bonus-hero-summary-card,
  html body:not(.admin-private-page) main .bonus-hub-hero.bonus-hub-hero.bonus-hub-hero .bonus-hero-summary-card.bonus-hero-summary-card.bonus-hero-summary-card,
  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero .bonus-hero-summary-card.bonus-hero-summary-card.bonus-hero-summary-card:is(:hover, :focus, :focus-visible, :focus-within, :active),
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero .bonus-hero-summary-card.bonus-hero-summary-card.bonus-hero-summary-card:is(:hover, :focus, :focus-visible, :focus-within, :active),
  html body:not(.admin-private-page) main .bonus-hub-hero.bonus-hub-hero.bonus-hub-hero .bonus-hero-summary-card.bonus-hero-summary-card.bonus-hero-summary-card:is(:hover, :focus, :focus-visible, :focus-within, :active) {
    width: 100% !important;
    min-height: 64px !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    align-items: center !important;
    gap: 2px 10px !important;
    padding: 10px 12px !important;
    overflow: visible !important;
  }

  html body:not(.admin-private-page) main .bonus-hero-summary.bonus-hero-summary .bonus-hero-stat-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 30px !important;
    height: 30px !important;
  }

  html body:not(.admin-private-page) main .bonus-hero-summary.bonus-hero-summary .bonus-hero-summary-card > span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 0.68rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body:not(.admin-private-page) main .bonus-hero-summary.bonus-hero-summary .bonus-hero-summary-card > strong {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(1.35rem, 7vw, 1.65rem) !important;
    line-height: 1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body:not(.admin-private-page) main .bonus-hero-summary.bonus-hero-summary .bonus-hero-summary-card > small {
    display: none !important;
  }

  html body:not(.admin-private-page) main .directory-detail-hero.directory-detail-hero.provider-detail-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: clamp(20px, 6vw, 26px) !important;
    overflow: visible !important;
  }

  html body:not(.admin-private-page) main .provider-detail-hero.provider-detail-hero .directory-detail-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
  }

  html body:not(.admin-private-page) main .provider-detail-hero.provider-detail-hero .directory-detail-logo-card {
    width: min(220px, 68vw) !important;
    min-width: 0 !important;
    height: 118px !important;
    min-height: 118px !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
  }

  html body:not(.admin-private-page) main .provider-detail-hero.provider-detail-hero .directory-detail-title-text {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body:not(.admin-private-page) main .provider-detail-hero.provider-detail-hero .directory-detail-title-text h1 {
    font-size: clamp(2rem, 10vw, 2.55rem) !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere !important;
  }

  html body:not(.admin-private-page) main .provider-detail-hero.provider-detail-hero .directory-detail-title-text p:not(.eyebrow) {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.48 !important;
  }

  html body:not(.admin-private-page) main .provider-detail-hero.provider-detail-hero .directory-detail-actions,
  html body:not(.admin-private-page) main .provider-detail-hero.provider-detail-hero .directory-detail-actions .button {
    width: 100% !important;
  }

  html body:not(.admin-private-page) main .directory-detail-layout.directory-detail-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero,
  html body:not(.admin-private-page) main .bonus-hub-hero.bonus-hub-hero.bonus-hub-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero .bonus-hero-summary.bonus-hero-summary,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero .bonus-hero-summary.bonus-hero-summary,
  html body:not(.admin-private-page) main .bonus-hub-hero.bonus-hub-hero.bonus-hub-hero .bonus-hero-summary.bonus-hero-summary {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero .bonus-hero-summary-card.bonus-hero-summary-card,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero .bonus-hero-summary-card.bonus-hero-summary-card,
  html body:not(.admin-private-page) main .bonus-hub-hero.bonus-hub-hero.bonus-hub-hero .bonus-hero-summary-card.bonus-hero-summary-card {
    height: auto !important;
    min-height: 94px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 520px) {
  html body:not(.admin-private-page) .site-header.site-header {
    gap: 8px !important;
    padding: 8px 12px 10px !important;
  }

  html body:not(.admin-private-page) .brand-logo.brand-logo {
    width: clamp(132px, 38vw, 154px) !important;
    max-height: 44px !important;
  }

  html body:not(.admin-private-page) .header-search input,
  html body:not(.admin-private-page) .csr-header-search input {
    height: 42px !important;
    min-height: 42px !important;
  }

  html body:not(.admin-private-page) .theme-switcher,
  html body:not(.admin-private-page) .nav-menu summary,
  html body:not(.admin-private-page) .language-switcher summary {
    min-height: 42px !important;
    height: 42px !important;
  }

  html body:not(.admin-private-page) nav.secondary-nav.secondary-nav a {
    flex: 0 0 calc(100% / 3) !important;
    min-width: 120px !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 7px 8px !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero .no-deposit-hero-copy h1,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero .no-deposit-hero-copy h1 {
    font-size: clamp(2rem, 9.2vw, 2.5rem) !important;
    line-height: 1.06 !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero.no-deposit-hero .no-deposit-hero-copy > p,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero.bonus-category-hero .no-deposit-hero-copy > p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  html body:not(.admin-private-page) main .bonus-category-offer-grid.bonus-category-offer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  html body:not(.admin-private-page) main .bonus-category-offer-card.bonus-category-offer-card {
    gap: 12px !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  html body:not(.admin-private-page) main .bonus-category-offer-card .bonus-card-detail-disclosure,
  html body:not(.admin-private-page) main .bonus-category-offer-card .bonus-card-condition-disclosure {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body:not(.admin-private-page) main .bonus-category-offer-card .bonus-card-detail-disclosure summary,
  html body:not(.admin-private-page) main .bonus-category-offer-card .bonus-card-condition-disclosure summary {
    justify-content: space-between !important;
    min-height: 44px !important;
    text-align: left !important;
  }

  html body:not(.admin-private-page) main .no-deposit-card-actions.no-deposit-card-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-self: stretch !important;
    gap: 10px !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  html body:not(.admin-private-page) main .no-deposit-card-actions.no-deposit-card-actions .button {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    white-space: normal !important;
  }
}