/* Directory Card Styles - Shared across all directory apps (festivalfinder, artsnearme, helpnearme) */
/* Enhanced for clarity and prominence */

.directory-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    border-left: 6px solid var(--bs-primary); /* Thick left border accent */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); /* Stronger shadow */
    background-color: color-mix(in srgb, var(--bs-primary) 2%, transparent); /* Very subtle primary blue tint */
    width: 100%; /* Fill flex column width for consistent card sizing */
}

/* Dark mode: slightly more visible tint */
[data-bs-theme="dark"] .directory-card {
    background-color: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-card-bg)); /* Subtle tint on dark card background */
}

.directory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Enhanced hover shadow */
}

.directory-card-link {
    transition: background-color 0.2s ease;
}

.directory-card-link:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 4%, transparent); /* Slightly more blue on hover */
}

.directory-card-title {
    line-height: 1.35; /* Tighter line height */
    font-size: 1.25rem; /* Reduced from 1.35rem for less visual dominance */
    font-weight: 600; /* Reduced from 700 for calmer appearance */
}

/* Clamp titles to 2 lines for visual balance and consistent card heights */
.directory-card-mode-list .directory-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.directory-card-date-box {
    background-color: var(--bs-secondary-bg);
    border-left: 4px solid var(--bs-primary);
    padding: 0.75rem; /* Balanced padding */
    border-radius: 0.375rem;
    min-height: 4.5rem; /* Consistent height for alignment */
    display: flex;
    align-items: center;
}

.directory-card-date-box.current {
    border-left-color: var(--bs-success);
}

/* No date available message styling */
.directory-card-date-box-no-date {
    background-color: var(--bs-warning-bg-subtle);
    border-left-color: var(--bs-warning);
}

/* Dark mode: date box borders use Bootstrap variables */
[data-bs-theme="dark"] .directory-card-date-box {
    border-left-color: var(--bs-primary);
}

[data-bs-theme="dark"] .directory-card-date-box.current {
    border-left-color: var(--bs-success);
}

[data-bs-theme="dark"] .directory-card-date-box-no-date {
    border-left-color: var(--bs-warning);
}

.directory-card-date-box a:hover {
    text-decoration: underline;
}

.directory-card-date-label {
    font-size: 0.8125rem; /* Slightly larger for readability */
    font-weight: 700; /* Bolder for better visibility */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px; /* More spacing */
    color: var(--bs-body-color); /* Full opacity for WCAG AA contrast */
}

.directory-card-date-value {
    font-size: 1rem; /* Clear but not oversized */
    font-weight: 700;
    color: var(--bs-body-color);
}

/* Date separator */
.directory-card-date-separator {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

/* No-date box text styling - uses very dark color for WCAG AA contrast on warning-bg-subtle */
.directory-card-date-label-no-date {
    color: #664d03; /* Very dark brown for WCAG AA contrast (4.5:1+) on light warning background */
    font-weight: 700; /* Bolder for better visibility */
}

.directory-card-date-value-no-date {
    color: #664d03; /* Very dark brown for WCAG AA contrast (4.5:1+) on light warning background */
    font-size: 0.9375rem;
    font-weight: 700; /* Bolder for better visibility */
}

/* Dark mode: use lighter warning color for contrast on dark background */
[data-bs-theme="dark"] .directory-card-date-label-no-date,
[data-bs-theme="dark"] .directory-card-date-value-no-date {
    color: #ffc107; /* Standard warning color works on dark backgrounds */
}

.directory-card-date-link {
    color: var(--bs-warning);
}

.directory-card-date-link:hover {
    color: var(--bs-warning);
    text-decoration: underline;
}

.directory-card-location-icon {
    font-size: 1.25rem; /* Larger icons for visibility without being oversized */
    margin-top: 0.25rem;
}

.directory-card-location-text {
    font-size: 1rem; /* Slightly larger for readability */
    line-height: 1.6; /* Better line spacing */
    color: var(--bs-secondary-color);
    font-weight: 500; /* Medium weight for better readability */
}

/* Directory card description text */
.directory-card-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--bs-body-color);
    font-weight: 400;
}

.directory-card-description-small {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--bs-body-color);
    font-weight: 400;
}

.directory-card-action-btn {
    font-size: 0.95rem;
    padding: 0.625rem 1rem;
    font-weight: 500;
}

/* Special card variants - maintain left border accent */
.directory-card.border-info {
    border-left-color: var(--bs-info); /* Info blue for followed entities */
}

.directory-card.border-primary {
    border-left-color: var(--bs-primary); /* Primary blue */
}

.directory-card.border-success {
    border-left-color: var(--bs-success); /* Success green */
}

/* Ensure border accent is visible even with other border classes */
.directory-card[class*="border-"] {
    border-left-width: 6px !important;
}

/* Responsive adjustments for larger typography */
@media (max-width: 767.98px) {
    .directory-card-title {
        font-size: 1.15rem; /* Proportionally reduced for mobile */
    }

    .directory-card-location-icon {
        font-size: 1.1rem; /* Slightly smaller on mobile */
    }
}

/* Reduced motion support for card animations */
@media (prefers-reduced-motion: reduce) {
    .directory-card {
        transition: none;
    }

    .directory-card:hover {
        transform: none;
    }

    .directory-card-link {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .directory-card {
        border-left-width: 8px; /* Even thicker border in high contrast */
        border: 2px solid #000;
        border-left-width: 8px;
        background-color: #ffffff; /* Solid white in high contrast */
    }

    .directory-card-title {
        color: #000;
    }

    .directory-card-location-text {
        color: #000;
    }
}

[data-bs-theme="dark"] .directory-card-link:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-card-bg)); /* Subtle hover in dark mode */
}

/* Dark mode: date box uses Bootstrap variables */
[data-bs-theme="dark"] .directory-card-date-box {
    background-color: color-mix(in srgb, white 8%, var(--bs-card-bg));
}

[data-bs-theme="dark"] .directory-card-date-box-no-date {
    background-color: color-mix(in srgb, var(--bs-warning) 15%, var(--bs-card-bg));
}

/* Directory Card Header - Card-specific styling */
.directory-card-badges {
    z-index: 10;
    margin: 0.75rem;
}

.directory-card-badges-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.directory-card-badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-weight: 500;
    white-space: nowrap;
    font-size: 0.75rem;
}

.directory-card-header-title {
    padding-right: 6rem !important;
    margin-bottom: 1rem;
    min-height: 3.2rem; /* Reserve space for ~2 lines of h4 title for visual consistency */
}

.directory-card-title-detail {
    line-height: 1.4;
    font-size: 1.75rem;
}

.directory-card-date-icon {
    font-size: 1.3rem;
}

.directory-card-date-badge {
    font-size: 0.75rem;
    font-weight: 600;
}

.directory-card-website-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* Portal mode: actions on the right with responsive borders */
.portal-actions-border {
    border-top: 1px solid var(--bs-border-color);
}

@media (min-width: 768px) {
    .portal-actions-border {
        border-top: none;
        border-left: 1px solid var(--bs-border-color);
    }
}

/* Dark mode: borders use Bootstrap's border-color variable automatically */
/* No explicit dark mode override needed - var(--bs-border-color) adapts automatically */