/* ========================================
   Main Stylesheet - My Events Bridge
   Mobile-First Responsive Design
   ======================================== */

/* CSS Variables */
/* SYNCHRONIZED WITH frontend_v2/src/styles/tokens/index.css */
:root {
  /* ===== Colors (New naming convention) ===== */
  --color-navy: #001f3f;
  --color-green: #007f5f;
  --color-green-dark: #00694c;
  --color-ink: #0f172a;
  --color-muted: #475569;
  --color-hero-blue: #002244;
  --color-section-bg: #f8fafc;
  --color-feature-red: #aa1c3a;
  --color-bg: #ffffff;
  --color-chip: #f1f5f9;
  --color-link: #51a2ff;
  --color-link-hover: #7ab8ff;
  
  /* Dance Style Colors */
  --color-tango: #e11d48;
  --color-fusion: #0891b2;
  --color-salsa: #F97316;
  
  /* Dance Style Tag Colors */
  --color-tag-fusion: #00786F;
  --color-tag-tango: #C10007;
  --color-tag-salsa: #CA3500;
  --color-tag-bachata: #C6005C;
  --color-tag-wcs: #0069A8;
  --color-tag-zouk: #8200DB;
  --color-tag-contact: #497D00;
  
  /* Header Colors */
  --color-header-bg: #000F1A;
  --color-header-text: #FFFFFF;
  --color-header-nav-hover: rgba(255, 255, 255, 0.15);
  --color-header-nav-active-hover: rgba(255, 255, 255, 0.95);
  
  /* Additional Colors */
  --color-text-primary: #0F172B;
  --color-text-secondary: #314158;
  --color-text-muted: rgba(255, 255, 255, 0.9);
  --color-text-muted-light: rgba(255, 255, 255, 0.7);
  --color-text-white: #FFFFFF;
  --color-border-light: rgba(255, 255, 255, 0.2);
  --color-border-lighter: rgba(255, 255, 255, 0.3);
  --color-bg-overlay: rgba(255, 255, 255, 0.1);
  --color-bg-white: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-border-card: #E2E8F0;
  --color-link-turquoise: #009689;
  
  /* Footer Colors */
  --color-footer-text: #ffffff;
  --color-footer-text-muted: #cad5e2;
  --color-footer-text-light: #90a1b9;
  --color-footer-link: #51a2ff;
  --color-footer-divider: #62748e;
  --color-footer-border: #314158;
  
  /* ===== Gradients ===== */
  /* Dance Style Gradients */
  --gradient-tango: linear-gradient(90deg, rgba(251, 44, 54, 1) 0%, rgba(230, 0, 118, 1) 100%);
  --gradient-salsa: linear-gradient(90deg, rgba(255, 105, 0, 1) 0%, rgba(231, 0, 11, 1) 100%);
  --gradient-bachata: linear-gradient(90deg, rgba(246, 51, 154, 1) 0%, rgba(236, 0, 63, 1) 100%);
  --gradient-fusion: linear-gradient(90deg, rgba(0, 184, 219, 1) 0%, rgba(0, 150, 137, 1) 100%);
  --gradient-contact: linear-gradient(90deg, rgba(14, 182, 87, 1) 0%, rgba(0, 130, 54, 1) 100%);
  --gradient-wcs: linear-gradient(90deg, rgba(0, 146, 184, 1) 0%, rgba(20, 71, 230, 1) 100%);
  --gradient-zouk: linear-gradient(90deg, rgba(130, 0, 219, 1) 0%, rgba(67, 45, 215, 1) 100%);
  --gradient-review: linear-gradient(90deg, rgba(253, 199, 0, 1) 0%, rgba(254, 154, 0, 1) 50%, rgba(255, 105, 0, 1) 100%);
  
  /* Banner Gradients */
  --gradient-hero-dark: linear-gradient(135deg, rgba(60, 3, 102, 1) 0%, rgba(30, 26, 77, 1) 50%, rgba(3, 7, 18, 1) 100%);
  --gradient-footer-dark: linear-gradient(135deg, rgba(2, 6, 24, 1) 0%, rgba(30, 26, 77, 1) 50%, rgba(2, 6, 24, 1) 100%);
  
  /* Feature Card Gradients */
  --gradient-purple: linear-gradient(135deg, rgba(173, 70, 255, 1) 0%, rgba(246, 51, 154, 1) 100%);
  --gradient-purple-bar: linear-gradient(90deg, rgba(173, 70, 255, 1) 0%, rgba(246, 51, 154, 1) 100%);
  --gradient-teal: linear-gradient(135deg, rgba(0, 187, 167, 1) 0%, rgba(0, 184, 219, 1) 100%);
  --gradient-teal-bar: linear-gradient(90deg, rgba(0, 187, 167, 1) 0%, rgba(0, 184, 219, 1) 100%);
  --gradient-orange: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgba(246, 51, 154, 1) 100%);
  --gradient-orange-bar: linear-gradient(90deg, rgba(255, 105, 0, 1) 0%, rgba(246, 51, 154, 1) 100%);
  
  /* Blog Card Header Gradients */
  --gradient-blog-tango: linear-gradient(135deg, rgba(251, 44, 54, 1) 0%, rgba(230, 0, 118, 1) 100%);
  --gradient-blog-fusion: linear-gradient(135deg, rgba(0, 184, 219, 1) 0%, rgba(0, 150, 137, 1) 100%);
  --gradient-blog-salsa: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgba(231, 0, 11, 1) 100%);
  --gradient-blog-bachata: linear-gradient(135deg, rgba(246, 51, 154, 1) 0%, rgba(236, 0, 63, 1) 100%);
  --gradient-blog-contact: linear-gradient(135deg, rgba(14, 182, 87, 1) 0%, rgba(0, 130, 54, 1) 100%);
  --gradient-blog-wcs: linear-gradient(135deg, rgba(0, 166, 244, 1) 0%, rgba(25, 60, 184, 1) 100%);
  --gradient-blog-zouk: linear-gradient(135deg, rgba(130, 0, 219, 1) 0%, rgba(67, 45, 215, 1) 100%);
  
  /* Button Gradients */
  --gradient-button-search: linear-gradient(90deg, rgba(0, 211, 242, 1) 0%, rgba(0, 187, 167, 1) 100%);
  --gradient-button-coffee: linear-gradient(90deg, rgba(255, 32, 86, 1) 0%, rgba(246, 51, 154, 1) 100%);
  --gradient-tagline: linear-gradient(90deg, rgba(0, 213, 190, 1) 0%, rgba(194, 122, 255, 1) 50%, rgba(251, 100, 182, 1) 100%);
  
  /* ===== Typography ===== */
  --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: 'Outfit', sans-serif;
  --font-family-brand: 'Alex Brush', cursive;
  --font-family-montserrat: 'Montserrat', sans-serif;
  
  /* Typography Sizes */
  --font-size-hero-title: 60px;
  --font-size-hero-subtitle: 20px;
  --font-size-button: 16px;
  --font-size-footer-heading: 48px;
  --font-size-footer-subheading: 20px;
  --font-size-footer-link: 14px;
  --font-size-footer-tagline: 20px;
  --font-size-button-base: 18px;
  
  /* ===== Layout ===== */
  --container-max-width: 1424px;
  /* Matches header navigation container width (landing_v2/header.css) */
  --container-max-width-header: 1216px;
  --container-padding: 32px;
  --container-padding-wide: 104px;
  --container-padding-mobile: 16px;
  --section-padding: 48px 24px;
  --section-padding-mobile: 48px 16px;

  /* ===== Hero / Banner Layout ===== */
  --hero-banner-min-height: 300px;
  
  /* ===== Spacing Scale ===== */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 33px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --spacing-8: 32px;
  --spacing-3: 12px;
  
  /* ===== Border Radius ===== */
  --radius-sm: 14px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  
  /* ===== Shadows ===== */
  --shadow-header: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-card: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-button-hover: 0 4px 12px rgba(0, 187, 167, 0.4);
  
  /* ===== Z-Index ===== */
  --z-header: 1000;
  --z-dropdown: 999;
  --z-mobile-menu: 1001;
  
  /* ===== Responsive Breakpoints ===== */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1200px;
  
  /* ===== Legacy Variable Names (for backward compatibility) ===== */
  --navy: var(--color-navy);
  --green: var(--color-green);
  --green-dark: var(--color-green-dark);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --hero-blue: var(--color-hero-blue);
  --section-bg: var(--color-section-bg);
  --feature-red: var(--color-feature-red);
  --bg: var(--color-bg);
  --chip: var(--color-chip);
  --link: var(--color-link);
  --link-hover: var(--color-link-hover);
  --tango: var(--color-tango);
  --fusion: var(--color-fusion);
  --salsa: var(--color-salsa);
  --font-base: var(--font-family-base);
  --font-heading: var(--font-family-heading);
  --font-brand: var(--font-family-brand);
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-base);
  line-height: 1.6;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0;
}

