/* =====================================================================
   HOME SCREEN - COMPREHENSIVE DOCUMENTATION
   =====================================================================
   
   This file contains all styles for the home page (home.html) including:
   - Hero section with Tilly character and feature cards
   - Features grid with responsive layout
   - About section with tabbed content
   - CTA buttons and interactive elements
   - Scroll indicators and animations
   - Responsive design for all screen sizes
   
   STRUCTURE:
   1) CSS Variables & Color System
   2) Base Styles & Typography
   3) Hero Section (Main landing area)
   4) Features Grid (Three-column feature cards)
   5) Feature Items (Individual card styling)
   6) Tilly Character Styling (Mascot positioning)
   7) CTA Button (Call-to-action styling)
   8) Scroll Indicator (Navigation helper)
   9) Section Styling (General layout)
   10) About Section (Tabbed content area)
   11) Features Grid Layout (Secondary features)
   12) Responsive Video (Video sizing)
   13) Responsive Design (Mobile breakpoints)
   14) Responsive Card Layout (Mobile improvements)
   
   DESIGN PRINCIPLES:
   - Mobile-first responsive design
   - Consistent color scheme using CSS custom properties
   - Smooth animations and hover effects
   - Accessible focus states and reduced motion support
   - Flexible grid system that adapts to all screen sizes
   
   USAGE:
   - This file handles all home page-specific styling
   - Maintains consistency with design tokens from tokens.css
   - Integrates with global styles from global.css
   - Loaded specifically for the home page template
   

   ===================================================================== */

/* ================================================================
   1) CSS VARIABLES & COLOR SYSTEM
   ---------------------------------------------------------------
   
   Defines the color palette and design tokens used throughout
   the home screen. These variables ensure consistent theming
   and make it easy to update colors across the entire page.
   
   FEATURES:
   - Tilburg University brand colors
   - Hover state variations
   - Background and text color definitions
   - Consistent color application across components
   ================================================================ */

:root {
    /* Tilburg University brand colors */
    --tilburg-yellow: #cc9933;        /* Primary brand color */
    --tilburg-yellow-dark: #b8892d;   /* Hover state variation */
    --tilburg-blue: #1d3b53;          /* Secondary brand color */
    --off-white: #f8f9ff;             /* Light background color */
    --light-grey: #f7f8fc;            /* Card hover background */
}

/* ================================================================
   2) BASE STYLES & TYPOGRAPHY
   ---------------------------------------------------------------
   
   Establishes the foundational styles for the home page including
   typography, background, and base element styling. Sets up the
   visual hierarchy and ensures consistent appearance across browsers.
   
   FEATURES:
   - Google Fonts integration (Inter + Instrument Sans)
   - Gradient background with brand colors
   - Typography hierarchy for headings and body text
   - Consistent color scheme and spacing
   ================================================================ */

/* ===== Base body styling ===== */
body {
    font-family: 'Inter', sans-serif; /* Primary body font */
    background: linear-gradient(135deg, var(--off-white) 0%, #ffffff 50%, #f3f4ff 100%);
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    color: #23272f;
}

/* ===== Typography hierarchy ===== */
h1, h2, h3, .hero-title {
    font-family: 'Instrument Sans', sans-serif; /* Display font for headings */
}

/* ================================================================
   3) HERO SECTION (MAIN LANDING AREA)
   ---------------------------------------------------------------
   
   The hero section is the main landing area that users see first.
   It contains the main title, subtitle, feature cards, and Tilly
   character. Designed to be full-screen on mobile and properly
   spaced on desktop.
   
   FEATURES:
   - Full-screen mobile layout
   - Centered content with proper spacing
   - Responsive typography scaling
   - Tilly character integration
   - Feature cards grid layout
   ================================================================ */

/* ===== Hero section container ===== */
.hero-section {
    min-height: 100vh;                /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
}

/* Mobile hero section - full viewport to push main content below fold */
@media (max-width: 991px) {
    .hero-section {
        min-height: 100vh;
    }
    
    /* Ensure main content starts below the fold on mobile */
    #main-content {
        margin-top: 0;
    }
}

