/* Import shared styles if needed */
/* @import url("style.css"); */

/* Add specific styles for the Health Packages page here */

/* Adjust padding for the main content to account for the fixed header */
main {
    padding-top: 4rem; /* Adjust as needed based on header height */
    padding-bottom: 4rem;
}

/* Style for the health packages grid */
.health-packages-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column on small screens */
    gap: 2rem; /* Gap between package cards */
}

/* Style for individual package cards */
.package-card {
    background-color: #fff; /* White background */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
    display: flex;
    flex-direction: column; /* Stack image and content vertically */
    overflow: hidden; /* Hide anything outside the rounded corners */
    transition: transform 0.3s ease-in-out;
    text-decoration: none; /* Remove underline from the link */
    color: inherit; /* Inherit text color */
    position: relative; /* Needed for absolute positioning if any */
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
}

/* Container for the image */
.package-card-image {
    position: relative; /* Needed for positioning the logo if it were present */
    width: 100%;
    height: 150px; /* Fixed height for the image container - Adjust as needed */
    overflow: hidden; /* Hide the scaled image overflow */
    background-color: #f3f4f6; /* Background color behind the image - Tailwind gray-100 */
    display: flex; /* Use flex to center the image if it doesn't cover */
    align-items: center;
    justify-content: center;
}

.package-card-image img {
    /* Styles for the actual image inside the container */
    width: 100%; /* Image takes full width of its container */
    height: 100%; /* Image takes full height of its container */
    object-fit: cover; /* Cover the area while maintaining aspect ratio */
    transform: scale(1.8); /* Apply the desired scale */
    transform-origin: center; /* Scale from the center */
    display: block; /* Remove extra space below image */
    transition: transform 0.3s ease-in-out; /* Add transition for hover effect */
}

.package-card:hover .package-card-image img {
    transform: scale(2); /* Slightly larger scale on hover */
}

/* Removed .unifit-logo styles */
/* .unifit-logo { ... } */
/* .unifit-logo img { ... } */


/* Container for the text content below the image */
.package-card-content {
    padding: 1rem; /* Adjusted padding to match the image layout */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow content to grow and fill space */
}

.package-card h3 {
    font-size: 1.125rem; /* Tailwind text-lg - Adjusted size */
    font-weight: 600; /* Semibold */
    margin-bottom: 0.5rem; /* Adjusted margin */
    color: #1f2937; /* Dark gray text */
    word-break: break-word; /* Allow long words to break */
    overflow-wrap: break-word; /* Allow wrapping */
    /* ellipsis-two-lines could be implemented with JavaScript or specific CSS tricks if needed */
}

.available-date {
    font-size: 0.875rem; /* Tailwind text-sm */
    color: #4b5563; /* Tailwind gray-600 */
    margin-bottom: 0.5rem;
}

.available-date span {
    font-weight: 600; /* Semibold for "Available on:" */
}

.package-card-content p {
    font-size: 0.875rem; /* Tailwind text-sm - Adjusted size */
    color: #4b5563; /* Tailwind gray-600 */
    margin-bottom: 0.5rem; /* Adjusted margin */
}

/* Styles for the price, discount, and original price section */
.package-price-section {
    display: flex; /* Use flexbox to align price and discount */
    align-items: center; /* Vertically center items */
    justify-content: space-between; /* Put space between price and discount */
    margin-bottom: 0.5rem; /* Adjusted margin */
    margin-top: auto; /* Push this section to the bottom */
}

.package-price {
    font-size: 1.25rem; /* Tailwind text-xl - Adjusted size */
    font-weight: 700; /* Bold */
    color: #3b82f6; /* Tailwind blue-600 */
    flex-shrink: 0; /* Prevent price from shrinking */
}

.package-discount {
    background-color: #ef4444; /* Tailwind red-500 */
    color: white;
    font-size: 0.75rem; /* Tailwind text-xs */
    font-weight: 600; /* Semibold */
    padding: 0.25rem 0.5rem; /* Tailwind px-2 py-1 */
    border-radius: 0.25rem; /* Tailwind rounded */
    flex-shrink: 0; /* Prevent discount from shrinking */
    margin-left: 0.5rem; /* Space between price and discount */
}

.original-price {
    text-decoration: line-through;
    color: #6b7280; /* Tailwind gray-500 */
    font-size: 0.875rem; /* Tailwind text-sm */
    text-align: right; /* Align original price to the right */
    margin-top: 0.5rem; /* Add margin above original price */
    margin-bottom: 0; /* Remove bottom margin */
}


/* Removed button styles as the whole card is a link */
/* .package-card button { ... } */


/* Responsive adjustments for the grid */
@media (min-width: 768px) {
    .health-packages-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
    }
}

@media (min-width: 1024px) {
    .health-packages-grid {
        grid-template-columns: repeat(3, 1fr); /* Three columns on large screens */
    }
}

@media (min-width: 1280px) {
    .health-packages-grid {
        grid-template-columns: repeat(4, 1fr); /* Four columns on extra large screens */
    }
}


/* Adjust header padding for smaller screens if needed */
@media (max-width: 767px) {
    main {
        padding-top: 6rem; /* Adjust padding for smaller screens */
    }

    /* Stack price and original price on small screens if needed */
    .package-price-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .package-discount {
        margin-left: 0; /* Remove left margin when stacked */
        margin-top: 0.5rem; /* Add top margin when stacked */
    }

    .original-price {
        text-align: left; /* Align original price to the left when stacked */
    }
}