/* project_0/assets/css/villageUI.css */

/* General Village View Styling */
#village-view {
    padding: var(--spacing-xl); /* Use theme spacing */
    /* No background-color here, allows it to inherit from parent (should be --dark-bg) */
    box-sizing: border-box;
    height: 100%; /* Ensure it can scroll if content overflows */
    overflow-y: auto;
}

#village-view h1 {
    color: var(--accent-active); /* Theme accent color for active elements or titles */
    margin-bottom: var(--spacing-xl);
    font-size: 2.6em; /* Slightly adjusted */
    font-weight: 700;
    text-align: center;
    line-height: var(--line-height-tight);
}

/* Multi-Column Layout Styling */
.village-main-layout {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    gap: var(--spacing-l); /* Use theme spacing for gap between columns */
    margin-top: var(--spacing-l);
    align-items: stretch; /* Make columns of equal height if they wrap */
}

.village-column {
    flex: 1; /* Allow columns to grow and shrink */
    min-width: 320px; /* Minimum width before wrapping */
    
    /* Apply glass panel style from style.css */
    background-color: var(--glass-tint);
    border: var(--border-width) solid var(--glass-border);
    border-radius: var(--radius-l);
    padding: var(--spacing-l);
    
    display: flex;
    flex-direction: column;
}

/* Info Column (Image & Text) */
.village-column-info {
    align-items: center; /* Center content horizontally */
    text-align: center;
}

#village-image-container {
    margin-bottom: var(--spacing-m);
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-s); /* Some space above image */
}

#village-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-m); /* Use theme radius */
    border: var(--border-width-thick) solid var(--border-color); /* Use theme border variables */
    padding: var(--spacing-xs);
    background-color: var(--dark-bg); /* Ensure image bg matches theme if it has transparency */
    max-width: 300px; /* Adjust this value for image size preference */
}

.village-column-info p {
    color: var(--text-secondary); /* Use theme text color */
    font-size: 1.05em; /* Slightly adjusted for readability */
    line-height: var(--line-height-spacious); /* Use theme line height */
    margin-bottom: var(--spacing-m);
    max-width: 95%; /* Constrain paragraph width within its column */
    flex-grow: 1; /* Allows paragraph to take up space before actions */
}

/* Actions Column (Navigation Buttons) */
.village-column-actions {
    align-items: center; /* Center content horizontally */
    text-align: center;
}

.village-column-actions h2 {
    color: var(--text-primary); /* Theme primary text color */
    font-size: 1.6em; /* Matches h2 style in style.css */
    margin-bottom: var(--spacing-l);
    line-height: var(--line-height-tight);
    /* Optional: Add a border like h3 if desired for this context */
    /* border-bottom: var(--border-width-thick) solid var(--accent-interactive); */
    /* padding-bottom: var(--spacing-s); */
}

#village-navigation {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: var(--spacing-m); /* Use theme spacing for gap between buttons */
    width: 100%;
    align-items: center; /* Center buttons if they don't take full column width */
    margin-top: auto; /* Pushes navigation to bottom if column has extra space */
    padding-top: var(--spacing-m); /* Space above buttons if content above is short */
}

/* Buttons in village navigation will use classes from style.css */
/* Adjust width or margins if needed for this specific context */
#village-navigation .button, /* For base button if you use it */
#village-navigation .interactive-action,
#village-navigation .success-action,
#village-navigation .warning-action,
#village-navigation .danger-action {
    min-width: 220px; /* Ensure buttons have a good minimum width */
    width: auto; /* Allow button to size by content + padding by default */
    max-width: 90%; /* Max width relative to actions column */
    /* Font size, padding, colors, borders, etc., are inherited from style.css definitions */
}