h1 {
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 800;
}

h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
}

h3 {
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 600;
}

p {
  line-height: 1.7;
  margin: 12px 0;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--link-hover);
  text-decoration: none;
}

/* Links in content sections (about, terms, privacy) */
.content-section a,
.content-card a,
.content-card__inner a,
.content-card__text a,
.about-section a,
.about-section__card a,
.terms-questions a,
.terms-questions__card a,
.privacy-content a,
.privacy-content__card a {
  color: #009689;
  text-decoration: none;
  transition: color 0.2s ease;
}

.content-section a:hover,
.content-card a:hover,
.content-card__inner a:hover,
.content-card__text a:hover,
.about-section a:hover,
.about-section__card a:hover,
.terms-questions a:hover,
.terms-questions__card a:hover,
.privacy-content a:hover,
.privacy-content__card a:hover {
  color: #33B5A8;
  text-decoration: none;
}

/* Exclude btn-action from content link hover styles */
.content-section .btn-action:hover,
.content-card .btn-action:hover,
.content-card__inner .btn-action:hover,
.about-section .btn-action:hover,
.about-section__card .btn-action:hover,
.terms-questions .btn-action:hover,
.terms-questions__card .btn-action:hover,
.privacy-content .btn-action:hover,
.privacy-content__card .btn-action:hover {
  color: #FFFFFF;
}

