/*
 * Method Detail Page Styles - Brutalist Design System
 * Following Figma design with brutalist aesthetic and established patterns
 */

/* ===== COLOR SYSTEM ===== */
:root {
    --color-primary-blue: #2b28c2;
    --color-primary-red: #fb4f46;
    --color-background-light: #f5f5ff;
    --color-background-white: #ffffff;
    --color-text-black: #000000;
    --color-text-gray: #606060;
    --color-border-black: #000000;
    --color-positive: #00ba06;
    --color-negative: #ff8800;
    --gutter-size: 32px;
}

/* ===== MAIN LAYOUT STRUCTURE ===== */

/* Method header module */
.method-header-module {
    background: var(--color-background-light);
    border: 1.5px solid var(--color-primary-blue);
    position: relative;
    min-height: auto !important;
    height: auto !important;
    padding: 32px;
    margin-top: 0; /* Remove top margin so it aligns with sidebar */
    overflow: visible; /* Ensure back button is not clipped */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Remove padding from module-content inside method header */
.method-header-module .module-content {
    padding: 0;
}

/* Figma-style back button (red with drop shadow, half over edge) */
.method-back-button-figma {
    position: static !important;
    top: unset !important;
    left: unset !important;
    margin-right: 1rem;
    z-index: 20; /* Higher z-index to ensure it's on top */
    background: var(--color-primary-red);
    color: var(--color-background-white);
    border: none;
    padding: 8px 12px;
    box-shadow: 4px 4px 0px 0px var(--color-border-black);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    transition: all 0.2s ease-in-out;
}

.method-back-button-figma:hover {
    background: #e63946;
    color: var(--color-background-white);
    transform: scale(1.02);
}

.method-back-button-figma .material-symbols-outlined {
    font-size: 24px;
    /* Removed transform: rotate(180deg) to point left correctly */
}

.back-text {
    white-space: nowrap;
}

/* Title section */
.method-title-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
}

.method-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    color: var(--color-primary-blue);
    margin: 0;
}

/* Categories (Blue tags) */
.method-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-tag {
    background: var(--color-primary-blue);
    color: var(--color-background-white);
    padding: 4px 8px;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

/* Method card (Image + Content side by side) */
.method-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    border: none;
    padding: 0;
    flex-wrap: nowrap; /* Ensure it doesn't wrap */
    min-width: 0; /* Allow flex items to shrink */
}

/* Remove hover effects and drop shadow for method-card in method-header-module */
.method-header-module .method-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.method-header-module .method-card {
    transition: none !important;
    box-shadow: none !important;
}

.method-image-container {
    flex-shrink: 0;
    width: 214px;
    height: 214px;
}

.method-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.method-image-container.no-image {
    display: none;
}

/* Content column (metadata + description + source) */
.method-content-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from space-between to flex-start */
    min-height: 214px; /* Changed from fixed height to min-height */
    gap: 16px;
    min-width: 0; /* Allow shrinking */
    overflow: hidden; /* Prevent text overflow from breaking layout */
}

.method-metadata {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metadata-item {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-black);
}

.metadata-label {
    font-weight: 400;
}

.metadata-value {
    font-weight: 700;
}

.method-description {
    flex: 1;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    color: var(--color-primary-blue);
    font-weight: 400;
    line-height: 1.4; /* Set explicit line height for better control */
    word-wrap: break-word; /* Ensure long words don't break layout */
    overflow-wrap: break-word;
    overflow: hidden; /* Hide overflow */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 4 lines as requested */
    -webkit-box-orient: vertical;
    line-clamp: 4; /* Standard property for compatibility */
    max-height: calc(1.4em * 4); /* Fallback: 4 lines × line-height */
}

.method-description p {
    margin: 0;
}

.method-source {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: var(--color-text-black);
    font-weight: 400;
    line-height: normal;
}

/* ===== TWO COLUMN LAYOUT ===== */

.method-detail-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gutter-size);
    align-items: start;
}

/* ===== MAIN CONTENT MODULES ===== */

.method-main-content {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-size);
}

/* Description module */
.description-module {
    background: var(--color-background-light);
    border: 1.5px solid var(--color-primary-blue);
    min-height: auto !important;
    height: auto !important;
}

.method-description {
    margin: 0;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    color: var(--color-primary-blue);
    font-weight: 400;
    line-height: 1.4; /* Set explicit line height for better control */
    word-wrap: break-word; /* Ensure long words don't break layout */
    overflow-wrap: break-word;
    overflow: hidden; /* Hide overflow */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 4 lines as requested */
    -webkit-box-orient: vertical;
    line-clamp: 4; /* Standard property for compatibility */
    max-height: calc(1.4em * 4); /* Fallback: 4 lines × line-height */
}

.method-description p {
    margin: 0;
}

.description-source {
    margin-top: 8px;
    font-size: 14px;
    color: var(--color-text-black);
    font-weight: 400;
}

