/* -------------------------------------------------------------------------- */
/*  Senil Event Viewer - Premium Portal CSS (v3.3 Mint Fresh)                 */
/* -------------------------------------------------------------------------- */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Outfit:wght@400;600;700&display=swap');

:root {
    --sev-font-base: 'Noto Sans JP', sans-serif;
    --sev-font-eng: 'Outfit', sans-serif;

    /* Theme Colors */
    --sev-primary: #10b981;
    /* Premium Mint Green */
    --sev-primary-dark: #059669;
    --sev-secondary: #1e293b;
    /* Deep Slate */
    --sev-accent: #a8e6cf;
    /* Light Mint Accent */

    --sev-bg-body: #ffffff;
    --sev-bg-light: #f8fafc;
    --sev-bg-footer: #2c3e50;

    --sev-text: #334155;
    --sev-text-light: #64748b;
    --sev-border: #e2e8f0;

    --sev-radius: 12px;
    --sev-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sev-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.sev-container {
    font-family: var(--sev-font-base);
    color: var(--sev-text);
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}

/* -------------------------------------------------------------------------- */
/*  Intro Section                                                             */
/* -------------------------------------------------------------------------- */
.sev-intro-section {
    text-align: center;
    padding: 80px 20px;
    /* More spacing */
    background: linear-gradient(180deg, #f0fdf7 0%, #ffffff 100%);
    border-radius: var(--sev-radius);
    margin-bottom: 80px;
    /* Section Gap */
}

.sev-intro-section h2 {
    font-size: 2.2rem;
    color: var(--sev-secondary);
    margin-bottom: 24px;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.sev-intro-section p {
    font-size: 1.05rem;
    color: var(--sev-text-light);
    line-height: 1.9;
    max-width: 720px;
    margin: 0 auto 10px;
}

/* -------------------------------------------------------------------------- */
/*  Controls (Filters)                                                        */
/* -------------------------------------------------------------------------- */
.sev-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
    /* Gap to Grid */
    gap: 20px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--sev-border);
    border-radius: var(--sev-radius);
    box-shadow: var(--sev-shadow);
}

.sev-view-toggle button {
    padding: 10px 20px;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    color: var(--sev-text-light);
    font-family: var(--sev-font-eng);
    transition: all 0.2s;
}

.sev-view-toggle button.active {
    background: #f0fdf7;
    color: var(--sev-primary);
    border-color: #d1fae5;
}

.sev-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sev-select {
    padding: 12px 18px;
    border: 1px solid var(--sev-border);
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    color: var(--sev-text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.sev-select:hover,
.sev-select:focus {
    border-color: var(--sev-primary);
}

.sev-btn-special {
    background: var(--sev-secondary);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.sev-btn-special:hover {
    transform: translateY(-2px);
    background: #0f172a;
}

.sev-btn-special.active {
    background: var(--sev-primary);
}

#sev-reset-btn {
    padding: 12px 20px;
    border: 1px solid var(--sev-border);
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--sev-text-light);
}

/* -------------------------------------------------------------------------- */
/*  Grid & Cards                                                              */
/* -------------------------------------------------------------------------- */
.sev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
    /* Cleaner spacing */
    margin-bottom: 40px;
}

.sev-card {
    background: #fff;
    border-radius: var(--sev-radius);
    overflow: hidden;
    box-shadow: var(--sev-shadow);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sev-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sev-shadow-lg);
    border-color: #d1fae5;
}

.sev-card-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.sev-share-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.sev-share-btn:hover {
    transform: scale(1.1);
}

.sev-card-body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.sev-badge {
    display: inline-block;
    padding: 6px 12px;
    background: #f1f5f9;
    color: var(--sev-text-light);
    font-size: 0.75rem;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 12px;
    font-family: var(--sev-font-eng);
    align-self: flex-start;
}

.sev-title {
    margin: 0 0 12px 0;
    font-size: 1.15rem;
    line-height: 1.5;
    font-weight: 700;
}

.sev-title a {
    text-decoration: none;
    color: var(--sev-secondary);
    transition: color 0.2s;
}

.sev-title a:hover {
    color: var(--sev-primary);
}

.sev-meta {
    font-size: 0.9rem;
    color: var(--sev-text-light);
    margin-top: auto;
    /* Push to bottom */
}

