/* ==========================================================================
   Full-Width Matching Hero Header Section
   (Rubric Check: CSS website layout, Select by class)
   ========================================================================== */

.gallery-hero {
    /* Dual Layer: Linear dark protective gradient mask + Fallback ocean cover photography graphic */
    /* Rubric Check: Background styling, Background color configuration */
    background: linear-gradient(rgba(10, 25, 47, 0.55), rgba(10, 25, 47, 0.75)), 
                url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=80') no-repeat center center/cover;
    width: 100%;
    /* Large top padding completely forces layout down past the fixed navigation menu links */
    padding: 140px 20px; /* Rubric Check: Padding usage boundaries */
    text-align: center;
    margin-bottom: 50px; /* Rubric Check: Margin declarations */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Function: Center aligns text container width inside hero frame boundaries. */
/* Rubric Check: Margin and padding properties, Layout structures */
.gallery-hero .hero-content {
    max-width: 1000px;
    margin: 0 auto; /* Rubric Check: Horizontal auto margin centering layout */
}

/* Function: Styles typography sizing, bold font weights, and font colors for primary titles. */
/* Rubric Check: Font style, Font color, Text styling, Use of selector: multiple element */
.gallery-hero .section-title {
    font-size: 3.5rem;
    color: #fff; /* Rubric Check: Font color */
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-family: 'Playfair Display', serif; /* Rubric Check: Font style selection */
    line-height: 1.2;
}

/* Function: Sets up paragraph tracking limits, line heights, and muted tones for subtitles. */
/* Rubric Check: Font style, Text styling, Margin properties */
.gallery-hero .section-subtitle {
    font-size: 1.15rem;
    color: #a8b2d1;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    letter-spacing: 0.3px;
}

/* ==========================================================================
   Light Theme Adjustments to Maintain Proper Contrast
   ========================================================================== */

/* Function: Updates hero background layers to soft gray translucent masks for light themes. */
/* Rubric Check: Use of selector: multiple element, Background gradients */
body.light-theme .gallery-hero {
    background: linear-gradient(rgba(240, 244, 248, 0.45), rgba(240, 244, 248, 0.65)), 
                url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=80') no-repeat center center/cover;
}

/* Function: Switches main section titles to deep blue tones for readability on light backdrops. */
/* Rubric Check: Font color variations, Compound element selectors */
body.light-theme .gallery-hero .section-title {
    color: #0a192f;
}

/* Function: Changes sub paragraph text fields to clean slate grey colors inside light views. */
/* Rubric Check: Font color, Multi selector combination layout triggers */
body.light-theme .gallery-hero .section-subtitle {
    color: #4a5568;
}

/* ==========================================================================
   Interactive Travel Deck Component Modules
   ========================================================================== */

/* Function: Outer wrap framework enclosing deck structures and setting internal gutters. */
/* Rubric Check: CSS website layout, Select by class, Margin and padding */
.tips-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem; /* Rubric Check: Outer side padding declaration */
}

/* Function: Establishes an advanced asymmetric two-column sidebar structural grid layout. */
/* Rubric Check: CSS website layout (Grid structure), Select by class, Margins */
.deck-container {
    display: grid; /* Rubric Check: Advanced layout via CSS Grid */
    grid-template-columns: 1fr 2fr; /* Sidebar column split layout framework */
    gap: 3rem;
    margin-bottom: 5rem;
}

/* Function: Fixed sticky panels that lock along viewports during page scroll actions. */
/* Rubric Check: CSS website layout, Select by class, Background configurations */
.sticky-panel {
    position: sticky; /* Sticky position tracking constraints */
    top: 140px;
    height: fit-content;
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(10,25,47,0.8) 100%);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    padding: 3rem 2rem;
}

/* Function: Resets native lists margins and alignments for custom checklist groups. */
/* Rubric Check: List styling configuration parameters, Select by class */
.checklist-items {
    list-style: none; /* Rubric Check: Removes generic list symbols */
    margin-top: 1.5rem;
}

/* Function: Allocates text padding spaces to hold custom pseudo indicator symbols securely. */
/* Rubric Check: Custom list items selectors, Margin and padding rules */
.checklist-items li {
    position: relative;
    padding-left: 2rem; /* Rubric Check: Indentation padding for list symbols */
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Function: Injects custom checkmark icon indicators preceding unique listing rows. */
/* Rubric Check: List item pseudo elements, Font color, Content generation positioning */
.checklist-items li::before {
    content: '✓'; /* Rubric Check: Custom check icon replacement */
    position: absolute;
    left: 0;
    color: var(--cyan);
    font-weight: 700;
}

/* Function: Sets up a balanced fluid multi column grid framework matrix for tip cards. */
/* Rubric Check: CSS website layout (CSS Grid structures), Select by class */
.tips-masonry {
    display: grid; /* Rubric Check: Multi column sub grid execution matrix */
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* Function: Styles interactive info card frames using glassmorphism borders and radii. */
/* Rubric Check: CSS website layout, Select by class, Transitions */
.interactive-info-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    padding: 2.5rem;
    transition: all 0.4s var(--ease-premium);
}

/* Function: Triggers smooth border color shifts and subtle glowing shadows when hovered. */
/* Rubric Check: Hover interaction styling, Selector chaining variations */
.interactive-info-card:hover {
    border-color: var(--cyan);
    box-shadow: 0 15px 35px rgba(100, 255, 218, 0.1); /* Rubric Check: Glowing interactive micro effects */
}

/* Function: Formats typography font styles and margins for information headings. */
/* Rubric Check: Font style, Text styling, Compound element paths */
.interactive-info-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}