/* Partnerships module */
.partnerships-module {
    background: var(--color-background-light);
    border: 1.5px solid var(--color-primary-blue);
    min-height: auto !important;
    height: auto !important;
}

.section-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: var(--color-primary-blue);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-icon {
    font-size: 20px;
}

.partnership-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.partnership-card {
    flex: 1;
    min-width: 200px;
    background: var(--color-background-white);
    border: 1.5px solid var(--color-primary-blue);
    padding: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.partnership-image {
    width: 100%;
    height: 59px;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

.partnership-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.partnership-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-primary-red);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.partnership-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1;
}

.stat--positive {
    color: var(--color-positive);
}

.stat--negative {
    color: var(--color-negative);
}

.stat--neutral {
    color: var(--color-text-black);
}

.stat .material-symbols-outlined {
    font-size: 14px;
}

.partnership-link {
    position: absolute;
    inset: 0;
    text-decoration: none;
}

/* Cases module */
.cases-module {
    background: var(--color-background-light);
    border: 1.5px solid var(--color-primary-blue);
    min-height: auto !important;
    height: auto !important;
}

.section-subtitle {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    color: var(--color-primary-blue);
    font-weight: 400;
    line-height: normal;
    margin: 0 0 24px 0;
    max-width: 576px;
}

.cases-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 8px;
}

.case-tile {
    background: var(--color-background-white);
    border: 1.5px solid var(--color-primary-blue);
    padding: 16px;
    position: relative;
    min-width: 200px;
}

.case-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 12px;
}

.case-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: var(--color-primary-red);
    margin: 0;
    flex: 1;
}

.case-score {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-black);
    flex-shrink: 0;
}

.case-summary {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: var(--color-text-black);
    font-weight: 400;
    line-height: normal;
    margin: 0;
    white-space: normal;
}

.case-link {
    position: absolute;
    inset: 0;
    text-decoration: none;
}

/* Only underline case titles within external case links */
.case-link[target="_blank"] .case-title {
    text-decoration: underline;
    color: var(--color-primary);
}

.show-more-container {
    text-align: left;
    margin-top: 16px;
}

.empty-state {
    text-align: center;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    color: var(--color-text-gray);
    font-weight: 400;
    padding: 32px;
    background: var(--color-background-light);
    border: 1.5px solid var(--color-primary-blue);
}

/* ===== PROFILE SIDEBAR ===== */

.method-profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-size);
}

.profile-module {
    background: var(--color-background-light);
    border: 1.5px solid var(--color-primary-blue);
    min-height: auto !important;
    height: auto !important;
}

.profile-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: var(--color-primary-blue);
    margin: 0 0 16px 0;
}

/* ===== EFFECTIVENESS ACCORDION ===== */

/* Starfish custom accordion - following methods.html pattern */
.starfish-accordion-item {
    background: var(--color-background-white);
    border: 1.5px solid var(--color-border-black);
    box-shadow: 4px 4px 0px 0px var(--color-border-black);
    border-radius: 0;
    margin-bottom: 8px;
    width: 100%;
}

.starfish-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.accordion-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text-black);
    flex: 1;
    text-align: left;
}

.accordion-expand-icon {
    width: 20px;
    height: 19px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19"><path d="M5 7l5 5 5-5" stroke="%23000" stroke-width="2" fill="none"/></svg>') no-repeat center;
    background-size: contain;
    transition: transform 0.2s ease;
}

.starfish-accordion-item.expanded .accordion-expand-icon {
    transform: rotate(180deg);
}

.starfish-accordion-content {
    border-top: 1.5px solid var(--color-border-black);
    padding: 12px;
}

/* Legacy Bootstrap accordion styles - keeping for compatibility */
.effectiveness-accordion .accordion-item {
    background: var(--color-background-light);
    border: 1.5px solid var(--color-border-black);
    box-shadow: 4px 4px 0px 0px var(--color-border-black);
    border-radius: 0;
    margin-bottom: 8px;
}

.effectiveness-accordion .accordion-button {
    background: var(--color-background-light);
    border: none;
    border-radius: 0;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text-black);
    padding: 12px;
    box-shadow: none;
}

.effectiveness-accordion .accordion-button:not(.collapsed) {
    background: var(--color-background-light);
    color: var(--color-text-black);
    box-shadow: none;
}

.effectiveness-accordion .accordion-button:focus {
    box-shadow: none;
    border: none;
}

.effectiveness-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.effectiveness-accordion .accordion-body {
    border-top: 1.5px solid var(--color-border-black);
    padding: 12px;
}

/* Progress bars */
.progress-item {
    margin-bottom: 12px;
}

.progress-item:last-child {
    margin-bottom: 0;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: var(--color-text-black);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 2px;
}

.progress-value {
    font-weight: 400;
}

.progress-bar-container {
    background: var(--color-background-white);
    border: 2px solid var(--color-border-black);
    height: 12px;
    padding: 2px;
}

