/* ========================================
   RESPONSIVE BANNER - QUICK REFERENCE
   ======================================== */

/*
 * BREAKPOINT SUMMARY
 * ====================
 */

/* DESKTOP (1200px+) */
/* - Min height: 850px
   - Title: 100px
   - Padding-top: 70px
   - Layout: 2 columns side-by-side */

/* TABLETS (768px - 1199px) */
/* - Min height: 500px
   - Title: 48px
   - Padding-top: 50px
   - Content & image adaptation */

/* SMALL TABLETS (640px - 767px) */
/* - Min height: 450px
   - Title: 42px
   - Better button spacing
   - Mobile-first adjustments */

/* LARGE PHONES (480px - 639px) */
/* - Min height: 380px
   - Title: 36px
   - Stacked button layout
   - SVG patterns hidden */

/* EXTRA SMALL PHONES (375px - 479px) */
/* - Min height: 320px
   - Title: 32px
   - Icon-only video button
   - Minimal pagination */

/* ========================================
   RESPONSIVE VALUES CHART
   ======================================== */

/*
TYPOGRAPHY SCALING:
┌──────────────────┬──────────┬──────────┬──────────┬──────────┐
│ Element          │ Desktop  │ Tablet   │ Phone    │ XS Phone │
├──────────────────┼──────────┼──────────┼──────────┼──────────┤
│ Main Title       │ 100px    │ 48px     │ 36px     │ 32px     │
│ Sub Title        │ 35px     │ 16px     │ 13px     │ 12px     │
│ Description Text │ 18px     │ 13px     │ 12px     │ 10px     │
│ Button Text      │ default  │ default  │ 13px     │ 11px     │
└──────────────────┴──────────┴──────────┴──────────┴──────────┘

SPACING:
┌──────────────────┬──────────┬──────────┬──────────┬──────────┐
│ Property         │ Desktop  │ Tablet   │ Phone    │ XS Phone │
├──────────────────┼──────────┼──────────┼──────────┼──────────┤
│ Padding Top      │ 70px     │ 50px     │ 40px     │ 20px     │
│ Padding Bottom   │ varied   │ 30px     │ 50px     │ 35px     │
│ Content Margin   │ 200px    │ 20px     │ 15px     │ 10px     │
│ Button Margin    │ varied   │ varied   │ 10px     │ varied   │
└──────────────────┴──────────┴──────────┴──────────┴──────────┘

HEIGHTS:
┌──────────────────┬──────────┬──────────┬──────────┬──────────┐
│ Container        │ Desktop  │ Tablet   │ Phone    │ XS Phone │
├──────────────────┼──────────┼──────────┼──────────┼──────────┤
│ Banner Inner     │ 850px    │ 500px    │ 380px    │ 320px    │
│ Image Container  │ 700px    │ 300px    │ 100%     │ 80%      │
└──────────────────┴──────────┴──────────┴──────────┴──────────┘
*/

/* ========================================
   MOBILE-FIRST MEDIA QUERY SNIPPETS
   ======================================== */

/*
1. TABLET OPTIMIZATION (768px and below)
   └─ Use for tablet-specific adjustments
   └─ Content reflow begins here
   └─ Typography starts reducing

2. SMALL TABLET (640px and below)
   └─ Further refinement for smaller tablets
   └─ Button adjustments
   └─ Video button text remains

3. LARGE PHONE (480px and below)
   └─ Vertical stacking begins
   └─ Full-width elements
   └─ SVG patterns hidden

4. EXTRA SMALL PHONE (375px and below)
   └─ Minimal design implementation
   └─ Icon-only buttons where possible
   └─ Extreme space efficiency

*/

/* ========================================
   IMPORTANT CSS CLASSES
   ======================================== */

/*
.main-bnr-four              - Main banner container
.banner-inner               - Inner banner with background
.banner-content             - Text content section
.banner-media               - Image section
.d-flex                     - Button flex container
.video-bx4                  - Video button wrapper
.num-pagination             - Pagination controls
.shapes                     - SVG decorative shapes
.btn-skew-2                 - Button styling
.bg-pattern1 / .bg-pattern2 - Background SVG patterns
*/

/* ========================================
   RESPONSIVE IMAGE ATTRIBUTES
   ======================================== */

/*
All banner images now include:
├─ alt="Descriptive text"     (Accessibility)
├─ loading="lazy"             (Performance)
└─ title="Banner Title"       (Tooltip)

Example:
<img src="path.png" 
     alt="Let's talk fitness banner" 
     loading="lazy" 
     title="Fitness Banner">
*/

/* ========================================
   LAYOUT GRID SYSTEM
   ======================================== */

/*
Bootstrap Grid Classes Used:
├─ col-lg-6    (50% width on desktop)
├─ col-md-7/5  (58%/42% width on tablets)
└─ col-sm-12   (100% width on small screens)

Responsive Columns:
.col-lg-6  (Desktop, >992px)
.col-md-7  (Tablet, 768px-991px)
.col-sm-12 (Mobile, <768px) ✓ NEWLY ADDED
*/

/* ========================================
   COMMON RESPONSIVE PATTERNS
   ======================================== */

/*
1. BUTTON LAYOUT
   Desktop:  Horizontal flex (Get Started | Play Video)
   Mobile:   Vertical stack (full-width buttons)

2. IMAGE POSITIONING
   Desktop:  Fixed width (700px)
   Tablet:   Reduced width (300-450px)
   Mobile:   100% width (responsive)

3. TEXT VISIBILITY
   Desktop:  All text visible
   Mobile:   Description text hidden on tablets
   XS:       Video text hidden (icon only)

4. PAGINATION
   Desktop:  Left vertical
   Tablet:   Bottom horizontal
   Mobile:   Bottom-right compact
   XS:       Minimal right-bottom
*/

/* ========================================
   TESTING CHECKLIST
   ======================================== */

/*
□ Test on 375px width (iPhone SE)
□ Test on 480px width (Android standard)
□ Test on 640px width (small tablet)
□ Test on 768px width (iPad/tablet)
□ Test on 1024px width (large tablet)
□ Test on desktop (1200px+)
□ Verify image loading and scaling
□ Check pagination button accessibility
□ Verify text readability
□ Test button click targets (44px minimum)
□ Check landscape orientation
□ Verify no horizontal scrolling
*/

/* ========================================
   NOTES FOR DEVELOPERS
   ======================================== */

/*
1. MODIFYING BREAKPOINTS
   - All media queries are in assets/css/style.css
   - Lines ~24500-24700 contain mobile queries
   - Follow existing pattern for new queries

2. ADDING NEW ELEMENTS
   - Always consider mobile-first approach
   - Test at each breakpoint
   - Update media queries if needed
   - Maintain existing responsive classes

3. PERFORMANCE
   - Images use lazy loading
   - SVG patterns hidden on mobile (performance)
   - CSS is optimized for cascading
   - No duplicate styles

4. ACCESSIBILITY
   - All images have alt text
   - Color contrast maintained
   - Touch targets 44px+ on mobile
   - Semantic HTML structure preserved

5. FUTURE UPDATES
   - Test changes on real devices
   - Check different orientations
   - Verify touch interactions
   - Monitor page load performance
*/