/* ========================================
   Shared Content Sections
   Used across: about, terms-of-use, privacy-policy
   ======================================== */

/* Base section with white background */
.content-section {
  padding: 48px 24px;
  background: #FFFFFF;
}

/* Gray background modifier */
.content-section--gray {
  background: #F8FAFC;
}

/* Gradient bar inside card (at top) */
.content-bar {
  height: 8px;
  width: 100%;
  border-radius: 24px 24px 0 0;
}

/* Card inside section */
.content-card {
  max-width: 832px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.content-card__inner {
  padding: 49px;
}

.content-bar--rainbow1 {
  background: linear-gradient(90deg, rgba(251, 44, 54, 1) 0%, rgba(0, 166, 244, 1) 50%, rgba(152, 16, 250, 1) 100%);
}

.content-bar--rainbow2 {
  background: linear-gradient(90deg, rgba(152, 16, 250, 1) 0%, rgba(246, 51, 154, 1) 50%, rgba(0, 187, 167, 1) 100%);
}

.content-card__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1em;
  color: #0F172B;
  margin: 0 0 24px;
}

.content-card__subtitle {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3333333333333333em;
  color: #0F172B;
  margin: 0 0 16px;
}

.content-card__subtitle--spaced {
  margin-top: 32px;
}

.content-card__text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.625em;
  color: #314158;
  margin: 0 0 16px;
}

.content-card__text--no-margin {
  margin: 0;
}

.content-card__text:last-child {
  margin-bottom: 0;
}

/* Content card header with icon */
.content-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

/* Content card title inside header - smaller size */
.content-card__header .content-card__title {
  font-size: 24px;
  line-height: 1.3333333333333333em;
  margin: 0;
}

/* Content card icon base styles */
.content-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.content-card__icon svg {
  width: 28px;
  height: 28px;
}

.content-card__list {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.625em;
  color: #314158;
  margin: 16px 0;
  padding-left: 24px;
}

.content-card__list li {
  margin: 8px 0;
}

/* ===== Quote Box ===== */
/* Shared component for quote/italic text with left accent line */
.quote-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 32px;
}

.quote-box__accent {
  width: 4px;
  background: linear-gradient(180deg, rgba(0, 213, 190, 1) 0%, rgba(0, 211, 242, 1) 50%, rgba(81, 162, 255, 1) 100%);
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
}

.quote-box__text {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 17px;
  font-style: italic;
  line-height: 1.625em;
  color: #1D293D;
  margin: 0;
  flex: 1;
}

/* ========================================
   HERO SECTION
   Mobile-First Approach
   ======================================== */

.hero {
  position: relative;
  min-height: var(--hero-banner-min-height);
  background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(22, 36, 86, 1) 50%, rgba(0, 0, 0, 1) 100%);
  overflow: hidden;
  padding: 24px 0 0;
  display: flex;
  justify-content: center;
}

/* Blur backgrounds container - hidden on mobile */
.hero__blur-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}

.hero__blur {
  position: absolute;
  border-radius: 50%;
  filter: blur(128px);
}

.hero__blur--1 {
  width: 800px;
  height: 800px;
  background: linear-gradient(135deg, rgba(0, 150, 137, 0.2) 0%, rgba(0, 146, 184, 0.15) 50%, rgba(0, 0, 0, 0) 100%);
  top: -305.25px;
  left: -356px;
}

.hero__blur--2 {
  width: 900px;
  height: 900px;
  background: linear-gradient(225deg, rgba(152, 16, 250, 0.25) 0%, rgba(79, 57, 246, 0.18) 50%, rgba(0, 0, 0, 0) 100%);
  top: 152.63px;
  left: 880px;
}

.hero__blur--3 {
  width: 700px;
  height: 700px;
  background: linear-gradient(45deg, rgba(152, 16, 250, 0.18) 0%, rgba(127, 34, 254, 0.12) 50%, rgba(0, 0, 0, 0) 100%);
  top: 215.75px;
  left: 474.66px;
}

.hero__blur--4 {
  width: 600px;
  height: 600px;
  background: linear-gradient(-45deg, rgba(0, 150, 137, 0.18) 0%, rgba(0, 117, 149, 0.12) 50%, rgba(0, 0, 0, 0) 100%);
  top: 203.49px;
  left: 712px;
}

.hero__blur--5 {
  width: 700px;
  height: 700px;
  background: linear-gradient(180deg, rgba(130, 0, 219, 0.2) 0%, rgba(67, 45, 215, 0.15) 50%, rgba(0, 0, 0, 0) 100%);
  top: 0;
  left: 249.34px;
}

