/* ==========================================================================
    CARDS.CSS - Custom Card Components for Bootstrap 5.3
    Council of Southeast Pennsylvania
   ========================================================================== */

:root {
    /* Primary Colors */
    --card-primary: #006b54;
    --card-primary-dark: #005544;
    --card-primary-light: #008068;
    /* Accent Colors */
    --card-accent-purple: #55298a;
    --card-accent-teal: #00857a;
    /* Neutral Colors */
    --card-white: #ffffff;
    --card-black: #1a1a1a;
    --card-gray-100: #f8f9fa;
    --card-gray-200: #e9ecef;
    --card-gray-600: #6c757d;
    --card-gray-800: #343a40;
    /* Special Backgrounds */
    --card-bg-warm: #faf5f0;
    --card-bg-pink-tint: rgba(85, 41, 138, 0.08);
    --card-border-tan: #c4b5a0;
    /* Shadows */
    --card-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --card-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --card-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    /* Transitions */
    --card-transition: all 0.3s ease;
    --card-transition-fast: all 0.2s ease;
}

.has-divider {
    position: relative; /* Ensures the background is positioned relative to the element */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271440%27 height=%27118%27 fill=%27none%27%3E%3Cmask id=%27a%27 width=%271440%27 height=%27118%27 x=%270%27 y=%270%27 maskUnits=%27userSpaceOnUse%27 style=%27mask-type:alpha%27%3E%3Cpath fill=%27%23D9D9D9%27 d=%27M0 0h1440v118H0z%27/%3E%3C/mask%3E%3Cg mask=%27url%28%23a%29%27%3E%3Cg filter=%27url%28%23b%29%27 opacity=%27.6%27%3E%3Cpath fill=%27%23fff%27 d=%27M0 56c720 72 720 72 1440 0v66H0z%27/%3E%3C/g%3E%3Cg filter=%27url%28%23c%29%27 opacity=%27.4%27%3E%3Cpath fill=%27%23fff%27 d=%27M0 39c720 90.545 720 90.545 1440 0v83H0z%27/%3E%3C/g%3E%3Cg filter=%27url%28%23d%29%27%3E%3Cpath fill=%27%23fff%27 d=%27M0 71c720 52 720 52 1440 0v52H0z%27/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id=%27b%27 width=%271472%27 height=%2798%27 x=%27-16%27 y=%2736%27 color-interpolation-filters=%27sRGB%27 filterUnits=%27userSpaceOnUse%27%3E%3CfeFlood flood-opacity=%270%27 result=%27BackgroundImageFix%27/%3E%3CfeColorMatrix in=%27SourceAlpha%27 result=%27hardAlpha%27 values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%27/%3E%3CfeOffset dy=%27-4%27/%3E%3CfeGaussianBlur stdDeviation=%278%27/%3E%3CfeComposite in2=%27hardAlpha%27 operator=%27out%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0%27/%3E%3CfeBlend in2=%27BackgroundImageFix%27 result=%27effect1_dropShadow_3325_1092%27/%3E%3CfeBlend in=%27SourceGraphic%27 in2=%27effect1_dropShadow_3325_1092%27 result=%27shape%27/%3E%3C/filter%3E%3Cfilter id=%27c%27 width=%271508%27 height=%27151%27 x=%27-34%27 y=%27-5%27 color-interpolation-filters=%27sRGB%27 filterUnits=%27userSpaceOnUse%27%3E%3CfeFlood flood-opacity=%270%27 result=%27BackgroundImageFix%27/%3E%3CfeColorMatrix in=%27SourceAlpha%27 result=%27hardAlpha%27 values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%27/%3E%3CfeOffset dy=%27-10%27/%3E%3CfeGaussianBlur stdDeviation=%2717%27/%3E%3CfeComposite in2=%27hardAlpha%27 operator=%27out%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0%27/%3E%3CfeBlend in2=%27BackgroundImageFix%27 result=%27effect1_dropShadow_3325_1092%27/%3E%3CfeBlend in=%27SourceGraphic%27 in2=%27effect1_dropShadow_3325_1092%27 result=%27shape%27/%3E%3C/filter%3E%3Cfilter id=%27d%27 width=%271460%27 height=%2772%27 x=%27-10%27 y=%2754%27 color-interpolation-filters=%27sRGB%27 filterUnits=%27userSpaceOnUse%27%3E%3CfeFlood flood-opacity=%270%27 result=%27BackgroundImageFix%27/%3E%3CfeColorMatrix in=%27SourceAlpha%27 result=%27hardAlpha%27 values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%27/%3E%3CfeOffset dy=%27-7%27/%3E%3CfeGaussianBlur stdDeviation=%275%27/%3E%3CfeComposite in2=%27hardAlpha%27 operator=%27out%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0%27/%3E%3CfeBlend in2=%27BackgroundImageFix%27 result=%27effect1_dropShadow_3325_1092%27/%3E%3CfeBlend in=%27SourceGraphic%27 in2=%27effect1_dropShadow_3325_1092%27 result=%27shape%27/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    padding-bottom: 150px !important;
}