.hero-title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--tilburg-yellow);
    margin-bottom: 1.5rem;
    line-height: 1.1;
    word-break: break-word;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle {
    font-size: 1.15rem;
    font-weight: 400;
    color: #737987;
    margin-bottom: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1200px) {
    .hero-subtitle {
        max-width: 700px;
        font-size: 1.25rem;
    }
}

/* Responsive spacing for title/subtitle */
@media (min-width: 1024px) {
    /* Add spacing to prevent overlap with title/subtitle */
    .hero-title {
        margin-right: 200px;
    }
    
    .hero-subtitle {
        margin-right: 200px;
    }
}

/* Mobile hero section improvements */
@media (max-width: 991px) {
    .hero-section .container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
}

/* ================================================================
   4) FEATURES GRID (THREE-COLUMN FEATURE CARDS)
   ---------------------------------------------------------------
   
   The features grid displays three main feature cards in a responsive
   layout. On desktop, it shows three columns; on tablet, two columns;
   and on mobile, a single column. Each card contains an icon, title,
   and description with hover effects.
   
   FEATURES:
   - Responsive grid layout (3/2/1 columns)
   - Equal height cards with flexbox
   - Centered alignment and proper spacing
   - Smooth hover animations
   - Tilly character positioning
   ================================================================ */

/* ===== Features grid container ===== */
.features-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 4rem;
    position: relative;
    justify-items: center;
    align-items: stretch; /* Make all grid items the same height */
}

/* Desktop improvements for better screen utilization */
@media (min-width: 1000px) {
    .features-grid-container {
        max-width: 1400px;
        gap: 3rem;
        margin-top: 5rem;
    }
    
    .feature-icon {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
        margin-bottom: 1.8rem;
    }
    
    .feature-title {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    
    .feature-description {
        font-size: 1.05rem;
        line-height: 1.8;
    }
}

@media (min-width: 1400px) {
    .features-grid-container {
        max-width: 1600px;
        gap: 3.5rem;
    }
}

/* Responsive grid adjustments */
@media (min-width: 768px) {
    .features-grid-container {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 5rem;
    }
}

@media (min-width: 1024px) {
    .features-grid-container {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 6rem;
    }
}

/* ================================================================
   5) FEATURE ITEMS (INDIVIDUAL CARD STYLING)
   ---------------------------------------------------------------
   
   Individual feature cards that display the main benefits of the
   platform. Each card has an icon, title, description, and hover
   effects. Cards are designed to be equal height and responsive.
   
   FEATURES:
   - Card-based layout with shadows and borders
   - Icon styling with gradient backgrounds
   - Hover animations and transitions
   - Equal height cards using flexbox
   - Responsive typography and spacing
   ================================================================ */

/* ===== Feature item container ===== */
.feature-item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.feature-card {
    position: relative;
    background: rgba(255,255,255,0.96);
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 2rem 1.5rem; 
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04); /* subtle depth */
    transition: transform 0.2s, background 0.2s;
    margin-bottom: 2rem;
    /* Make all cards the same height as the largest content */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-card:hover {
    background: var(--light-grey);
    transform: translateY(-3px) scale(1.025);
}

.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    font-size: 1.3rem;
    color: white;
    transition: transform 0.2s;
}

