/**
 * Ishaka Community Church - Homepage Sections Style Module
 * Handles: About Snapshot, Mission/Vision Pillars, and Core Values Grid
 */

.about-snapshot-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--color-white);
}

.snapshot-container {
    max-width: var(--max-width-content);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}

/* Introduction Text Block */
.snapshot-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.snapshot-intro h2 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-md);
    position: relative;
    display: inline-block;
    padding-bottom: var(--space-sm);
}

/* Subtle underlying bar matching our primary blue theme */
.snapshot-intro h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 3px;
    background-color: var(--color-secondary);
    border-radius: var(--border-radius-pill);
}

.snapshot-intro p {
    font-size: var(--fs-md);
    color: #2D2D2D;
    line-height: 1.7;
}

/* ==========================================================================
   IDENTITY PILLARS (Vision & Mission Side-by-Side Cards)
   ========================================================================== */
.identity-pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.pillar-card {
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--transition-smooth),
                box-shadow var(--duration-fast) var(--transition-smooth);
}

.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.pillar-icon-box {
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md) auto;
}

/* Tiny cross or decorative visual container utilizing gold token rules */
.pillar-icon-box svg {
    width: 28px;
    height: 28px;
    fill: var(--color-secondary);
}

.pillar-card h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pillar-card p {
    font-size: var(--fs-md);
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.4;
}

/* ==========================================================================
   CORE VALUES BADGE GRID
   ========================================================================== */
.values-wrapper {
    text-align: center;
}

.values-wrapper h3 {
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.values-badge-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    max-width: 900px;
    margin: 0 auto;
}

.value-badge {
    background-color: var(--color-white);
    border: 1px solid var(--color-secondary);
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-fast) var(--transition-smooth);
}

/* Inverts elegantly to solid primary layouts upon touchscreen interaction */
.value-badge:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: scale(1.05);
}

/* ==========================================================================
   Responsive Display Media Breaks
   ========================================================================== */
@media (min-width: 768px) {
    .identity-pillars-grid {
        grid-template-columns: 1fr 1fr; /* Side-by-side alignment on tablets/desktops */
        gap: var(--space-2xl);
    }
    
    .snapshot-intro h2 {
        font-size: var(--fs-3xl);
    }
}


/* ==========================================================================
   WELCOME MESSAGE SECTION
   ========================================================================== */
.pastor-welcome-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: rgba(15, 76, 92, 0.02); /* Subtle theme tint */
    border-top: 1px solid rgba(15, 76, 92, 0.05);
}

.pastor-container {
    max-width: var(--max-width-content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

/* Elegant framing for the couple's photo */
.pastor-media-frame {
    position: relative;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
}

.pastor-media-frame::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: -12px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-secondary);
    border-radius: var(--border-radius-lg);
    z-index: 1;
}

.pastor-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-md);
}

/* Typography Layout */
.pastor-content-box {
    display: flex;
    flex-direction: column;
}

.pastor-content-box h2 {
    font-size: var(--fs-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.pastor-title {
    font-size: var(--fs-sm);
    color: rgb(232, 179, 43);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-lg);
}

.pastor-message {
    font-size: var(--fs-base);
    color: #2D2D2D;
    line-height: 1.75;
    margin: 0;
    opacity: 0.95;
    font-style: italic;
}

/* Desktop Responsive Alignment */
@media (min-width: 992px) {
    .pastor-container {
        grid-template-columns: 0.9fr 1.1fr;
        gap: var(--space-3xl);
    }
    
    .pastor-media-frame {
        max-width: 100%;
        margin: 0;
    }
    
    .pastor-content-box h2 {
        font-size: var(--fs-3xl);
    }
}


/* ==========================================================================
   DYNAMIC SERMONS GRID SYSTEM
   ========================================================================== */
.sermons-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--color-white);
}

.sermons-container {
    max-width: var(--max-width-content);
    margin: 0 auto;
}

/* Row alignment separating title from the view-all control button */
.sermons-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2xl);
}

.sermons-subtitle {
    font-size: var(--fs-xs);
    color: var(--color-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: var(--space-xs);
}

.sermons-title {
    font-size: var(--fs-2xl);
    color: var(--color-primary);
    font-weight: 700;
}

.btn-sermons-view-all {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-sm) var(--space-lg);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    transition: all var(--duration-fast) var(--transition-smooth);
}

.btn-sermons-view-all:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Responsive Grid Base */
.sermons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

/* Card Visual Matrix */
.sermon-card {
    background-color: var(--color-white);
    border: 1px solid rgba(15, 76, 92, 0.08);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--duration-fast) var(--transition-smooth),
                box-shadow var(--duration-fast) var(--transition-smooth);
}