.hero__blur--6 {
  width: 650px;
  height: 650px;
  background: linear-gradient(45deg, rgba(0, 120, 111, 0.16) 0%, rgba(130, 0, 219, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
  top: -192.13px;
  left: 356px;
}

.hero__container {
  position: relative;
  width: 100%;
  max-width: var(--container-max-width-header);
  /* Mobile: small horizontal padding */
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  z-index: 1;
}

.hero__content {
  width: 100%;
  max-width: 100%;
}

/* Home-specific tweaks (typography comes from shared hero-banner rules below) */
.hero--home .hero__title--highlight {
  display: block;
  color: #00d5be;
  margin-top: 8px;
}

.hero--home .hero__subtitle {
  margin: 18px 0 24px;
}

/* Primary Button Style */
.btn {
  background: linear-gradient(90deg, rgba(0, 213, 190, 1) 0%, rgba(0, 211, 242, 1) 100%);
  color: var(--color-text-primary);
  width: auto;
  min-width: 200px;
  height: 56px;
  padding: 0 32px;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.43em;
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  transform: scale(1.05);
  box-shadow: 0px 30px 60px -12px rgba(0, 0, 0, 0.35);
  filter: brightness(1.1);
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Home hero: give text a bit more breathing room above image (mobile). */
.hero--home .hero__cta {
  margin-bottom: 20px;
}

/* Secondary button style */
.btn.secondary {
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  color: #ffffff;
}

.btn.secondary:hover {
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
}

/* ========================================
   Action Button - Shared CTA Button Styles
   Used on: Privacy Policy, Terms of Use, About pages
   ======================================== */
.btn-action,
.terms-questions .btn-action,
.terms-questions__card .btn-action,
.about-section .btn-action,
.about-section__card .btn-action,
.privacy-questions .btn-action,
.privacy-questions__card .btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.43;
  color: #FFFFFF;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, filter 0.3s ease;
  cursor: pointer;
  border: none;
  will-change: transform;
}

/* Ensure all text content inside button uses same font and always white */
.btn-action,
.btn-action span {
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.43;
  color: #FFFFFF;
}

.btn-action:hover,
.terms-questions .btn-action:hover,
.terms-questions__card .btn-action:hover,
.about-section .btn-action:hover,
.about-section__card .btn-action:hover,
.privacy-questions .btn-action:hover,
.privacy-questions__card .btn-action:hover {
  transform: scale(1.05);
  box-shadow: 0px 30px 60px -12px rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  text-decoration: none;
}

.btn-action:hover span {
  color: #FFFFFF;
}

.btn-action:visited,
.btn-action:active,
.btn-action:focus {
  color: #FFFFFF;
  text-decoration: none;
}

/* Icons inside button */
.btn-action svg,
.btn-action img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-action--teal {
  background: linear-gradient(90deg, rgba(0, 213, 190, 1) 0%, rgba(0, 211, 242, 1) 100%);
}

.btn-action--teal:hover {
  filter: brightness(1.1);
}

.btn-action--pink {
  background: linear-gradient(90deg, rgba(255, 32, 86, 1) 0%, rgba(246, 51, 154, 1) 100%);
}

.btn-action--pink:hover {
  background: linear-gradient(90deg, rgba(230, 0, 60, 1) 0%, rgba(220, 20, 140, 1) 100%);
}

/* Hero button uses primary button style - no additional styles needed */

.hero__image {
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hero Tablet Styles */
@media (min-width: 768px) {
  .hero {
    min-height: 500px;
    padding: 48px 0;
  }

  .hero__blur-container {
    display: block;
    height: 500px;
  }

  .hero__container {
    flex-direction: row;
    text-align: left;
    /* Tablet+ : no horizontal padding */
    padding-left: 0;
    padding-right: 0;
    gap: 40px;
  }

  .hero__content {
    flex: 1.35;
    max-width: 660px;
  }

  .hero--home .hero__title--highlight {
    display: inline;
    margin-left: 8px;
  }

  .btn {
    width: 226.99px;
    height: 64px;
    font-size: 18px;
    padding: 0 47px;
  }

  .hero--home .hero__cta {
    margin-bottom: 0;
  }

  .hero__image {
    flex: 0.65;
    width: 320px;
    height: 320px;
  }
}

/* Hero Desktop Styles */
@media (min-width: 1024px) {
  .hero {
    min-height: 610.5px;
  }

  .hero__blur-container {
    width: 1424px;
    height: 610.5px;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero__container {
    gap: 80px;
  }

  .hero__image {
    width: 420px;
    height: 420px;
  }
}

/* ========================================
   DANCE STYLES SECTION
   Mobile-First Approach
   ======================================== */

.dance-styles {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 50%, rgba(255, 255, 255, 1) 100%);
  padding: 35px 20px;
}

.dance-styles__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dance-styles__title {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1em;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0;
}

/* ========================================
   Common Dance Filter Buttons Styles
   ======================================== */

/* Common container styles for dance filter buttons */
.dance-styles__buttons,
.blog-page-filters__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* Common button styles for dance filter buttons */
.dance-styles__button,
.blog-page-filters__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5em;
  color: var(--color-text-white);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.dance-styles__button:hover,
.blog-page-filters__button:hover {
  transform: translateY(-2px);
  box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.15), 0px 6px 12px -1px rgba(0, 0, 0, 0.15);
  filter: brightness(1.1);
  color: var(--color-text-white);
  text-decoration: none;
}

/* Dance style specific gradients using CSS variables */
.dance-styles__button--tango {
  background: var(--gradient-tango);
}

.dance-styles__button--salsa {
  background: var(--gradient-salsa);
}

.dance-styles__button--bachata {
  background: var(--gradient-bachata);
}

.dance-styles__button--fusion {
  background: var(--gradient-fusion);
}

.dance-styles__button--contact {
  background: var(--gradient-contact);
}

.dance-styles__button--wcs {
  background: var(--gradient-wcs);
}

.dance-styles__button--zouk {
  background: var(--gradient-zouk);
}

/* Dance Styles Tablet Styles */
@media (min-width: 768px) {
  .dance-styles {
    padding: 64px 72px 0;
  }

  .dance-styles__container {
    padding: 0 32px;
    gap: 48px;
  }

  .dance-styles__title {
    font-size: 48px;
  }

  /* Common dance filter buttons responsive */
  .dance-styles__buttons,
  .blog-page-filters__buttons {
    gap: 16px;
  }

  .dance-styles__button,
  .blog-page-filters__button {
    padding: 12px 24px;
    font-size: 16px;
  }
}

/* Dance Styles Desktop Styles */
@media (min-width: 1024px) {
  .dance-styles {
    padding: 64px 72px 0;
  }

  .dance-styles__container {
    padding: 0 var(--container-padding-wide);
  }
}

/* ========================================
   FEATURES SECTION
   Mobile-First Approach
   ======================================== */

.features {
  background: linear-gradient(180deg, rgba(248, 250, 252, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(248, 250, 252, 1) 100%);
  padding: 30px 0;
}

.features__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.features__title {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1em;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0;
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.feature {
  background: var(--color-bg-white);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feature__icon {
  width: 80px;
  height: 80px;
  margin: 32px auto 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.feature__icon--purple {
  background: var(--gradient-purple);
}

.feature__icon--teal {
  background: var(--gradient-teal);
}

.feature__icon--orange {
  background: var(--gradient-orange);
}

.feature__icon svg {
  width: 40px;
  height: 40px;
}

.feature__heading {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3333333333333333em;
  text-align: center;
  color: var(--color-text-primary);
  margin: 24px 32px 0;
}

.feature__text {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.625em;
  text-align: center;
  color: #45556c;
  margin: 12px 32px 0;
  flex-grow: 1;
  padding-bottom: 32px;
}

/* Feature bottom color bars */
.feature::after {
  content: '';
  display: block;
  width: 100%;
  height: 8px;
}

.feature--purple::after {
  background: var(--gradient-purple-bar);
}

.feature--teal::after {
  background: var(--gradient-teal-bar);
}

.feature--orange::after {
  background: var(--gradient-orange-bar);
}

/* Features Tablet Styles */
@media (min-width: 768px) {
  .features {
    padding: 64px 72px 0;
  }

  .features__container {
    padding: 0 32px;
    gap: 48px;
  }

  .features__title {
    font-size: 48px;
  }

  .features__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

/* Features Desktop Styles */
@media (min-width: 1024px) {
  .features__container {
    padding: 0 var(--container-padding-wide);
  }
}

/* ========================================
   BLOG STORIES SECTION
   Mobile-First Approach
   ======================================== */

.blog-stories {
  background: linear-gradient(135deg, rgba(241, 245, 249, 1) 0%, rgba(248, 250, 252, 1) 50%, rgba(241, 245, 249, 1) 100%);
  padding: 48px var(--container-padding-mobile);
}

.blog-stories__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blog-stories__header {
  display: contents;
}

.blog-stories__title {
  order: 1;
}

.blog-stories__view-all {
  order: 3;
}

.blog-stories__grid {
  order: 2;
}

.blog-stories__title {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1em;
  color: var(--color-text-primary);
  margin: 0;
  order: 1;
}

.blog-stories__view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--color-bg-white);
  border: 1px solid #cad5e2;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.43em;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: all 0.3s ease;
  order: 3;
  align-self: center;
  margin-top: 8px;
}

.blog-stories__view-all:hover {
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.5) 0%, rgba(203, 213, 225, 0.3) 100%);
  border-color: #94a3b8;
  color: var(--color-text-primary);
  text-decoration: none;
}

.blog-stories__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  order: 2;
}

/* Blog Cards */
.blog-card {
  background: var(--color-bg-white);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.blog-card__header {
  display: flex;
  align-items: center;
  padding: 16px;
}

.blog-card--tango .blog-card__header {
  background: var(--gradient-blog-tango);
}

.blog-card--fusion .blog-card__header {
  background: var(--gradient-blog-fusion);
}

.blog-card--salsa .blog-card__header {
  background: var(--gradient-blog-salsa);
}

.blog-card--bachata .blog-card__header {
  background: var(--gradient-blog-bachata);
}

.blog-card--contact .blog-card__header {
  background: var(--gradient-blog-contact);
}

.blog-card--wcs .blog-card__header {
  background: var(--gradient-blog-wcs);
}

.blog-card--zouk .blog-card__header {
  background: var(--gradient-blog-zouk);
}

.blog-card__category {
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3333312273025513em;
}

.blog-card--tango .blog-card__category {
  color: var(--color-tag-tango);
  background: #FFE2E2;
}

.blog-card--fusion .blog-card__category {
  color: var(--color-tag-fusion);
  background: #CBFBF1;
}

.blog-card--salsa .blog-card__category {
  color: var(--color-tag-salsa);
  background: #FFEDD4;
}

.blog-card--bachata .blog-card__category {
  color: var(--color-tag-bachata);
  background: #FCE7F3;
}

.blog-card--contact .blog-card__category {
  color: var(--color-tag-contact);
  background: #ECFCCA;
}

.blog-card--wcs .blog-card__category {
  color: var(--color-tag-wcs);
  background: #DFF2FE;
}

.blog-card--zouk .blog-card__category {
  color: var(--color-tag-zouk);
  background: #F3E8FF;
}

.blog-card__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
}

.blog-card__heading {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4em;
  color: var(--color-text-primary);
  margin: 0;
  min-height: 56px;
}

.blog-card__heading-link,
.blog-card__text-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Clamp blog card titles to 3 lines with ellipsis */
.blog-card__heading-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.blog-card__heading-link:hover,
.blog-card__heading-link:focus,
.blog-card__text-link:hover,
.blog-card__text-link:focus {
  color: inherit;
  text-decoration: none;
}

.blog-card__text {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43em;
  color: var(--color-text-secondary);
  margin: 0;
  flex-grow: 1;
}

.blog-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.blog-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43em;
  color: #45556c;
}

.blog-card__location svg {
  flex-shrink: 0;
}

.blog-card__read-more {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43em;
  text-align: center;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-card__read-more:hover {
  text-decoration: none;
}

.blog-card__read-more--tango {
  color: var(--color-tag-tango);
}

.blog-card__read-more--tango:hover {
  color: #e63946;
}

.blog-card__read-more--fusion {
  color: var(--color-tag-fusion);
}

.blog-card__read-more--fusion:hover {
  color: #33b5a8;
}

.blog-card__read-more--salsa {
  color: var(--color-tag-salsa);
}

.blog-card__read-more--salsa:hover {
  color: #e63946;
}

.blog-card__read-more--bachata {
  color: var(--color-tag-bachata);
}

.blog-card__read-more--bachata:hover {
  color: #e6395f;
}

.blog-card__read-more--wcs {
  color: var(--color-tag-wcs);
}

.blog-card__read-more--wcs:hover {
  color: #3399cc;
}

.blog-card__read-more--zouk {
  color: var(--color-tag-zouk);
}

.blog-card__read-more--zouk:hover {
  color: #9966cc;
}

.blog-card__read-more--contact {
  color: var(--color-tag-contact);
}

.blog-card__read-more--contact:hover {
  color: #33cc66;
}

/* Blog Stories Tablet Styles */
@media (min-width: 768px) {
  .blog-stories {
    padding: 80px 72px 0;
  }

  .blog-stories__container {
    padding: 0 32px;
    gap: 48px;
  }

  .blog-stories__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    order: 1;
  }

  .blog-stories__title {
    order: 0;
  }

  .blog-stories__view-all {
    order: 0;
    align-self: auto;
    margin-top: 0;
  }

  .blog-stories__title {
    font-size: 48px;
  }

  .blog-stories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    order: 2;
    margin-bottom: 48px;
  }
}

