/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Child theme for Hello Elementor - Pixel Perfect Pioneer College Redesign
Author: Pioneer College Perth
Author URI: https://pioneercollege.edu.au/
Template: hello-elementor
Version: 2.0.2
Text Domain: hello-elementor-child
*/

/* Google Fonts: Inter for Body, Oswald for Headings and Tags */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oswald:wght@400;500;600;700&display=swap');

/* ==========================================================================
   GLOBAL TYPOGRAPHY (Inter for Body, Oswald for Headings & Tags)
   ========================================================================== */

/* 1. Global Body Typography: Inter */
html,
body,
input,
select,
textarea,
button,
a,
table,
.font-sans,
.pioneer-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Reset Hello Elementor default styles so Tailwind & custom styles govern cleanly */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  border: none;
  padding: 0;
  font: inherit;
  border-radius: 0;
  white-space: normal;
  text-align: inherit;
  line-height: inherit;
  transition: all 0.2s ease-in-out;
}

button:focus,
[type="button"]:focus,
[type="submit"]:focus {
  box-shadow: none;
  outline: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

/* 2. Primary Headings & Display Typography: Oswald */
h1,
h2,
.font-display:not(h3):not(h4),
.font-heading:not(h3):not(h4),
.heading-oswald {
  margin-block-start: 0;
  margin-block-end: 0;
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

/* 3. H3 Subheadings & Card Titles: Harmonized with Body Font (Inter) & Scaled Proportionally */
h3,
h3.font-display,
.course-card h3,
#coursesGrid h3,
article h3,
section h3 {
  margin-block-start: 0;
  margin-block-end: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

@media (min-width: 640px) {

  #coursesGrid h3,
  .course-card h3 {
    font-size: 24px !important;
  }
}

/* Modal and highlight H3 titles */
#detailModalTitle,
h3.text-2xl,
h3.text-xl {
  font-size: 26px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

/* Feature grid and step card H3 titles */
.why-pioneer-item h3,
.step-card h3,
.faq-item h3 {
  font-size: 20px !important;
  line-height: 1.4 !important;
}

h4,
h5,
h6 {
  margin-block-start: 0;
  margin-block-end: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
}

/* 3. Tags & Badges Typography: Oswald (maintains exact font sizes and weights) */
.pioneer-tag,
.font-tag,
.tag-oswald,
.badge,
[class*="badge"],
.aqf-badge,
.step-badge,
.faculty-tag,
.course-tag,
.testimonial-bubble,
.testimonial-dot,
.hero-prebadge,
#heroSliderCount,
#heroSliderBadge,
/* Corner badges on course cards (e.g., AQF Level 5, 360 Hrs Placement) */
span.absolute.top-3.left-3,
span.absolute.bottom-2\.5.right-3,
/* Admission Step badges (STEP 01, STEP 02, etc.) */
span[class*="uppercase"][class*="tracking-wider"],
/* Hero badge and pill badges */
div.inline-flex[class*="tracking-wide"],
div.inline-flex[class*="rounded-full"],
/* Faculty category line e.g. BSB50420 • Leadership */
div.flex.items-center.gap-1\.5.text-xs.font-bold,
div.flex.items-center.gap-1\.5.text-\[14px\].font-bold,
/* Category chips and pill tags */
.course-category-tag,
.pathway-btn,
.course-tab-btn,
#admTabIntl,
#admTabDom,
/* 40% Discount tag & topbar accreditation */
span[class*="bg-pioneer-600"][class*="text-\[11px\]"],
div[class*="bg-pioneer-800"][class*="border-b"],
#openSeoInspectorBtn {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

p {
  margin-block-start: 0;
  margin-block-end: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

/* Typography Scale: Minimum 18px for ALL body text & paragraphs (Inter) */
body,
p,
p.text-sm,
p.text-xs,
p.text-base,
article p,
section p,
.pioneer-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

/* 14px for smaller text (badges, meta with icons, tags, pills, table subtexts, labels) */
small,
span.text-xs,
span.text-\[10px\],
span.text-\[11px\],
span.text-\[12px\],
span.text-\[13px\],
span.text-sm,
div.text-xs,
div.text-\[10px\],
div.text-\[11px\],
div.text-\[12px\],
div.text-\[13px\],
div.text-sm,
label,
.pioneer-small-text {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Desktop Navigation display: No hidden class on desktop */
@media (min-width: 1024px) {

  header nav,
  .pioneer-desktop-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1023px) {
  .pioneer-desktop-nav {
    display: none !important;
  }
}

/* WordPress Dashicons sizing & alignment */
.dashicons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* Ensure Elementor containers don't inject unwanted side margins or paddings */
.elementor-section.elementor-section-boxed>.elementor-container,
.e-con-boxed>.e-con-inner {
  max-width: 100% !important;
}

.e-con {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
}

/* Reset search inputs to prevent browser/WordPress default borders and outlines */
#heroCourseSearchInput,
#faqSearchInput,
.pioneer-search-input,
.pioneer-search-input:focus,
.pioneer-search-input:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 0 4px !important;
}

/* Three-Level Menu Hover Flyout Styles */
.pioneer-menu-item {
  position: relative;
}

.pioneer-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease-in-out;
  z-index: 50;
}

.pioneer-menu-item:hover>.pioneer-dropdown,
.pioneer-menu-item:focus-within>.pioneer-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pioneer-has-sub {
  position: relative;
}

.pioneer-sub-flyout {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 0.5rem;
  min-width: 290px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: all 0.2s ease-in-out;
  z-index: 60;
}

.pioneer-has-sub:hover>.pioneer-sub-flyout,
.pioneer-has-sub:focus-within>.pioneer-sub-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Hero Slider Equal Size Image Lock */
.hero-slider-frame {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 380px;
  overflow: hidden;
  position: relative;
}

@media (min-width: 640px) {
  .hero-slider-frame {
    height: 420px;
  }
}

#heroSliderImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 4 / 3;
  display: block;
}

/* ==========================================================================
   Button Text & Icon Centering (Horizontal & Optical Vertical Alignment)
   ========================================================================== */
.open-enrol-trigger,
#openEnrolModalBtnHeader,
#openEnrolModalBtnHero,
.pioneer-pill-btn,
button.rounded-full,
a.rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.open-enrol-trigger span,
#openEnrolModalBtnHeader span,
#openEnrolModalBtnHero span,
.pioneer-pill-btn span,
button.rounded-full>span,
a.rounded-full>span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.open-enrol-trigger svg,
#openEnrolModalBtnHeader svg,
#openEnrolModalBtnHero svg,
.pioneer-pill-btn svg,
button.rounded-full>svg,
a.rounded-full>svg {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  transform: translateY(1px) !important;
  /* Optical baseline centering */
}

/* ==========================================================================
   Button Hover & Text Colors (Prevent dark text on dark blue buttons)
   ========================================================================== */

/* ==========================================================================
   BUTTON SYSTEM & HOVER STATES (Comprehensive Hello Elementor Neutralization)
   ========================================================================== */

/* Neutralize Hello Elementor reset.css button styling (prevents #c36 pink text/borders) */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
  white-space: normal;
  text-align: inherit;
  line-height: inherit;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

button:focus,
[type="button"]:focus,
[type="submit"]:focus {
  box-shadow: none;
  outline: none;
}

button:hover,
[type="button"]:hover,
[type="submit"]:hover {
  text-decoration: none;
}

/* Primary brand buttons MUST keep crisp white text on normal and hover */
.bg-pioneer-600,
.bg-pioneer-800,
.open-enrol-trigger,
#openEnrolModalBtnHeader,
#heroCourseSearchBtn,
.pioneer-pill-btn,
button.bg-pioneer-600,
a.bg-pioneer-600,
button.bg-pioneer-800,
a.bg-pioneer-800,
button[type="submit"].bg-pioneer-600,
button[type="submit"].bg-pioneer-800 {
  color: #ffffff !important;
}

.bg-pioneer-600 *,
.bg-pioneer-800 *,
.open-enrol-trigger *,
#openEnrolModalBtnHeader *,
#heroCourseSearchBtn * {
  color: #ffffff !important;
}

.bg-pioneer-600 svg,
.bg-pioneer-800 svg,
.open-enrol-trigger svg,
#openEnrolModalBtnHeader svg,
#heroCourseSearchBtn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Primary buttons hover & focus states: ALWAYS stay crisp white text on darker blue */
.bg-pioneer-600:hover,
.bg-pioneer-600:focus,
.bg-pioneer-800:hover,
.bg-pioneer-800:focus,
.open-enrol-trigger:hover,
.open-enrol-trigger:focus,
#openEnrolModalBtnHeader:hover,
#openEnrolModalBtnHeader:focus,
#heroCourseSearchBtn:hover,
#heroCourseSearchBtn:focus,
.pioneer-pill-btn:hover,
.pioneer-pill-btn:focus,
button.bg-pioneer-600:hover,
button.bg-pioneer-600:focus,
a.bg-pioneer-600:hover,
a.bg-pioneer-600:focus,
button.bg-pioneer-800:hover,
button.bg-pioneer-800:focus,
a.bg-pioneer-800:hover,
a.bg-pioneer-800:focus,
button[type="submit"].bg-pioneer-600:hover,
button[type="submit"].bg-pioneer-600:focus {
  color: #ffffff !important;
  background-color: #0a3f6d !important;
}

/* Ensure all child spans and SVG icons stay solid crisp white */
.bg-pioneer-600:hover *,
.bg-pioneer-600:focus *,
.bg-pioneer-800:hover *,
.bg-pioneer-800:focus *,
.open-enrol-trigger:hover *,
.open-enrol-trigger:focus *,
#openEnrolModalBtnHeader:hover *,
#openEnrolModalBtnHeader:focus *,
#heroCourseSearchBtn:hover *,
#heroCourseSearchBtn:focus *,
button.bg-pioneer-600:hover *,
button.bg-pioneer-600:focus *,
a.bg-pioneer-600:hover *,
a.bg-pioneer-600:focus *,
button.bg-pioneer-800:hover *,
button.bg-pioneer-800:focus *,
a.bg-pioneer-800:hover *,
a.bg-pioneer-800:focus * {
  color: #ffffff !important;
}

.bg-pioneer-600:hover svg,
.bg-pioneer-600:focus svg,
.bg-pioneer-800:hover svg,
.bg-pioneer-800:focus svg,
.open-enrol-trigger:hover svg,
.open-enrol-trigger:focus svg,
#openEnrolModalBtnHeader:hover svg,
#openEnrolModalBtnHeader:focus svg,
#heroCourseSearchBtn:hover svg,
#heroCourseSearchBtn:focus svg,
button.bg-pioneer-600:hover svg,
button.bg-pioneer-600:focus svg,
a.bg-pioneer-600:hover svg,
a.bg-pioneer-600:focus svg,
button.bg-pioneer-800:hover svg,
button.bg-pioneer-800:focus svg,
a.bg-pioneer-800:hover svg,
a.bg-pioneer-800:focus svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Secondary outline buttons (Hero Apply Now) */
#openEnrolModalBtnHero {
  color: #104f87 !important;
  background-color: #ffffff !important;
  border: 1px solid #bedbf0 !important;
}

#openEnrolModalBtnHero * {
  color: #104f87 !important;
}