/* ==========================================================================
   1. FIXED CARDS
   Simple cards with icon, title, description, and arrow
   ========================================================================== */

.fixed-cards .card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.fixed-cards .card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 1px;
    border-top-style: solid;
    border-top-width: 4px;
    border-top-color: transparent;
    padding: 0;
    overflow: hidden;
    box-shadow: 8px 8px 29px 0 rgba(0, 0, 0, 0.102);
    display: flex;
    flex-direction: column;
    min-height: 250px;
    height: 100%;
    transform: scale(1);
    transition: all 0.4s ease;
}

.fixed-cards .card:hover {
    border-top-color: #00543d;
    transform: translateY(-5px) scale(1.07);
}


/* Make entire card clickable */

.fixed-cards .card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* Card icon - visible by default, hidden on hover */

.fixed-cards .card .card-icon {
    overflow: hidden;
    max-height: 150px;
    opacity: 1;
    transition: all 0.4s ease;
    padding: 10px 40px;
}

.fixed-cards .card .card-icon i {
    font-size: 2.5rem;
    color: var(--card-gray-800);
}

.fixed-cards .card:hover .card-icon {
    max-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0;
}


/* Card body */

.fixed-cards .card .card-body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    padding: 0 40px;
}

.fixed-cards .card .card-title {
    font-size: 28px;
    font-weight: 600;
    color: black;
    margin-bottom: 0.5rem;
    transition: all 0.4s ease;
}

.fixed-cards .card:hover .card-title {
    font-size: 36px;
    margin-bottom: 20px;
}

.fixed-cards .card .card-text {
    font-size: 0.9rem;
    color: var(--bs-gray-600);
    line-height: 1.5;
    margin-bottom: 0;
}


/* Arrow button - visible by default, hidden on hover */

.fixed-cards .card .arrow-button {
    position: absolute;
    bottom: 0;
    right: 20px;
    transition: all 1s ease;
}

.fixed-cards .card .arrow-button i {
    font-size: 36px;
    color: #00543d;
    opacity: 1;
    transition: all 0.2s ease;
}

.fixed-cards .card:hover .arrow-button i {
    opacity: 0;
}


/* ==========================================================================
   2. ICON CARDS (Base Styles)
   Cards with absolutely positioned icon on edge
   ========================================================================== */

.icon-cards {
    background-color: #e3efe3;
    padding: 3rem 1.5rem;
}

.icon-cards .card-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 7rem 3rem;
    align-items: center;
    justify-content: center;
    /* Space for the icon that sits above the card */
    padding-top: calc(24px + 1.5rem);
    /* Account for icon overhang */
    @media (min-width: 1200px) {
        flex-wrap: nowrap;
    }
    
}

.icon-cards .card {
    position: relative;

    background-color: #ffffff;
    border: none;
    border-radius: 2px 2px 2px 30px;
    overflow: visible;
    /* Allow icon to overflow */
    transition: var(--card-transition);
    width: 100%;
    @media (max-width: 576px) {
        width: 100%;
        height: 342px
    }
    
    @media (min-width: 576px) {
        width: 476px;
        height: 342px;
    }
    @media (min-width: 768px) {
        width: 316px !important;
        height: 342px !important;
    }
    @media (min-width: 992px) {
        width: 436px;
        height: 342px;
    }
    @media (min-width: 1200px) {
        width: 272px;
        height: 565px;
    }
    @media (min-width: 1400px) {
        width: 320px;
        height: 482px;
    }
}

.icon-cards .card:hover {
    background-color: #00543d;
}

.icon-cards .card a {
    text-decoration: none;
    color: inherit;
    display: block;
}


