/*==============================================================================
Clunky Design System (CDS)

File: framework.css
Version: 0.1.0
Sprint: 1

Purpose:
Styles reusable educational frameworks, SVG diagrams, models, process flows,
and proprietary Clunky concepts.

==============================================================================*/


/*==============================================================================
SECTION 1
Framework Section
==============================================================================*/

.framework-section{

padding-block:5rem;

}

.framework-section + .framework-section{

border-top:1px solid var(--color-border);

}


/*==============================================================================
SECTION 2
Framework Container
==============================================================================*/

.framework{

margin:4rem auto;

background:#fff;

border:1px solid var(--color-border);

border-radius:24px;

overflow:hidden;

box-shadow:0 12px 40px rgba(15,23,42,.04);

}

.framework-header{

padding:2rem 2.5rem 1rem;

}

.framework-title{

margin:0;

}

.framework-subtitle{

margin-top:.75rem;

max-width:70ch;

color:var(--color-text-light);

}

.framework-body{

padding:2rem 2.5rem 3rem;

}

.framework-footer{

padding:1.5rem 2.5rem;

background:#f8fafc;

border-top:1px solid var(--color-border);

}


/*==============================================================================
SECTION 3
SVG Wrapper
==============================================================================*/

.framework-svg{

display:flex;

justify-content:center;

align-items:center;

padding:2rem;

margin:2rem 0;

overflow:auto;

}

.framework-svg svg,

.framework-svg img{

width:100%;

max-width:900px;

height:auto;

display:block;

}


/*==============================================================================
SECTION 3A
Animated Framework Figures
Sprint 1

These are intentionally wrapper-level animations.

The SVG files remain external assets so they can be reused independently.
Future versions can add SVG-internal animation when the assets are converted
to inline SVG components.
==============================================================================*/

.framework-figure--animated {

    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity 700ms ease,
        transform 700ms ease;

}


.framework-figure--animated.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/*
   Keep the animation accessible.
*/

@media (prefers-reduced-motion: reduce) {

    .framework-figure--animated {

        opacity: 1;

        transform: none;

        transition: none;

    }

}


/*==============================================================================
SECTION 4
Framework Explanation
==============================================================================*/

.framework-explanation{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:2rem;

margin-top:2rem;

}

.framework-point{

padding:1.5rem;

background:#f8fafc;

border:1px solid var(--color-border);

border-radius:18px;

}

.framework-point h3{

margin-bottom:.75rem;

}

.framework-point p:last-child{

margin-bottom:0;

}


/*==============================================================================
SECTION 5
Framework Legend
==============================================================================*/

.framework-legend{

display:flex;

flex-wrap:wrap;

gap:1rem;

margin-top:2rem;

}

.framework-legend-item{

display:flex;

align-items:center;

gap:.75rem;

padding:.65rem 1rem;

background:#fff;

border:1px solid var(--color-border);

border-radius:999px;

font-size:.95rem;

}

.legend-color{

width:14px;

height:14px;

border-radius:50%;

flex-shrink:0;

}


/*==============================================================================
SECTION 6
Framework Notes
==============================================================================*/

.framework-note{

margin-top:2rem;

padding:1.5rem;

border-left:5px solid var(--color-primary);

background:#eef6ff;

border-radius:0 16px 16px 0;

}

.framework-note strong{

display:block;

margin-bottom:.5rem;

}


/*==============================================================================
SECTION 7
Step Framework
==============================================================================*/

.framework-steps{

display:grid;

gap:1.5rem;

margin-top:3rem;

}

.framework-step{

display:flex;

gap:1.5rem;

align-items:flex-start;

}

.framework-step-number{

width:52px;

height:52px;

border-radius:50%;

background:var(--color-primary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

flex-shrink:0;

}

.framework-step-content{

flex:1;

}


/*==============================================================================
SECTION 8
Process Flow
==============================================================================*/

.process-flow{

display:flex;

flex-wrap:wrap;

justify-content:center;

align-items:center;

gap:1.5rem;

margin:3rem 0;

}

.process-node{

min-width:180px;

padding:1.5rem;

text-align:center;

background:#fff;

border:1px solid var(--color-border);

border-radius:20px;

transition:.25s;

}

.process-node:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(15,23,42,.08);

}

.process-arrow{

font-size:2rem;

color:var(--color-primary);

}


/*==============================================================================
SECTION 9
Framework Comparison
==============================================================================*/

.framework-comparison{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:2rem;

margin:3rem 0;

}

.framework-panel{

padding:2rem;

border-radius:20px;

border:1px solid var(--color-border);

background:#fff;

}

.framework-panel.good{

border-left:6px solid #22c55e;

}

.framework-panel.bad{

border-left:6px solid #ef4444;

}


/*==============================================================================
SECTION 10
Concept Box
==============================================================================*/

.concept-box{

margin:3rem 0;

padding:2rem;

background:linear-gradient(135deg,#eff6ff,#ffffff);

border:1px solid #dbeafe;

border-radius:24px;

}

.concept-label{

display:inline-block;

padding:.45rem .9rem;

margin-bottom:1rem;

background:var(--color-primary);

color:#fff;

border-radius:999px;

font-size:.8rem;

font-weight:700;

letter-spacing:.04em;

text-transform:uppercase;

}

.concept-box h2,

.concept-box h3{

margin-top:0;

}


/*==============================================================================
SECTION 11
Research Highlight
==============================================================================*/

.research-highlight{

padding:2rem;

margin:3rem 0;

border-radius:22px;

background:#fff7ed;

border:1px solid #fed7aa;

}

.research-highlight h3{

margin-bottom:1rem;

}


/*==============================================================================
SECTION 12
Quote Highlight
==============================================================================*/

.framework-quote{

margin:3rem auto;

padding:2rem;

max-width:900px;

font-size:1.3rem;

font-style:italic;

text-align:center;

border-left:6px solid var(--color-primary);

background:#f8fafc;

border-radius:0 18px 18px 0;

}


/*==============================================================================
SECTION 13
Responsive
==============================================================================*/

@media (max-width:768px){

.framework-header,

.framework-body,

.framework-footer{

padding:1.5rem;

}

.framework-step{

flex-direction:column;

}

.process-flow{

flex-direction:column;

}

.process-arrow{

transform:rotate(90deg);

}

.framework-svg{

padding:1rem;

}

}


/*==============================================================================
END OF FILE

Version:
0.1.0

Future Sections

14 Animated SVG Helpers
15 SVG Labels
16 SVG Tooltips
17 Interactive Frameworks
18 Zoomable Diagrams
19 Assessment Framework Styling
20 Calculator Results Framework

==============================================================================*/
/* Four-stage process diagrams */
.process-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  margin: 2rem 0;
}

.process-node {
  min-width: 0;
  min-height: 7.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
}

.process-node strong {
  display: block;
  margin-bottom: 0.45rem;
}

.process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .process-arrow {
    display: none;
  }
}

@media (max-width: 560px) {
  .process-flow {
    grid-template-columns: 1fr;
  }

  .process-node {
    min-height: auto;
    padding: 1.1rem;
  }
}

.process-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:.75rem; width:100%; margin:2rem 0; }
.process-node { min-width:0; min-height:7.5rem; display:flex; flex-direction:column; justify-content:center; text-align:center; overflow-wrap:anywhere; }
.process-node strong { display:block; margin-bottom:.45rem; }
.process-arrow { display:none; }
@media (max-width:900px) { .process-flow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } }
@media (max-width:560px) { .process-flow { grid-template-columns:1fr; } .process-node { min-height:auto; padding:1.1rem; } }