/**
 * All of the CSS for your public-facing functionality should be
 * Coded in this file. Ensure that all CSS selectors are prefixed
 * with the plugin name or a unique class.
 */

/* General Container for both directory and single view */
.artisan-directory-container,
.artisan-single-detail-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 25px auto; /* Centered with auto margins */
    padding: 0 15px; /* Padding for smaller screens */
    box-sizing: border-box;
    max-width: 1100px; /* Max width for the content area of the directory */
}

/* Specific container for single artisan to control its card width */
.artisan-single-detail-container {
    max-width: 800px; /* Max width for the single artisan card container */
}


/* Filter Styles */
.artisan-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.artisan-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    min-width: 220px;
}

.artisan-filters label {
    font-weight: 600;
    color: #444;
    font-size: 0.95em;
}

.artisan-filters select,
.artisan-filters input[type="text"] {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out;
}
.artisan-filters select:focus,
.artisan-filters input[type="text"]:focus {
    border-color: #007cba;
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(0,124,186,.25);
}

.artisan-filters input[type="submit"] {
    background-color: #007cba;
    color: white;
    padding: 10px 20px;
    border: 1px solid #007cba;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    align-self: flex-end;
    height: 42px;
}
.artisan-filters input[type="submit"]:hover {
    background-color: #005a87;
    border-color: #005a87;
}

/* Artisan Grid (Directory View) */
.artisan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.artisan-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
    display: flex;
    flex-direction: column;
}
.artisan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.artisan-card-image {
    width: 100%;
    height: 220px; /* Fixed height for directory card images */
    overflow: hidden;
    background-color: #eaeaea; /* Placeholder background */
}
.artisan-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    display: block;
    transition: transform 0.3s ease;
}
.artisan-card:hover .artisan-card-image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}
.artisan-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.artisan-card-content h3.artisan-name {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.45em;
    color: #2c3e50;
    font-weight: 600;
    line-height: 1.3;
}
.artisan-card-content p {
    margin-bottom: 10px;
    font-size: 0.95em;
    line-height: 1.6;
    color: #555;
}
.artisan-card-content p strong {
    color: #333;
    font-weight: 500;
}
.artisan-details-link {
    display: inline-block;
    margin-top: auto; /* Pushes link to the bottom */
    padding: 9px 18px;
    background-color: #27ae60; /* Green */
    color: white !important;
    text-decoration: none !important;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    align-self: flex-start;
}
.artisan-details-link:hover {
    background-color: #229954; /* Darker green */
    color: white !important;
}

/* Styles for Single Artisan Detail View */
.artisan-single-card {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 10px; /* Slightly more pronounced rounding */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Softer, more spread shadow */
    padding: 25px 30px; /* Adjust padding */
    margin-top: 20px;
}

.artisan-single-image {
    width: 100%;
    height: 300px; /* "Medium" fixed height for the image */
    max-width: 100%; /* Allow it to be full width of card if card is narrow */
    margin: 0 auto 25px auto; /* Centered if card is wider than image max-width (if any) */
    border-radius: 8px; /* Rounded corners for the image container */
    overflow: hidden;
    background-color: #f0f0f0; /* Placeholder background */
}

.artisan-single-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Key for consistent "medium" look */
    display: block;
    border-radius: 8px; /* Match container rounding */
}

.artisan-single-content h1.artisan-single-name {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2em; /* Slightly reduced for better balance */
    color: #333; /* Darker for more emphasis */
    text-align: left; /* Align to left for a more standard article feel */
    font-weight: 700;
    line-height: 1.2;
}

.artisan-single-meta {
    font-size: 1em; /* Standard text size */
    color: #505050;
    line-height: 1.6;
    margin-bottom: 15px; /* Increased spacing */
    padding-bottom: 15px; /* Increased spacing */
    border-bottom: 1px solid #eaeaea; /* Lighter border */
}
.artisan-single-meta:last-of-type { /* Remove border from last meta item */
    border-bottom: none;
    margin-bottom: 20px; /* Add more space before bio if it's the last meta */
}

