/* Cybersecurity Page Styles */

/* Bento Grid Section */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto; /* Allow rows to size based on content or fixed height */
    }
}

.bento-card {
    border-radius: 1.5rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Card Specifics */

/* 1. SMBs Target - Cleaned up old grid styles */

/* 2. Enterprise Grade (Top Right) - Wide Rectangle */
.bento-card-enterprise {
    background-color: #E3E8F0;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* 3. Proactive Monitoring (Bottom Left - wait, layout is tricky) */
/* Layout Analysis of Screenshot:
   Left Col:
     Top: SMB Chart (Tall)
     Bottom: Proactive (Short/Wide) -> Wait, in screenshot SMB is tall, Proactive is short? 
     Actually, let's look at the gap lines.
     The horizontal gap on the left aligns with the horizontal gap on the right? No.
     Left Col has a card that ends where? 
     Let's assume a 2 column grid.
     Col 1:
        Row 1: SMB Card (Span 1, Height ~400px)
        Row 2: Proactive Card (Span 1, Height ~200px)
     Col 2:
        Row 1: Enterprise Card (Span 1, Height ~200px)
        Row 2: Ransomware Card (Span 1, Height ~400px)
     
     Total Height approx 600px + gap.
*/

.bento-column {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* Adjust grid to just be 2 columns, and we put cards in cols */
.bento-grid-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

@media (min-width: 992px) {
    .bento-grid-2col {
        grid-template-columns: 1fr 1fr;
    }
}

/* Card Styles */
.bento-card-smb {
    background-color: #F8F5F1;
    min-height: 15rem;
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.bento-card-smb .icon-placeholder {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
    font-size: 1.8rem;
    color: #D97706;
}

.bento-card-smb h5 {
    font-size: var(--section-description-font-size);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.bento-card-smb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.bento-card-smb li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: var( --bullet-point-font-size);
    font-weight: 500;
    line-height: 1.4;
}

.bento-card-smb li i {
    color: #10B981; /* Green check */
    min-width: 24px; /* Ensure space for icon */
    margin-top: 2px; /* Align with text top */
}

.bento-card-proactive {
    background-color: #fff;
    min-height: 8.75rem;
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    position: relative;
    padding: 5px;
    .bento-logo {
        height: 100px;
    }
    .bento-shield {
        height: 60px;
    }
}

/* Add inner gradient border effect using pseudo-element */
.bento-card-proactive::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px; 
    padding: 2px; /* Border thickness */
    background: linear-gradient(90deg, #4ade80, #3b82f6);
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.bento-card-enterprise {
    background-color: #E3E8F0;
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.875rem);
    min-height: 8.75rem;
    flex: 1;
}

.stat-highlight {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #DC2626, #F59E0B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
}

.bento-card-ransomware {
    color: #fff;
    min-height: 15rem;
    max-height: 20rem;
    flex: 2;
    padding: 0 !important;

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


/* Typography */
.bento-title {
    font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
    font-weight: 700;
    margin-bottom: 0.625rem;
    line-height: 1.3;
}

.bento-text {
    font-size: 0.95rem;
    color: inherit;
    opacity: 0.9;
    line-height: 1.5;
}

/* Graphics Placeholders */
.pie-chart-placeholder {
    width: clamp(5rem, 10vw, 7.5rem);
    height: clamp(5rem, 10vw, 7.5rem);
    border-radius: 50%;
    background: conic-gradient(#DC2626 0% 43%, #E5E7EB 43% 100%);
    margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
    position: relative;
}
.pie-chart-placeholder::after {
    content: '43%';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Start at center-center */
    font-weight: bold;
    color: #fff; /* White text for contrast on red segment? No, 43% is the red part. */
    /* Wait, 43% is the slice. The number is usually on the slice. */
    left: 60%; /* Shift into the red area */
    top: 40%;
}

.icon-placeholder {
    font-size: 2.2rem;
    margin-bottom: clamp(0.5rem, 1vw, 0.9375rem);
}

.bento-card-enterprise .icon-placeholder,
.bento-card-proactive .icon-placeholder {
    margin-bottom: 0;
    margin-right: 15px;
    font-size: 1.8rem;
}

/* Specific Icons colors */
.icon-shield { color: #1F2937; } /* Shield on grey */
.icon-radar { /* Colorful gradient text/icon */
    background: linear-gradient(to right, #3B82F6, #8B5CF6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3rem;
}

.chain-graphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2) 0%, rgba(17, 24, 39, 0) 70%);
    opacity: 0.6;
    z-index: 1;
    /* Placeholder for actual chain image */
}

.cybersecurity-why-section {
    background-color: var(--bg-secondary);

    h2 {
        line-height: 1.2;
    }

    p {
        text-align: center;
        margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
    }

    .section-header {
        max-width: min(80%, 100%);
        margin-bottom: clamp(2rem, 5vw, 5rem);
    }
}

.services-slider-section{
    background-color: white!important;
}

.service-slider-card{
    background-color: var(--bg-secondary);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    .service-card-icon{
        background-color: white;
        border: 1px solid #80808029;
    }
}

.service-details-section{
    background-color:  var(--bg-secondary);
}

/* Advanced Services Section */
.advanced-services-section {
    background-color: #ffffff;
}

.advanced-services-section {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Master Card Container */
.advanced-master-card {
    background: #f5f5f7;
    border: 1px solid #F3F4F6;
    border-radius: 1.25rem;
    padding: clamp(1rem, 2vw, 1.875rem);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    max-width: 56.25rem;
    margin: clamp(1rem, 2vw, 1.875rem) auto 0;
    display: flex;
    flex-direction: column;
}

/* Individual List Items */
.advanced-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: clamp(1rem, 2vw, 1.5rem) 0;
    border-bottom: 1px solid #F3F4F6;
    transition: all 0.3s ease;
}

.advanced-item:first-child {
    padding-top: 0;
}

.advanced-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.advanced-item:hover {
    transform: translateX(5px); /* Subtle shift right on hover */
}

/* Icons */
.advanced-icon {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: clamp(0.75rem, 1.5vw, 1.25rem);
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #535353;
    background: white;
}

.advanced-content {
    display: flex;
    flex-direction: column;
}

.advanced-item h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
    margin-top: 0;
}

.advanced-item p {
    font-size: var(--section-description-font-size);
    line-height: 1.5;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cybersecurity-why-section .section-header {
        max-width: 100%;
    }

    .cybersecurity-why-section p {
        text-align: left;
    }
}

@media (max-width: 576px) {
    .advanced-master-card {
        padding: clamp(0.75rem, 2vw, 1.25rem);
    }

    .advanced-item {
        flex-direction: column;
        padding: clamp(0.75rem, 2vw, 1.25rem) 0;
    }

    .advanced-icon {
        margin-right: 0;
        margin-bottom: 0.75rem;
    }

    .bento-card-enterprise {
        flex-direction: column;
        text-align: center;
    }

    .bento-card-proactive {
        flex-direction: row;
        text-align: center;

        .bento-logo {
            height: 55px;
        }
        .bento-shield {
            height: 65px;
        }
    }

    .cybersecurity-why-section .section-header {
        max-width: 100%;
    }
}

/* Tablet Bento Grid Fixes */
@media (min-width: 577px) and (max-width: 991px) {
    .bento-card-enterprise {
        flex-direction: row;
        align-items: center;
    }

    .bento-card-smb {
        min-height: auto;
    }
}

/* Why Cyberonix Section Glow (Both Corners) */
.why-section {
    position: relative;
    overflow: hidden;
}

/* Top Left Glow */
.why-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: min(50rem, 80vw);
    height: min(50rem, 80vw);
    background: radial-gradient(circle, rgb(26 26 255 / 10%) 0%, rgb(255 255 255 / 0%) 70%);
    z-index: 0;
}

/* Top Right Glow */
.why-section::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: min(50rem, 80vw);
    height: min(50rem, 80vw);
    background: radial-gradient(circle, rgb(26 26 255 / 10%) 0%, rgb(255 255 255 / 0%) 70%);
    z-index: 0;
}