/* ==========================================================================
   1. LAYOUT & GRID UTILITIES
   ========================================================================== */

/* Grid System */
.ig-grid {
    display: grid;
    gap: var(--iyeg-space-5, 1.5rem);
    width: 100%;
}

.ig-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ig-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ig-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Sections & Containers */
.iyeg-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.iyeg-section {
    padding: var(--iyeg-space-24) var(--iyeg-container-padding);
}

.iyeg-section--sm {
    padding: 3rem 0;
}

/*--iyeg-space-10: 5rem;*/
/*--iyeg-space-20: 5rem;: 5rem;*/
 .iyeg-section--md {
    padding: var(--iyeg-space-20) 0;
}

/* ==========================================================================
   2. SPACING & GLOBAL UTILITIES
   ========================================================================== */

.ig-mt-3 { margin-top: var(--iyeg-space-3); }
.ig-mt-4 { margin-top: var(--iyeg-space-4); }
.ig-mb-2 { margin-bottom: var(--iyeg-space-2); }
.ig-mb-3 { margin-bottom: var(--iyeg-space-3); }
.ig-mb-4 { margin-bottom: var(--iyeg-space-4); }
.ig-mb-8 { margin-bottom: var(--iyeg-space-8); }
.ig-mx-auto { margin-left: auto; margin-right: auto; }
.ig-p-0 { padding: 0; }
.ig-p-4 { padding: var(--iyeg-space-4); }

.iyeg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    border: 0;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

/* Section Titles & Subtitles */
.iyeg-section__title {
    font-size: clamp(1.625rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: #043056;
    text-align: center;
    margin-bottom: 2rem;
}

.iyeg-section__title--white { color: #FFFFFF; }

.iyeg-section__subtitle {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    font-weight: 400;
    line-height: 1.6;
    color: #3A3D4B;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 4rem;
}

.iyeg-section__subtitle--white { color: #FFFFFF; }

.iyeg-section__subtitle--emphasis {
    font-size: clamp(1.125rem, 3vw, 1.625rem);
    font-weight: 700;
    color: #043056;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.6;
    /*text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);*/
}

.iyeg-section__subtitle--light {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    font-weight: 300;
    line-height: 1.5;
    color: #043056;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
    opacity: 0.9;
}

/* Hero Typography */
.iyeg-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
}

.iyeg-hero__subtitle {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.6;
    color: #ffffff;
    margin: 0 auto 2rem auto;
    max-width: 900px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
}

/* Cards & Body Text */
.iyeg-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75;
    color: #010101;
}

.iyeg-body__text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #3A3D4B;
}

.iyeg-body__text--small {
    font-family: var(--iyeg-font-body);
    font-size: var(--iyeg-font-size-sm);
    font-weight: 400;
    line-height: 1.6;
    /*color: var(--iyeg-text-gray);*/
    color: #3A3D4B;
}

