/**
 * MindForge Layout Components
 * Neumorphic layout system based on game-night reference styling
 * Provides consistent card, band, and container layouts
 */

/* ================================================
   NEUMORPHIC CARD COMPONENTS
   ================================================ */

/* 1. Dipped Action Card - Inset shadows with shrink-on-hover */
.layout-card-dipped-action {
    background: var(--color-bg-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 
        inset 8px 8px 16px rgba(0, 0, 0, 0.4),
        inset -8px -8px 16px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.layout-card-dipped-action:hover {
    box-shadow: 
        inset 6px 6px 12px rgba(0, 0, 0, 0.4),
        inset -6px -6px 12px rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

.layout-card-dipped-action:active {
    box-shadow: 
        inset 8px 8px 16px rgba(0, 0, 0, 0.5),
        inset -8px -8px 16px rgba(255, 255, 255, 0.05);
    transform: scale(0.96);
}

/* 2. Dipped Static Card - Inset shadows, no hover */
.layout-card-dipped-static {
    background: var(--color-bg-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 
        inset 8px 8px 16px rgba(0, 0, 0, 0.4),
        inset -8px -8px 16px rgba(255, 255, 255, 0.1);
    transition: none;
}

/* 3. Raised Action Card - Outset shadows with lift+shrink-on-hover */
.layout-card-raised-action {
    background: var(--color-bg-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 0.75rem;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.3),
        -8px -8px 16px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.layout-card-raised-action:hover {
    box-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.3),
        -4px -4px 8px rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.layout-card-raised-action:active {
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.4),
        inset -4px -4px 8px rgba(255, 255, 255, 0.1);
    transform: translateY(0);
}

/* 4. Raised Static Card - Outset shadows, no hover */
.layout-card-raised-static {
    background: var(--color-bg-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 0.75rem;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.3),
        -8px -8px 16px rgba(255, 255, 255, 0.1);
    transition: none;
}

/* ================================================
   BAND COMPONENTS
   ================================================ */

/* 5. Raised Band - Full-width raised section with neumorphic styling */
.layout-band-raised {
    background: var(--color-bg-primary);
    width: 100%;
    margin: 1.5rem 0;
    padding: 2rem 0;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.3),
        -8px -8px 16px rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    text-align: center;
}

.layout-band-raised .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Default content styling for raised bands */
.layout-band-raised h1,
.layout-band-raised h2,
.layout-band-raised h3,
.layout-band-raised h4,
.layout-band-raised h5,
.layout-band-raised h6 {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-primary);
}

.layout-band-raised p {
    margin: 0 0 1rem 0;
    color: var(--color-text-primary);
}

/* 6. Background Band - Neutral separator between raised sections */
.layout-band-background {
    background: transparent;
    width: 100%;
    margin: 0;
    padding: 3rem 0;
    border: none;
    box-shadow: none;
    text-align: center;
}

.layout-band-background .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Default content styling for background bands */
.layout-band-background h1,
.layout-band-background h2,
.layout-band-background h3,
.layout-band-background h4,
.layout-band-background h5,
.layout-band-background h6 {
    margin: 0 0 0.5rem 0;
    color: var(--color-text-primary);
}

.layout-band-background p {
    margin: 0 0 1rem 0;
    color: var(--color-text-primary);
}

/* 7. Image Title Band - Full-width image with overlay title */
.layout-band-image-title {
    position: relative;
    width: 100%;
    height: 300px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-band-image-title::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.layout-band-image-title .title {
    position: relative;
    z-index: 2;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 0;
}

/* Responsive adjustments for image title band */
@media (max-width: 768px) {
    .layout-band-image-title {
        height: 200px;
    }
    
    .layout-band-image-title .title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .layout-band-image-title {
        height: 150px;
    }
    
    .layout-band-image-title .title {
        font-size: 1.5rem;
    }
}

/* ================================================
   CONTAINER VARIATIONS
   ================================================ */

/* Primary Container - Standard neumorphic container */
.layout-container-primary {
    background: var(--color-bg-primary);
    border-radius: 1.5rem;
    padding: 2rem;
    margin: 1rem 0;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.3),
        -8px -8px 16px rgba(255, 255, 255, 0.1);
}

/* Small Raised Card - Subtle raised neumorphic styling */
.layout-container-small-raised,
.layout-container-secondary {
    background: var(--color-bg-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.2),
        -4px -4px 8px rgba(255, 255, 255, 0.08);
}

/* Small Dipped Card - Subtle inset neumorphic styling */
.layout-container-small-dipped {
    background: var(--color-bg-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.2),
        inset -4px -4px 8px rgba(255, 255, 255, 0.08);
}

/* Background Card - Transparent background for spacing */
.layout-container-background {
    background: transparent;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1rem 0;
}

/* ================================================
   IMAGE CARD COMPONENT
   ================================================ */

/* Image Card - Floating image with label in black bar at bottom, based on guild-hybrid-card styling */
.layout-card-image {
    background: var(--color-bg-primary);
    border-radius: 1.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    
    /* Neomorphic raised effect */
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.3),
        -16px -16px 32px rgba(255, 255, 255, 0.1);
}

.layout-card-image:hover {
    /* Orange glow + subtle lift effect */
    box-shadow: 
        20px 20px 40px rgba(0, 0, 0, 0.3),
        -20px -20px 40px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(251, 146, 60, 0.4),
        0 0 60px rgba(251, 146, 60, 0.2);
    transform: translateY(-4px);
}

.layout-card-image__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.layout-card-image:hover .layout-card-image__img {
    transform: scale(1.03);
}

.layout-card-image__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: var(--color-text-primary);
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-card-image:hover .layout-card-image__label {
    background: rgba(251, 146, 60, 0.9);
    color: var(--color-bg-primary);
}

/* Image Card Grey Variant - Same structure but with grey hover effects */
.layout-card-image-grey {
    background: var(--color-bg-primary);
    border-radius: 1.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    
    /* Neomorphic raised effect */
    box-shadow: 
        16px 16px 32px rgba(0, 0, 0, 0.3),
        -16px -16px 32px rgba(255, 255, 255, 0.1);
}

.layout-card-image-grey:hover {
    /* Grey glow + subtle lift effect */
    box-shadow: 
        20px 20px 40px rgba(0, 0, 0, 0.3),
        -20px -20px 40px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(229, 231, 235, 0.4),
        0 0 60px rgba(229, 231, 235, 0.2);
    transform: translateY(-4px);
}

.layout-card-image-grey .layout-card-image__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.layout-card-image-grey:hover .layout-card-image__img {
    transform: scale(1.03);
}

.layout-card-image-grey .layout-card-image__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: var(--color-text-primary);
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-card-image-grey:hover .layout-card-image__label {
    background: rgba(229, 231, 235, 0.9);
    color: var(--color-bg-primary);
}

/* ================================================
   IMAGE CARD FLIP COMPONENT
   ================================================ */

/* Image Card Flip - 1:1 ratio card that flips to reveal text on hover */
.layout-card-image-flip {
    width: 200px;
    height: 200px;
    perspective: 1000px;
    cursor: pointer;
    margin: 1rem;
}

.layout-card-image-flip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 1rem;
}