.sev-meta p {
    margin: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* -------------------------------------------------------------------------- */
/*  Load More Button (Refreshed v3.3)                                         */
/* -------------------------------------------------------------------------- */
.sev-load-more-container {
    text-align: center;
    margin: 60px 0;
    /* 60px vertical margin */
}

#sev-load-more-btn {
    background: #ffffff;
    color: var(--sev-text);
    border: 1px solid var(--sev-border);
    padding: 16px 60px;
    /* Wide Pill */
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#sev-load-more-btn:hover {
    background: var(--sev-primary);
    color: #ffffff;
    border-color: var(--sev-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}

/* -------------------------------------------------------------------------- */
/*  Portal Blog Section (v3.3)                                                */
/* -------------------------------------------------------------------------- */
.sev-portal-section {
    margin-top: 80px;
    padding: 100px 20px;
    /* Integrated Look */
    background: #f0fdf7;
    /* Seamless */
    border-radius: 0;
    /* Full width flow concept within container? No, rounded for card look */
    /* Actually user asked to "Naturally connect border with Event section", usually means color flow.
       But container width is fixed. Let's keep rounded block but make it elegant. */
    border-radius: 30px;
    text-align: center;
}

.sev-section-title {
    font-family: var(--sev-font-base);
    font-size: 2rem;
    color: var(--sev-secondary);
    margin-bottom: 8px;
    font-weight: 700;
}

.sev-section-subtitle {
    font-family: var(--sev-font-eng);
    font-size: 0.9rem;
    color: var(--sev-primary);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 60px;
    font-weight: 600;
}

.sev-blog-grid {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 20px;
    /* Space for scrollbar */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -20px;
    /* Negative margin to touch edges on mobile */
    padding-left: 20px;
    padding-right: 20px;
}

/* Scrollbar Styling */
.sev-blog-grid::-webkit-scrollbar {
    height: 8px;
}

.sev-blog-grid::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.sev-blog-grid::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.sev-blog-grid::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.sev-blog-card {
    flex: 0 0 300px;
    /* Fixed width */
    max-width: 300px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: var(--sev-radius);
    overflow: hidden;
    box-shadow: var(--sev-shadow);
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.sev-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sev-shadow-lg);
    border-color: #d1fae5;
}

.sev-blog-thumb {
    height: 200px;
    overflow: hidden;
}

.sev-blog-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.sev-blog-card:hover .sev-blog-image {
    transform: scale(1.08);
}

.sev-blog-body {
    padding: 30px;
}

.sev-blog-body h4 {
    font-family: var(--sev-font-base);
    font-size: 1.2rem;
    /* Increased size */
    line-height: 1.6;
    /* Increased readability */
    color: var(--sev-secondary);
    margin: 0 0 20px 0;
    transition: color 0.3s;
    font-weight: 700;
}

.sev-blog-card:hover .sev-blog-body h4 {
    color: var(--sev-primary);
}

.sev-read-more {
    font-family: var(--sev-font-eng);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sev-text-light);
    transition: all 0.2s;
    display: inline-block;
    border-bottom: 2px solid transparent;
}

.sev-blog-card:hover .sev-read-more {
    color: var(--sev-primary);
    border-bottom-color: var(--sev-primary);
}

/* -------------------------------------------------------------------------- */
/*  Premium Footer (v3.3)                                                     */
/* -------------------------------------------------------------------------- */
.sev-portal-footer {
    margin-top: 80px;
    /* Big spacing above footer */
    background: var(--sev-bg-footer);
    /* #2c3e50 */
    color: #fff;
    padding: 80px 20px;
    /* Round top corners only if it's within container, but full footer look is better flat? 
       User said "Footer Integration", but kept within shortcode container. 
       Let's use rounded bottom to match container or just distinct block. */
    border-radius: 20px;
    text-align: center;
    border-top: 3px solid var(--sev-primary);
    /* Accent Border */
}

/* Override container margin for footer to make it sit flush at bottom if needed,
   but keeping it inside plugin container is safer. */

.sev-footer-logo {
    font-family: var(--sev-font-eng);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
    color: #fff;
}

.sev-footer-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.sev-footer-nav li a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s;
}

.sev-footer-nav li a:hover {
    color: var(--sev-primary);
    /* Mint Green Hover */
}

.sev-copyright {
    color: #94a3b8;
    font-size: 0.85rem;
    font-family: var(--sev-font-eng);
    margin: 0;
}

/* -------------------------------------------------------------------------- */
/*  Detail View (v3.0)                                                        */
/* -------------------------------------------------------------------------- */
.sev-detail-container {
    background: #fff;
    border-radius: var(--sev-radius);
    overflow: hidden;
    box-shadow: var(--sev-shadow);
    margin-bottom: 80px;
}

.sev-detail-header {
    padding: 50px;
    background: #f8fafc;
    border-bottom: 1px solid var(--sev-border);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .sev-grid {
        grid-template-columns: 1fr;
    }

    .sev-blog-grid {
        flex-direction: column;
    }

    .sev-footer-nav {
        flex-direction: column;
        gap: 20px;
    }

    .sev-portal-section,
    .sev-intro-section {
        padding: 40px 20px;
    }
}

/* -------------------------------------------------------------------------- */
/*  Loading Spinner (Mint Green)                                              */
/* -------------------------------------------------------------------------- */
.sev-loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    border-top-color: #10b981;
    /* Mint Green */
    animation: sev-spin 1s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes sev-spin {
    to {
        transform: rotate(360deg);
    }
}

