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

  Clunky Design System (CDS)
  Component: Cards
  File: cards.css
  Version: 1.0.0 (Part A)

  ---------------------------------------------------------------------
  PURPOSE

  Universal card system used throughout Clunky.xyz.

  Includes

  ✓ Base card
  ✓ Card grids
  ✓ Resource cards
  ✓ Article cards
  ✓ Feature cards
  ✓ Icon cards
  ✓ Hover animations
  ✓ Responsive layout

  ---------------------------------------------------------------------

  Part B begins after SECTION 09

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



/*=====================================================================
SECTION 01
Universal Card Grid
======================================================================*/

.card-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(320px,1fr));

gap:2rem;

margin:3rem 0;

}


.card-grid.compact{

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

}


.card-grid.large{

grid-template-columns:

repeat(auto-fit,minmax(380px,1fr));

}




/*=====================================================================
SECTION 02
Base Card
======================================================================*/

.card{

position:relative;

display:flex;

flex-direction:column;

height:100%;

padding:2rem;

background:#ffffff;

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

border-radius:22px;

overflow:hidden;

transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease;

}


.card:hover{

transform:translateY(-8px);

border-color:#dbeafe;

box-shadow:

0 22px 60px rgba(15,23,42,.08);

}




/*=====================================================================
SECTION 03
Card Heading
======================================================================*/

.card h3{

margin:0 0 1rem;

font-size:1.4rem;

line-height:1.3;

color:var(--color-heading);

}


.card h4{

margin:0 0 .75rem;

font-size:1.15rem;

}




.card p{

margin-bottom:1.25rem;

color:var(--color-text);

}




/*=====================================================================
SECTION 04
Resource Card
======================================================================*/

.resource-card{

display:flex;

flex-direction:column;

height:100%;

padding:2rem;

text-decoration:none;

background:#ffffff;

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

border-radius:20px;

transition:.25s;

}


.resource-card:hover{

transform:translateY(-6px);

border-color:#c7d2fe;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

}


.resource-card h3{

margin-bottom:.85rem;

color:var(--color-heading);

}


.resource-card p{

flex:1;

}




/*=====================================================================
SECTION 05
Article Card
======================================================================*/

.article-card{

display:flex;

flex-direction:column;

overflow:hidden;

background:#ffffff;

border-radius:20px;

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

transition:.25s;

}


.article-card:hover{

transform:translateY(-8px);

box-shadow:

0 22px 56px rgba(0,0,0,.08);

}


.article-card img{

display:block;

width:100%;

height:220px;

object-fit:cover;

}


.article-card-body{

padding:1.75rem;

}


.article-card-meta{

display:flex;

gap:1rem;

font-size:.90rem;

margin-bottom:1rem;

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

}




/*=====================================================================
SECTION 06
Feature Card
======================================================================*/

.feature-card{

padding:2rem;

background:

linear-gradient(

180deg,

#ffffff,

#f8fbff

);

border-radius:22px;

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

}


.feature-card h3{

margin-bottom:1rem;

}


.feature-card ul{

margin-top:1rem;

padding-left:1.25rem;

}


.feature-card li{

margin-bottom:.65rem;

}




/*=====================================================================
SECTION 07
Icon Card
======================================================================*/

.icon-card{

display:flex;

flex-direction:column;

gap:1.5rem;

padding:2rem;

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

border-radius:22px;

background:#ffffff;

transition:.25s;

}


.icon-card:hover{

transform:translateY(-6px);

box-shadow:

0 18px 42px rgba(15,23,42,.08);

}


.icon-circle{

display:flex;

align-items:center;

justify-content:center;

width:70px;

height:70px;

border-radius:18px;

background:#eef4ff;

font-size:1.8rem;

color:var(--color-primary);

}




/*=====================================================================
SECTION 08
Card Footer
======================================================================*/

.card-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:auto;

padding-top:1.5rem;

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

}


.card-tag{

display:inline-flex;

align-items:center;

padding:.45rem .9rem;

border-radius:999px;

background:#eef4ff;

font-size:.82rem;

font-weight:700;

color:var(--color-primary);

}




/*=====================================================================
SECTION 09
Responsive
======================================================================*/

@media(max-width:900px){

.card-grid{

grid-template-columns:1fr;

}


.article-card img{

height:200px;

}


.card,

.resource-card,

.feature-card,

.icon-card{

padding:1.5rem;

}

}


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

PART B STARTS BELOW THIS LINE

SECTION 10

Statistics Cards

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


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

SECTION 10
Statistics Cards

Used for:

• Research statistics
• Industry metrics
• Survey results
• Productivity numbers

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

.stats-grid{

display:grid;

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

gap:1.5rem;

margin:3rem 0;

}


.stat-card{

display:flex;

flex-direction:column;

justify-content:center;

padding:2rem;

background:#ffffff;

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

border-radius:20px;

text-align:center;

transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;

}


.stat-card:hover{

transform:translateY(-6px);

border-color:#dbeafe;

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

}