/* --------------------------------------------------------------------------
   Icon Container - Absolutely Positioned (Vertical/Default)
   -------------------------------------------------------------------------- */

.icon-cards .card .card-icon {
    position: absolute;
    left: 30px;
    top: 0;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: #55298a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    z-index: 100;
    transition: var(--card-transition);
}

.icon-cards .card .card-icon i {
    font-size: 1.25rem;
    line-height: 1;
}

.icon-cards .card .card-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}


/* --------------------------------------------------------------------------
   Card Body
   -------------------------------------------------------------------------- */

.icon-cards .card .card-body {
    padding: 46px 25px 30px;
    display: flex;
    flex-direction: column;
}

.icon-cards .card .card-title {
    font-size: 16px;
    letter-spacing: .200000003px;
    line-height: 26px;
    font-weight: 600;
    color: #55298a;
    margin-bottom: 18px;
    transition: var(--card-transition);
    @media (min-width: 768px) {
        font-size: 18px;
        letter-spacing: .200000003px;
        line-height: 27px;
    }
    @media (min-width: 1200px) {
        font-size: 19px;
        letter-spacing: .01em;
        line-height: 25px;
    }
}

.icon-cards .card:hover .card-title {
    color: #ffffff;
}

.icon-cards .card .card-text {
    color: #000000;
    letter-spacing: 0.02em;
    font-size: 14px;
    line-height: 18px;
    @media (min-width: 1200px) {
        letter-spacing: 0.05em;
        font-size: 16px;
        line-height: 22px;
    }
    margin: 0 0 1rem 0;
    transition: var(--card-transition);
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

.icon-cards .card:hover .card-text {
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Card Link (with arrow icon)
   -------------------------------------------------------------------------- */

.icon-cards .card-link {
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-self: flex-end;
    align-self: flex-start;
    gap: 0.5rem;
    transition: var(--card-transition);
}

.icon-cards .card-link::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath fill='%231E1E1E' d='M8.821 1a.75.75 0 0 0-.75-.75h-6.75a.75.75 0 1 0 0 1.5h6v6a.75.75 0 1 0 1.5 0zm-7.29 7.601 7.07-7.07L7.541.47.47 7.54z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: var(--card-transition);
}

.icon-cards .card .card-link {
    color: #000000;
}

.icon-cards .card:hover .card-link {
    color: #ffffff;
}

.icon-cards .card:hover .card-link::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath fill='%23ffffff' d='M8.821 1a.75.75 0 0 0-.75-.75h-6.75a.75.75 0 1 0 0 1.5h6v6a.75.75 0 1 0 1.5 0zm-7.29 7.601 7.07-7.07L7.541.47.47 7.54z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   2a. ICON CARDS - Color Variants
   Apply these as additional classes: .icon-cards.icon-cards--green
   These override the default hover behavior with different colors
   ========================================================================== */


/* --------------------------------------------------------------------------
   Green Variant (different green fill on hover)
   -------------------------------------------------------------------------- */

.icon-cards.icon-cards--green .card:hover {
    background-color: #00543d;
}


/* --------------------------------------------------------------------------
   Teal Variant
   -------------------------------------------------------------------------- */

.icon-cards.icon-cards--teal {
    background-color: #55298a !important;
    color: #ffffff;
}

.icon-cards.icon-cards--teal .card .card-icon {
    background-color: #20cb98 !important;
}

.icon-cards.icon-cards--teal .card:hover {
    background-color: #f5ebf3 !important;
    color: #000000 !important;
}

.icon-cards.icon-cards--teal .card:hover .card-title {
    color: #000000 !important;
}

.icon-cards.icon-cards--teal .card:hover .card-text {
    color: #000000 !important;
}

.icon-cards.icon-cards--teal .card:hover .card-link {
    color: #000000 !important;
}

.icon-cards.icon-cards--teal .card:hover .card-link::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath fill='%231E1E1E' d='M8.821 1a.75.75 0 0 0-.75-.75h-6.75a.75.75 0 1 0 0 1.5h6v6a.75.75 0 1 0 1.5 0zm-7.29 7.601 7.07-7.07L7.541.47.47 7.54z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   2b. ICON CARDS - Horizontal Variant
   Apply as: .icon-cards.icon-cards--horizontal
   ========================================================================== */

.icon-cards.icon-cards--horizontal {
    background-color: #ffffff;
}

.icon-cards.icon-cards--horizontal .card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 0;
    padding-left: calc(24px + 1.5rem);
    /* Space for the icon that sits to the left */
}

