/* ============================================
   CHARACTERS PAGE - MOBILE RESPONSIVE LAYOUT
   ============================================ */

/* Mobile Layout Container */
.characters-mobile-layout {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
}

.characters-split-view {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
    min-height: calc(100vh - 250px);
}

/* Mobile: Carousel View */
.mobile-carousel-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile: Detail Section */
.mobile-detail-section {
    display: flex;
    flex-direction: column;
}

/* Mobile: List View */
.mobile-list-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile: Detail View */
.mobile-detail-view {
    display: flex;
    flex-direction: column;
}

.mobile-detail-back-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: #ffd700;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.mobile-detail-back-button:active {
    background: rgba(255, 215, 0, 0.1);
    transform: scale(0.95);
}

.mobile-detail-back-button:hover {
    background: rgba(255, 215, 0, 0.05);
}

/* ============================================
   MOBILE BREAKPOINT: 768px and below
   ============================================ */

@media (max-width: 768px) {
    /* Show mobile layout */
    .characters-mobile-layout {
        display: flex;
    }

    /* Hide desktop layout */
    .characters-split-view {
        display: none;
    }

    /* Carousel view styling */
    .mobile-carousel-view {
        width: 100%;
    }

    /* Mobile detail styling */
    .mobile-detail-section {
        width: 100%;
        padding: 0 1rem;
    }

    /* Hide the hero header on mobile since info is in carousel */
    .mobile-detail-section .detail-header {
        display: none;
    }

    /* Character detail panel adjustments for mobile */
    .mobile-detail-section .character-detail {
        background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
        border: 1px solid rgba(255, 215, 0, 0.15);
        border-radius: 12px;
        padding: 1.5rem 1rem;
        overflow-y: auto;
    }

    /* Make section titles use Cinzel font like header */
    .mobile-detail-section .section-title {
        font-family: 'Cinzel', serif;
        font-size: 1rem;
        font-weight: 700;
        color: #ffd700;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Content layout for mobile */
    .mobile-detail-section .detail-content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .mobile-detail-section .detail-column {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Detail sections on mobile */
    .mobile-detail-section .detail-section {
        background: transparent;
        border: none;
        padding: 0;
    }

    .mobile-detail-section .detail-section:not(:last-child) {
        border-bottom: 1px solid rgba(255, 215, 0, 0.1);
        padding-bottom: 1.5rem;
    }

    .mobile-detail-section .section-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    /* Resource bars on mobile */
    .mobile-detail-section .resources {
        gap: 1rem;
    }

    .mobile-detail-section .resource-bar {
        padding: 0;
    }

    /* Stats grid on mobile */
    .mobile-detail-section .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem;
    }

    .mobile-detail-section .stat-card {
        padding: 0.75rem;
    }

    /* Combat preview on mobile */
    .mobile-detail-section .combat-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .mobile-detail-section .combat-stat {
        padding: 0.75rem;
    }

    /* Equipment section on mobile */
    .mobile-detail-section .equipment-section {
        padding: 0;
    }

    .mobile-detail-section .equipment-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .mobile-detail-section .equipment-item {
        flex-direction: column;
    }

    .mobile-detail-section .equipment-slot-label {
        font-size: 0.75rem;
    }

    /* Abilities/Spells on mobile */
    .mobile-detail-section .abilities-grid {
        grid-template-columns: 1fr;
    }

    .mobile-detail-section .ability-card {
        padding: 0.75rem;
    }

    /* Achievements on mobile */
    .mobile-detail-section .achievements-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }

    .mobile-detail-section .achievement-item {
        padding: 0.75rem;
        text-align: center;
    }

    /* Action buttons on mobile */
    .mobile-detail-section .action-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .mobile-detail-section .action-buttons button,
    .mobile-detail-section .action-buttons > div button {
        width: 100%;
    }

    /* Ensure full width for mobile elements */
    .mobile-carousel-view,
    .mobile-detail-section {
        width: 100%;
    }

    /* Hide character list on mobile */
    .mobile-carousel-view .character-list {
        display: none;
    }
}

/* ============================================
   TABLET BREAKPOINT: 769px to 1024px
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    .characters-split-view {
        grid-template-columns: 280px 1fr;
        gap: 1.5rem;
    }

    .characters-split-view .character-list {
        max-height: calc(100vh - 250px);
    }

    .characters-split-view .character-detail {
        max-height: calc(100vh - 250px);
    }
}

/* ============================================
   DESKTOP: 1025px and above
   ============================================ */

@media (min-width: 1025px) {
    .characters-mobile-layout {
        display: none !important;
    }

    .characters-split-view {
        grid-template-columns: 350px 1fr;
        gap: 2rem;
    }
}