/**
 * Company Cards - Improved Design
 * MIT Technology Review + BTQ Design Principles
 * Clean, modern, accessible
 */

/* ========================================
 * COMPANY CARD - Main Container
 * BTQ: Clean borders, smooth transitions
 * MIT TR: Generous spacing, clear hierarchy
 * ======================================== */

.company-card {
    /* Clean background - no gradients */
    background: var(--bg-elevated);

    /* Subtle border like MIT TR */
    border: 1px solid var(--border-subtle);
    border-radius: 12px; /* BTQ standard */

    /* MIT TR generous padding */
    padding: 2rem;

    /* BTQ smooth transition */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Card structure */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    /* Remove default anchor styles */
    text-decoration: none;
    color: inherit;

    /* Accessibility */
    cursor: pointer;
    position: relative;

    /* Performance */
    will-change: transform, box-shadow;
}

/* BTQ Hover - Lift + Shadow */
.company-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Active/Focus states */
.company-card:active {
    transform: translateY(-2px);
}

.company-card:focus-visible {
    outline: 3px solid var(--accent-orange, #ff8001);
    outline-offset: 3px;
}

/* ========================================
 * COMPANY NAME - Strong Visual Hierarchy
 * MIT TR: Bold headlines, clear sizing
 * ======================================== */

.company-name {
    font-size: clamp(1.25rem, 2vw, 1.5rem); /* MIT TR fluid scaling */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0;

    /* Subtle text shadow for depth */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.company-card:hover .company-name {
    color: var(--accent-orange, #ff8001);
}

/* ========================================
 * CATEGORY BADGES - Clean Pill Design
 * BTQ: Subtle pills with hover states
 * ======================================== */

.company-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.company-card .company-category {
    display: inline-flex !important;
    align-items: center;
    padding: 0.375rem 0.875rem !important;

    /* Clean badge design */
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 20px !important; /* Pill shape */

    /* Typography */
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--text-secondary) !important;

    /* Smooth transition */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.company-category:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
    transform: translateY(-1px);
}

/* Category color variants - subtle */
.company-category:nth-child(1) {
    border-color: rgba(100, 255, 218, 0.3);
}

.company-category:nth-child(2) {
    border-color: rgba(255, 128, 1, 0.3);
}

.company-category:nth-child(3) {
    border-color: rgba(102, 255, 102, 0.3);
}

/* ========================================
 * DESCRIPTION - Readable Body Text
 * MIT TR: Optimal line length, spacing
 * ======================================== */

.company-info {
    font-size: 1rem; /* MIT TR baseline */
    line-height: 1.6; /* MIT TR standard */
    color: var(--text-secondary);
    margin: 0;

    /* MIT TR: Optimal reading width */
    max-width: 100%;
}

.description-text {
    display: block;
}

/* Truncation with smooth fade */
.company-info.truncated {
    position: relative;
    max-height: 4.8em; /* ~3 lines */
    overflow: hidden;
}

.company-info.truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.6em;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--bg-elevated)
    );
    pointer-events: none;
}

/* ========================================
 * EXPAND BUTTON - Clean CTA
 * BTQ: Smooth interactions
 * ======================================== */

.expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    /* Clean button design */
    padding: 0.625rem 1.25rem;
    margin-top: 0.75rem;

    background: transparent;
    border: 1px solid var(--border-medium);
    border-radius: 6px;

    /* Typography */
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;

    /* Behavior */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Prevent text selection */
    user-select: none;
}

.expand-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.expand-btn:active {
    transform: translateY(0);
}

/* ========================================
 * METADATA - Country, Founded
 * Clean, readable, subtle
 * ======================================== */

.company-country {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    font-size: 0.9375rem; /* 15px */
    color: var(--text-muted);

    margin: 0;
}

/* ========================================
 * WEBSITE LINK - Clear CTA
 * BTQ: Prominent, interactive
 * ======================================== */

.company-website {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    /* Button-like design */
    padding: 0.75rem 1.5rem;
    margin-top: auto; /* Push to bottom */

    background: var(--button-primary-bg, linear-gradient(135deg, #00c4e8, #0088cc));
    border: none;
    border-radius: 8px;

    /* Typography */
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;

    /* Interaction */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;

    /* Prevent text selection */
    user-select: none;

    /* Visual emphasis */
    box-shadow: 0 2px 8px rgba(0, 196, 232, 0.2);
}

.company-website:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 196, 232, 0.3);
    background: var(--button-primary-hover, linear-gradient(135deg, #0088cc, #0066aa));
}

.company-website:active {
    transform: translateY(0);
}

/* ========================================
 * SELECTED STATE
 * Highlight for single company view
 * ======================================== */

.company-card.selected {
    border-color: var(--accent-orange, #ff8001);
    box-shadow: 0 0 0 3px rgba(255, 128, 1, 0.1),
                0 8px 24px rgba(255, 128, 1, 0.15);
}

/* ========================================
 * GRID LAYOUT
 * Responsive, flexible
 * ======================================== */

.companies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 2rem;

    /* MIT TR container */
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 48rem) {
    .companies-grid {
        padding: 0 3rem;
        gap: 2.5rem;
    }
}

@media (min-width: 64rem) {
    .companies-grid {
        padding: 0 5rem;
    }
}

/* ========================================
 * ANIMATIONS
 * Subtle, smooth
 * ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.company-card {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
 * ACCESSIBILITY
 * Reduced motion support
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
    .company-card,
    .company-category,
    .expand-btn,
    .company-website {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .company-card:hover {
        transform: none;
    }
}

/* ========================================
 * THEME COMPATIBILITY
 * Works with light/dark themes
 * ======================================== */

[data-theme="light"] .company-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .company-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .company-info.truncated::after {
    background: linear-gradient(to bottom, transparent, #ffffff);
}