@charset "utf-8";
/*
Design by http://www.templateaccess.com
Released for free under a Creative Commons Attribution 3.0 License
*/

/* ===================================================================
   ════════════════════════════════════════════════════════════════
   GENERAL PAGE STYLES (NOT SPEAKERS-SPECIFIC)
   ════════════════════════════════════════════════════════════════
   These styles are general page styles that can be used across
   multiple pages. You can remove this entire section if you only
   want speakers-specific styles.
   =================================================================== */

/* ============================================
   GENERAL: MAIN CONTENT LAYOUT
   ============================================ */
/* ⚠️ GENERAL STYLE: This affects the main content area layout */
/* Override main content bar layout for speakers page */
/* Centers content, removes float layout, adds horizontal padding */
/* Note: This style is general and could be used by other pages */
.content .mainbar {
    margin: 0 auto;        /* Centers the content horizontally */
    padding: 0 20px;       /* Adds 20px padding on left and right */
    width: 100%;           /* Full width container */
    float: none;           /* Removes float-based layout */
}


/* ===================================================================
   ════════════════════════════════════════════════════════════════
   SPEAKERS-SPECIFIC STYLES
   ════════════════════════════════════════════════════════════════
   These styles are ONLY for the speakers.html page.
   All styles below this line are speakers-specific.
   =================================================================== */

/* ============================================
   SPEAKERS: CARD GRID CONTAINER
   ============================================ */
/* 🎯 SPEAKERS ONLY: Main container for all speaker cards using CSS Grid */
/* Used in speakers.html - Contains all .speaker-card elements */
/* Grid automatically adjusts based on screen size via media queries */
.speakers-container {
    display: grid;                          /* Uses CSS Grid for flexible layout */
    grid-template-columns: repeat(4, 1fr);  /* 4 equal-width columns on desktop */
    gap: 25px;                              /* Space between grid items */
    justify-items: center;                  /* Centers each card within its grid cell */
    margin: 40px 0;                         /* Vertical spacing above and below grid */
}

/* ============================================
   SPEAKERS: INDIVIDUAL SPEAKER CARD
   ============================================ */
/* 🎯 SPEAKERS ONLY: Styling for each speaker card element */
/* Used in speakers.html - Each <div class="speaker-card"> */
.speaker-card {
    text-align: center;         /* Centers all content within the card */
    max-width: 250px;           /* Prevents cards from getting too wide */
    padding: 15px;              /* Internal spacing inside the card */
    border-radius: 15px;        /* Rounded corners for modern look */
    transition: transform 0.3s ease;  /* Smooth animation for hover effect */
}

/* 🎯 SPEAKERS ONLY: Hover effect: lifts card slightly when user hovers over it */
.speaker-card:hover {
    transform: translateY(-5px);  /* Moves card up 5px on hover */
}

/* 🎯 SPEAKERS ONLY: Speaker profile image styling */
.speaker-card img {
    width: 80px;                /* Fixed width for circular image */
    height: 80px;               /* Fixed height matching width */
    object-fit: cover;          /* Crops image to fill circle while maintaining aspect ratio */
    border-radius: 50%;         /* Makes image perfectly circular */
    margin-bottom: 12px;        /* Space between image and text below */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);  /* Subtle shadow for depth */
    aspect-ratio: 1/1;          /* Ensures image stays square/circular */
}

/* 🎯 SPEAKERS ONLY: Speaker name heading */
.speaker-card h3 {
    font-size: 12px;            /* Small, readable font size */
    margin: 8px 0 4px;          /* Vertical spacing: 8px top, 4px bottom */
    font-family: Verdana, Geneva, sans-serif;  /* Consistent font family */
    font-style: normal;         /* Ensures no italic styling */
}

/* 🎯 SPEAKERS ONLY: Speaker title/description text */
.speaker-card p {
    margin: 2px 0;              /* Minimal vertical spacing between paragraphs */
    font-size: 11px;            /* Slightly smaller than heading */
    color: #555;                /* Medium gray for secondary text */
    font-family: Verdana, Geneva, sans-serif;  /* Matches heading font */
    font-style: normal;         /* Ensures no italic styling */
}

