/* assets/css/frontend.css */

/* === New Archive Page Styles === */
.archive-integration-hero {
    background-color: #09081A;
    color: #FFFFFF;
    padding: 60px 20px;
    text-align: left;
}
.archive-integration-hero h1 {
    color: #FFFFFF;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.archive-main-content {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 240px 1fr; /* Sidebar and content */
    gap: 40px;
}
@media (max-width: 767px) {
    .archive-main-content {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}

/* --- Archive Filters --- */
.archive-filters .filter-group {
    margin-bottom: 30px;
}
.archive-filters #integration-search-bar {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.archive-filters h4 {
    margin: 0 0 10px 0;
}
.filter-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.filter-categories label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* === Main Integration Tiles (Archive) === */
.archive-main-content .integrations-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    gap: 20px; 
    align-items: start; /* MODIFIED: Aligns tiles to the top */
}
@media (max-width: 992px) {
    .archive-main-content .integrations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .archive-main-content .integrations-grid {
        grid-template-columns: 1fr;
    }
}
.integration-tile { 
    background-color: #FFFFFF; /* Tile background */
    border-radius: 10px; /* Rounded edge */
    text-align: center; 
    padding: 20px; 
    color: #09081A; /* Font on light background */
    border: 1px solid #E9EEFA; /* Outline */
    /* height: 100%; REMOVED: This was forcing the stretch */
    box-sizing: border-box;
}
.integration-tile a { 
    text-decoration: none; 
    color: inherit; 
    display: flex;
    flex-direction: column;
    /* height: 100%; REMOVED: This was forcing the stretch */
}
.tile-logo-container { 
    height: 100px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 15px; 
    margin-top: 0; 
}
.tile-logo-container img { 
    max-width: 100%; 
    max-height: 80px; 
    object-fit: contain; 
}
.tile-title { 
    /* This is an H3 */
    margin: 0; 
    font-size: 1.25em; /* Example size, theme H3 will apply */
    /* margin-top: auto; REMOVED: This was pushing title to bottom */
}
.tile-category { 
    /* This is a P tag */
    color: #FFA74F; /* Category color */
    text-transform: uppercase; 
    margin: 0 0 10px 0;
    font-size: 0.8em;
    font-weight: 600;
}

/* === Single Integration Page Layout === */
.single-integration-page { 
    padding-top: 0 !important; 
}

/* --- Single Page Hero Section --- */
.integration-hero { 
    background-color: #09081A; /* Header background */
    color: #ffffff; /* Font on dark background */
    padding: 80px 20px; 
    text-align: center; 
}
.hero-partner-label { 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    margin: 0 0 15px; 
}
.hero-logo-container { 
    max-width: 250px; 
    margin: 0 auto 20px auto; 
    background: #fff; 
    padding: 15px; 
    border-radius: 8px; 
}
.hero-logo-container img { 
    max-width: 100%; 
    height: auto; 
}
.hero-title { 
    margin: 0; 
    color: #FFFFFF; /* Force H1 to white */
}
.hero-category { 
    margin-top: 5px; 
}

/* --- Breadcrumbs (NEW) --- */
.synqly-breadcrumbs-container {
    max-width: 1100px;
    margin: 0 auto; /* Aligns with main content */
    padding: 20px 20px 0 20px; /* Top padding, matches side padding */
    box-sizing: border-box;
}
.synqly-breadcrumbs {
    font-size: 0.9em;
    color: #555;
}
.synqly-breadcrumbs a {
    color: #09081A;
    text-decoration: none;
}
.synqly-breadcrumbs a:hover {
    text-decoration: underline;
}
.synqly-breadcrumbs .breadcrumb-separator {
    margin: 0 8px;
    color: #999;
}
.synqly-breadcrumbs .breadcrumb-current {
    color: #777; /* Duller color for the current page */
}


/* --- Single Page Main Content Area --- */
.integration-main-content { 
    max-width: 1100px; 
    margin: 60px auto; 
    padding: 0 20px; 
    color: #09081A; /* Font on light background */
}
.integration-section { 
    margin-bottom: 60px; 
}
.section-title { 
    text-align: center; 
    margin-bottom: 40px; 
}

/* --- Use Cases (Capabilities) Grid --- */
.capabilities-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    gap: 30px; 
}
@media (max-width: 992px) {
    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .capabilities-grid {
        grid-template-columns: 1fr;
    }
}
.capability-card { 
    text-align: left; /* Align content to the left */
    background-color: #ffffff; /* White background */
    color: #09081A; /* Font on light background */
    padding: 30px; 
    border-radius: 10px; /* Rounded edge */
    border: 1px solid #E9EEFA; /* Light border, no shadow */
    height: 100%; /* This makes all cards in a row the same height */
    box-sizing: border-box; /* Ensures padding is included in height */
}
.capability-icon .material-symbols-outlined {
    line-height: 1;
    margin-bottom: 20px;
    display: inline-block;
}
.capability-title { 
    /* This is an H3 */
    margin: 0 0 10px 0; 
}
.capability-description p { 
    /* This is a P tag */
    margin: 0; 
}

/* --- Resources Section --- */
.resource-card { 
    display: block; 
    background-color: #09081A; /* New Background */
    color: #E9EEFA; /* New Font Color */
    padding: 30px; 
    border-radius: 10px; /* Rounded edge */
    height: 100%;
    box-sizing: border-box;
    text-align: left;
}
.resource-card h3 { 
    margin: 0 0 10px 0; 
    color: #E9EEFA;
}
.resource-card p { 
    margin: 0; 
}
.resource-card a {
    color: #E9EEFA; /* Link Color */
    text-decoration: underline;
    font-weight: 600;
}
.resource-card a:hover {
    color: #ffffff; 
    text-decoration: none;
}