.progress-bar-fill {
    background: var(--color-primary-blue);
    height: 8px;
    transition: width 0.3s ease;
}

/* ===== RISK PROFILE ===== */

.risk-section {
    margin-bottom: 32px;
}

.risk-section:last-child {
    margin-bottom: 0;
}

.risk-section-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: var(--color-primary-blue);
    margin: 0 0 8px 0;
}

.risk-section-subtitle {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: var(--color-primary-blue);
    font-weight: 400;
    line-height: 1;
    margin: 0 0 16px 0;
}

.risk-accordion .accordion-item {
    background: var(--color-background-light);
    border: 1.5px solid var(--color-border-black);
    box-shadow: 4px 4px 0px 0px var(--color-border-black);
    border-radius: 0;
    margin-bottom: 8px;
}

/* Risk accordion uses same styles as effectiveness accordion */

.risk-accordion-btn {
    background: var(--color-background-light) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Helvetica Neue', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--color-text-black) !important;
    padding: 12px !important;
    box-shadow: none !important;
}

.risk-accordion-btn:not(.collapsed) {
    background: var(--color-background-light) !important;
    color: var(--color-text-black) !important;
    box-shadow: none !important;
}

.risk-accordion-btn:focus {
    box-shadow: none !important;
    border: none !important;
}

.risk-accordion-btn::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.risk-accordion .accordion-body {
    border-top: 1.5px solid var(--color-border-black);
    padding: 12px;
}

/* Risk grid */
.risk-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.risk-item {
    flex: 1;
    min-width: 100px;
    background: var(--color-background-light);
    border: 1.5px solid var(--color-primary-blue);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.risk-icon {
    font-size: 20px;
    color: var(--color-text-black);
}

.risk-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.risk-name {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: var(--color-text-black);
    font-weight: 400;
    line-height: 1;
}

.risk-level {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: var(--color-text-black);
    font-weight: 700;
    line-height: 1;
}

.risk-level .material-symbols-outlined {
    font-size: 12px;
}

/* Risk level color coding */
.risk-level-very-high .risk-level {
    color: #dc3545;
}

.risk-level-high .risk-level {
    color: #fd7e14;
}

.risk-level-average .risk-level {
    color: var(--color-text-black);
}

.risk-level-low .risk-level {
    color: #28a745;
}

.risk-level-very-low .risk-level {
    color: #20c997;
}

/* ===== ERROR MODULE ===== */

.error-module {
    background: var(--color-background-light);
    border: 1.5px solid var(--color-primary-blue);
    min-height: auto !important;
    height: auto !important;
}

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

/* Desktop only - Keep side-by-side content */
@media (min-width: 1025px) {
    /* Ensure method card content stays side by side */
    .method-card {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 24px;
    }
    
    .method-content-column {
        min-width: 250px; /* Ensure minimum width for content */
        height: auto;
    }
}

/* Tablet and Mobile - Stack content below image */
@media (max-width: 1024px) {
    .method-card {
        flex-direction: column; /* Stack on tablet and mobile */
        gap: 16px;
    }
    
    .method-image-container {
        width: 100%; /* Full width */
        height: 214px; /* Fixed height to maintain aspect */
        flex-shrink: 0;
    }
    
    .method-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Crop/clip to maintain aspect ratio */
    }
    
    .method-content-column {
        height: auto;
        gap: 12px;
        min-width: auto;
    }
}

/* Tablet only - Show only 2 partnership cards */
@media (min-width: 768px) and (max-width: 1024px) {
    .partnership-grid .partnership-card:nth-child(3) {
        display: none;
    }
}

/* Mobile specific adjustments */
@media (max-width: 767px) {
    :root {
        --gutter-size: 16px;
    }
    
    /* Switch to single column on mobile */
    .method-detail-container {
        grid-template-columns: 1fr;
        gap: var(--gutter-size);
    }
    
    .partnership-grid {
        grid-template-columns: 1fr;
    }
    
    .method-back-button-figma {
        top: -8px; /* Adjust for mobile to sit on border */
        left: 16px;
        padding: 6px 10px;
        font-size: 18px;
    }
    
    .method-back-button-figma .material-symbols-outlined {
        font-size: 20px;
    }
    
    .method-title {
        font-size: 24px;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .profile-title {
        font-size: 20px;
    }
    
    .risk-section-title {
        font-size: 18px;
    }
    
    .risk-grid {
        flex-direction: column;
        gap: 8px;
    }
    
    .risk-item {
        min-width: auto;
    }
}

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

.d-none {
    display: none !important;
}

.case-hidden {
    /* Hidden by default, shown via JavaScript */
    opacity: 1;
}

/* ===== PRINT STYLES ===== */

@media print {
    .method-back-button,
    .show-more-container {
        display: none;
    }
    
    .case-hidden {
        display: block !important;
    }
    
    .accordion-collapse {
        display: block !important;
    }
}