/* ============================================
   SHARED COMPONENTS — Neovation Custom Learning
   ============================================
   Reusable UI components built on the design
   tokens from variables.css. Every value
   references a CSS custom property — nothing
   is hard-coded.

   Components:
   1. Buttons
   2. Cards
   3. Section Containers
   4. Responsive Grid
   5. Form Inputs
   6. Badge / Pill
   7. Tag
   8. Eyebrow
   ============================================ */


/* ============================================
   1. BUTTONS
   ============================================
   Base .btn class + modifier variants:
   • .btn--primary   — Purple accent fill
   • .btn--secondary — Orange accent fill
   • .btn--ghost     — Transparent with border

   Size variants:
   • .btn--sm        — Compact
   • .btn--lg        — Large

   Font: Host Grotesk (--font-heading) for buttons
   States: :hover, :active, :disabled, :focus-visible
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

/* --- Primary: Purple fill --- */
.btn--primary {
    background-color: var(--color-accent-primary);
    color: #ffffff;
    border-color: var(--color-accent-primary);
}

.btn--primary:hover {
    background-color: var(--color-accent-primary-hover);
    border-color: var(--color-accent-primary-hover);
}

.btn--primary:active {
    background-color: var(--color-accent-primary-hover);
    transform: scale(0.98);
}

/* --- Secondary: Orange fill --- */
.btn--secondary {
    background-color: var(--color-accent-secondary);
    color: #ffffff;
    border-color: var(--color-accent-secondary);
}

.btn--secondary:hover {
    background-color: var(--color-accent-secondary-hover);
    border-color: var(--color-accent-secondary-hover);
}

.btn--secondary:active {
    background-color: var(--color-accent-secondary-hover);
    transform: scale(0.98);
}

/* --- Ghost: Transparent with border --- */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.btn--ghost:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-text-primary);
}

.btn--ghost:active {
    background-color: var(--color-surface-hover);
    transform: scale(0.98);
}

/* --- Disabled state (all variants) --- */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Focus-visible ring --- */
.btn:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

/* --- Size: Small --- */
.btn--sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-small);
}

/* --- Size: Large --- */
.btn--lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-lg);
}



/* ============================================
   2. CARDS
   ============================================
   Versatile card component with light and
   dark variants.

   Structure:
   .card
     .card__header
     .card__body
     .card__footer

   Variants:
   • .card--dark  — Dark background with
                     white text and white shadows
   ============================================ */

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--transition-base),
                transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card__header {
    padding: var(--space-lg) var(--space-lg) 0;
}

.card__body {
    padding: var(--space-lg);
}

.card__footer {
    padding: 0 var(--space-lg) var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* --- Dark variant --- */
.card--dark {
    background-color: var(--color-card-dark);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.card--dark:hover {
    box-shadow: var(--shadow-dark-md);
}

.card--dark .card__header,
.card--dark .card__body {
    color: #ffffff;
}

.card--dark h1,
.card--dark h2,
.card--dark h3,
.card--dark h4,
.card--dark h5,
.card--dark h6 {
    color: #ffffff;
}


/* ============================================
   3. SECTION CONTAINERS
   ============================================
   Wrappers for page sections with consistent
   max-width, centering, and padding.

   Variants:
   • .section           — Standard section
   • .section--wide     — Extra-wide max-width
   • .section--narrow   — Reading-width content
   • .section--full     — Full bleed (no max-width)
   • .container         — Inner content wrapper
   ============================================ */

.section {
    padding: var(--space-section-y) var(--space-section-x);
}

.section--wide {
    padding: var(--space-section-y) var(--space-section-x);
}

.section--narrow {
    padding: var(--space-section-y) var(--space-section-x);
}

.section--full {
    padding: var(--space-section-y) 0;
}

.container {
    width: 100%;
    max-width: var(--max-width-medium);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-section-x);
    padding-right: var(--space-section-x);
}

.section--wide .container {
    max-width: var(--max-width-content);
}

.section--narrow .container {
    max-width: var(--max-width-narrow);
}

/* --- Responsive section padding --- */
@media (max-width: 991px) {
    .section {
        padding: var(--space-3xl) var(--space-lg);
    }
}

@media (max-width: 767px) {
    .section {
        padding: var(--space-2xl) var(--space-md);
    }

    .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}



/* ============================================
   4. RESPONSIVE GRID
   ============================================
   CSS Grid utility with 1–4 column variants.
   Columns collapse responsively:
   • 4 cols → 2 cols at ≤991px → 1 col at ≤767px
   • 3 cols → 2 cols at ≤991px → 1 col at ≤767px
   • 2 cols → 1 col at ≤767px

   Usage:
     <div class="grid grid--cols-3">
       <div>Item</div>
       <div>Item</div>
       <div>Item</div>
     </div>
   ============================================ */

.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid--cols-1 {
    grid-template-columns: 1fr;
}

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

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

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

/* --- Responsive grid collapse --- */
@media (max-width: 991px) {
    .grid--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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


/* ============================================
   5. FORM INPUTS
   ============================================
   Styled for the light theme. Includes text,
   email, and textarea inputs.

   Structure:
   .form-group
     .form-label
     .form-input / .form-textarea
   ============================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-label {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.form-input:hover,
.form-textarea:hover {
    border-color: var(--color-grey-300);
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px rgba(123, 92, 213, 0.15);
    outline: none;
}

.form-textarea {
    min-height: 8rem;
    resize: vertical;
}

/* --- Disabled state --- */
.form-input:disabled,
.form-textarea:disabled {
    background-color: var(--color-surface-hover);
    color: var(--color-text-muted);
    cursor: not-allowed;
}


/* ============================================
   6. BADGE / PILL
   ============================================
   Small status indicators and labels.

   Variants:
   • .badge--primary    — Purple
   • .badge--secondary  — Orange
   • .badge--success    — Green
   • .badge--outline    — Border only
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    line-height: 1;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.badge--primary {
    background-color: rgba(123, 92, 213, 0.12);
    color: var(--color-accent-primary);
}

.badge--secondary {
    background-color: rgba(249, 147, 13, 0.12);
    color: var(--color-accent-secondary);
}

.badge--success {
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--color-success);
}

.badge--outline {
    background-color: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
}


/* ============================================
   7. TAG
   ============================================
   Tags for skills, technologies, and
   categorization. Slightly larger than
   badges with a more tactile feel.

   Variants:
   • .tag--primary    — Purple tint
   • .tag--secondary  — Orange tint
   ============================================ */

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    background-color: var(--color-surface-hover);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

.tag:hover {
    background-color: var(--color-grey-200);
}

.tag--primary {
    background-color: rgba(123, 92, 213, 0.1);
    color: var(--color-accent-primary);
}

.tag--primary:hover {
    background-color: rgba(123, 92, 213, 0.2);
}

.tag--secondary {
    background-color: rgba(249, 147, 13, 0.1);
    color: var(--color-accent-secondary);
}

.tag--secondary:hover {
    background-color: rgba(249, 147, 13, 0.2);
}


/* ============================================
   8. EYEBROW
   ============================================
   Small uppercase label often placed above
   a heading. Optionally uses gradient text.

   Usage:
     <span class="eyebrow">Our Services</span>
   ============================================ */

.eyebrow {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-primary);
}

.eyebrow--gradient {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}