/* =========================================================
       MORE BUTTON (Light Version)
       ========================================================= */
.components-more-btn {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    /* EXACT SPACING CLAMPED: 20px Top/Bottom, 32px Left/Right */
    padding: clamp(20px, calc(var(--unit) * 24), 24px) clamp(28px, calc(var(--unit) * 36), 36px);
    /* 16px exact gap between text and arrow */
    gap: clamp(10px, calc(var(--unit) * 16), 16px);
    /* 64px exact height */
    height: clamp(45px, calc(var(--unit) * 50), 50px);
    width: fit-content;

    background: #F6F7F8;
    border: 1px solid #A7AAAF;
    border-radius: 40px;

    /* TYPOGRAPHY */
    font-family: 'Outfit', sans-serif;
    font-style: normal;
    font-weight: 400;
    /* 20px exact font size */
    font-size: clamp(15px, calc(var(--unit) * 20), 20px);
    line-height: clamp(20px, calc(var(--unit) * 24), 24px);
    color: #2A2B2C;
    text-decoration: none;

    transition: all 0.3s ease;
}

/* Hover Effects */
.components-more-btn:hover {
    background: #d1d5db;
    /* Slightly darker grey for feedback */
    border-color: #7d8083;
    /* Darken border to match text */
            /* padding-right: clamp(40px, calc(var(--unit) * 48), 48px); */
}

.components-more-btn:focus {
    background: #2A2B2C;
    /* Slightly darker grey for feedback */
    border-color: #7d8083;
    /* Darken border to match text */
    color: #fff;
}
.components-more-btn:focus img {
    /* Targets #f6f7f8 specifically (assuming original icon is black) */
    filter: invert(96%) sepia(5%) saturate(106%) hue-rotate(176deg) brightness(103%) contrast(98%);
}
/* Arrow Image Styling */
.components-more-btn img {
    /* Matches the 52.21px width from your Figma dump */
    width: clamp(36px, calc(var(--unit) * 52.21), 52.21px);
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    font-size: clamp(16px, calc(var(--unit) * 20), 20px);
}

.components-more-btn:hover img {
    /* Slight slide right effect on hover */
    /* transform: translateX(4px); */
            transform: translateX(10px);

}

/* =========================================================
       HYPERLINK TEXT BUTTON (Read More)
       ========================================================= */
.components-hyperlink-text {
    display: inline-flex;
    flex-direction: row;
    align-items: center;

    /* EXACT SPACING: 4px gap between text and arrow */
    gap: clamp(2px, calc(var(--unit) * 4), 4px);
    padding: 2px 4px 2px 0px;
    width: fit-content;

    /* TYPOGRAPHY */
    font-family: 'Outfit', sans-serif;
    font-style: normal;
    font-weight: 600;
    /* 16px exact font size */
    font-size: clamp(14px, calc(var(--unit) * 16), 16px);
    /* 28px exact line height */
    line-height: clamp(24px, calc(var(--unit) * 28), 28px);
    color: #000305;
    text-decoration: none;

    transition: color 0.3s ease;
    cursor: pointer;
}

/* Hover Effects for Text */
.components-hyperlink-text:hover {
    color: #197DE1;
    /* Changes to your copper accent color on hover */
}

/* Arrow Image Styling - WITH VERTICAL ALIGNMENT FIX */
.components-hyperlink-text .hyperlink-arrow {
    opacity: 0;
    display: inline-block;

    /* Base size */
    /* font-size: clamp(24px, calc(var(--unit) * 32), 32px); */

    /* Initial state: -10px left, 2px down, and slightly squashed/small */
    transform: translate(-10px, 2px) scale(0.8);

    transition: all 0.3s ease;
    vertical-align: middle;
}

.components-hyperlink-text:hover .hyperlink-arrow {
    opacity: 1;
    transform: translate(5px, 2px) scaleX(1.2) scaleY(1);
}



/* =========================================================
   COMMON COMPONENT: MEMBER CARD
   ========================================================= */
.member-info-card {
    background: #FFFBF6;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, calc(var(--unit) * 40), 40px);

    width: 100%;
    max-width: clamp(280px, calc(var(--unit) * 533), 533px);
    min-height: clamp(160px, calc(var(--unit) * 224), 224px);
    padding: clamp(24px, calc(var(--unit) * 45), 45px) clamp(20px, calc(var(--unit) * 40), 40px);

    box-sizing: border-box;
    transition: transform 0.2s ease;
}

.member-info-card:hover {
    transform: translateY(-2px);
}

.member-profile-img {
    width: clamp(80px, calc(var(--unit) * 150), 150px);
    height: clamp(80px, calc(var(--unit) * 150), 150px);
    border-radius: 50%;
    background: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.member-profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: clamp(160px, calc(var(--unit) * 224), 224px);
    gap: clamp(4px, calc(var(--unit) * 10), 10px);
}

.member-name-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-name-group h5 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #000305;
    margin: 0;
    font-size: clamp(16px, calc(var(--unit) * 20), 20px);
    line-height: 1;
}

.member-name-group h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #000305;
    margin: 0;
    font-size: clamp(13px, calc(var(--unit) * 16), 16px);
    line-height: 1.25;
}