#openEnrolModalBtnHero:hover,
#openEnrolModalBtnHero:focus {
  color: #0a3f6d !important;
  background-color: #f1f6fa !important;
  border-color: #0a3f6d !important;
}

#openEnrolModalBtnHero:hover *,
#openEnrolModalBtnHero:focus * {
  color: #0a3f6d !important;
}

/* Course tab filter buttons */
.course-tab-btn {
  background-color: #f1f6fa !important;
  color: #334155 !important;
}

.course-tab-btn:hover,
.course-tab-btn:focus {
  background-color: #e1eff8 !important;
  color: #0a3f6d !important;
}

.course-tab-btn.bg-pioneer-600 {
  background-color: #1564a7 !important;
  color: #ffffff !important;
}

.course-tab-btn.bg-pioneer-600:hover,
.course-tab-btn.bg-pioneer-600:focus {
  background-color: #0a3f6d !important;
  color: #ffffff !important;
}

/* View Syllabus link buttons in course cards */
#coursesGrid button[data-course-modal],
.open-article-btn {
  background-color: transparent !important;
  color: #475569 !important;
  font-size: 14px !important;
}

#coursesGrid button[data-course-modal]:hover,
#coursesGrid button[data-course-modal]:focus,
.open-article-btn:hover,
.open-article-btn:focus {
  background-color: transparent !important;
  color: #1564a7 !important;
}

