/* Hero sections — bettingguides.co.uk
   Each page has a unique cinematic background image
   with dark overlay for text readability */

/* Base hero styles shared by all */
.hero, .hero-compact { color: #ffffff; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1B2D4F; }
.hero::before, .hero-compact::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(27, 45, 79, 0.85) 0%, rgba(13, 26, 46, 0.75) 100%); pointer-events: none; }
.hero::after, .hero-compact::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #E8A838; }

/* Homepage hero — tallest */
.hero { padding: 56px 0 64px 0; }
.hero .hero-content { position: relative; z-index: 1; max-width: 700px; }
.hero .hero-heading { font-size: 34px; font-weight: 800; line-height: 1.1; margin-bottom: 20px; color: #ffffff; letter-spacing: -0.5px; }
.hero .hero-heading span { color: #E8A838; }
.hero .hero-text { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); margin-bottom: 28px; }
.hero .hero-cta { display: inline-flex; align-items: center; gap: 10px; background: #E8A838; color: #1a1a1a; font-size: 13px; font-weight: 800; padding: 14px 32px; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; transition: background 0.2s, transform 0.15s; position: relative; z-index: 1; border-radius: 4px; }
.hero .hero-cta:hover { background: #f0b846; transform: translateY(-1px); color: #1a1a1a; }
.hero .hero-cta svg { width: 14px; height: 14px; }

/* Sub-page hero */
.hero-compact { padding: 40px 0 44px 0; }
.hero-compact .container { position: relative; z-index: 1; }
.hero-compact .hero-heading, .hero-compact h1 { font-size: 30px; font-weight: 800; margin-bottom: 10px; color: #ffffff; letter-spacing: -0.3px; }
.hero-compact .hero-text, .hero-compact p { color: rgba(255, 255, 255, 0.8); font-size: 15px; margin-bottom: 0; }

/* Per-page background images */
.hero-home { background-image: url('/wp-content/uploads/2026/bettingguides/hero-home.jpg'); }
.hero-football { background-image: url('/wp-content/uploads/2026/bettingguides/hero-football.jpg'); }
.hero-horse-racing { background-image: url('/wp-content/uploads/2026/bettingguides/hero-horse-racing.jpg'); }
.hero-tennis { background-image: url('/wp-content/uploads/2026/bettingguides/hero-tennis.jpg'); }
.hero-cricket { background-image: url('/wp-content/uploads/2026/bettingguides/hero-cricket.jpg'); }
.hero-f1 { background-image: url('/wp-content/uploads/2026/bettingguides/hero-f1.jpg'); }
.hero-esports { background-image: url('/wp-content/uploads/2026/bettingguides/hero-esports.jpg'); }
.hero-darts { background-image: url('/wp-content/uploads/2026/bettingguides/hero-darts.jpg'); }
.hero-odds { background-image: url('/wp-content/uploads/2026/bettingguides/hero-odds.jpg'); }
.hero-inplay { background-image: url('/wp-content/uploads/2026/bettingguides/hero-inplay.jpg'); }
.hero-betbuilder { background-image: url('/wp-content/uploads/2026/bettingguides/hero-betbuilder.jpg'); }
.hero-asian { background-image: url('/wp-content/uploads/2026/bettingguides/hero-asian.jpg'); }
.hero-responsible { background-image: url('/wp-content/uploads/2026/bettingguides/hero-responsible.jpg'); }

@media (min-width: 768px) {
  .hero { padding: 72px 0 80px 0; }
  .hero .hero-heading { font-size: 46px; }
  .hero .hero-text { font-size: 18px; }
  .hero-compact { padding: 52px 0 56px 0; }
  .hero-compact .hero-heading, .hero-compact h1 { font-size: 38px; }
  .hero-compact .hero-text, .hero-compact p { font-size: 16px; }
}
@media (min-width: 1024px) {
  .hero { padding: 88px 0 96px 0; }
  .hero .hero-heading { font-size: 56px; letter-spacing: -1px; }
  .hero-compact { padding: 60px 0 64px 0; }
  .hero-compact .hero-heading, .hero-compact h1 { font-size: 44px; }
}