/**
 * REFINED BRUTALISM MODE
 * Use on: Case study body content, about page, long-form reading
 * 
 * Characteristics:
 * - 1px borders (softer)
 * - Soft blur shadows
 * - Mixed case headers
 * - No visible grid
 * - 4px border radius
 * - Better line-height for reading
 */

/* ========================================
   CONTENT CONTAINER
   (Narrower for reading)
======================================== */

.content {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ========================================
   TYPOGRAPHY
======================================== */

.content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: var(--space-20) 0 var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-border-strong);
    /* NOT uppercase - easier to read */
}

.content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: var(--space-12) 0 var(--space-5);
}

.content p {
    font-size: 1.0625rem; /* 17px */
    line-height: 1.75;
    margin-bottom: var(--space-6);
    max-width: 65ch;
}

.content ul,
.content ol {
    margin: var(--space-8) 0;
    padding-left: var(--space-6);
}

.content li {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: var(--space-4);
}

/* ========================================
   CALLOUT (Refined)
======================================== */

.callout {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
    margin: var(--space-12) 0;
}

.callout::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-accent);
    border-radius: 4px 0 0 4px;
}

.callout__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.callout__text {
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: 0;
    line-height: 1.65;
    font-weight: 500;
}

/* Principle variant - slightly more emphasis */
.callout--principle {
    margin: var(--space-8) 0;
}

.callout--principle .callout__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

/* ========================================
   NUMBERED PRINCIPLES
   Structural framework, not asides
======================================== */

.principles {
    margin: var(--space-12) 0 var(--space-16);
}

.principle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
    align-items: start;
}

.principle:first-child {
    padding-top: 0;
}

.principle:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.principle__number {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.2;
    padding-top: 0.1em;
}

.principle__content {
    min-width: 0;
}

.principle__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.principle__text {
    font-size: var(--text-base);
    color: var(--color-text-light);
    line-height: 1.65;
    margin: 0;
    max-width: 60ch;
}

/* ========================================
   QUOTE (Refined - Editorial Style)
======================================== */

.quote {
    position: relative;
    background: transparent;
    padding: var(--space-8) 0 var(--space-8) var(--space-8);
    margin: var(--space-16) 0;
    border-left: 2px solid var(--color-text);
}

.quote__text {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: 1.4;
    margin-bottom: var(--space-4);
    font-weight: 500;
    font-style: italic;
    color: var(--color-text);
}

.quote__author {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    font-weight: 500;
}

/* ========================================
   TWO COLUMN COMPARISON
======================================== */

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin: var(--space-12) 0;
}

/* ========================================
   THREE COLUMN COMPARISON
======================================== */

.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-12) 0;
}

.col-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: var(--space-6);
}

.col-box__title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
    font-weight: 600;
}

.col-box__text {
    font-size: var(--text-sm);
    margin-bottom: 0;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* ========================================
   FLEXIBLE GRID (Image + Text, Variable Widths)
======================================== */

.grid {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-12) 0;
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    width: calc(100% + (2 * var(--container-padding)));
    padding: 0 var(--container-padding);
    align-items: start;
}

/* Default: equal columns */
.grid--equal {
    grid-template-columns: 1fr 1fr;
}

/* Preset: narrow-wide (33/67) */
.grid--narrow-wide {
    grid-template-columns: 1fr 2fr;
}

/* Preset: wide-narrow (67/33) */
.grid--wide-narrow {
    grid-template-columns: 2fr 1fr;
}

/* Preset: aside (40/60) - good for tall images + text */
.grid--aside {
    grid-template-columns: 2fr 3fr;
}

/* Preset: aside-reverse (60/40) */
.grid--aside-reverse {
    grid-template-columns: 3fr 2fr;
}

/* Custom percentages via inline style */
.grid[style*="--col-1"] {
    grid-template-columns: var(--col-1, 1fr) var(--col-2, 1fr);
}

.grid__col {
    min-width: 0; /* Prevent overflow */
}

.grid__col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.grid__col p {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: var(--space-6);
    max-width: 65ch;
}

.grid__col p:last-child {
    margin-bottom: 0;
}

/* Caption for grid images */
.grid__caption {
    grid-column: 1 / -1;
    font-size: var(--text-sm);
    color: var(--color-text-light);
    font-style: italic;
    margin-top: calc(-1 * var(--space-4));
}

/* Labels for grid columns */
.grid__labels {
    display: contents;
}

.grid__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    .grid__col {
        /* On mobile, image columns come first */
    }
    
    /* Keep image-only grids side by side on mobile with scroll */
    .grid--images-only {
        grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
}

/* ========================================
   FIGURE (Image + Caption)
======================================== */

.figure {
    margin: var(--space-12) 0;
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    width: calc(100% + (2 * var(--container-padding)));
}

.figure__image {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: var(--space-4);
}

.figure__caption {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    font-style: italic;
    padding: 0 var(--container-padding);
}

/* ========================================
   FIGURE PAIR (Side-by-Side Images)
======================================== */

.figure-pair {
    margin: var(--space-12) 0;
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    width: calc(100% + (2 * var(--container-padding)));
}

.figure-pair__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.figure-pair__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    scroll-snap-align: start;
}

.figure-pair__caption {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    font-style: italic;
    padding: 0 var(--container-padding);
}

/* Labels for before/after or left/right context */
.figure-pair__labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding: 0 var(--container-padding);
}

.figure-pair__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

/* ========================================
   FIGURE TRIO (Three Images Side-by-Side)
======================================== */

.figure-trio {
    margin: var(--space-12) 0;
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    width: calc(100% + (2 * var(--container-padding)));
}

.figure-trio__images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.figure-trio__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    scroll-snap-align: start;
}

.figure-trio__caption {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    font-style: italic;
    padding: 0 var(--container-padding);
}

.figure-trio__labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding: 0 var(--container-padding);
}

.figure-trio__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

/* Force true 3-column layout when needed */
.figure-trio--3col .figure-trio__images {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
}

.figure-trio--3col .figure-trio__labels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
}

/* ========================================
   REFLECTION SECTION
======================================== */

.reflection {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: var(--space-20) var(--container-padding) var(--space-24); /* More top padding */
}

.reflection h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-border-strong);
}

.reflection p {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: var(--space-6);
    max-width: 65ch;
}

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

@media (max-width: 768px) {
    .content h2 {
        font-size: var(--text-2xl);
    }
    
    .two-col {
        grid-template-columns: 1fr;
    }
    
    .three-col {
        grid-template-columns: 1fr;
    }
    
    .figure {
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
        width: calc(100% + (2 * var(--container-padding)));
    }
    
    .figure-pair__images {
        /* Keep side-by-side; allow horizontal scroll if needed */
        grid-template-columns: repeat(2, minmax(160px, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: var(--space-2);
    }
    
    .figure-pair__labels {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    
    .figure-trio__images {
        /* Keep side-by-side; allow horizontal scroll if needed */
        grid-template-columns: repeat(3, minmax(160px, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: var(--space-2);
    }
    
    .figure-trio__labels {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    /* Inventory states: keep 3 columns (no stacking) */
    .figure-trio--3col .figure-trio__images {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-x: visible;
        scroll-snap-type: none;
    }
    
    .figure-trio--3col .figure-trio__labels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-x: visible;
        scroll-snap-type: none;
    }
}