/* ==========================================================================
   FAQ ACCORDION TYPOGRAPHY, FONT SIZES & STATES
   ========================================================================== */

/* FAQ Question Buttons */
.pioneer-faq-item button,
button[data-faq-toggle],
#faqAccordionList button {
  color: #0f172a !important;
  background-color: transparent !important;
  padding: 1.15rem 1.5rem !important;
}

.pioneer-faq-item button:hover,
.pioneer-faq-item button:focus,
button[data-faq-toggle]:hover,
button[data-faq-toggle]:focus,
#faqAccordionList button:hover,
#faqAccordionList button:focus {
  color: #0a3f6d !important;
  background-color: rgba(241, 246, 250, 0.7) !important;
}

/* FAQ Question Title Text: 18px-20px Bold Inter */
button[data-faq-toggle]>span:first-child,
#faqAccordionList button>span:first-child,
.faq-question-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

@media (min-width: 640px) {

  button[data-faq-toggle]>span:first-child,
  #faqAccordionList button>span:first-child,
  .faq-question-title {
    font-size: 20px !important;
  }
}

button[data-faq-toggle]:hover>span:first-child,
#faqAccordionList button:hover>span:first-child {
  color: #1564a7 !important;
}

/* FAQ Expand/Collapse Icon (+ / -) */
[id^="faqIcon-"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  width: 2rem !important;
  height: 2rem !important;
}