.icon-blue { background: linear-gradient(135deg, #1d3b53 0%, #3c5a75 100%); }
.icon-green { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.icon-orange { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }

.feature-card:hover .feature-icon {
    transform: scale(1.07) rotate(-2deg);
}

.feature-title {
    font-size: 1.16rem;
    font-weight: 700;
    color: #23272f;
    margin-bottom: 0.6rem;
}

.feature-description {
    color: #6b7280;
    font-size: 0.96rem;
    font-weight: 400;
    line-height: 1.6;
    flex-grow: 1;
}

/* ================================================================
   6) TILLY CHARACTER STYLING (MASCOT POSITIONING)
   ---------------------------------------------------------------
   
   Tilly is the mascot character that appears on the feature cards.
   Different versions of Tilly are shown based on screen size to
   optimize the visual experience across devices.
   
   FEATURES:
   - Responsive character positioning
   - Different images for mobile/tablet/desktop
   - Absolute positioning relative to feature cards
   - Non-interactive overlay (pointer-events: none)
   - Proper z-index layering
   ================================================================ */

/* ===== Tilly wrapper container ===== */
.tilly-wrapper {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    top: 0;
}

/* Common Tilly image styling */
.tilly-image {
    width: clamp(100px, 12vw, 180px);
    height: auto;
    object-fit: contain;
    display: block;
}

/* Mobile Tilly - positioned on top border of feature-item */
.tilly-mobile {
    top: 0;
    left: 20px;
    transform: translateY(-100%);
    margin-top: 0.8rem;
}

/* Tablet Tilly - positioned on top border of feature-item */
.tilly-tablet {
    top: 0;
    right: 20px;
    transform: translateY(-100%);
}

/* Desktop Tilly - positioned on top border of feature-item */
.tilly-desktop {
    top: 0;
    right: 20px;
    transform: translateY(-100%);
}

/* ================================================================
   7) CTA BUTTON (CALL-TO-ACTION STYLING)
   ---------------------------------------------------------------
   
   Call-to-action buttons that encourage users to start using the
   platform. These buttons use the primary brand color and have
   smooth hover animations.
   
   FEATURES:
   - Brand color styling with hover states
   - Smooth transitions and animations
   - Rounded button design
   - Responsive sizing and spacing
   - Accessible focus states
   ================================================================ */

/* ===== CTA button styling ===== */
.cta-button {
    background: var(--tilburg-yellow);
    border: none;
    color: white;
    font-weight: 700;
    font-size: 1.12rem;
    padding: 0.5rem 2.4rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    background: var(--tilburg-yellow-dark);
    transform: translateY(-2px);
    color: white;
}

/* Mobile CTA button spacing */
@media (max-width: 767px) {
    .hero-section .d-md-none {
        margin-bottom: 2rem;
    }
}

/* ================================================================
   8) SCROLL INDICATOR (NAVIGATION HELPER)
   ---------------------------------------------------------------
   
   Animated scroll indicator that helps users navigate to the main
   content below the hero section. Features a bouncing animation
   and smooth scrolling behavior.
   
   FEATURES:
   - Bouncing animation to draw attention
   - Smooth scroll behavior on click
   - Responsive positioning
   - Brand color integration
   - Hover state feedback
   ================================================================ */

/* ===== Scroll indicator styling ===== */
.scroll-indicator {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--tilburg-blue);
    cursor: pointer;
    animation: bounce 2s infinite;
    text-decoration: none;
    z-index: 2;
}

.scroll-indicator:hover {
    color: var(--tilburg-yellow);
}

.scroll-indicator--with-navbar {
    bottom: calc(25px + 120px);
}

#features .scroll-indicator {
    bottom: 35px;
}

/* Bounce keyframes */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0);}
    40% { transform: translateX(-50%) translateY(-10px);}
    60% { transform: translateX(-50%) translateY(-5px);}
}

/* Responsive scroll indicator */
@media (max-width: 768px) {
    .scroll-indicator {
        bottom: 15px;
    }
    
    .scroll-indicator div {
        font-size: 0.9rem;
    }
}

/* ================================================================
   9) SECTION STYLING (GENERAL LAYOUT)
   ---------------------------------------------------------------
   
   General section styling for content areas below the hero section.
   Provides consistent spacing and layout for different content blocks.
   
   FEATURES:
   - Full-height sections with proper padding
   - Centered content alignment
   - Consistent spacing between sections
   - Responsive height adjustments
   ================================================================ */

/* ===== General section styling ===== */
.section {
    min-height: 100vh;
    padding: 100px 0;
    display: flex;
    align-items: center;
    position: relative;
}

/* First content section after hero */
.first-content-section {
    padding-top: 120px;
}

/* ================================================================
   10) ABOUT SECTION (TABBED CONTENT AREA)
   ---------------------------------------------------------------
   
   The about section contains tabbed content that explains how the
   platform helps students and supports courses. Features responsive
   typography and accessible navigation.
   
   FEATURES:
   - Tabbed content navigation
   - Responsive typography scaling
   - Accessible navigation pills
   - Content cards with proper spacing
   - Mobile-friendly layout adjustments
   ================================================================ */