.icon-cards.icon-cards--horizontal .card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: #f5ebf3;
    border: none;
    border-radius: 2px 2px 2px 35px !important;
    width: 100% !important;
    height: auto !important;
}

.icon-cards.icon-cards--horizontal .card:hover {
    background-color: #ffffff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}


/* Icon positioning for horizontal - on left edge */

.icon-cards.icon-cards--horizontal .card .card-icon {
    top: 35px;
    left: 0;
    transform: translateX(-50%);
}

.icon-cards.icon-cards--horizontal .card:hover .card-icon {
    background-color: #55298a;
}


/* Card body for horizontal */

.icon-cards.icon-cards--horizontal .card .card-body {
    flex: 1;
    padding: 35px 80px 39px 85px;
    transition: var(--card-transition);
}

.icon-cards.icon-cards--horizontal .card .card-title {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card:hover .card-title {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card .card-text {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card:hover .card-text {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card .card-link {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card:hover .card-link {
    color: #000000;
}

.icon-cards.icon-cards--horizontal .card:hover .card-link::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath fill='%231E1E1E' d='M8.821 1a.75.75 0 0 0-.75-.75h-6.75a.75.75 0 1 0 0 1.5h6v6a.75.75 0 1 0 1.5 0zm-7.29 7.601 7.07-7.07L7.541.47.47 7.54z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   3. NEWS FEED CARDS
   Horizontal cards with image on left, content on right
   ========================================================================== */

.news-feed .card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.news-feed .card {
    display: flex;
    flex-direction: row;
    background: rgba(30, 30, 30, .4);
    border: none;
    border-radius: 2px 2px 2px 35px;
    overflow: hidden;
    transition: var(--card-transition);
    max-width: 436px;
}

.news-feed .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-lg);
}

.news-feed .card a {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: inherit;
    width: 100%;
}


/* Image container */

.news-feed .card-img {
    flex: 0 0 140px;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.news-feed .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.news-feed .card:hover .card-img img {
    transform: scale(1.05);
}


/* Dark overlay on image */

.news-feed .card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(52, 58, 64, 0.4) 100%);
}


/* Card body */

.news-feed .card-body {
    flex: 1;
    padding: 21px 36px 21px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-feed .card-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.news-feed .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-white);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.news-feed .card-category {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}


/* Tags within news feed */

.news-feed .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.news-feed .card-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
}


/* ==========================================================================
   4. UTILITY CLASSES
   Additional helper classes for cards
   ========================================================================== */


/* Card with no border radius */

.card--square {
    border-radius: 0 !important;
}


/* Card with subtle shadow */

.card--elevated {
    box-shadow: var(--bs-box-shadow-sm);
}


/* ==========================================================================
   5. RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 575.98px) {
    .fixed-cards,
    .icon-cards,
    .news-feed {
        grid-template-columns: 1fr;
    }
    .news-feed .card {
        flex-direction: column;
    }
    .news-feed .card-img {
        flex: 0 0 160px;
        width: 100%;
    }
    /* Horizontal icon cards stack on mobile */
    .icon-cards.icon-cards--horizontal {
        padding-left: 1.5rem;
        padding-top: calc(24px + 1.5rem);
    }
    .icon-cards.icon-cards--horizontal .card {
        flex-direction: column;
    }
    /* Reset icon position to top for mobile */
    .icon-cards.icon-cards--horizontal .card .card-icon {
        top: 0;
        left: 30px;
        transform: translateY(-50%);
    }
    .icon-cards.icon-cards--horizontal .card .card-body {
        padding: 2rem 1.5rem 1.5rem;
    }
}


/* ==========================================================================
   6. ACCESSIBILITY
   ========================================================================== */


/* Accessible focus states */

.fixed-cards .card:focus-within,
.icon-cards .card:focus-within,
.news-feed .card:focus-within {
box-shadow: 0 0 0 0.5rem rgba(13, 110, 253, 0.25);
}


/* Reduced motion preference */

@media (prefers-reduced-motion: reduce) {
    .fixed-cards .card,
    .icon-cards .card,
    .news-feed .card,
    .fixed-cards .card::before,
    .news-feed .card-img img,
    .icon-cards .card .card-icon,
    .icon-cards .card .card__body {
        transition: none;
    }
}