/* FAQ Answer Body Text: Minimum 18px Body Scale */
[id^="faqBody-"],
.faq-answer,
#faqAccordionList div[id^="faqBody"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: #475569 !important;
  /* slate-600 */
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  padding-top: 0.75rem !important;
}

/* FAQ Search Input */
#faqSearchInput {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   FOOTER TYPOGRAPHY, LINK FONT SIZES & HOVER STATES
   ========================================================================== */

/* 1. Footer Column Headings (Oswald uppercase tags) */
footer h3,
footer .footer-col-heading,
footer [class*="tracking-wider"] {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #7dd3fc !important;
  /* sky-300 */
}

/* 2. Footer About & Body Text */
footer p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #e0f2fe !important;
}

/* 3. Footer Links, Course Buttons & Contact Items - 14px Font Size */
footer ul li,
footer ul li a,
footer ul li button,
footer .footer-link,
footer button[data-course-modal],
footer a:not(.rounded-full) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #bae6fd !important;
  /* soft sky-200 */
  background-color: transparent !important;
  text-align: left;
  transition: color 0.15s ease-in-out, text-decoration 0.15s ease-in-out !important;
}

/* 4. Footer Links & Course Buttons Hover Color: Crisp Pure White with Underline */
footer ul li a:hover,
footer ul li a:focus,
footer ul li button:hover,
footer ul li button:focus,
footer .footer-link:hover,
footer .footer-link:focus,
footer button[data-course-modal]:hover,
footer button[data-course-modal]:focus,
footer a:not(.rounded-full):hover,
footer a:not(.rounded-full):focus {
  color: #ffffff !important;
  background-color: transparent !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* 5. Contact Section Links (Phone, Email, Address) */
footer .space-y-3 li,
footer .space-y-3\.5 li,
footer .space-y-3 li span,
footer .space-y-3\.5 li span {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

footer a[href^="tel:"],
footer a[href^="mailto:"] {
  font-size: 14px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

footer a[href^="tel:"]:hover,
footer a[href^="mailto:"]:hover {
  color: #38bdf8 !important;
  /* sky-400 vibrant blue */
  text-decoration: underline !important;
}

/* 6. Footer Bottom Legal & Regulatory Bar */
footer .mt-14,
footer .mt-14 div,
footer .mt-14 span,
footer .mt-14 a {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #bae6fd !important;
}

footer .mt-14 a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Slider Controls & Testimonial Dots */
#heroPrevSlideBtn,
#heroNextSlideBtn,
#testPrevSlideBtn,
#testNextSlideBtn {
  color: #ffffff !important;
}

#heroPrevSlideBtn:hover,
#heroNextSlideBtn:hover,
#testPrevSlideBtn:hover,
#testNextSlideBtn:hover {
  color: #ffffff !important;
  background-color: #0a3f6d !important;
}

.hero-slider-dot {
  color: transparent !important;
}

.testimonial-dot {
  color: #bae6fd !important;
}

.testimonial-dot:hover {
  color: #ffffff !important;
  background-color: #1564a7 !important;
}

.testimonial-dot.bg-pioneer-600 {
  color: #ffffff !important;
}

/* Modal Close Buttons */
#closeEnrolModalBtn,
#closeDetailModalBtn {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
}

