/* /static/css/components/connection-items.css */

/* Hero images appear at the top of the results list for either a place or a connection */
.hero-topic-image-container {
    margin: 15px auto;
    text-align: center;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;  /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    width: 100%; /* Ensure the container takes full width of its parent */
}

.hero-topic-image-wrapper {
    position: relative;
    display: inline-block;
    width: 240px; /* Set fixed width to 240px */
    max-width: 100%; /* Ensures it doesn't overflow on smaller screens */
    text-align: center; /* Ensure content inside wrapper is centered */
}

.hero-topic-image {
    width: 100%; /* Take full width of the wrapper (240px) */
    height: auto; /* Maintain aspect ratio */
    max-height: 200px;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    object-fit: cover;
    margin: 0 auto; /* Center the image */
    display: block; /* Make the image a block element to allow margin auto to work */
}

/* Connection lists and items */
/* ----- */

/* Need this for the full result list structure */
.connection-list {
    list-style-type: none;
    padding: var(--space-2);
    margin: 0;
}

.result-container {
    display: flex;
    margin-bottom: var(--space-2);
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-start;
    width: 100%;
}

/* Connection description styling */
.connection-desc-container {
    margin-top: var(--space-2);
    clear: both;
    margin-bottom: var(--space-2);
}

.connection-desc {
    margin: 0;
    line-height: 1.6;
    color: var(--description-color);
    font-size: var(--text-base);
}

/* Add styling for connection items and horizontal rule */
.connection-item {
    margin-bottom: 15px;
    border-top: 1px solid #e0e0e0;
}

/* Remove border from last item */
.connection-item:last-child {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
}

/* Base result title styling shared by both types */
.result-title {
    margin-bottom: 8px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
    gap: 8px;
    flex: 1;
    min-width: 0; /* Allow text to wrap */
}

/* Specific styling for place result titles */
.place-result-title {
    color: var(--result-label-color-place);
}

/* Specific styling for connection result titles */
.connection-result-title {
    color: var(--result-label-color-connection);
}

/* Link styling in result titles */
.result-title .result-link {
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.2s ease;
    font-family: var(--heading-font);
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Place links inherit color from parent */
.place-result-title .result-link {
    color: inherit;
}

/* Connection links inherit color from parent */
.connection-result-title .result-link {
    color: inherit;
}

/* Hover states for result links */
.place-result-title .result-link:hover {
    color: var(--place-color-dark, var(--primary-color-dark));
    /* font-weight: 800; */
}

.connection-result-title .result-link:hover {
    color: var(--connection-color-dark, var(--dark-teal));
    /* font-weight: 800; */
}

/* Replace the existing hover rule with these specific ones */
.result-link:hover {
    font-weight: 800;
}

.description-place-link {
    color: var(--result-label-color-place);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Poppins', sans-serif;
    text-decoration: underline;
}

.description-place-link:hover {
    text-decoration: underline;
}

.description-connection-link {
    color: var(--result-label-color-connection);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Poppins', sans-serif;
    text-decoration: underline;
}

.description-connection-link:hover {
    text-decoration: underline;
}

.place-symbol {
    color: var(--place-color);
    font-size: var(--result-list-icon-font-size-place, 20px);
    display: flex; /* Make icons behave as flex items */
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
    width: var(--result-list-icon-dimension-width); /* Fixed width to ensure alignment */
    height: var(--result-list-icon-dimension-height); /* Fixed height to match width */
    margin: 0; /* Remove individual margins now that we use gap */
}

.connection-symbol {
    color: var(--connection-color, var(--dark-teal));
    font-size: var(--result-list-icon-font-size-connection, 20px);
    display: flex; /* Make icons behave as flex items */
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
    width: var(--result-list-icon-dimension-width); /* Fixed width to ensure alignment */
    height: var(--result-list-icon-dimension-height); /* Fixed height to match width */
    margin: 0; /* Remove individual margins now that we use gap */
}

.place-image-container,
.connection-image-container {
    width: var(--result-list-image-dimension-width);
    height: var(--result-list-image-dimension-height);
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease;
    margin: 0;
    display: flex;
    justify-content: flex-start; /* Left-align the image content */
    align-items: center; /* Center image vertically */
    border-radius: 4px;
    flex-shrink: 0; /* Prevent container from shrinking */
    flex: 0 0 auto;
}

.place-image-container img,
.connection-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* This ensures the image fits within the container */
    object-position: center; /* Center the image within the container */
    border-radius: 4px;
    margin: 0 auto; /* Center the image horizontally */
    display: block; /* Make it a block element for margin auto to work */
}

/* Icon container for symbols */
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--result-list-icon-dimension-width);
    flex-shrink: 0;
}

/* Small note text styling for status messages */
.small-note {
    font-size: 0.85em;
    color: #666;
    text-align: left !important; /* Add !important to override any conflicting styles */
    padding: 5px;
    font-style: italic;
    width: 100%; /* Ensure it takes full width of its container */
    display: block; /* Make it a block element to ensure alignment works */
}

/* Responsive adjustments */
@media (max-width: 600px) { 
    .result-container {
        align-items: center; /* Keep items centered vertically */
        gap: 20px; /* Reduced gap (spacing) on smaller screens */
    }
    
    .icon-container {
        margin-bottom: 5px;
        margin-right: 0;
    }
    
    .place-image-container,
    .connection-image-container {
        /* width: 100%;  Make images take full width on small screens */
        max-width: 240px; /* But limit their maximum width */
        margin-bottom: 10px; /* Add some spacing below images */
    }
    
    /* Ensure result titles are properly aligned */
    .result-title {
        width: 100%;
        margin-top: 5px; /* Add a bit of spacing above titles */
    }
}

.warning-message {
    color: var(--warning-color);
    font-size: 1.1em;
    margin-top: 14px;
    margin-bottom: 14px;
    text-align: center;
}

.image-attribution {
    font-size: 0.75rem;
    color: #666;
    margin-top: 4px;
    text-align: center; /* Ensure attribution is centered */
}

/* Connection Strength Indicators */
.connection-strength-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 4px 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 0.85em;
}

.strength-text {
    color: var(--text-color);
    font-weight: 500;
    text-transform: capitalize;
}

.connection-strength-indicator[title*="very strong"] .strength-text {
    color: #28a745; /* Green for very strong */
}

.connection-strength-indicator[title*="strong"] .strength-text {
    color: #20c997; /* Teal for strong */
}

.connection-strength-indicator[title*="moderate"] .strength-text {
    color: #ffc107; /* Yellow for moderate */
}

.connection-strength-indicator[title*="weak"] .strength-text {
    color: #6c757d; /* Gray for weak */
}