.stat-number{

font-size:clamp(2.25rem,5vw,3.5rem);

font-weight:800;

line-height:1;

letter-spacing:-0.03em;

color:var(--color-primary);

margin-bottom:.75rem;

}


.stat-label{

font-weight:600;

font-size:1rem;

color:var(--color-heading);

margin-bottom:.5rem;

}


.stat-description{

font-size:.95rem;

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

line-height:1.6;

}




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

SECTION 11
Framework Cards

Examples

Workflow Friction Pyramid™

Friction Loop™

Context Switch Tax™

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


.framework-grid{

display:grid;

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

gap:2rem;

margin:3rem 0;

}


.framework-card{

display:flex;

flex-direction:column;

padding:2.25rem;

background:

linear-gradient(
180deg,
#ffffff,
#f8fbff);

border-radius:22px;

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

transition:
transform .25s ease,
box-shadow .25s ease;

overflow:hidden;

position:relative;

}


.framework-card:hover{

transform:translateY(-8px);

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

}


.framework-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:6px;

height:100%;

background:var(--color-primary);

}


.framework-title{

font-size:1.5rem;

font-weight:700;

margin-bottom:1rem;

padding-left:.75rem;

color:var(--color-heading);

}


.framework-card p{

padding-left:.75rem;

margin-bottom:1.25rem;

}


.framework-card img,

.framework-card svg{

margin-top:1rem;

width:100%;

height:auto;

}




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

SECTION 12

Download Cards

Used for

Checklist

PDF

Template

Framework

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


.download-card{

display:flex;

gap:1.5rem;

align-items:flex-start;

padding:2rem;

background:#ffffff;

border-radius:22px;

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

transition:
transform .25s ease,
box-shadow .25s ease;

}


.download-card:hover{

transform:translateY(-6px);

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

}


.download-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

background:#eef4ff;

border-radius:18px;

font-size:2rem;

color:var(--color-primary);

}


.download-content{

flex:1;

}


.download-content h3{

margin-bottom:.6rem;

}


.download-meta{

display:flex;

gap:1rem;

flex-wrap:wrap;

margin-top:1rem;

font-size:.85rem;

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

}


.download-meta span{

display:inline-flex;

align-items:center;

gap:.35rem;

padding:.35rem .75rem;

background:#f8fafc;

border-radius:999px;

}




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

SECTION 13

Comparison Cards

Before / After

Old vs New

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


.comparison-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:2rem;

margin:3rem 0;

}


.compare-card{

padding:2rem;

border-radius:22px;

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

background:#ffffff;

}


.compare-card h3{

margin-bottom:1.25rem;

}


.compare-card ul{

padding-left:1.25rem;

margin:0;

}


.compare-card li{

margin-bottom:.75rem;

line-height:1.7;

}


.compare-before{

border-left:6px solid #ef4444;

}


.compare-after{

border-left:6px solid #10b981;

}




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

SECTION 14

Responsive

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


@media (max-width:900px){

.framework-grid{

grid-template-columns:1fr;

}

.comparison-grid{

grid-template-columns:1fr;

}

.download-card{

flex-direction:column;

align-items:flex-start;

}

.download-icon{

margin-bottom:.5rem;

}

.stats-grid{

grid-template-columns:1fr;

}

}




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

PART B2 STARTS BELOW THIS LINE

SECTION 15

CTA Cards

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

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

SECTION 15
CTA Cards

Purpose

• End-of-article CTA
• Newsletter signup
• Calculator promotion
• Download prompt

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

.cta-card{

position:relative;

overflow:hidden;

padding:3rem;

border-radius:28px;

background:

linear-gradient(
135deg,
var(--color-primary),
#3b82f6);

color:#ffffff;

box-shadow:
0 28px 70px rgba(37,99,235,.25);

transition:
transform .3s ease,
box-shadow .3s ease;

}


.cta-card:hover{

transform:translateY(-8px);

box-shadow:
0 36px 90px rgba(37,99,235,.32);

}


.cta-card::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:260px;

height:260px;

border-radius:50%;

background:rgba(255,255,255,.08);

}


.cta-card::after{

content:"";

position:absolute;

left:-90px;

bottom:-90px;

width:180px;

height:180px;

border-radius:50%;

background:rgba(255,255,255,.05);

}


.cta-card h2,
.cta-card h3{

color:#ffffff;

margin-bottom:1rem;

position:relative;

z-index:2;

}


.cta-card p{

position:relative;

z-index:2;

color:rgba(255,255,255,.92);

max-width:65ch;

margin-bottom:2rem;

}


.cta-card .btn{

position:relative;

z-index:2;

}




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

SECTION 16
Featured Resource Card

Used on:

Homepage

Pillar pages

Blog index

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


.featured-card{

position:relative;

display:grid;

grid-template-columns:

160px
1fr;

gap:2rem;

padding:2rem;

background:#ffffff;

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

border-radius:24px;

overflow:hidden;

transition:
transform .3s ease,
box-shadow .3s ease;

}