.layout-card-image-flip:hover .layout-card-image-flip__inner {
    transform: rotateY(180deg);
}

.layout-card-image-flip__front,
.layout-card-image-flip__back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 1rem;
    background: var(--color-bg-primary);
    
    /* Neomorphic raised effect */
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.3),
        -8px -8px 16px rgba(255, 255, 255, 0.1);
}

.layout-card-image-flip__front {
    overflow: hidden;
}

.layout-card-image-flip__back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    text-align: center;
}

.layout-card-image-flip__img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
}

.layout-card-image-flip__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: var(--color-text-primary);
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    border-radius: 0 0 1rem 1rem;
    backdrop-filter: blur(10px);
}

.layout-card-image-flip__back-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.layout-card-image-flip__back-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    overflow-y: auto;
    max-height: 120px;
}

/* Orange variant for flip cards */
.layout-card-image-flip--orange .layout-card-image-flip__front,
.layout-card-image-flip--orange .layout-card-image-flip__back {
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.3),
        -8px -8px 16px rgba(255, 255, 255, 0.1);
}

.layout-card-image-flip--orange:hover .layout-card-image-flip__front,
.layout-card-image-flip--orange:hover .layout-card-image-flip__back {
    box-shadow: 
        12px 12px 24px rgba(0, 0, 0, 0.3),
        -12px -12px 24px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(251, 146, 60, 0.3);
}

.layout-card-image-flip--orange .layout-card-image-flip__label {
    background: rgba(251, 146, 60, 0.9);
    color: var(--color-bg-primary);
}

.layout-card-image-flip--orange .layout-card-image-flip__back-title {
    color: var(--color-accent-orange);
}

/* Grey variant for flip cards */
.layout-card-image-flip--grey .layout-card-image-flip__front,
.layout-card-image-flip--grey .layout-card-image-flip__back {
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.3),
        -8px -8px 16px rgba(255, 255, 255, 0.1);
}