/* ===== About section container ===== */
.about-section {
  padding-block: clamp(1rem, 2vw, 2rem);
}

.about-card {
  padding: clamp(1rem, 2.5vw, 2.5rem);
}

.about-section h5 {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}

.about-section h6 {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  margin-top: 1rem;
}

.about-section p,
.about-section li {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.6;
}

.nav-pills .nav-link {
  font-size: clamp(0.85rem, 1vw, 1rem);
  padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.8rem, 1.5vw, 1rem);
}

/* ================================================================
   11) FEATURES GRID LAYOUT (SECONDARY FEATURES)
   ---------------------------------------------------------------
   
   Secondary features grid that displays additional platform benefits
   in a unique layout with a central image and surrounding feature
   boxes. Responsive design adapts to different screen sizes.
   
   FEATURES:
   - Grid layout with central image
   - Feature boxes with icons and descriptions
   - Responsive column adjustments
   - Proper spacing and alignment
   - Mobile-friendly stacking layout
   ================================================================ */

/* ===== Features grid wrapper ===== */
.grid-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    gap: 2rem 2rem;
    justify-items: center;
    align-items: start;
    position: relative;
    margin: 3rem auto;
    max-width: 1250px;
}

.feature-box {
    max-width: 520px;
    text-align: left;
    z-index: 2;
}

.feature-box h5 {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
}

.icon-lg {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    min-width: 40px;
}

.center-image-container {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    position: relative;
    z-index: 1;
}

.center-image {
    max-width: 500px;
    transform: translateY(10%); /* Push image down halfway between rows */
}

/* ================================================================
   12) RESPONSIVE VIDEO (VIDEO SIZING)
   ---------------------------------------------------------------
   
   Responsive video styling for the demo video on the home page.
   Ensures proper sizing and aspect ratio across all devices.
   
   FEATURES:
   - Responsive width adjustments
   - Maximum width constraints
   - Proper aspect ratio maintenance
   - Mobile-optimized sizing
   ================================================================ */

/* ===== Responsive video sizing ===== */
@media (max-width: 768px) {
    .ga-video {
        width: 90% !important;
        max-width: 500px !important;
    }
}

@media (max-width: 576px) {
    .ga-video {
        width: 95% !important;
        max-width: 400px !important;
    }
}

/* ================================================================
   13) RESPONSIVE DESIGN (MOBILE BREAKPOINTS)
   ---------------------------------------------------------------
   
   Comprehensive responsive design system that adapts the home page
   layout for different screen sizes. Uses mobile-first approach with
   progressive enhancement for larger screens.
   
   FEATURES:
   - Mobile-first responsive design
   - Progressive enhancement for larger screens
   - Touch-friendly interface elements
   - Optimized typography scaling
   - Flexible layout adjustments
   ================================================================ */

/* ===== Tablets & small laptops (<= 768px) ===== */
@media (max-width: 768px) {
    .hero-section { 
        min-height: 100vh; /* always full viewport */
        padding: 20px 16px 30px;
        overflow: hidden; /* stop content from spilling out */
        flex-direction: column;
        justify-content: center;
    }
    .hero-title { 
        font-size: clamp(1.6rem, 4.5vw, 1.8rem);
        margin-bottom: 0.8rem;
        text-align: center;
        word-break: break-word;
        line-height: 1.2;
    }
    .hero-subtitle { 
        font-size: 0.95rem;
        margin-bottom: 1.4rem;
        text-align: center;
        line-height: 1.4;
    }

    /* Features layout */
    .features-row {
        gap: 0.8rem 0;
        flex-direction: column;
    }
    .feature-card {
        box-shadow: none;
        border-radius: 16px;
    }
    .feature-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }
    .feature-title {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    .feature-description {
        font-size: 0.88rem;
        line-height: 1.4;
    }

    /* Scroll indicator position */
    .scroll-indicator {
        bottom: 20px;
    }

    .center-image-container {
        display: none !important;
    }

    .nav-pills {
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
  }

  .nav-pills .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    text-align: center;
    white-space: normal; /* allows wrapping instead of overflowing */
  }

  .nav-pills .nav-link i {
    font-size: 1rem;
    margin-right: 0.5rem;
  }

  /* Grid wrapper mobile adjustments */
  .grid-wrapper {
      display: flex;
      flex-direction: column;
      gap: 2rem;
  }

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

  .feature-box h5 {
      justify-content: center;
  }

  .center-image {
      transform: none;
      max-width: 300px;
  }
}

