/**
 * Stat Block Horizontal Layout
 * Desktop: 3-column horizontal layout (left/mid/right)
 * Mobile: Allow stacking vertically for better mobile experience
 * This file should be loaded last to override any conflicting styles
 */

/* Base: Ensure grid display, 3 columns on desktop, and remove sticky positioning */
section.stat-block,
#app-container section.stat-block,
.character-info section.stat-block,
.stat-block {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Default to 3 columns for desktop */
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    flex-direction: unset !important; /* Override any flex direction */

/* Ensure stat items don't wrap to new rows on desktop */
section.stat-block > .stat-item,
.stat-block > .stat-item,
.stat-item {
    min-width: 0 !important; /* Allow flex shrinking if needed */
    max-width: 100% !important;
    display: block !important; /* Ensure items are block-level */

/* Desktop: 3 columns horizontal layout */
@media (min-width: 768px) {
    section.stat-block,
    #app-container section.stat-block,
    .character-info section.stat-block,
    .stat-block {
        grid-template-columns: repeat(3, 1fr) !important;
        display: grid !important;
        flex-direction: unset !important;

/* Tablet portrait: Keep 3 columns but allow smaller gap */
@media (min-width: 600px) and (max-width: 768px) {
    section.stat-block,
    .stat-block {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--spacing-xs) !important;
        display: grid !important;

/* Mobile: Stack vertically */
@media (max-width: 600px) {
    section.stat-block,
    .stat-block {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-sm) !important;
        display: grid !important;

/* Small mobile: Stack with smaller gap */
@media (max-width: 480px) {
    section.stat-block,
    .stat-block {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-xs) !important;
        display: grid !important;

}}}}}}}}}}