.layout-card-image-flip--grey:hover .layout-card-image-flip__front,
.layout-card-image-flip--grey:hover .layout-card-image-flip__back {
    box-shadow: 
        12px 12px 24px rgba(0, 0, 0, 0.3),
        -12px -12px 24px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(229, 231, 235, 0.3);
}

.layout-card-image-flip--grey .layout-card-image-flip__label {
    background: rgba(229, 231, 235, 0.9);
    color: var(--color-bg-primary);
}

.layout-card-image-flip--grey .layout-card-image-flip__back-title {
    color: var(--color-text-primary);
}

/* Flip Card Grid - For displaying multiple flip cards */
.layout-grid-flip-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Image Card Grid - For displaying multiple image cards */
.layout-grid-image-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

/* Responsive adjustments for image cards */
@media (max-width: 768px) {
    .layout-card-image__img {
        height: 150px;
    }
    
    .layout-grid-image-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .layout-grid-image-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ================================================
   INTERACTIVE ENHANCEMENTS
   ================================================ */

/* Orange Glow Hover Effect (for special interactive cards) */
.layout-card-glow:hover {
    box-shadow: 
        0 0 20px rgba(251, 146, 60, 0.4),
        0 0 40px rgba(251, 146, 60, 0.2),
        0 0 60px rgba(251, 146, 60, 0.1);
    transform: translateY(-2px);
}

/* Active State with Orange Accent */
.layout-card-active {
    color: var(--color-accent-orange);
    border: 1px solid var(--color-accent-orange);
}

.layout-card-active.layout-card-dipped-action,
.layout-card-active.layout-card-dipped-static {
    box-shadow: 
        inset 6px 6px 12px rgba(0, 0, 0, 0.4),
        inset -6px -6px 12px rgba(255, 255, 255, 0.1),
        0 0 15px rgba(251, 146, 60, 0.3);
}

.layout-card-active.layout-card-raised-action,
.layout-card-active.layout-card-raised-static {
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.3),
        -8px -8px 16px rgba(255, 255, 255, 0.1),
        0 0 15px rgba(251, 146, 60, 0.3);
}

/* ================================================
   GRID LAYOUTS
   ================================================ */

/* Card Grid - Responsive grid for cards */
.layout-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

/* Compact Card Grid */
.layout-grid-cards-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.layout-grid-cards-compact > * {
    max-width: 300px;
}

/* Wide Card Grid */
.layout-grid-cards-wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2.5rem;
    margin: 2rem 0;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {
    .layout-card-dipped-action,
    .layout-card-dipped-static,
    .layout-card-raised-action,
    .layout-card-raised-static {
        padding: 1rem;
        border-radius: 0.75rem;
    }
    
    .layout-container-primary,
    .layout-container-secondary {
        padding: 1rem;
        margin: 0.5rem 0;
        border-radius: 0.75rem;
    }
    
    .layout-band-raised .container,
    .layout-band-background .container {
        padding: 0 1rem;
    }
    
    .layout-grid-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .layout-grid-cards-compact {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .layout-card-dipped-action,
    .layout-card-dipped-static,
    .layout-card-raised-action,
    .layout-card-raised-static {
        padding: 0.75rem;
        border-radius: 0.5rem;
    }
    
    .layout-container-primary,
    .layout-container-secondary {
        padding: 0.75rem;
        border-radius: 0.5rem;
    }
    
    .layout-band-raised {
        padding: 1.5rem 0;
    }
    
    .layout-band-background {
        padding: 2rem 0;
    }
    
    .layout-grid-cards-compact {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   UTILITY CLASSES
   ================================================ */

/* Spacing utilities for layout components */
.layout-spacing-none { margin: 0; }
.layout-spacing-sm { margin: 0.5rem 0; }
.layout-spacing-md { margin: 1rem 0; }
.layout-spacing-lg { margin: 2rem 0; }
.layout-spacing-xl { margin: 3rem 0; }

/* Padding utilities */
.layout-padding-none { padding: 0; }
.layout-padding-sm { padding: 0.5rem; }
.layout-padding-md { padding: 1rem; }
.layout-padding-lg { padding: 1.5rem; }
.layout-padding-xl { padding: 2rem; }

/* Border radius utilities */
.layout-rounded-none { border-radius: 0; }
.layout-rounded-sm { border-radius: 0.25rem; }
.layout-rounded-md { border-radius: 0.5rem; }
.layout-rounded-lg { border-radius: 1rem; }
.layout-rounded-xl { border-radius: 1.5rem; }

/* Full-width breakout utility */
.layout-full-width-breakout {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    position: relative;
}

/* Demo styling for background band visualization */
.layout-band-background.layout-full-width-breakout {
    background: var(--color-bg-primary);
    border: none;
}