/* Standard smartphones (<= 480px) */
@media (max-width: 480px) {
    .nav-pills .nav-link {
        display: block;
        width: 100%;
        font-size: 0.85rem;
        padding: 0.5rem 0.8rem;
        margin-bottom: 0.4rem;
        border-radius: 10px;
        text-align: center;
    }

    .nav-pills {
        flex-direction: column;
        gap: 0.3rem;
    }

    .nav-pills .nav-link i {
        font-size: 1rem;
        margin-right: 0.4rem;
    }

    .hero-section { 
        min-height: 100vh;
        padding: 16px 12px 24px;
        overflow: hidden;
    }
    .hero-title { 
        font-size: clamp(1.3rem, 5vw, 1.35rem);
        margin-bottom: 0.6rem;
    }
    .hero-subtitle { 
        font-size: 0.9rem; 
        margin-bottom: 1rem;
    }

    .features-row {
        gap: 0.5rem 0;
    }
    .feature-card { 
        border-radius: 14px;
    }
    .feature-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }
    .feature-title {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    .feature-description {
        font-size: 0.88rem;
        line-height: 1.4;
    }

    .cta-button {
        width: 100%; /* full width for better tapping */
        padding: 0.6rem;
    }

    .scroll-indicator {
        bottom: 20px;
    }

    /* Grid wrapper small screen adjustments */
    .grid-wrapper {
        gap: 1.5rem;
    }
    
    .feature-box h5 {
        font-size: 1rem;
    }
    
    .center-image {
        max-width: 250px;
    }
}

/* Very small devices (<= 350px) */
@media (max-width: 350px) {
    .hero-title { 
        font-size: 1.1rem; 
        margin-bottom: 0.5rem;
    }
    .hero-subtitle { 
        font-size: 0.82rem; 
        margin-bottom: 0.8rem;
    }
    .feature-title {
        font-size: 0.88rem;
    }
    .feature-description {
        font-size: 0.78rem;
    }
}

/* ================================================================
   14) RESPONSIVE CARD LAYOUT (MOBILE IMPROVEMENTS)
   ---------------------------------------------------------------
   
   Additional responsive improvements for card layouts and navigation
   elements on mobile devices. Ensures optimal usability and readability.
   
   FEATURES:
   - Mobile-optimized card spacing
   - Touch-friendly navigation elements
   - Improved typography for small screens
   - Better spacing for university logos
   - Enhanced mobile user experience
   ================================================================ */

/* ===== Responsive card layout improvements ===== */
@media (max-width: 768px) {
    .about-card {
        margin: 1rem 0;
        padding: 1.5rem;
    }
    
    .nav-pills-dark .nav-link {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
    
    .tab-content {
        font-size: 0.95rem;
    }
    
    /* Main content section spacing */
    .pt-xl-5 {
        padding-top: 3rem !important;
    }
    
    /* University logos spacing */
    .d-flex.justify-content-center.align-items-center.gap-4 {
        gap: 1.5rem !important;
    }
    
    .d-flex.justify-content-center.align-items-center.gap-4 img {
        max-width: 120px !important;
    }
}

@media (max-width: 576px) {
    .nav-pills-dark .nav-link {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .nav-pills-dark .nav-link i {
        margin-right: 0 !important;
    }
    
    /* Small screen improvements */
    .d-flex.justify-content-center.align-items-center.gap-4 {
        gap: 1rem !important;
        flex-direction: column;
    }
    
    .d-flex.justify-content-center.align-items-center.gap-4 img {
        max-width: 100px !important;
    }
    
    .pt-xl-5 {
        padding-top: 2rem !important;
    }
    
    .about-card {
        padding: 1rem;
    }
}