.sermon-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* Image framing box with locked aspect ratio */
.sermon-media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-primary);
    overflow: hidden;
}

.sermon-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--transition-smooth);
}

.sermon-card:hover .sermon-thumbnail {
    transform: scale(1.04);
}

/* Metadata tag overlay panels */
.sermon-tag-pill {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    background-color: rgba(3, 17, 87, 0.9);
    backdrop-filter: blur(4px);
    color: var(--color-white);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
}

/* Card Text Context Container */
.sermon-details-box {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sermon-meta-timeline {
    font-size: var(--fs-xs);
    color: rgba(14, 71, 145, 0.6);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.sermon-card-title {
    font-size: var(--fs-md);
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

.sermon-excerpt {
    font-size: var(--fs-sm);
    color: #2D2D2D;
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: var(--space-xl);
    flex-grow: 1; /* Pushes the button to lock evenly at the bottom row */
}

/* Action Trigger Links */
.btn-sermon-watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-md);
    text-align: center;
    transition: all var(--duration-fast) var(--transition-smooth);
}

.btn-sermon-watch:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Skeleton Loading Visual Placeholder State */
.sermon-skeleton-card {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: rgba(15, 52, 92, 0.04);
    border-radius: var(--border-radius-lg);
}

/* ==========================================================================
   Responsive Grid Query Layout Adjustments
   ========================================================================== */
@media (min-width: 768px) {
    .sermons-header {
        flex-direction: row;
        align-items: center;
    }
    .sermons-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
    }
    .sermons-title {
        font-size: var(--fs-3xl);
    }
}

@media (min-width: 1200px) {
    .sermons-grid {
        grid-template-columns: repeat(3, 1fr); /* Generates 3 column displays seamlessly on desktop desktops */
        gap: var(--space-xl);
    }
}


/* ==========================================================================
   DYNAMIC UPCOMING EVENTS TIMELINE
   ========================================================================== */
.events-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: rgba(15, 76, 92, 0.02); /* Tint break separating sections */
    border-top: 1px solid rgba(15, 76, 92, 0.05);
}

.events-container {
    max-width: 850px; /* Slimmer max-width keeps timeline entries beautifully readable */
    margin: 0 auto;
}

.events-header-block {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.events-subtitle {
    font-size: var(--fs-xs);
    color: rgb(223, 191, 4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: var(--space-xs);
}

.events-title {
    font-size: var(--fs-2xl);
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.events-lead-text {
    font-size: var(--fs-sm);
    color: #2D2D2D;
    font-size: 15px;
    opacity: 0.8;
}

/* Timeline Layout Rows Stack */
.events-timeline-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.event-row-card {
    background-color: var(--color-white);
    border: 1px solid rgba(15, 76, 92, 0.06);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column; /* Stack vertically on mobile viewports */
    gap: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--transition-smooth),
                box-shadow var(--duration-fast) var(--transition-smooth);
}

.event-row-card:hover {
    transform: translateX(4px); /* Unique sidebar slide nudge on mouse interactions */
    box-shadow: var(--shadow-md);
}

/* Dedicated Calendar Date Badge Graphic block */
.event-calendar-badge {
    background-color: var(--color-primary);
    color: var(--color-white);
    width: 75px;
    height: 75px;
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-badge-day {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1;
}

.event-badge-month {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-secondary);
}

/* Core textual information layout rules */
.event-meta-info-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}

.event-time-place {
    font-size: var(--fs-xs);
    color: rgb(221, 200, 9);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.event-headline-title {
    font-size: var(--fs-md);
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.event-row-summary {
    font-size: var(--fs-sm);
    color: #2D2D2D;
    opacity: 0.8;
    line-height: 1.5;
}

/* Right Side Link Actions */
.event-action-panel {
    display: flex;
    align-items: center;
}

.btn-event-details {
    width: 100%;
    text-align: center;
    background-color: transparent;
    border: 1px solid rgba(15, 76, 92, 0.15);
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius-md);
    transition: all var(--duration-fast) var(--transition-smooth);
}

.btn-event-details:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Center aligned calendar control footer links */
.events-footer-action {
    text-align: center;
    margin-top: var(--space-2xl);
}

.btn-events-calendar {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Skeleton Loading Line Bars */
.event-skeleton-row {
    width: 100%;
    height: 110px;
    background-color: rgba(15, 76, 92, 0.03);
    border-radius: var(--border-radius-lg);
}

/* ==========================================================================
   Responsive Display Grid Media Adjustments
   ========================================================================== */
@media (min-width: 768px) {
    .events-header-block {
        text-align: left;
        margin-bottom: var(--space-2xl);
    }
    
    .event-row-card {
        flex-direction: row; /* Horizontal flex layout alignment on tablet / desktop screens */
        align-items: center;
        padding: var(--space-xl);
    }

    .event-headline-title {
        font-size: var(--fs-lg);
    }

    .btn-event-details {
        width: auto;
    }
    
    .events-header-block h2 {
        font-size: var(--fs-3xl);
    }
}


/* ==========================================================================
   DYNAMIC IMPACT PROJECTS ALTERNATING LAYOUT
   ========================================================================== */
.projects-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--color-white);
}

.projects-container {
    max-width: var(--max-width-content);
    margin: 0 auto;
}

.projects-header-block {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.projects-subtitle {
    font-size: var(--fs-xs);
    color: var(--color-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: var(--space-xs);
}

.projects-title {
    font-size: var(--fs-2xl);
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.projects-header-line {
    width: 60px;
    height: 3px;
    background-color: var(--color-secondary);
    margin: 0 auto;
    border-radius: var(--border-radius-pill);
}

/* Feature Rows Stack Container */
.projects-showcase-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl); /* Generous breathing room between project stories */
}

.project-row-item {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout on mobile screens */
    gap: var(--space-xl);
    align-items: center;
}

/* Image Showcase Frame */
.project-image-box {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: relative;
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--transition-smooth);
}

.project-row-item:hover .project-img {
    transform: scale(1.03);
}

/* Context/Text Information Layout */
.project-info-box {
    display: flex;
    flex-direction: column;
}

.project-tag {
    font-size: var(--fs-xs);
    color: var(--color-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-xs);
}

.project-row-item h3 {
    font-size: var(--fs-xl);
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: var(--space-md);
    line-height: 1.3;
}

.project-description {
    font-size: var(--fs-base);
    color: #2D2D2D;
    opacity: 0.85;
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

/* Clean, modern pill button for individual projects */
.btn-project-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-secondary);
    transition: color var(--duration-fast) var(--transition-smooth);
}