.featured-card:hover{

transform:translateY(-8px);

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

}


.featured-card-image{

display:flex;

align-items:center;

justify-content:center;

background:#eef4ff;

border-radius:18px;

overflow:hidden;

}


.featured-card-image img{

width:100%;

height:100%;

object-fit:cover;

}


.featured-card-content{

display:flex;

flex-direction:column;

justify-content:center;

}


.featured-card-content h3{

margin-bottom:.75rem;

}


.featured-card-meta{

display:flex;

flex-wrap:wrap;

gap:.75rem;

margin-top:1rem;

}


.featured-card-meta span{

padding:.4rem .8rem;

border-radius:999px;

background:#f1f5f9;

font-size:.82rem;

font-weight:600;

}




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

SECTION 17
Related Reading Cards

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


.related-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:1.5rem;

margin:3rem 0;

}


.related-card{

display:flex;

flex-direction:column;

padding:1.75rem;

background:#ffffff;

border-radius:20px;

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

text-decoration:none;

transition:
transform .25s ease,
box-shadow .25s ease;

}


.related-card:hover{

transform:translateY(-6px);

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

}


.related-label{

display:inline-flex;

align-self:flex-start;

padding:.35rem .7rem;

margin-bottom:1rem;

border-radius:999px;

background:#eef4ff;

font-size:.75rem;

font-weight:700;

text-transform:uppercase;

color:var(--color-primary);

}


.related-card h3{

margin-bottom:.75rem;

}


.related-card p{

margin-bottom:1.25rem;

}


.related-arrow{

margin-top:auto;

font-weight:700;

color:var(--color-primary);

}




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

SECTION 18
Insight Cards

Original Clunky Concepts

Examples

Workflow Friction™

Context Switch Tax™

Hidden Work™

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


.insight-card{

padding:2rem;

background:

linear-gradient(
180deg,
#ffffff,
#f8fbff);

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

border-radius:20px;

margin:2.5rem 0;

}


.insight-label{

display:inline-block;

margin-bottom:1rem;

padding:.4rem .85rem;

background:#eef4ff;

border-radius:999px;

font-size:.78rem;

font-weight:700;

letter-spacing:.04em;

text-transform:uppercase;

color:var(--color-primary);

}


.insight-card h3{

margin-bottom:.85rem;

}


.insight-card p:last-child{

margin-bottom:0;

}




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

SECTION 19
Pillar Navigation Cards

Workflow Friction

↓

Context Switching

↓

Developer Productivity

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


.pillar-nav{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:1.75rem;

margin:4rem 0;

}


.pillar-card{

display:flex;

flex-direction:column;

justify-content:space-between;

padding:2rem;

border-radius:22px;

background:#ffffff;

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

text-decoration:none;

transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;

}


.pillar-card:hover{

transform:translateY(-8px);

border-color:#bfdbfe;

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

}


.pillar-card h3{

margin-bottom:1rem;

}


.pillar-status{

display:inline-flex;

align-items:center;

gap:.5rem;

margin-top:1.5rem;

font-size:.85rem;

font-weight:700;

color:var(--color-primary);

}




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

SECTION 20
Responsive

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


@media (max-width:900px){

.featured-card{

grid-template-columns:1fr;

}

.featured-card-image{

height:220px;

}

.cta-card{

padding:2rem;

}

.related-grid{

grid-template-columns:1fr;

}

.pillar-nav{

grid-template-columns:1fr;

}

}




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

PART B2b STARTS BELOW THIS LINE

SECTION 21

Animation Helpers

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

/* ==========================================================================
   SECTION 22
   Workflow Friction Content Cards
========================================================================== */

.card-example {
  margin-top: var(--space-4);
  margin-bottom: 0;
  padding: var(--space-4);
  border-left: 3px solid var(--color-primary-light);
  border-radius: 0 var(--radius-md, 0.75rem) var(--radius-md, 0.75rem) 0;
  background: var(--color-surface-subtle);
  color: var(--color-text-light);
  font-size: var(--fs-sm, 0.875rem);
  line-height: var(--lh-body, 1.75);
}

.card-example strong {
  color: var(--color-heading);
}

.checklist-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 1rem);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(15 23 42 / 0.05));
}

.checklist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.75rem);
  color: var(--color-text);
  line-height: var(--lh-body, 1.75);
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 160ms ease),
    border-color var(--transition-fast, 160ms ease);
}

.checklist-item:hover {
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
}

.checklist-item:focus-within {
  border-color: var(--color-focus, var(--color-primary));
  outline: 3px solid color-mix(
    in srgb,
    var(--color-focus, var(--color-primary)) 16%,
    transparent
  );
  outline-offset: 2px;
}

.checklist-item input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.3em;
  accent-color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .checklist-item {
    transition: none;
  }
}


/* ======================================================================
   Workflow Friction Information Cards
====================================================================== */

.info-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-surface-subtle);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm, .875rem);
  font-weight: var(--fw-bold, 700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}