/* Website Builder Custom Components Styles */
/* This file provides styling for custom GrapeJS components */
/* Designed to work with GrapeJS Studio SDK without Tailwind conflicts */

/*
 Deprecated Tailwind classes, extracted so current templates continue to work for users.
    Remove these classes when no longer needed.
 */
/* Extracted Tailwind CSS Styles */
/* Generated from wrestling club website */

/* =============================================================================
   LAYOUT & DISPLAY
   ============================================================================= */

.block {
    display: block;
}

.inline-flex {
    display: inline-flex;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

/* =============================================================================
   POSITIONING
   ============================================================================= */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-x-0 {
    left: 0;
    right: 0;
}

.inset-y-0 {
    top: 0;
    bottom: 0;
}

/* =============================================================================
   FLEXBOX
   ============================================================================= */

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

/* =============================================================================
   GRID
   ============================================================================= */

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =============================================================================
   GAP
   ============================================================================= */

.gap-4 {
    gap: 1rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-x-2 {
    column-gap: 0.5rem;
}

.gap-x-3 {
    column-gap: 0.75rem;
}

.gap-x-16 {
    column-gap: 4rem;
}

.gap-y-1 {
    row-gap: 0.25rem;
}

.gap-y-3 {
    row-gap: 0.75rem;
}

.gap-y-8 {
    row-gap: 2rem;
}

.gap-y-12 {
    row-gap: 3rem;
}

/* =============================================================================
   SPACING - MARGIN
   ============================================================================= */

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mt-12 {
    margin-top: 3rem;
}

.ml-4 {
    margin-left: 1rem;
}

.-mr-2 {
    margin-right: -0.5rem;
}

/* =============================================================================
   SPACING - PADDING
   ============================================================================= */

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-6 {
    padding: 1.5rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.pt-4 {
    padding-top: 1rem;
}

/* =============================================================================
   SPACING - SPACE BETWEEN
   ============================================================================= */

.space-x-10 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 2.5rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.25rem;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}

.space-y-12 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 3rem;
}

/* =============================================================================
   WIDTH
   ============================================================================= */

.w-full {
    width: 100%;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-12 {
    width: 3rem;
}

.w-fit {
    width: fit-content;
}

/* =============================================================================
   HEIGHT
   ============================================================================= */

.h-0 {
    height: 0;
}

.h-6 {
    height: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-10 {
    height: 2.5rem;
}

.h-12 {
    height: 3rem;
}

/* =============================================================================
   MAX-WIDTH
   ============================================================================= */

.max-w-2xl {
    max-width: 42rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-screen-xl {
    max-width: 1280px;
}

/* =============================================================================
   TYPOGRAPHY - FONT SIZE
   ============================================================================= */

.text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

/* =============================================================================
   TYPOGRAPHY - FONT WEIGHT
   ============================================================================= */

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

/* =============================================================================
   TYPOGRAPHY - TEXT TRANSFORM
   ============================================================================= */

.uppercase {
    text-transform: uppercase;
}

/* =============================================================================
   TYPOGRAPHY - LETTER SPACING
   ============================================================================= */

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

/* =============================================================================
   TYPOGRAPHY - LINE HEIGHT
   ============================================================================= */

.leading-6 {
    line-height: 1.5rem;
}

/* =============================================================================
   TYPOGRAPHY - TEXT ALIGNMENT
   ============================================================================= */

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

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* =============================================================================
   COLORS - TEXT
   ============================================================================= */

.text-gray-500 {
    color: rgb(107, 114, 128);
}

.text-gray-600 {
    color: rgb(75, 85, 99);
}

.text-gray-700 {
    color: rgb(55, 65, 81);
}

.text-gray-800 {
    color: rgb(31, 41, 55);
}

.text-gray-900 {
    color: rgb(17, 24, 39);
}

.text-blue-900 {
    color: rgb(30, 58, 138);
}

/* =============================================================================
   COLORS - BACKGROUND
   ============================================================================= */

.bg-white {
    background-color: rgb(255, 255, 255);
}

.bg-gray-50 {
    background-color: rgb(249, 250, 251);
}

.bg-blue-50 {
    background-color: rgb(239, 246, 255);
}

.bg-gray-100 {
    background-color: rgb(243, 244, 246);
}

/* =============================================================================
   FOCUS STATES
   ============================================================================= */

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:bg-gray-100:focus {
    background-color: rgb(243, 244, 246);
}

.focus\:text-gray-500:focus {
    color: rgb(107, 114, 128);
}

/* =============================================================================
   BORDER RADIUS
   ============================================================================= */

.rounded {
    border-radius: 0.25rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* =============================================================================
   BOX SHADOW
   ============================================================================= */

.shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* =============================================================================
   OBJECT FIT
   ============================================================================= */

.object-cover {
    object-fit: cover;
}

/* =============================================================================
   LIST STYLE
   ============================================================================= */

.list-disc {
    list-style-type: disc;
}

/* =============================================================================
   TRANSFORM
   ============================================================================= */

.transform {
    /* Base transform class - does nothing on its own */
}

.-translate-x-3 {
    transform: translateX(-0.75rem);
}

.-translate-y-2 {
    transform: translateY(-0.5rem);
}

.scale-95 {
    transform: scale(0.95);
}

.scale-100 {
    transform: scale(1);
}

.origin-top-right {
    transform-origin: top right;
}

/* =============================================================================
   Z-INDEX
   ============================================================================= */

.z-40 {
    z-index: 40;
}

.z-\[100\] {
    z-index: 100;
}

/* =============================================================================
   OPACITY
   ============================================================================= */

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

/* =============================================================================
   TRANSITIONS
   ============================================================================= */

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-100 {
    transition-duration: 100ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   FLEXBOX ORDER
   ============================================================================= */

.order-first {
    order: -9999;
}

/* =============================================================================
   ASPECT RATIO
   ============================================================================= */

.aspect-w-3 {
    position: relative;
    padding-bottom: 0; /* Reset any default padding */
}

.aspect-h-4 {
    /* Aspect ratio will be set by combined selector */
}

.aspect-w-3.aspect-h-4 {
    /* 4:3 aspect ratio = 4/3 * 100% = 133.333% */
    padding-bottom: 133.333% !important;
}

.aspect-w-3 > * {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* =============================================================================
   RESPONSIVE - SM (min-width: 640px)
   ============================================================================= */

@media (min-width: 640px) {
    .sm\:px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:mt-4 {
        margin-top: 1rem;
    }

    .sm\:mt-5 {
        margin-top: 1.25rem;
    }

    .sm\:h-10 {
        height: 2.5rem;
    }

    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .sm\:text-left {
        text-align: left;
    }

    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .sm\:grid {
        display: grid;
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:gap-6 {
        gap: 1.5rem;
    }

    .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0;
    }
}

/* =============================================================================
   RESPONSIVE - MD (min-width: 768px)
   ============================================================================= */

@media (min-width: 768px) {
    .md\:mt-16 {
        margin-top: 4rem;
    }

    .md\:w-fit {
        width: fit-content;
    }

    .md\:ml-32 {
        margin-left: 8rem;
    }
}

/* =============================================================================
   RESPONSIVE - LG (min-width: 1024px)
   ============================================================================= */

@media (min-width: 1024px) {
    .lg\:mt-20 {
        margin-top: 5rem;
    }

    .lg\:mt-24 {
        margin-top: 6rem;
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:gap-8 {
        gap: 2rem;
    }

    .lg\:gap-x-16 {
        column-gap: 4rem;
    }

    .lg\:gap-y-12 {
        row-gap: 3rem;
    }

    .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0;
    }

    .lg\:items-start {
        align-items: flex-start;
    }

    .lg\:order-last {
        order: 9999;
    }

    .lg\:grid {
        display: grid;
    }

    .lg\:flex {
        display: flex;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 2.5rem;
    }

    .lg\:justify-center {
        justify-content: center;
    }

    .lg\:justify-end {
        justify-content: flex-end;
    }

    .lg\:absolute {
        position: absolute;
    }

    .lg\:inset-y-0 {
        top: 0;
        bottom: 0;
    }

    .lg\:left-0 {
        left: 0;
    }

    .lg\:right-0 {
        right: 0;
    }
}

/* =============================================================================
   RESPONSIVE - XL (min-width: 1280px)
   ============================================================================= */

@media (min-width: 1280px) {
    .xl\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .xl\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .xl\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .xl\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .xl\:py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */

body {
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Base readability improvements */
p {
  line-height: 1.625;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
}

ul, ol, li {
  color: #374151;
}

/* ============================================
   CARD COMPONENT
   ============================================ */

.card-component {
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card-component:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-component--shadow {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-component--bordered {
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

.card-component--elevated {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.card__image {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.card__content {
  padding: 1.5rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #111827;
}

.card__description {
  color: #6b7280;
  margin-bottom: 1rem;
}

.card__button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background-color 0.2s;
}

.card__button:hover {
  background-color: #2563eb;
}

/* Card layout variations */
.card-component--horizontal {
  display: flex;
}

.card-component--horizontal .card__image {
  width: 50%;
  height: auto;
}

/* ============================================
   BUTTON COMPONENT
   ============================================ */

.btn {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border-radius: 0.375rem;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}

.btn--primary {
  background-color: #3b82f6;
  color: white;
}

.btn--primary:hover {
  background-color: #2563eb;
}

.btn--secondary {
  background-color: #6b7280;
  color: white;
}

.btn--secondary:hover {
  background-color: #4b5563;
}

.btn--outline {
  background-color: transparent;
  border: 2px solid #3b82f6;
  color: #3b82f6;
}

.btn--outline:hover {
  background-color: #3b82f6;
  color: white;
}

.btn--large {
  padding: 0.875rem 1.75rem;
  font-size: 1.125rem;
}

.btn--small {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.heading-2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #111827;
}

.paragraph {
  font-size: 1rem;
  color: #374151;
  margin-bottom: 1rem;
}

.paragraph--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5rem;
  font-weight: 600;
  margin-bottom: 0;
}

/* ============================================
   LIST COMPONENT
   ============================================ */

.simple-list {
  list-style: disc;
  padding-left: 1.5rem;
  color: #374151;
}

.simple-list li {
  margin-bottom: 0.5rem;
}

/* ============================================
   IMAGE COMPONENT
   ============================================ */

.full-width-image,
[data-gjs-type="full-width-image"] {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   GRID COMPONENT
   ============================================ */

.grid-container {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
}

.grid-container--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid-container--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid-container--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .grid-container--2-cols,
  .grid-container--3-cols,
  .grid-container--4-cols {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FAQ COMPONENT
   ============================================ */

.faq-container {
  padding: 3rem 0;
}

@media (min-width: 1024px) {
  .faq-container {
    padding: 6rem 0;
  }
}

.faq-container .grid-container--2-cols {
  gap: 1rem;
}

@media (min-width: 1024px) {
  .faq-container .grid-container--2-cols {
    gap: 2rem;
  }
}

.faq-container h2 {
  margin: 0;
}

.faq-item {
  margin-bottom: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

.faq-question {
  padding: 1rem 1.5rem;
  background-color: #f9fafb;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question:hover {
  background-color: #f3f4f6;
}

.faq-answer {
  padding: 1rem 1.5rem;
  color: #6b7280;
}

/* ============================================
   TESTIMONIALS COMPONENT
   ============================================ */

.testimonials-container {
  padding: 3rem 1rem;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-card {
  background: #f9fafb;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.testimonial-card h3,
.testimonial-card p {
    margin: 0;
}

.testimonial-quote {
  font-style: italic;
  color: #374151;
  margin-bottom: 1rem;
}

.testimonial-author {
  font-weight: 600;
  color: #111827;
  margin-top: 1rem !important;
}

.testimonial-role {
  font-size: 0.875rem;
  color: #6b7280;
}

/* ============================================
   COACH BIO COMPONENT
   ============================================ */

.coach-bio {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px) {
  .coach-bio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .coach-bio {
    gap: 2rem;
  }
}

.coach-bio li {
  list-style: none;
}

/* Target UL elements that have grid classes applied (used for coach bio layout) */
ul.sm\:grid,
ul.lg\:grid,
ul.grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.sm\:grid > li,
ul.lg\:grid > li,
ul.grid > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Image container with aspect ratio */
.coach-bio__image-container {
  position: relative;
  padding-bottom: 133.333%; /* 4:3 aspect ratio */
  height: 0;
  overflow: hidden;
}

.coach-bio__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Content area (spans 2 columns on small screens+) */
.coach-bio__content {
  grid-column: span 1;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .coach-bio__content {
    grid-column: span 2;
    margin-top: 0;
  }
}

.coach-bio__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.coach-bio__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.coach-bio__name {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: #111827;
  margin: 0;
}

.coach-bio__title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
  margin: 0;
}

.coach-bio__bio {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.coach-bio__description {
  color: #6b7280;
  margin: 0;
}

/* ============================================
   REGISTRATION SECTION
   ============================================ */

.registration-section {
  /* No background, padding, or text-align - inherits from parent */
}

/* Heading: mt-12 text-2xl tracking-tight font-bold text-gray-800 sm:text-3xl xl:text-4xl */
.registration-section h2 {
  margin-top: 3rem;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: #1f2937;
}

@media (min-width: 640px) {
  .registration-section h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1280px) {
  .registration-section h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* Info rows with icons: flex gap-x-2 items-center mt-3 sm:mt-5 */
.registration-section__info-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

@media (min-width: 640px) {
  .registration-section__info-row {
    margin-top: 1.25rem;
  }
}

/* Icon: w-6 h-6 */
.registration-section__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: #374151;
}

/* Text in rows: text-base text-gray-700 sm:text-xl lg:text-lg xl:text-xl */
.registration-section p,
.registration-section__text {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #374151;
  margin: 0;
}

.registration-section .mt-1 {
    margin-top: 0.25rem;
}

@media (min-width: 640px) {
  .registration-section__text {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .registration-section__text {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .registration-section__text {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

/* Column container for attendee info: flex flex-col gap-y-1 */
.registration-section__column {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* CTA container: mt-2 text-base text-gray-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl */
.registration-section__cta-container {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #374151;
}

@media (min-width: 640px) {
  .registration-section__cta-container {
    margin-top: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .registration-section__cta-container {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .registration-section__cta-container {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

/* CTA button: w-full md:w-fit block text-center px-4 py-2 text-base leading-6 font-medium rounded-md team-mobile-cta-link transition duration-150 ease-in-out xl:px-12 xl:py-2 */
.registration-section__button {
  width: 100%;
  display: block;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
}

@media (min-width: 768px) {
  .registration-section__button {
    width: fit-content;
  }
}

@media (min-width: 1280px) {
  .registration-section__button {
    padding: 0.5rem 3rem;
  }
}

/* Small text below button: mt-1 text-xs font-gray-600 text-center sm:text-left */
.registration-section__disclaimer {
  margin-top: 0.25rem;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  color: #4b5563;
  text-align: center;
}

@media (min-width: 640px) {
  .registration-section__disclaimer {
    text-align: left;
  }
}

/* ============================================
   ABOUT COMPONENT
   ============================================ */

.about-container {
  padding: 4rem 0;
}

@media (min-width: 1024px) {
  .about-container {
    padding: 6rem 0;
  }
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.about__image-container {
  width: 100%;
  order: -1;
}

@media (min-width: 1024px) {
  .about__image-container {
    order: 0;
  }
}

.about__image {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  border-radius: 0.5rem;
}

.about__content {
  padding: 0 1.5rem;
}

@media (min-width: 1024px) {
  .about__content {
    padding: 0 2rem;
  }
}

.about__heading {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #111827;
  margin: 0;
}

@media (min-width: 640px) {
  .about__heading {
    font-size: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .about__heading {
    font-size: 3rem;
  }
}

.about__text {
  font-size: 1rem;
  color: #374151;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .about__text {
    font-size: 1.125rem;
  }
}

/* ============================================
   CLUB HERO COMPONENT
   ============================================ */

.club-hero-component {
  /* Container padding handled by .page-container */
}

.club-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 4rem;
}

@media (min-width: 1024px) {
  .club-hero-grid {
    grid-template-columns: 3fr 2fr;
    margin-top: 5rem;
  }
}

.club-hero__content {
  padding: 0 1.5rem;
}

@media (min-width: 640px) {
  .club-hero__content {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .club-hero__content {
    padding: 0 2rem;
  }
}

.club-hero__images {
  order: -1;
}

@media (min-width: 1024px) {
  .club-hero__images {
    order: 1;
  }
}

.club-hero__images img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  border-radius: 0.5rem;
}

.club-hero__title {
  margin-top: 0.5rem;
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 2.25rem;
  letter-spacing: -0.025em;
  color: #1f2937;
}

@media (min-width: 640px) {
  .club-hero__title {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {
  .club-hero__title {
    font-size: 3rem;
    line-height: 1;
  }
}

/* ============================================
   NAVBAR COMPONENT
   ============================================ */

.static-navbar {
  position: relative;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.navbar-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .navbar-container {
    padding: 0 1.5rem;
  }
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .navbar {
    min-height: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .navbar {
    justify-content: center;
  }
}

.navbar__logo-section {
  display: flex;
  align-items: center;
  flex: 1;
}

@media (min-width: 1024px) {
  .navbar__logo-section {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
}

.navbar__logo-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media (min-width: 1024px) {
  .navbar__logo-content {
    width: auto;
  }
}

.navbar__logo-link {
  display: flex;
  align-items: center;
}

.navbar__logo-img {
  height: 2rem;
  width: auto;
}

@media (min-width: 640px) {
  .navbar__logo-img {
    height: 4rem;
  }
}

.navbar__logo-text {
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
  line-height: 0.75rem;
}

.navbar__mobile-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.375rem;
  color: #9ca3af;
  background-color: white;
  transition: all 0.15s ease-in-out;
  margin-right: -0.5rem;
}

.navbar__mobile-menu-button:hover {
  color: #6b7280;
  background-color: #f3f4f6;
}

@media (min-width: 1024px) {
  .navbar__mobile-menu-button {
    display: none;
  }
}

.navbar__mobile-menu-icon {
  height: 1.5rem;
  width: 1.5rem;
}

.navbar__desktop-links {
  display: none;
}

@media (min-width: 1024px) {
  .navbar__desktop-links {
    display: flex;
    gap: 2.5rem;
  }
}

.navbar__link {
  font-weight: 500;
  color: #1f2937;
  transition: all 0.15s ease-in-out;
}

.navbar__cta-section {
  display: none;
}

@media (min-width: 1024px) {
  .navbar__cta-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
  }
}

.navbar__cta-button {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  border-radius: 0.375rem;
}

@media (min-width: 1024px) {
  .navbar__cta-button {
    margin-left: 1rem;
  }
}

.navbar__mobile-menu {
  z-index: 40;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  transition: all 0.15s ease-in-out;
  transform-origin: top right;
}

@media (min-width: 1024px) {
  .navbar__mobile-menu {
    display: none;
  }
}

.navbar__mobile-menu-content {
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.navbar__mobile-menu-inner {
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.navbar__mobile-menu-header {
  padding: 1rem 1.25rem;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.375rem;
  color: #9ca3af;
  background-color: white;
  transition: all 0.15s ease-in-out;
  margin-right: -0.5rem;
}

.navbar__mobile-menu-close:hover,
.navbar__mobile-menu-close:focus {
  color: #6b7280;
  background-color: #f3f4f6;
}

.navbar__mobile-links {
  padding: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}

.navbar__mobile-link {
  margin-top: 0.25rem;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  color: #1f2937;
  transition: all 0.15s ease-in-out;
}

.navbar__mobile-cta {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
}

/* ============================================
   STAFF COMPONENT
   ============================================ */

.staff-component {
  background: white;
}

.staff-container {
  padding: 8rem 0;
}

@media (min-width: 1024px) {
  .staff-container {
    padding: 6rem 0;
  }
}

.staff__header {
  margin-bottom: 3rem;
}

.staff__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 1024px) {
  .staff__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 4rem;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.page-container {
  max-width: 80rem; /* 1280px - Tailwind's max-w-7xl */
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .page-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .page-container {
    padding: 0 2rem;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section-padding {
  padding: 3rem 1rem;
}

/* Margin utilities moved to top of file to allow responsive overrides */

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .hide-desktop {
    display: none !important;
  }
}

/* ============================================
   CENTERED IMAGE HERO COMPONENT
   ============================================ */

.centered-image-hero {
  padding: 4rem 0;
}

@media (min-width: 1024px) {
  .centered-image-hero {
    padding: 6rem 0;
  }
}

.centered-hero-container {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.centered-hero__title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #111827;
  margin: 0 0 1.5rem 0;
}

@media (min-width: 640px) {
  .centered-hero__title {
    font-size: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .centered-hero__title {
    font-size: 4rem;
  }
}

.centered-hero__description {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #6b7280;
  max-width: 800px;
  margin: 0 auto 3rem auto;
}

@media (min-width: 640px) {
  .centered-hero__description {
    font-size: 1.25rem;
  }
}

.centered-hero__image-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.centered-hero__image {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* ============================================
   TRAINING SECTION COMPONENT
   ============================================ */

.training-section {
  padding: 4rem 0;
}

@media (min-width: 1024px) {
  .training-section {
    padding: 6rem 0;
  }
}

.training-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.training__header {
  text-align: center;
  margin-bottom: 3rem;
}

.training__title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #111827;
  margin: 0 0 1rem 0;
}

@media (min-width: 640px) {
  .training__title {
    font-size: 3rem;
  }
}

.training__description {
  font-size: 1rem;
  line-height: 1.75;
  color: #6b7280;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .training__description {
    font-size: 1.125rem;
  }
}

.training__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .training__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .training__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* Training Card Styles */
.training-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}

.training-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.training-card__header {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.training-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.training-card__subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.training-card__body {
  padding: 1.5rem;
  flex: 1;
}

.training-card__section {
  margin-bottom: 1.5rem;
}

.training-card__section:last-child {
  margin-bottom: 0;
}

.training-card__section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #374151;
  margin: 0 0 1rem 0;
}

.training-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.training-card__list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
}

.training-card__list-item:last-child {
  margin-bottom: 0;
}

.training-card__check-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: #10b981;
  margin-top: 0.125rem;
}

.training-card__note {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 0.25rem;
}

.training-card__note p {
  font-size: 0.875rem;
  color: #92400e;
  margin: 0;
  line-height: 1.5;
}

.training-card__note strong {
  font-weight: 700;
}

.training-card__footer {
  padding: 1.5rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.training-card__price {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  text-align: center;
  margin-bottom: 1rem;
}

.training-card__button {
  display: block;
  width: 100%;
  padding: 0.625rem 1.25rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.training-card__next-steps {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0;
}