/* =======================================================
   FEATURES.CSS - Dedicated Styles for the Features Page
   ======================================================= */

/* Reusing your hero section from style.css but for the Features page */
.hero-section {
    text-align: center;
    padding: 6rem 2rem 4rem;
    background: #1C1C1C;
}

.hero-section h1 {
    font-size: 2.8rem;
    color: #FFB531; /* Your primary accent color */
    margin-bottom: 1rem;
}

.hero-section p {
    color: #ddd;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}

/* --- Feature Grid Layout --- */
.features {
    display: grid;
    /* Creates a responsive grid of 2-3 columns */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 3rem 1rem;
    background-color: #1C1C1C; /* Match body background */
}

/* --- Individual Feature Card Base Styling --- */
.feature-card {
    /* REMOVED: background: #262626; */ 
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    color: #f0f0f0;
    border: none; /* Border removed for better gradient display */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensures content stays inside rounded corners */
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(122, 0, 255, 0.25);
}

.feature-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0.75rem 0 0.5rem;
}

.feature-card p {
    font-size: 1rem;
    color: #f0f0f0; /* Keeping text bright on gradients */
}

/* --- Gradient Definitions (NEW STYLES) --- */

/* 1. AI Content Studio (Violet) */
.features .feature-card:nth-child(1) {
    background: linear-gradient(135deg, #7A00FF, #4c0099);
}
/* 2. Unified Calendar (Yellow/Orange) */
.features .feature-card:nth-child(2) {
    background: linear-gradient(135deg, #FFB531, #cc7a00);
}
/* 3. Real-Time Analytics (Blue/Teal) */
.features .feature-card:nth-child(3) {
    background: linear-gradient(135deg, #00B5B5, #007373);
}
/* 4. Smart Scheduler (Green) */
.features .feature-card:nth-child(4) {
    background: linear-gradient(135deg, #4CAF50, #2e7d32);
}
/* 5. Multi-Platform Posting (Pink/Magenta) */
.features .feature-card:nth-child(5) {
    background: linear-gradient(135deg, #CC3A9E, #992b76);
}
/* 6. API & Key Security (Dark Blue/Safety) */
.features .feature-card:nth-child(6) {
    background: linear-gradient(135deg, #304e80, #1f3352);
}

/* --- Icon Styling and Colors (Kept for consistency on hover) --- */
.feature-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: #fff; /* Icons should be white/light to stand out on the gradient */
}

/* --- Animation Class --- */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}
/* ==========================================================================
   MOBILE TOUCH OPTIMIZATION GATEWAY
   ========================================================================== */
@media (max-width: 768px) {
    /* Prevent the layout from collapsing on narrow screens */
    .dashboard-layout {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 16px !important;
    }

    /* Expand button touch zones to meet standard accessibility guidelines (minimum 44px) */
    button, 
    .instagram-post-card,
    .nav-links a {
        min-height: 44px !important;
        padding: 12px !important;
    }

    /* Make the calendar grid easily scrollable on mobile screens */
    .calendar-grid {
        overflow-x: auto !important;
        display: block !important;
        white-space: nowrap !important;
    }
}
/* ==========================================================================
   UPDATED FEATURE CTA LINKS (FIXES VISIBILITY ISSUES)
   ========================================================================== */
.feature-cta-link {
    display: block !important;
    margin-top: 18px !important;
    font-size: 0.95rem !important;
    color: #00E5FF !important; /* Forces your bright cyan color to appear clearly */
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.feature-cta-link:hover {
    color: #FFB531 !important; /* Smoothly switches to your gold color on hover */
    transform: translateX(5px) !important; /* Slides the arrow slightly */
}
/* ==========================================================================
   TURN FEATURE TEXT LINKS INTO OUTLINED BUTTONS (MATCHES COLOURED LAYOUT)
   ========================================================================== */
.feature-card .feature-cta-link {
    display: inline-block !important;
    margin-top: 20px !important;
    padding: 10px 20px !important;
    background: transparent !important;
    border: 2px solid #00E5FF !important; /* Beautiful Cyan Border */
    border-radius: 6px !important;
    color: #00E5FF !important;           /* Cyan Text */
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease-in-out !important;
    cursor: pointer !important;
}

/* HOVER STATUS EFFECT */
.feature-card .feature-cta-link:hover {
    background: #00E5FF !important;     /* Fills up with your signature cyan */
    color: #000000 !important;          /* Flips text to solid dark black for high readability */
    transform: translateY(-3px) !important; /* Lifts button up smoothly */
    box-shadow: 0 5px 15px rgba(0, 229, 255, 0.4) !important; /* Adds professional neon ambient glow */
}