/* Blog Stories Desktop Styles */
@media (min-width: 1024px) {
  .blog-stories__container {
    padding: 0 var(--container-padding-wide);
  }

  .blog-stories__grid {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 48px;
  }
}

/* Blog Post Styles */
.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

.meta {
  color: var(--muted);
  margin: 6px 0 18px;
  font-size: 14px;
}

.tag {
  display: inline-block;
  font-size: 12px;
  padding: 4px 10px;
  background: var(--chip);
  border-radius: 999px;
  margin-right: 6px;
  color: #7f1d1d;
  border: 1px solid #fee2e2;
}

.callout {
  background: var(--chip);
  padding: 14px 16px;
  border-radius: 10px;
  margin: 16px 0;
}

.buttons {
  margin: 20px 0;
}

.buttons a {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  margin-right: 10px;
  font-weight: 700;
}

.buttons a:hover {
  opacity: 0.92;
  text-decoration: none;
}

/* ========================================
   FOOTER SECTION
   Mobile-First Approach
   ======================================== */
.site-footer {
  background: var(--gradient-footer-dark);
  padding: 40px 0 0;
  min-height: auto;
}

.site-footer__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Coffee Icon */
.site-footer__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
}

.site-footer__icon svg {
  width: 100%;
  height: 100%;
}