.iyeg-text-white { color: #FFFFFF; }
.iyeg-text-white--70 { color: rgba(255, 255, 255, 0.8); }
.iyeg-text-dark { color: #043056; }
.iyeg-sub-text-dark {
    color: #4A5568;  /* Dark gray for readability on white */
    opacity: 1;
}
.iyeg-text-italic {
    font-style: italic;
}


/* ==========================================================================
   4. INTERACTIVE ELEMENTS (BUTTONS)
   ========================================================================== */

.iyeg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: var(--iyeg-space-3) var(--iyeg-space-6);
    border-radius: var(--iyeg-radius-full);
    font-size: 0.875rem;
}

.iyeg-btn--primary {
    background-color: #E0071D;
    color: #FFFFFF;
    border: none;
}

.iyeg-btn--primary:hover {
    background-color: #b00616;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(224, 7, 29, 0.3);
}

.iyeg-btn--full {
    width: 100%;
    font-size: 1rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 2rem;
}

/* Button Loading State */
.iyeg-btn__loader {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #FFFFFF;
    border-top-color: transparent;
    border-radius: 50%;
    animation: iyeg-spin 0.8s linear infinite;
    margin-left: 1rem;
}

@keyframes iyeg-spin {
    to { transform: rotate(360deg); }
}





/* ==========================================================================
   5. MARGIN UTILITIES
   ========================================================================== */

/* All sides */
.ig-m-0 { margin: 0; }
.ig-m-1 { margin: var(--iyeg-space-1, 0.5rem); }
.ig-m-2 { margin: var(--iyeg-space-2, 1rem); }
.ig-m-3 { margin: var(--iyeg-space-3, 1.5rem); }
.ig-m-4 { margin: var(--iyeg-space-4, 2rem); }
.ig-m-5 { margin: var(--iyeg-space-5, 2.5rem); }
.ig-m-6 { margin: var(--iyeg-space-6, 3rem); }
.ig-m-8 { margin: var(--iyeg-space-8, 4rem); }
.ig-m-10 { margin: var(--iyeg-space-10, 5rem); }
.ig-m-12 { margin: var(--iyeg-space-12, 6rem); }

/* Margin Top */
.ig-mt-0 { margin-top: 0; }
.ig-mt-1 { margin-top: var(--iyeg-space-1, 0.5rem); }
.ig-mt-2 { margin-top: var(--iyeg-space-2, 1rem); }
.ig-mt-3 { margin-top: var(--iyeg-space-3, 1.5rem); }
.ig-mt-4 { margin-top: var(--iyeg-space-4, 2rem); }
.ig-mt-5 { margin-top: var(--iyeg-space-5, 2.5rem); }
.ig-mt-6 { margin-top: var(--iyeg-space-6, 3rem); }
.ig-mt-8 { margin-top: var(--iyeg-space-8, 4rem); }
.ig-mt-10 { margin-top: var(--iyeg-space-10, 5rem); }
.ig-mt-12 { margin-top: var(--iyeg-space-12, 6rem); }

/* Margin Bottom */
.ig-mb-0 { margin-bottom: 0; }
.ig-mb-1 { margin-bottom: var(--iyeg-space-1, 0.5rem); }
.ig-mb-2 { margin-bottom: var(--iyeg-space-2, 1rem); }
.ig-mb-3 { margin-bottom: var(--iyeg-space-3, 1.5rem); }
.ig-mb-4 { margin-bottom: var(--iyeg-space-4, 2rem); }
.ig-mb-5 { margin-bottom: var(--iyeg-space-5, 2.5rem); }
.ig-mb-6 { margin-bottom: var(--iyeg-space-6, 3rem); }
.ig-mb-8 { margin-bottom: var(--iyeg-space-8, 4rem); }
.ig-mb-10 { margin-bottom: var(--iyeg-space-10, 5rem); }
.ig-mb-12 { margin-bottom: var(--iyeg-space-12, 6rem); }

/* Margin Left */
.ig-ml-0 { margin-left: 0; }
.ig-ml-1 { margin-left: var(--iyeg-space-1, 0.5rem); }
.ig-ml-2 { margin-left: var(--iyeg-space-2, 1rem); }
.ig-ml-3 { margin-left: var(--iyeg-space-3, 1.5rem); }
.ig-ml-4 { margin-left: var(--iyeg-space-4, 2rem); }
.ig-ml-5 { margin-left: var(--iyeg-space-5, 2.5rem); }
.ig-ml-6 { margin-left: var(--iyeg-space-6, 3rem); }
.ig-ml-8 { margin-left: var(--iyeg-space-8, 4rem); }
.ig-ml-10 { margin-left: var(--iyeg-space-10, 5rem); }
.ig-ml-12 { margin-left: var(--iyeg-space-12, 6rem); }

/* Margin Right */
.ig-mr-0 { margin-right: 0; }
.ig-mr-1 { margin-right: var(--iyeg-space-1, 0.5rem); }
.ig-mr-2 { margin-right: var(--iyeg-space-2, 1rem); }
.ig-mr-3 { margin-right: var(--iyeg-space-3, 1.5rem); }
.ig-mr-4 { margin-right: var(--iyeg-space-4, 2rem); }
.ig-mr-5 { margin-right: var(--iyeg-space-5, 2.5rem); }
.ig-mr-6 { margin-right: var(--iyeg-space-6, 3rem); }
.ig-mr-8 { margin-right: var(--iyeg-space-8, 4rem); }
.ig-mr-10 { margin-right: var(--iyeg-space-10, 5rem); }
.ig-mr-12 { margin-right: var(--iyeg-space-12, 6rem); }

/* Margin X Axis (Left & Right) */
.ig-mx-0 { margin-left: 0; margin-right: 0; }
.ig-mx-1 { margin-left: var(--iyeg-space-1, 0.5rem); margin-right: var(--iyeg-space-1, 0.5rem); }
.ig-mx-2 { margin-left: var(--iyeg-space-2, 1rem); margin-right: var(--iyeg-space-2, 1rem); }
.ig-mx-3 { margin-left: var(--iyeg-space-3, 1.5rem); margin-right: var(--iyeg-space-3, 1.5rem); }
.ig-mx-4 { margin-left: var(--iyeg-space-4, 2rem); margin-right: var(--iyeg-space-4, 2rem); }
.ig-mx-5 { margin-left: var(--iyeg-space-5, 2.5rem); margin-right: var(--iyeg-space-5, 2.5rem); }
.ig-mx-6 { margin-left: var(--iyeg-space-6, 3rem); margin-right: var(--iyeg-space-6, 3rem); }
.ig-mx-8 { margin-left: var(--iyeg-space-8, 4rem); margin-right: var(--iyeg-space-8, 4rem); }
.ig-mx-10 { margin-left: var(--iyeg-space-10, 5rem); margin-right: var(--iyeg-space-10, 5rem); }
.ig-mx-12 { margin-left: var(--iyeg-space-12, 6rem); margin-right: var(--iyeg-space-12, 6rem); }
.ig-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y Axis (Top & Bottom) */
.ig-my-0 { margin-top: 0; margin-bottom: 0; }
.ig-my-1 { margin-top: var(--iyeg-space-1, 0.5rem); margin-bottom: var(--iyeg-space-1, 0.5rem); }
.ig-my-2 { margin-top: var(--iyeg-space-2, 1rem); margin-bottom: var(--iyeg-space-2, 1rem); }
.ig-my-3 { margin-top: var(--iyeg-space-3, 1.5rem); margin-bottom: var(--iyeg-space-3, 1.5rem); }
.ig-my-4 { margin-top: var(--iyeg-space-4, 2rem); margin-bottom: var(--iyeg-space-4, 2rem); }
.ig-my-5 { margin-top: var(--iyeg-space-5, 2.5rem); margin-bottom: var(--iyeg-space-5, 2.5rem); }
.ig-my-6 { margin-top: var(--iyeg-space-6, 3rem); margin-bottom: var(--iyeg-space-6, 3rem); }
.ig-my-8 { margin-top: var(--iyeg-space-8, 4rem); margin-bottom: var(--iyeg-space-8, 4rem); }
.ig-my-10 { margin-top: var(--iyeg-space-10, 5rem); margin-bottom: var(--iyeg-space-10, 5rem); }
.ig-my-12 { margin-top: var(--iyeg-space-12, 6rem); margin-bottom: var(--iyeg-space-12, 6rem); }

/* Negative Margins (optional) */
.ig-mt-n1 { margin-top: calc(var(--iyeg-space-1, 0.5rem) * -1); }
.ig-mt-n2 { margin-top: calc(var(--iyeg-space-2, 1rem) * -1); }
.ig-mt-n3 { margin-top: calc(var(--iyeg-space-3, 1.5rem) * -1); }
.ig-mt-n4 { margin-top: calc(var(--iyeg-space-4, 2rem) * -1); }

.ig-mb-n1 { margin-bottom: calc(var(--iyeg-space-1, 0.5rem) * -1); }
.ig-mb-n2 { margin-bottom: calc(var(--iyeg-space-2, 1rem) * -1); }
.ig-mb-n3 { margin-bottom: calc(var(--iyeg-space-3, 1.5rem) * -1); }
.ig-mb-n4 { margin-bottom: calc(var(--iyeg-space-4, 2rem) * -1); }



/*responsiveness: */
@media (max-width: 768px) {
    
    /*grids:*/
    .ig-grid-md-1 {
        grid-template-columns: 1fr;
    }
    
    /*section:*/
    .iyeg-section {
        /*padding: 3rem 0;*/
        padding: 3rem 5%;
    }
    
    .iyeg-section--md {
    /*padding: var(--iyeg-space-20) 0;*/
    padding: var(--iyeg-space-20) 0;
    padding: 3rem 5%;
}
    
    /*container:*/
    .iyeg-container {
        padding: 0;
    }
    
    /* Card internal layout adjustments */
    .iyeg-card-media { height: 180px; }
    .iyeg-card-content { padding: 1.25rem; }
    
    /*margins:*/
    .ig-mt-md-0 { margin-top: 0; }
    .ig-mt-md-2 { margin-top: var(--iyeg-space-2, 1rem); }
    .ig-mt-md-4 { margin-top: var(--iyeg-space-4, 2rem); }
    
    .ig-mb-md-0 { margin-bottom: 0; }
    .ig-mb-md-2 { margin-bottom: var(--iyeg-space-2, 1rem); }
    .ig-mb-md-4 { margin-bottom: var(--iyeg-space-4, 2rem); }
    
    .ig-mx-md-auto { margin-left: auto; margin-right: auto; }
}

@media (max-width: 480px) {
    
    /*grids:*/
    .ig-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    /*section: */
    /*.iyeg-section {*/
    /*    padding: 2.5rem 0;*/
    /*}*/
    
    
    
    /*margins:*/
    .ig-mt-sm-0 { margin-top: 0; }
    .ig-mt-sm-1 { margin-top: var(--iyeg-space-1, 0.5rem); }
    .ig-mt-sm-2 { margin-top: var(--iyeg-space-2, 1rem); }
    
    .ig-mb-sm-0 { margin-bottom: 0; }
    .ig-mb-sm-1 { margin-bottom: var(--iyeg-space-1, 0.5rem); }
    .ig-mb-sm-2 { margin-bottom: var(--iyeg-space-2, 1rem); }
}