.artisan-single-meta strong {
    color: #222; /* Darker strong text */
    font-weight: 600; /* Bolder */
    min-width: 140px; 
    display: inline-block;
    margin-right: 8px;
}

.artisan-single-bio {
    margin-top: 20px;
    font-size: 1em;
    line-height: 1.75; /* More readable line height for bio */
    color: #454545;
}
.artisan-single-bio h3 { /* Title for "About Artisan" */
    margin-top: 0; /* Remove top margin if it's the first element in bio */
    margin-bottom: 12px;
    font-size: 1.4em;
    color: #333;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid #eaeaea;
}
/* Ensure paragraphs within bio have good spacing */
.artisan-single-bio p {
    margin-bottom: 1em;
}
.artisan-single-bio p:last-child {
    margin-bottom: 0;
}


.artisan-enquiry-button {
    display: inline-block; /* Changed from block to inline-block */
    background-color: #0073aa; /* WordPress standard blue */
    color: #fff !important;
    padding: 12px 22px; /* Slightly adjusted padding */
    text-decoration: none !important;
    border: none;
    border-radius: 5px;
    font-weight: 500;
    font-size: 1.05em; /* Slightly larger font */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 30px; /* Space above the button */
}
.artisan-enquiry-button:hover {
    background-color: #005a87; /* Darker blue */
    color: #fff !important;
    transform: translateY(-1px); /* Subtle lift on hover */
}
.artisan-enquiry-button:active {
    transform: translateY(0px); /* Press effect */
}


/* No Artisans Found & Pagination */
.no-artisans-found {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    background-color: #fff;
    border: 1px dashed #ccc;
    border-radius: 8px;
    color: #666;
    font-size: 1.1em;
    margin-top: 20px;
}
.artisan-pagination {
    margin-top: 35px;
    text-align: center;
    grid-column: 1 / -1;
}
.artisan-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #007cba;
    background-color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 0.95em;
}
.artisan-pagination .page-numbers:hover,
.artisan-pagination .page-numbers.current {
    background-color: #007cba;
    color: #fff;
    border-color: #007cba;
}
.artisan-pagination .page-numbers.dots {
    border: none;
    background-color: transparent;
    color: #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .artisan-directory-container,
    .artisan-single-detail-container {
        max-width: 100%; /* Allow full width on smaller screens */
    }
    .artisan-filters { flex-direction: column; }
    .artisan-filters .filter-group { width: 100%; min-width: unset; }
    .artisan-filters input[type="submit"] { align-self: stretch; }
    .artisan-grid { grid-template-columns: 1fr; gap: 20px; }
    .artisan-card-image { height: 200px; }
    .artisan-card-content h3.artisan-name { font-size: 1.3em; }

    .artisan-single-card { padding: 20px; }
    .artisan-single-image { height: 250px; /* Adjust height for mobile */ }
    .artisan-single-content h1.artisan-single-name { font-size: 1.6em; text-align: center; }
    .artisan-single-meta { font-size: 0.95em; }
    .artisan-single-bio h3 { font-size: 1.2em; }
    .artisan-enquiry-button { width: 100%; max-width: none; } /* Full width on mobile */
}

@media (max-width: 480px) {
    .artisan-card-content { padding: 15px; }
    .artisan-card-content h3.artisan-name { font-size: 1.2em; }
    .artisan-card-content p { font-size: 0.9em; }
    .artisan-details-link { padding: 8px 15px; font-size: 0.85em; }
    .artisan-filters { padding: 15px; gap: 15px; }
    .artisan-filters select,
    .artisan-filters input[type="text"],
    .artisan-filters input[type="submit"] { padding: 9px 10px; font-size: 0.95rem; }
    .artisan-filters input[type="submit"] { height: auto; }

    .artisan-single-card { padding: 15px; }
    .artisan-single-image { height: 200px; /* Further adjust for very small screens */ }
    .artisan-single-content h1.artisan-single-name { font-size: 1.4em; }
    .artisan-single-meta { font-size: 0.9em; }
    .artisan-single-bio h3 { font-size: 1.1em; }
    .artisan-enquiry-button { font-size: 1em; padding: 10px 15px; }
}