/* Heading */
.site-footer__heading {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: 36px;
  line-height: 1em;
  color: var(--color-text-white);
  margin: 0 0 12px;
}

/* Subheading */
.site-footer__subheading {
  font-family: var(--font-family-montserrat);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.4em;
  color: var(--color-footer-text-muted);
  margin: 0 0 24px;
}

/* Buy Me a Coffee Button */
.site-footer__coffee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--gradient-button-coffee);
  border-radius: var(--radius-sm);
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.43em;
  color: var(--color-text-white);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  margin-bottom: 40px;
}

.site-footer__coffee-btn:hover {
  transform: scale(1.05);
  box-shadow: 0px 30px 60px -12px rgba(0, 0, 0, 0.35);
  background: linear-gradient(90deg, rgba(230, 0, 60, 1) 0%, rgba(220, 20, 140, 1) 100%);
  color: var(--color-text-white);
  text-decoration: none;
}

.site-footer__coffee-btn:visited,
.site-footer__coffee-btn:active,
.site-footer__coffee-btn:focus {
  color: var(--color-text-white);
  text-decoration: none;
}

.site-footer__coffee-btn svg {
  width: 20px;
  height: 20px;
}

/* Bottom Section */
.site-footer__bottom {
  width: 100%;
  max-width: 832px;
  border-top: 1px solid var(--color-footer-border);
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.site-footer__bottom-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.site-footer__copyright {
  font-family: var(--font-family-montserrat);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.43em;
  color: var(--color-footer-text-light);
  margin: 0;
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer__link {
  font-family: var(--font-family-montserrat);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.43em;
  color: var(--color-footer-link);
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer__link:hover {
  color: #7ab8ff;
  text-decoration: none;
}

.site-footer__divider {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43em;
  color: var(--color-footer-divider);
}

.site-footer__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43em;
  letter-spacing: 2.5%;
  text-transform: uppercase;
  color: var(--color-footer-text-muted);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.site-footer__contact:hover {
  color: var(--color-text-white);
  text-decoration: none;
}

.site-footer__contact:hover svg {
  transform: scale(1.1);
}

.site-footer__contact svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

/* Tagline with gradient text */
.site-footer__tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
  background: var(--gradient-tagline);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Footer Tablet Styles */
@media (min-width: 768px) {
  .site-footer {
    padding: 64px 0 0;
    min-height: auto;
  }

  .site-footer__container {
    padding: 0 48px;
  }

  .site-footer__heading {
    font-size: 48px;
  }

  .site-footer__subheading {
    font-size: 20px;
  }

  .site-footer__coffee-btn {
    font-size: 18px;
    padding: 18px 32px;
    margin-bottom: 48px;
  }

  .site-footer__bottom {
    padding: 49px 0 40px;
    gap: 40px;
  }

  .site-footer__bottom-row {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .site-footer__legal {
    flex-direction: row;
  }
}

/* Footer Desktop Styles */
@media (min-width: 1024px) {
  .site-footer__container {
    padding: 0 var(--container-padding-wide);
  }
}

/* ========================================
   Blog Page Styles
   ======================================== */

/* Blog Page Hero Banner */
/* ========================================
   Common Hero Banner Styles
   ======================================== */

/* Base hero banner styles - used by all page banners */
/* ========================================
   Common Hero Typography Base Styles
   ======================================== */

/* Base typography styles shared by all hero sections */
.hero__title,
.hero-banner__title {
  font-family: var(--font-family-montserrat);
  font-weight: 300;
  color: var(--color-text-white);
  margin: 0;
}

.hero__subtitle,
.hero-banner__subtitle {
  font-family: var(--font-family-montserrat);
  font-weight: 300;
  margin: 0;
}

/* ========================================
   Common Hero Banner Styles
   ======================================== */

.hero-banner {
  /* Mobile-first: consistent banner skeleton for most pages */
  min-height: var(--hero-banner-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 48px 0;
  text-align: center;
  background: var(--hero-banner-bg, var(--gradient-hero-dark));
}

/* Mobile: small horizontal inset for banner blocks (except home, which uses .hero). */
@media (max-width: 768px) {
  .hero-banner {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
}

.hero-banner__container {
  width: 100%;
  max-width: var(--container-max-width-header);
  margin: 0 auto;
  /* Desktop-first: wide padding by default */
  padding: 0 var(--container-padding-wide);
  box-sizing: border-box;
}

.hero-banner__content {
  width: 100%;
}

.hero-banner--left {
  text-align: left;
}

@media (max-width: 1200px) {
  .hero-banner__container {
    padding: 0 var(--container-padding);
  }
}

@media (max-width: 768px) {
  .hero-banner__container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Hero banner specific typography sizes */
.hero-banner__title,
.hero--home .hero__title {
  /* Desktop-first */
  font-size: 60px;
  line-height: 1.25em;
  margin: 0 0 24px 0;
}

.hero-banner__subtitle,
.hero--home .hero__subtitle {
  /* Desktop-first */
  font-size: 20px;
  line-height: 1.625em;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 24px 0;
}

@media (max-width: 768px) {
  .hero-banner__title,
  .hero--home .hero__title {
    font-size: 36px;
    line-height: 1.15em;
  }

  .hero-banner__subtitle,
  .hero--home .hero__subtitle {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .hero-banner__title,
  .hero--home .hero__title {
    font-size: 32px;
  }
}

.hero-banner__date {
  font-family: var(--font-family-montserrat);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5em;
  color: var(--color-text-white);
  margin: 0;
}

.hero-banner__date span {
  color: rgba(255, 255, 255, 0.8);
}

/* Blog page hero - uses common hero-banner styles, only specific styles here */
.blog-page-hero {
  --hero-banner-bg: var(--gradient-hero-dark);
}

/* Blog page hero uses the shared banner container */

/* Override hero-banner__content for blog page specific layout */
.blog-page-hero .hero-banner__content {
  padding: 32px 0;
  min-height: 140px;
  margin: 0 auto;
  text-align: center;
}

/* Override hero-banner__subtitle for blog page specific color */
.blog-page-hero .hero-banner__subtitle {
  color: var(--color-text-muted);
  max-width: 768px;
  margin: 0 auto;
}

/* Blog Page Content Section */
.blog-page-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 64px var(--container-padding-mobile) 0;
  width: 100%;
  box-sizing: border-box;
}

/* Blog Cards Grid */
.blog-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}

.blog-page-grid .blog-card {
  width: 100%;
}


/* Pagination */
.blog-page-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 48px 0;
}

.blog-page-pagination__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-page-pagination__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-bg-white);
  border: 2px solid #cad5e2;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s ease;
}

.blog-page-pagination__button:hover:not(:disabled) {
  border-color: var(--color-text-primary);
}

.blog-page-pagination__button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.blog-page-pagination__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-page-pagination__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
}

.blog-page-pagination__dot--active {
  background: var(--gradient-button-search);
  width: 24px;
}

.blog-page-pagination__text {
  font-family: var(--font-family-montserrat);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4285714285714286em;
  color: #62748e;
  margin: 0;
}

/* ===== Empty State (shared: events/blogs) ===== */
.events-empty {
  padding: 100px 0 96px;
  margin: 0;
  background: #FFFFFF;
}

.events-empty__inner {
  width: 100%;
  max-width: 896px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}

.events-empty__eyebrow {
  margin: 0 0 16px;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #90A1B9;
}

.events-empty__title {
  margin: 0 0 24px;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 72px;
  line-height: 72px;
  color: #0F172B;
  text-align: center;
}

.events-empty__text {
  margin: 0 auto 40px;
  max-width: 672px;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 32px;
  color: #45556C;
  text-align: center;
}

.events-empty__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 68px;
  align-items: center;
}

.events-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border-radius: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
}

