/* ===== Font Face Declarations ===== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700.woff2') format('woff2');
}

/* ===== CSS Custom Properties (Variables) ===== */
:root {
    /* Primary Colors */
    --color-primary: #a81010;
    --color-primary-hover: #8a0d0d;
    --color-primary-light: #ffe6e6;
    --color-primary-dark: #6d0a0a;

    /* Secondary Colors */
    --color-secondary: #FD0003;
    --color-secondary-hover: #D40002;
    --color-secondary-light: #FFE6E6;
    --color-secondary-dark: #A80001;

    /* Neutral Colors (Grays) */
    --color-gray-50: #fcfcfd;
    --color-gray-100: #f5f7fa;
    --color-gray-200: #e8eaf0;
    --color-gray-300: #d0d4e0;
    --color-gray-400: #9aa0b0;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Background & Surface Colors */
    --color-background: #ffffff;
    --color-surface: #ffffff;

    /* Border Colors */
    --color-border: #e8eaf0;
    --color-border-light: #f0f2f5;

    /* Text Colors */
    --color-text: #374151;
    --color-text-primary: #374151;
    --color-text-secondary: #6b7280;
    --color-text-muted: #9aa0b0;
    --color-text-inverse: #ffffff;

    /* Spacing */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.625rem;
    --spacing-4: 0.875rem;
    --spacing-5: 1.125rem;
    --spacing-6: 1.25rem;
    --spacing-7: 1.5rem;
    --spacing-8: 1.75rem;

    /* Typography */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-relaxed: 1.75;

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);

    /* Transitions */
    --transition-base: 200ms ease;

    /* Airtable Colors */
    --airtable-green: #D8F5D2;
    --airtable-green-text: #1F2933;
    --airtable-blue: #D9E8FF;
    --airtable-blue-text: #1F2933;
    --airtable-purple: #E6D9FF;
    --airtable-purple-text: #1F2933;
}

/* ===== CSS Reset / Normalize ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background);
}

/* ===== Container ===== */
.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-8);
}

/* ===== Event Detail Shared Styles ===== */
.event-detail {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-6);
    min-height: 300px;
    position: relative;
}

.event-detail__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-4) 0;
    width: 100%;
}

.event-detail__header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}

.event-detail__image {
    width: 40%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.event-detail__date-badge {
    display: inline-block;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
    width: auto;
    flex-shrink: 0;
}

.event-detail__description {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
    width: 100%;
}

.event-detail__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.event-detail__meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.event-detail__meta-item i {
    color: var(--color-primary);
}

.event-detail__facilitator-footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--spacing-4);
}

.event-detail__facilitator {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.event-detail__facilitator-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-gray-200);
}

.event-detail__facilitator-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.event-detail__footer {
    display: flex;
}

.event-detail__price {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    background: var(--color-primary);
    color: white;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
}

/* ===== Responsive Styles ===== */
@media (max-width: 620px) {
    .container {
        padding: var(--spacing-4);
    }

    .event-detail__image {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}