/* v2.2.3 Design Fixes */

/* Embed Specific Styles */
body.cr-embed-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container */
.cr-results-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 30px 0;
    max-width: 100%;
}

/* Card Item */
.cr-result-item {
    display: flex;
    flex-direction: row;
    background: #fff;
    border-radius: 12px;
    /* Softened radius */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Softer, broader shadow */
    padding: 30px;
    gap: 30px;
    border: 1px solid #eaeaea;
    /* Lighter border */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cr-result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* --- Image Column --- */
.cr-image-col {
    width: 200px;
    flex-shrink: 0;
    position: relative;
}

/* Fix: Remove forced ratio and crop */
.cr-image-col img {
    width: 100%;
    height: auto;
    /* Natural height */
    object-fit: contain;
    /* Show full image */
    border-radius: 6px;
    display: block;
}

/* Override old ratio classes to do nothing/default */
.cr-ratio-3-4 .cr-image-col,
.cr-ratio-original .cr-image-col {
    aspect-ratio: auto;
    height: auto;
}

.cr-ratio-3-4 .cr-image-col img,
.cr-ratio-original .cr-image-col img {
    height: auto;
    width: 100%;
    object-fit: contain;
}

/* --- Info Column --- */
.cr-info-col {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Rank Area */
.cr-rank-area {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    /* Fix: Modern gray underline instead of harsh black */
    border-bottom: 1px solid #e0e0e0 !important;

    /* Force remove other potential borders/backgrounds from theme */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    box-shadow: none !important;

    padding-bottom: 5px;
    /* Reduced padding */
    margin-bottom: 0 !important;
    /* Drastically reduced margin from 15px to 5px to tighten gap with name */
    line-height: 1.4;
    margin-top: 20px;
    /* Added margin-top to lower the rank */
}

/* Force Nuke Pseudo-elements on Rank Area if Theme adds them */
.cr-rank-area::before,
.cr-rank-area::after {
    display: none !important;
    content: none !important;
}

.cr-rank-sep {
    display: inline;
}

.cr-mobile-br {
    display: none;
}

/* Name & Attributes */
.cr-basic-info h3.cr-name {
    margin: 0 0 0 0 !important;
    /* Zero margin bottom to connect with attributes */
    font-size: 1.6em;
    /* Increased size */
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    display: block;
    /* Changed from flex to block */
    /* align-items: baseline; combined with block is invalid */
    /* flex-wrap: wrap; */
    /* gap: 15px; */

    /* Force Remove Theme Borders/Decorations */
    border: none !important;
    background: none !important;
    text-decoration: none !important;
    /* Fix: Ensure no text-indent or padding causes misalignment */
    text-indent: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Force Nuke Pseudo-elements on Name to remove brown line */
.cr-basic-info h3.cr-name::before,
.cr-basic-info h3.cr-name::after {
    display: none !important;
    content: none !important;
}

/* Fix: Increase specificity to ensure font size applies */
.cr-attributes {
    display: block;
    margin-top: 0 !important;
    /* Zero top margin */
    /* If H3 line-height is large, negative margin might be needed: */
    position: relative;
    top: -5px;
    /* Pull it up slightly to visually connect */

    font-size: 0.95rem;
    /* Fix: Use rem to ignore parent h3 scaling */
    /* Increased to match details (0.95em) */
    font-weight: 500;
    color: #666 !important;
    border: none !important;
    margin-left: 0 !important;
    /* Force Left Align */
    padding-left: 0 !important;
    /* Force Left Align */
    text-indent: 0 !important;
    /* Force Left Align */
}

/* Remove extra spaces by setting font-size 0 on container, restoring on children? 
   Or just ensure inline-flex gap handling.
   Actually, PHP cleanup is safer. Here we just ensure alignment.
*/
.cr-attributes .cr-attr-row {
    display: inline;
}

/* Details */
.cr-detail-area {
    margin-top: 5px !important;
    /* Force small top margin */
    font-size: 0.95em;
}

.cr-detail-row {
    margin-bottom: 15px !important;
    font-size: 0.95em;
    font-weight: normal !important;
    color: #333 !important;
    line-height: 1.8;
    white-space: normal !important;
    text-align: left;
    border: none !important;
    padding: 0 !important;
}

/* Label Styling */
.cr-detail-row .cr-label {
    font-weight: 600;
    font-size: 0.9em;
    color: #555;
    display: block;
    margin-bottom: 4px;
    padding-left: 10px;
    border-left: 3px solid #333;
    /* Accent border */
}




/* Auto-Bullet Logic */
.cr-detail-row ul {
    margin: 0;
    padding-left: 1.2em;
    list-style-type: disc;
}

/* --- Mobile Responsiveness --- */
@media screen and (max-width: 768px) {
    .cr-result-item {
        display: block;
        /* Stack main columns? No, we need complex flow */
        padding: 20px;
        position: relative;
        /* Clear fix */
        overflow: hidden;
    }

    /* 
       Layout Goal:
       [ Image ] [ Rank ]
       [ Name ]
       [ Age Nationality ]
       [ Repertoire / Profile ]
    */

    .cr-image-col {
        float: left;
        width: 100px;
        /* Fixed width */
        margin-right: 15px;
        margin-bottom: 0px;
        /* Name comes below */
    }

    /* Info Column wrap */
    .cr-info-col {
        display: block;
    }

    /* Rank Area: Move to right of image */
    .cr-rank-area {
        margin-left: 115px;
        /* Image width + margin */
        margin-top: 0;
        font-size: 0.85em;
        /* Fix: Reduced from 0.95em */

        /* Fix: Restore underline (like PC) */
        border-bottom: 1px solid #e0e0e0 !important;

        margin-bottom: 5px;
        min-height: 30px;
        /* Ensure height alignment */
        line-height: 1.3;
    }

    /* Name: Clear float? No, under rank, right of image? 
       User image shows Name UNDER image/rank block? 
       Actually user image:
       [Image] [Rank]
       [Name] (under Rank?)
       [Age] (under Name?)
       
       Wait, let's look at the uploaded image 1769131904641.jpg logic again.
       Image is Left.
       Rank is Right of Image.
       Name is Below Rank (Right of Image).
       Age/Nat is Below Name (Right of Image).
       
       Wait, "Suzuki Ichiro" is below the Rank box.
       "12 years Japan" is below Name.
       
       Then Repertoire starts BELOW Image (Clear both).
       
       Let's try to flow it naturally.
    */

    .cr-basic-info {
        margin-left: 115px;
        /* Align with Rank */
        clear: none;
    }

    .cr-basic-info h3.cr-name {
        display: block;
        font-size: 1.2em;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .cr-attributes {
        display: block;
        margin-top: 2px;
        font-size: 0.8em;
        /* Smaller as requested */
        line-height: 1.4;
    }

    /* Ensure Age/Nationality do NOT break line between them */
    .cr-attr-row {
        display: inline;
    }

    .cr-attr-sep.cr-no-break {
        display: inline;
        /* Ensure it shows */
    }

    /* Detail Area: Clear both to go under image */
    .cr-detail-area {
        clear: both;
        border-top: none;
        padding-top: 15px;
        font-size: 0.85em;
    }

    .cr-detail-row {
        margin-bottom: 10px;
    }

    /* Rank Break logic */
    .cr-rank-sep {
        display: none;
        /* Hide separator, force break? */
    }

    .cr-mobile-br {
        display: block;
    }
}