.btn-project-link:hover {
    color: var(--color-secondary);
}

/* Skeleton Loading Line Placeholder Bars */
.project-skeleton-row {
    width: 100%;
    height: 320px;
    background-color: rgba(15, 76, 92, 0.02);
    border-radius: var(--border-radius-lg);
}

/* ==========================================================================
   Responsive Display Layout Alternations
   ========================================================================== */
@media (min-width: 992px) {
    .project-row-item {
        grid-template-columns: repeat(2, 1fr); /* Equal split screens on desktops */
        gap: var(--space-3xl);
    }
    
    .projects-title {
        font-size: var(--fs-3xl);
    }
    
    /* Elegant Alternating Layout Magic: Flips every even-indexed row horizontally */
    .project-row-item:nth-child(even) .project-image-box {
        order: 2;
    }
    
    .project-row-item:nth-child(even) .project-info-box {
        order: 1;
        padding-right: var(--space-xl);
    }
    
    .project-row-item:nth-child(odd) .project-info-box {
        padding-left: var(--space-xl);
    }
    
    .project-image-box {
        aspect-ratio: 16 / 11; /* Widescreen treatment on desktops */
    }
}


/* ==========================================================================
   DYNAMIC ASYMMETRIC GALLERY & TESTIMONIAL SPLIT
   ========================================================================== */
.gallery-stories-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: rgba(15, 76, 92, 0.02);
    border-top: 1px solid rgba(15, 76, 92, 0.05);
}

.gallery-stories-container {
    max-width: var(--max-width-content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
}

.grid-subtitle {
    font-size: var(--fs-xs);
    color: var(--color-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: var(--space-xs);
}

.grid-title {
    font-size: var(--fs-2xl);
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: var(--space-xl);
}

/* --- Photo Matrix Layout Rules --- */
.gallery-matrix-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.gallery-photo-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.gallery-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--transition-smooth);
}

.gallery-photo-item:hover img {
    transform: scale(1.05);
}

/* --- Testimonial Card Layout Rules --- */
.testimonial-display-card {
    background-color: var(--color-white);
    border: 1px solid rgba(15, 76, 92, 0.06);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl) var(--space-xl) calc(var(--space-xl) + 20px) var(--space-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative;
    overflow: hidden; /* Essential to hide the cards when they are outside the box */
}

.testimonial-quote-icon {
    font-size: 3rem;
    color: var(--color-secondary);
    line-height: 1;
    position: absolute;
    top: var(--space-md);
    left: var(--space-xl);
    opacity: 0.15;
}

