/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Base settings for the wrapper to ensure consistent sizing */
/* --- Main Wrapper --- */
/* --- 1. strict reset for the cards to block theme interference --- */
/* --- 1. The Main Wrapper --- */
.hospital-departments-wrapper {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif;
}

@media (min-width: 768px) {
    .hospital-departments-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- 2. The Card (Fixing the padding issue) --- */
.department-card {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #eaedf2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    /* This makes sure the image rounds to the card's corners */
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 !important;
    /* Forces removal of theme padding that squished the image */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.department-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* --- 3. Full-Width Image --- */
.department-image {
    width: 100% !important;
    /* height: 250px; */
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 20px;
}

.department-image img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    /* Forces the image to fill the 250px area perfectly */
    display: block;
    border-radius: 20px;
}

/* --- 4. Content Area (Applying left/right padding safely here) --- */
.department-content {
    padding: 32px;
    /* Generous, even spacing for the text */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- 5. Typography --- */
.department-title {
    font-size: 24px;
    color: #0f172a;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    font-weight: 700;
    position: relative;
}

.department-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 3px;
    background-color: #f97316;
    /* Orange accent line */
    border-radius: 2px;
}

.department-info p {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 28px 0;
}

/* --- 6. The New Box Layout for Surgeries --- */
.department-surgeries {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.department-surgeries h3 {
    font-size: 16px;
    color: #1e293b;
    margin: 0 0 16px 0;
    font-weight: 600;
}

/* Flexbox layout for the tags/boxes */
.department-surgeries ul {
    list-style: none !important;
    /* Removes default list styling */
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    /* Allows boxes to wrap to the next line naturally */
    gap: 10px;
    /* Space between boxes */
}

/* Individual Surgery Boxes */
.department-surgeries li {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 8px 14px;
    border-radius: 6px;
    /* Slightly rounded box edges */
    font-size: 13.5px;
    font-weight: 500;
    display: inline-block;
    transition: all 0.2s ease;
}

/* Hover effect for the boxes */
.department-surgeries li:hover {
    background-color: #f0f9ff;
    border-color: #93c5fd;
    color: #1d4ed8;
    cursor: default;
}

/* Safety rule to ensure NO checkmarks or bullets appear */
.department-surgeries li::before {
    display: none !important;
}