/* Figma 2187:5458, 5460, 5470, 5477, 5488, 5497; original artwork 2101:5619.
   Six illustrated cards. GSAP handles entrance/artwork motion; native scroll-snap
   keeps the mobile section compact without intercepting vertical scrolling. */

#principles {
    --principle-lavender: #d6c9ff;
    --principle-violet: #a8a0f9;
    --principle-coral: #ff5b3a;
    --principle-muted: #878492;
    overflow: clip;
    scroll-margin-top: 80px;
}
#principles .container { max-width: 1600px; }
#principles .principles-title {
    margin: 0;
    color: var(--gu-purple-600);
    font-weight: 400;
    font-size: clamp(32px, 4.44vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    text-wrap: balance;
}
#principles .principles-title strong { font-weight: 900; }
#principles .principles-intro {
    margin: 30px auto 0;
    color: var(--principle-muted);
    font-family: var(--font-display);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-wrap: balance;
}
#principles .principles-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 244px));
    justify-content: center;
    gap: 0;
    margin: 72px auto 0;
    padding-block: 26px;
}
#principles .principle-card {
    --card-angle: 0deg;
    --card-drop: 0px;
    --card-ink: var(--gu-eggplant-800);
    position: relative;
    min-width: 0;
    min-height: 380px;
    padding: 0 16px 28px;
    border: 3px solid var(--gu-paper);
    border-radius: 28px;
    background: var(--card-bg);
    color: var(--card-ink);
    transform: translateY(var(--card-drop)) rotate(var(--card-angle));
}
#principles .principle-art {
    position: relative;
    height: var(--art-height, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--card-ink);
}
#principles .principle-art .principle-svg {
    display: block;
    width: 100%;
    max-width: 224px;
    height: 100%;
    overflow: visible;
    transform: rotate(var(--art-angle, 0deg));
}
#principles .principle-guide { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.22; }
#principles .principle-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#principles .principle-fill { fill: currentColor; }
#principles .principle-panel {
    fill: currentColor; fill-opacity: 0.14;
    stroke: currentColor; stroke-width: 1.4; stroke-opacity: 0.55;
    stroke-linejoin: round;
}
#principles .principle-crease {
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-opacity: 0.45; stroke-linecap: round;
}
#principles .principle-card h3 {
    position: relative;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(23px, 1.85vw, 28px);
    line-height: 28.6px;
    letter-spacing: 0;
    margin: 0 0 var(--copy-gap, 16px);
}
#principles .principle-card p {
    font-family: "Red Hat Text", var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 22.5px;
    margin: 0;
    color: inherit;
}
#principles .principle-card--outcomes {
    --card-bg: var(--gu-purple-700); --card-ink: var(--principle-violet);
    --card-angle: -6deg; --card-drop: 18px;
    --art-angle: 3deg;
}
#principles .principle-card--agile {
    --card-bg: var(--principle-lavender); --card-ink: var(--gu-purple-700);
    --card-angle: -3.5deg; --card-drop: 6px;
    --art-angle: -2deg;
}
#principles .principle-card--ethical {
    --card-bg: var(--gu-lime-200);
    --card-angle: -1deg; --card-drop: 0px;
}
#principles .principle-card--transparency {
    --card-bg: var(--gu-aqua-200); --card-angle: 1deg; --card-drop: 0px;
    --art-angle: -3deg;
    --copy-gap: 11px;
}
#principles .principle-card--unconventional {
    --card-bg: var(--gu-pink-200); --card-ink: var(--gu-purple-700);
    --card-angle: 3.5deg; --card-drop: 6px;
    --art-angle: -4deg;
    --copy-gap: 3px;
}
#principles .principle-card--unconventional h3 { font-size: 24px; }

#principles .principle-card--human {
    --card-bg: var(--principle-violet); --card-ink: var(--gu-purple-700);
    --card-angle: 6deg; --card-drop: 18px;
    --art-angle: 4deg;
}
#principles .principle-card--human h3 { font-size: 24px; }
#principles .principles-grid:focus-visible { outline: 2px solid var(--gu-purple-600); outline-offset: 6px; }
#principles .principles-controls { display: none; }
@media (min-width: 860px) and (max-width: 1279px) {
    #principles .principles-grid { grid-template-columns: repeat(3, 244px); gap: 36px 8px; }
    #principles .principle-card:nth-child(3n + 1) { --card-angle: -4deg; --card-drop: 10px; }
    #principles .principle-card:nth-child(3n + 2) { --card-angle: 0deg; --card-drop: 0px; }
    #principles .principle-card:nth-child(3n) { --card-angle: 4deg; --card-drop: 10px; }
}
@media (max-width: 859px) {
    #principles { padding-block: 56px; }
    #principles .principles-title { font-size: clamp(28px, 4.8vw, 38px); text-align: left; }
    #principles .principles-intro { margin-top: 20px; text-align: left; }
    #principles .principles-grid {
        position: relative;
        display: flex;
        justify-content: flex-start;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        overscroll-behavior-x: contain;
        margin: 28px calc(-1 * var(--gutter)) 0;
        padding: 20px var(--gutter) 24px;
        scrollbar-width: thin;
        scrollbar-color: var(--principle-violet) transparent;
    }
    #principles .principle-card {
        flex: 0 0 min(78vw, 280px);
        min-height: 352px;
        padding-inline: 23px;
        --card-angle: 0deg;
        --card-drop: 0px;
        scroll-snap-align: start;
    }
    #principles .principle-card h3 { font-size: 22px; }
    #principles .principle-card--unconventional h3,
    #principles .principle-card--human h3 { font-size: 22px; }
    #principles .principles-controls:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
    #principles .principles-hint { color: var(--gu-purple-600); font-size: 13px; }
    #principles .principles-navigation { display: flex; align-items: center; gap: 12px; }
    #principles .principles-count { color: var(--gu-purple-600); font-size: 14px; font-variant-numeric: tabular-nums; }
    #principles .principles-navigation button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--gu-purple-600); border-radius: 50%; color: var(--gu-purple-600); background: transparent; font: inherit; font-size: 22px; cursor: pointer; }
    #principles .principles-navigation button:disabled { opacity: 0.3; cursor: default; }
    #principles .principles-navigation button:focus-visible { outline: 3px solid var(--principle-violet); outline-offset: 3px; }
}