/* Slide Wrapper for Smooth Transitions */
.testimonial-carousel-inner {
    position: relative;
    min-height: 240px; /* Stable height boundary to anchor sliding movements */
    width: 100%;
}

.testimonial-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    /* Default state: waiting off-screen to the left */
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.6s ease, 
                visibility 0.6s ease;
}

/* Active State: Slides cleanly into the center frame view */
.testimonial-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Exit State: Sweeps smoothly off-screen to the right */
.testimonial-slide.exit-right {
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    /* Maintains absolute tracking during departure execution */
    position: absolute; 
}

.testimonial-body-text {
    font-size: var(--fs-base);
    color: #2D2D2D;
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    position: relative;
    z-index: 2;
}

.testimonial-profile-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-pill);
    object-fit: cover;
    border: 2px solid var(--color-secondary);
}

.profile-meta-info h4 {
    font-size: var(--fs-sm);
    color: var(--color-primary);
    font-weight: 700;
    margin: 0;
}

.profile-meta-info span {
    font-size: var(--fs-xs);
    color: rgb(235, 179, 38);
    font-weight: 600;
}

/* --- Clean Directional Navigation Controls --- */
.testimonial-controls {
    display: flex;
    gap: var(--space-xs);
    position: absolute;
    bottom: var(--space-lg);
    right: var(--space-xl);
    z-index: 10;
}

.btn-carousel-nav {
    background-color: transparent;
    border: 1px solid rgba(15, 76, 92, 0.15);
    color: var(--color-primary);
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--transition-smooth);
}

.btn-carousel-nav:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-carousel-nav svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (min-width: 992px) {
    .testimonial-display-card {
        padding: var(--space-2xl) var(--space-2xl) calc(var(--space-2xl) + 20px) var(--space-2xl);
    }
    .testimonial-carousel-inner {
        min-height: 200px;
    }
}

/* Loading States */
.gallery-skeleton-box, .story-skeleton-box {
    width: 100%;
    height: 250px;
    background-color: rgba(15, 76, 92, 0.03);
    border-radius: var(--border-radius-lg);
}

/* ==========================================================================
   Responsive Balanced Split Design Display Media Queries
   ========================================================================== */
@media (min-width: 992px) {
    .gallery-stories-container {
        grid-template-columns: 1.15fr 0.85fr; /* Elegant uneven row balance column layout */
        gap: var(--space-3xl);
    }
    
    .gallery-matrix-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 crisp image boxes side-by-side on desktop */
    }
    
    .grid-title {
        font-size: var(--fs-3xl);
    }
    
    .testimonial-display-card {
        padding: var(--space-2xl);
    }
}


/* ==========================================================================
   INTERACTIVE QUICK ACTIONS GRID MATRIX
   ========================================================================== */
.actions-section {
    padding: var(--space-2xl) var(--space-lg);
    background-color: var(--color-white);
}

.actions-container {
    max-width: var(--max-width-content);
    margin: 0 auto;
}

/* 5-Column Core Structural Grid Matrix Grid */
.actions-matrix-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

/* Individual Quick Action Block Cards */
.action-block-card {
    background-color: rgba(15, 76, 92, 0.02); /* Very soft theme background tint */
    border: 1px solid rgba(15, 76, 92, 0.05);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none; /* Strip link underlines */
    color: var(--color-primary);
    min-height: 220px; /* Uniform touch surface area sizing bounds */
    transition: background-color var(--duration-fast) var(--transition-smooth),
                transform var(--duration-fast) var(--transition-smooth),
                box-shadow var(--duration-fast) var(--transition-smooth);
}

/* Hover & Focus Interactions States */
.action-block-card:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Icon Frame Packaging Box */
.action-icon-wrapper {
    width: 44px;
    height: 44px;
    background-color: rgba(15, 76, 92, 0.06);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
    transition: background-color var(--duration-fast) var(--transition-smooth),
                color var(--duration-fast) var(--transition-smooth);
}

.action-block-card:hover .action-icon-wrapper{
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-secondary); /* Flashes gold icon accents inside the dark card */
}


.action-icon-wrapper svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Typography Matrix Control Inside Blocks */
.action-block-card h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}
.action-block-card:hover h3 {
    color: var(--color-secondary); /* Subtle gold accent highlight on hover */
    transition: color var(--duration-fast) var(--transition-smooth);
}

.action-block-card p {
    font-size: var(--fs-sm);
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: var(--space-xl);
    flex-grow: 1; /* Pushes arrow links uniformly to the bottom edge boundary lines */
    color: #2D2D2D;
}