.member-content-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-content-group p {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    color: #545558;
    margin: 0;
    font-size: clamp(13px, calc(var(--unit) * 16), 16px);
    line-height: 1.25;
}

@media (max-width: 500px) {
    .member-info-card {
        flex-direction: column;
        justify-content: flex-start;
        padding: 24px;
        height: auto;
        align-items: center;
        text-align: center;
    }

    .member-profile-img {
        margin-bottom: 16px;
    }

    .member-info-text {
        align-items: center;
        width: 100%;
    }
}


 /* -----------------------------------------
       VIEW DOCUMENT BUTTON (Clamped & Responsive)
       ----------------------------------------- */
    .btn-view-doc {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        /* Scales height from 20px (mobile) to 24px (desktop) */
        height: clamp(20px, calc(var(--unit) * 24), 24px);
        /* Scales side padding slightly */
        padding: 0 clamp(8px, calc(var(--unit) * 10), 10px);
        background: #BF7771;
        /* Scales border-radius to keep the perfect pill shape */
        border-radius: clamp(12px, calc(var(--unit) * 16), 16px);
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
        /* Scales font from 12px (mobile) to 16px (desktop) */
        font-size: clamp(12px, calc(var(--unit) * 16), 16px);
        color: #F6F7F8 !important;
        text-decoration: none;
        line-height: 1;
        /* Scales the left margin */
        margin-left: clamp(8px, calc(var(--unit) * 12), 12px);
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .btn-view-doc:hover {
        background: #A66660;
        transform: translateY(-1px);
    }

        /* Ensures the global .btn-view-doc class behaves perfectly on a <button> element inside the grid */
.data-grid .btn-view-doc {
    margin-left: 0; 
    border: none;
    cursor: pointer;
}

/* Archive */

  /* =========================================================
   PILL ICON BUTTON COMPONENT
   ========================================================= */
.components-archive-btn-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, calc(var(--unit) * 12), 12px);
    padding: clamp(8px, calc(var(--unit) * 12), 12px) clamp(16px, calc(var(--unit) * 24), 24px);
    
    background-color: #F8F9FA;
    border: 1px solid #D1D5DB;
    border-radius: 9999px; /* Gives it the perfect pill shape */
    
    color: #2A2B2C;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(14px, calc(var(--unit) * 16), 16px);
    font-weight: 500;
    text-decoration: none;
    
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Hover Effect */
.components-archive-btn-pill-icon:hover {
    background-color: #E5E7EB; /* Slightly darker gray */
    border-color: #9CA3AF;
}

/* Ensure the icon is sized appropriately */
.components-archive-btn-pill-icon i {
    font-size: clamp(16px, calc(var(--unit) * 18), 18px);
    display: flex;
    align-items: center;
}



/* =========================================================
   BLACK MORE BUTTON (Dark Version)
   ========================================================= */
.components-black-more-btn {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    /* EXACT SPACING CLAMPED: 20px Top/Bottom, 32px Left/Right */
    padding: clamp(14px, calc(var(--unit) * 20), 20px) clamp(24px, calc(var(--unit) * 32), 32px);
    /* 16px exact gap */
    gap: clamp(10px, calc(var(--unit) * 16), 16px);
    
    /* 64px exact height */
    height: clamp(50px, calc(var(--unit) * 64), 64px);
    width: fit-content;

    /* Background & Borders from Figma */
    background: #000B16;
    border: 1px solid #333E49;
    border-radius: 40px;

    /* TYPOGRAPHY */
    font-family: 'Outfit', sans-serif;
    font-style: normal;
    font-weight: 400;
    /* 20px exact font size */
    font-size: clamp(16px, calc(var(--unit) * 20), 20px);
    line-height: clamp(20px, calc(var(--unit) * 24), 24px);
    color: #F6F7F8;
    text-decoration: none;

    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Hover Effects */
.components-black-more-btn:hover {
    background: #333E49; /* Slightly lighter navy for feedback */
    /* padding-right: clamp(40px, calc(var(--unit) * 48), 48px); */
}

.components-black-more-btn:focus {
    background: #000000;
    border-color: #F6F7F8;
}

/* Arrow Image Styling */
/* Arrow Image Styling (Dark Button) */

.components-black-more-btn img.btn-arrow, .components-black-more-btn img.btn-arrow {
    width: clamp(36px, calc(var(--unit) * 52.21), 52.21px);
    height: auto;
    object-fit: contain;
    
    /* ADD THIS LINE to ensure the transition is smooth */
    transition: transform 0.3s ease; 
    
    /* filter: invert(96%) sepia(5%) saturate(106%) hue-rotate(176deg) brightness(103%) contrast(98%); */
}

.components-black-more-btn:hover img.btn-arrow {
    transform: translateX(10px);
}

/* Modifier class to allow absolute positioning on the image cards */
.components-black-more-btn.absolute-bottom-left {
    position: absolute;
    bottom: 0;
    left: clamp(16px, calc(var(--unit) * 32), 32px);
    transform: translateY(50%); /* Centers it exactly on the bottom border */
}