/* ============================================
   SPEAKERS: GRID RESPONSIVE BREAKPOINTS
   ============================================ */
/* 🎯 SPEAKERS ONLY: These media queries specifically control the speakers grid layout */
/* Used in speakers.html - Controls .speakers-container grid columns */
/* They override the default 4-column layout at different screen sizes */

/* Medium screens / laptops (max-width: 1024px) */
/* 3 columns per row on medium screens */
@media (max-width: 1024px) {
    .speakers-container {
        grid-template-columns: repeat(3, 1fr);  /* 3 equal-width columns */
    }
}

/* Tablets and landscape mobiles (max-width: 768px) */
/* 2 columns per row on tablets */
@media (max-width: 768px) {
    .speakers-container {
        grid-template-columns: repeat(2, 1fr);  /* 2 equal-width columns */
    }
}

/* Tablets (max-width: 992px) - Alternative breakpoint */
/* 2 columns per row on tablets */
@media (max-width: 992px) {
    .speakers-container {
        grid-template-columns: repeat(2, 1fr);  /* 2 columns instead of 4 */
    }
}

/* Small mobile devices (max-width: 600px) */
/* Single column layout on small screens */
@media (max-width: 600px) {
    .speakers-container {
        grid-template-columns: 1fr;  /* One column layout */
    }
}

/* Mobile phones (max-width: 480px) */
/* Single column layout on mobile */
@media (max-width: 480px) {
    .speakers-container {
        grid-template-columns: 1fr;  /* Single column - full width cards */
    }
}

/* ============================================
   SPEAKERS: SECTION HEADING STYLES
   ============================================ */
/* 🎯 SPEAKERS ONLY: Styling for main section headings in speakers.html page */
/* Used in speakers.html - The "List of Speakers" heading section */
/* Creates an attractive header with gradient background and decorative elements */
.section-heading {
    background: linear-gradient(135deg, #fff8cc 0%, #ffeb99 100%);  /* Soft yellow gradient background */
    padding: 12px 0;                  /* Vertical padding only */
    font-family: Verdana, Geneva, sans-serif;  /* Consistent font family */
    text-align: center;               /* Centers all heading content */
    margin-bottom: 40px;              /* Space below heading section */
    width: 100%;                      /* Full width container */
    box-sizing: border-box;           /* Includes padding in width calculation */
    overflow-x: auto;                 /* Allows horizontal scroll if content overflows */
    border-radius: 8px;               /* Gentle rounded corners for modern look */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);  /* Light shadow for subtle depth effect */
}

/* 🎯 SPEAKERS ONLY: Main section title (h2) */
.section-heading h2 {
    font-size: 16px;                  /* Medium-sized heading */
    color: #063;                      /* Signature green color matching site theme */
    font-weight: 700;                 /* Bold weight for emphasis */
    margin-bottom: 6px;               /* Small space below title */
    text-transform: uppercase;       /* All uppercase letters for impact */
    letter-spacing: 1px;              /* Slight spacing between letters for readability */
}

/* 🎯 SPEAKERS ONLY: Subtitle (h3) */
.section-heading h3 {
    font-size: 12px;                  /* Smaller than main title */
    color: #063;                      /* Same green as main title */
    font-weight: 600;                 /* Semi-bold weight */
    margin-top: 0;                    /* No top margin */
}

/* 🎯 SPEAKERS ONLY: Subtitle note/span element */
/* Used for additional descriptive text within the subtitle */
.section-heading h3 span {
    font-size: 12px;                  /* Same size as subtitle */
    font-weight: normal;               /* Normal weight (lighter than subtitle) */
    color: #333;                      /* Dark gray for secondary information */
}

/* 🎯 SPEAKERS ONLY: Decorative underline for main title */
/* Creates a visual separator line below the h2 heading */
.section-heading h2::after {
    content: "";                      /* Empty content for pseudo-element */
    display: block;                   /* Block-level element */
    width: 80px;                      /* Fixed width for the line */
    height: 3px;                      /* Line thickness */
    background: #063;                 /* Green color matching heading */
    margin: 8px auto 0;               /* Centers line: 8px top margin, auto left/right */
    border-radius: 2px;               /* Slightly rounded line ends */
}