.action-block-card:hover p {
    color: var(--color-white);
    transition: color var(--duration-fast) var(--transition-smooth);
}

/* Tiny Link Indicator Chevron Line Elements */
.action-link-arrow {
    width: 24px;
    height: 24px;
    color: var(--color-secondary); /* Gold accent anchor lines */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-fast) var(--transition-smooth),
                color var(--duration-fast) var(--transition-smooth);
}

.action-link-arrow svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.action-block-card:hover .action-link-arrow {
    color: var(--color-white);
    transform: translateX(4px); /* Clean nudge right slide animation indicators */
}

/* ==========================================================================
   Responsive Scaling Media Layout Breakpoints
   ========================================================================== */
@media (min-width: 576px) {
    .actions-matrix-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 blocks wide on landscape phones */
    }
}

@media (min-width: 992px) {
    .actions-matrix-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 blocks wide on small monitors/tablets */
    }
}

@media (min-width: 1200px) {
    .actions-matrix-grid {
        grid-template-columns: repeat(5, 1fr); /* Master 5-Column inline spread row layout for standard desktops */
        gap: var(--space-sm); /* Tight crisp layout lines spacing grid matrices */
    }
    
    .action-block-card {
        padding: var(--space-lg); /* Slightly tighter padding metrics for the 5-column line fit */
    }
}


/* ==========================================================================
   DYNAMIC BLOG & ANNOUNCEMENTS MATRIX
   ========================================================================= */
.blog-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: rgba(15, 76, 92, 0.01);
    border-top: 1px solid rgba(15, 76, 92, 0.04);
}

.blog-container {
    max-width: var(--max-width-content);
    margin: 0 auto;
}

/* Header Row Layout Setup */
.blog-header-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.blog-subtitle {
    font-size: var(--fs-xs);
    color: var(--color-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: var(--space-xs);
}

.blog-title {
    font-size: var(--fs-2xl);
    color: var(--color-primary);
    font-weight: 700;
    margin: 0;
}

.btn-blog-all {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-xl);
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--border-radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--duration-fast) var(--transition-smooth);
}

.btn-blog-all:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Core Structural 3-Column Grid */
.blog-matrix-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

/* Individual Post Article Cards */
.blog-card {
    background-color: var(--color-white);
    border: 1px solid rgba(15, 76, 92, 0.06);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--duration-normal) var(--transition-smooth),
                box-shadow var(--duration-normal) var(--transition-smooth);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Feature Image Frame Container */
.blog-media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: rgba(15, 76, 92, 0.05);
}

.blog-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--transition-smooth);
}

.blog-card:hover .blog-media-frame img {
    transform: scale(1.03);
}

/* Meta Categories Pin Elements */
.blog-category-tag {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px var(--space-sm);
    border-radius: var(--border-radius-sm);
    z-index: 2;
}

/* Text Core Information Block Packaging Box */
.blog-content-box {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-timeline-meta {
    font-size: var(--fs-xs);
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.blog-card-headline {
    font-size: var(--fs-md);
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: var(--space-sm);
}

.blog-card-headline a {
    color: inherit;
    text-decoration: none;
}

.blog-card-headline a:hover {
    color: var(--color-secondary);
}

.blog-card-excerpt {
    font-size: var(--fs-sm);
    color: #2D2D2D;
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    flex-grow: 1; /* Aligns author rows across uniform baselines */
}

/* Author Profiling Border Separator Row */
.blog-author-row {
    border-top: 1px solid rgba(15, 76, 92, 0.06);
    padding-top: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.blog-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-pill);
    object-fit: cover;
}

.blog-author-info name {
    font-size: 12px;
    color: var(--color-primary);
    font-weight: 700;
    display: block;
}

/* Component Placeholders Loading Skeleton Rules */
.blog-skeleton-card {
    width: 100%;
    height: 380px;
    background-color: rgba(15, 76, 92, 0.02);
    border-radius: var(--border-radius-lg);
}

/* ==========================================================================
   Responsive Multi-Column Breakpoints Display Media Queries
   ========================================================================== */
@media (min-width: 768px) {
    .blog-matrix-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns across medium devices */
    }
}

@media (min-width: 992px) {
    .blog-header-row {
        flex-direction: row;
        align-items: flex-end;
    }
    
    .blog-title {
        font-size: var(--fs-3xl);
    }

    .blog-matrix-grid {
        grid-template-columns: repeat(3, 1fr); /* Master 3-Column layout configuration */
    }
}