.sev-loading-text {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
}

/* Hide blockquote initially to avoid flash */

/* -------------------------------------------------------------------------- */
/*  Group Summary View (v3.5)                                                 */
/* -------------------------------------------------------------------------- */
.sev-group-summary-container {
    background: #fff;
    border-radius: var(--sev-radius);
    overflow: hidden;
    box-shadow: var(--sev-shadow);
    margin-bottom: 60px;
}

.sev-group-header {
    background: linear-gradient(135deg, #f0fdf7 0%, #ffffff 100%);
    padding: 60px 40px;
    text-align: center;
    border-bottom: 1px solid var(--sev-border);
    position: relative;
}

.sev-group-header h1 {
    font-family: var(--sev-font-base);
    font-size: 2.5rem;
    color: var(--sev-secondary);
    margin: 20px 0;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.sev-back-btn {
    display: inline-block;
    text-decoration: none;
    color: var(--sev-text-light);
    font-weight: 600;
    margin-bottom: 20px;
    transition: color 0.2s;
    font-size: 0.9rem;
}

.sev-back-btn:hover {
    color: var(--sev-primary);
}

.sev-artist-intro {
    max-width: 800px;
    margin: 30px auto 0;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #d1fae5;
    padding: 30px;
    border-radius: 16px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--sev-text);
    text-align: left;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.05);
}

/* Map Integration */
#sev-group-map {
    width: 100%;
    height: 450px;
    border-bottom: 1px solid var(--sev-border);
    z-index: 1;
    /* Ensure above header/list if needed */
}

/* List Integration */
.sev-group-events-list {
    padding: 40px;
    background: #fff;
}


/* -------------------------------------------------------------------------- */
/*  Artist Accordion & Logo Grid (v3.6)                                       */
/* -------------------------------------------------------------------------- */
.sev-artist-accordion {
    border: 1px solid var(--sev-border);
    border-radius: var(--sev-radius);
    background: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--sev-shadow);
}

.sev-artist-accordion[open] {
    box-shadow: var(--sev-shadow-lg);
    border-color: var(--sev-primary);
}

.sev-accordion-summary {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    padding: 20px 30px;
    cursor: pointer;
    list-style: none;
    /* Hide default triangle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--sev-secondary);
    transition: background 0.2s;
    user-select: none;
}

.sev-accordion-summary:hover {
    background: #f1f5f9;
    color: var(--sev-primary);
}

/* Custom Marker */
.sev-accordion-summary::-webkit-details-marker {
    display: none;
}

.sev-summary-icon {
    margin-right: 10px;
    font-size: 1.4rem;
}

.sev-summary-arrow {
    margin-left: 15px;
    font-size: 0.8rem;
    transition: transform 0.3s;
    color: var(--sev-text-light);
}

.sev-artist-accordion[open] .sev-summary-arrow {
    transform: rotate(180deg);
    color: var(--sev-primary);
}

.sev-accordion-content {
    padding: 30px;
    background: #fff;
    border-top: 1px solid var(--sev-border);
    animation: sev-slide-down 0.3s ease-out;
}

@keyframes sev-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tile Grid */
.sev-artist-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: calc(20% - 14px);
    /* 5 items per row with 15px gap (slightly reduced from 12px for safety) */
    box-sizing: border-box;
    transition: transform 0.2s;
}

.sev-artist-tile:hover {
    transform: translateY(-5px);
}

.sev-artist-logo {
    width: 100%;
    max-width: 100px;
    /* Prevent being too huge on large screens */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    /* Make it circular as requested earlier or keep rounded square? User said "icon", badges are circle in generation. */
    /* Previous CSS said border-radius: 16px. generated badges are circular. Let's make it fully round or keep style. */
    /* User said "Icon". generated images are round. Let's use 50% to be safe or just fit image. */
    /* Actually badge generated has transparency. Image is square png. */
    /* Let's keep transparent background and just let the image shape dictate. */
    /* But to prevent clickable area being weird, square is fine. */
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #fff;
    margin-bottom: 5px;
    transition: all 0.2s;
}

.sev-artist-tile:hover .sev-artist-logo {
    border-color: var(--sev-primary);
    box-shadow: 0 8px 15px rgba(16, 185, 129, 0.25);
    /* Mint Glow */
}

/* Fallback Circle (Re-styled for Tile) */
.sev-artist-icon-fallback {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 50%;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--sev-text-light);
    font-size: 1.2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 2px solid #fff;
    transition: all 0.2s;
}

.sev-artist-tile:hover .sev-artist-icon-fallback {
    background: var(--sev-primary);
    color: #fff;
    box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
}

.sev-artist-name {
    font-size: 0.8rem;
    color: var(--sev-text);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s;
}

.sev-artist-tile:hover .sev-artist-name {
    color: var(--sev-primary);
    font-weight: 600;
}