#closeEnrolModalBtn:hover,
#closeDetailModalBtn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   ACCREDITATION & STATS GRID (Dynamic adjustment according to card count)
   ========================================================================== */
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

.pioneer-stats-grid {
  display: grid !important;
  gap: 1rem !important;
  align-items: center !important;
  width: 100% !important;
}

@media (min-width: 1024px) {
  .pioneer-stats-grid[data-count="1"] { grid-template-columns: minmax(0, 24rem) !important; justify-content: center !important; }
  .pioneer-stats-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 44rem !important; margin: 0 auto !important; }
  .pioneer-stats-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 58rem !important; margin: 0 auto !important; }
  .pioneer-stats-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .pioneer-stats-grid[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .pioneer-stats-grid[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (max-width: 639px) {
  .pioneer-stats-grid[data-count="5"] > .pioneer-stat-card:last-child,
  .pioneer-stats-grid[data-count="3"] > .pioneer-stat-card:last-child {
    grid-column: span 2 !important;
    max-width: 20rem !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
}

.pioneer-stat-card {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* ==========================================================================
   ACCREDITATION & STATS GRID (Dynamic adjustment according to card count)
   ========================================================================== */
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

.pioneer-stats-grid {
  display: grid !important;
  gap: 1rem !important;
  align-items: center !important;
  width: 100% !important;
}

@media (min-width: 1024px) {
  .pioneer-stats-grid[data-count="1"] { grid-template-columns: minmax(0, 24rem) !important; justify-content: center !important; }
  .pioneer-stats-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 44rem !important; margin: 0 auto !important; }
  .pioneer-stats-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 58rem !important; margin: 0 auto !important; }
  .pioneer-stats-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .pioneer-stats-grid[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .pioneer-stats-grid[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (max-width: 639px) {
  .pioneer-stats-grid[data-count="5"] > .pioneer-stat-card:last-child,
  .pioneer-stats-grid[data-count="3"] > .pioneer-stat-card:last-child {
    grid-column: span 2 !important;
    max-width: 20rem !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
}

.pioneer-stat-card {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}