.events-empty__btn svg {
  flex: 0 0 auto;
  display: block;
}

.events-empty__btn--primary {
  width: 213px;
  height: 68px;
  background: linear-gradient(90deg, #AD46FF 0%, #F6339A 100%);
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-radius: 14px;
  color: #FFFFFF;
}

.events-empty__btn--primary:hover {
  transform: scale(1.02);
  filter: brightness(1.06);
}

@media (max-width: 768px) {
  .events-empty {
    padding: 64px 0 56px;
  }

  .events-empty__title {
    font-size: 44px;
    line-height: 44px;
  }

  .events-empty__text {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 28px;
    padding: 0 8px;
  }

  .events-empty__btn--primary {
    width: 100%;
    max-width: 320px;
  }
}

/* Dance Style Filters */
.blog-page-filters {
  background: var(--color-bg-white);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 33px;
  margin: 48px 0;
}

.blog-page-filters__title {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2em;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0 0 24px;
}

/* Blog page filters - uses common dance filter button styles */
/* Common styles are defined above in "Common Dance Filter Buttons Styles" */

.blog-page-filters__button--active {
  transform: translateY(-2px);
  box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.2), 0px 6px 12px -1px rgba(0, 0, 0, 0.2);
  border: 2px solid var(--color-text-white);
  filter: brightness(1.1);
}

.blog-page-filters__button--tango {
  background: var(--gradient-blog-tango);
}

.blog-page-filters__button--fusion {
  background: var(--gradient-blog-fusion);
}

.blog-page-filters__button--salsa {
  background: var(--gradient-blog-salsa);
}

.blog-page-filters__button--contact {
  background: var(--gradient-blog-contact);
}

.blog-page-filters__button--bachata {
  background: var(--gradient-blog-bachata);
}

.blog-page-filters__button--wcs {
  background: var(--gradient-blog-wcs);
}

.blog-page-filters__button--zouk {
  background: var(--gradient-blog-zouk);
}

/* Blog Page Desktop Styles */
@media (min-width: 1024px) {
  .blog-page-content {
    padding: 64px var(--container-padding-wide) 0;
  }
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .blog-page-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .blog-page-content {
    padding: 48px var(--container-padding-mobile) 0;
  }

  .blog-page-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .blog-page-filters {
    padding: 24px var(--container-padding-mobile);
  }

  .blog-page-filters__title {
    font-size: 24px;
  }

  /* Common dance filter buttons responsive styles are defined above */
}