/* about.css */

/* Hero */
.about-hero {
    margin:24px 32px 0;
    background:linear-gradient(135deg,#1e3a8a 0%,#1a56db 100%);
    border-radius:16px; padding:36px 40px;
    display:flex; align-items:flex-start; justify-content:space-between; gap:32px;
    color:white;
}
.about-hero-tag {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.15); padding:5px 14px;
    border-radius:20px; font-size:11px; font-weight:600;
    margin-bottom:16px;
}
.about-hero-content h2 {
    font-family:'DM Serif Display',serif;
    font-size:20px; color:white; line-height:1.4;
    max-width:580px; margin-bottom:16px;
}
.about-hero-authors {
    font-size:13px; color:rgba(255,255,255,0.75);
    margin-bottom:10px;
}
.about-hero-meta {
    display:flex; gap:20px; flex-wrap:wrap;
    font-size:12px; color:rgba(255,255,255,0.55);
}
.about-hero-meta span { display:flex; align-items:center; gap:6px; }

.about-hero-stats {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:10px; flex-shrink:0;
}
.about-stat {
    background:rgba(255,255,255,0.12);
    border-radius:12px; padding:16px 20px; text-align:center;
    min-width:100px;
}
.about-stat-num {
    font-family:'DM Serif Display',serif;
    font-size:32px; color:white; line-height:1;
}
.about-stat-label { font-size:11px; color:rgba(255,255,255,0.6); margin-top:4px; }

/* Sections */
.about-section {
    margin:20px 32px 0;
    background:white; border-radius:14px;
    padding:28px; box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.about-section-header {
    display:flex; align-items:flex-start; gap:14px;
    margin-bottom:24px; padding-bottom:16px;
    border-bottom:1px solid #f1f5f9;
}
.about-section-icon {
    width:42px; height:42px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; flex-shrink:0;
}
.about-section-icon.blue   { background:#dbeafe; color:#1a56db; }
.about-section-icon.indigo { background:#ede9fe; color:#7c3aed; }
.about-section-icon.green  { background:#d1fae5; color:#059669; }
.about-section-icon.orange { background:#fef3c7; color:#d97706; }
.about-section-header h3 {
    font-family:'DM Serif Display',serif;
    font-size:18px; color:#1e293b; margin-bottom:4px;
}
.about-section-header p { font-size:13px; color:#94a3b8; }

/* Content Grid */
.about-content-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.about-text-block { font-size:14px; color:#475569; line-height:1.7; }
.about-example-box {
    background:#f8fafc; border-radius:12px; padding:20px;
    border:1px solid #e2e8f0;
}
.about-example-title {
    font-size:12px; font-weight:700; color:#94a3b8;
    text-transform:uppercase; letter-spacing:0.5px; margin-bottom:14px;
}
.about-example-item {
    display:flex; align-items:flex-start; gap:10px;
    margin-bottom:12px; font-size:13px; color:#475569; line-height:1.5;
}
.about-example-icon { font-size:18px; flex-shrink:0; margin-top:1px; }

/* Framework Components */
.framework-components {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.framework-comp {
    background:#f8fafc; border-radius:12px; padding:20px;
    border:1px solid #e2e8f0; position:relative;
}
.framework-comp-num {
    position:absolute; top:16px; right:18px;
    font-size:32px; font-family:'DM Serif Display',serif;
    color:#e2e8f0; line-height:1;
}
.framework-comp-icon {
    width:40px; height:40px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; margin-bottom:12px;
}
.framework-comp h4 { font-size:15px; font-weight:600; color:#1e293b; margin-bottom:8px; }
.framework-comp p  { font-size:12px; color:#64748b; line-height:1.6; }

/* Steps Timeline */
.steps-timeline { display:flex; flex-direction:column; gap:0; }
.step-timeline-item { display:flex; gap:20px; }
.step-timeline-left {
    display:flex; flex-direction:column; align-items:center;
    flex-shrink:0;
}
.step-timeline-circle {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; border:2px solid; flex-shrink:0;
}
.step-timeline-line {
    width:2px; flex:1; min-height:24px; margin:4px 0;
    border-radius:1px;
}
.step-timeline-content {
    padding-bottom:28px; flex:1;
}
.step-timeline-header { margin-bottom:8px; }
.step-timeline-num {
    font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.8px; display:block; margin-bottom:4px;
}
.step-timeline-content h4 {
    font-family:'DM Serif Display',serif;
    font-size:17px; color:#1e293b;
}
.step-timeline-content p {
    font-size:13px; color:#64748b; line-height:1.6; margin-top:6px;
}

/* Indicator Overview */
.indicator-overview-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.ind-overview-card {
    background:#f8fafc; border-radius:12px; padding:20px; border:1px solid #e2e8f0;
}
.ind-overview-card h4 {
    font-size:13px; font-weight:700; color:#475569;
    text-transform:uppercase; letter-spacing:0.5px; margin-bottom:16px;
}
.ind-bar-row {
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.ind-bar-label {
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:#475569; width:110px; flex-shrink:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ind-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.ind-bar-track {
    flex:1; height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden;
}
.ind-bar-fill { height:100%; border-radius:4px; transition:width 1s ease; }
.ind-bar-count { font-size:12px; font-weight:700; width:44px; text-align:right; flex-shrink:0; }

@media (max-width:1100px) {
    .about-hero { flex-direction:column; }
    .about-content-grid, .framework-components, .indicator-overview-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .about-hero, .about-section { margin:16px; }
    .about-hero-stats { grid-template-columns:repeat(4,1fr); }
}

/* ── Stat Tooltip (Hero boxes) ── */
.about-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    flex-shrink: 0;
}

.about-stat-tooltip-wrap {
    position: relative;
}

.about-stat.has-tooltip {
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, background 0.2s;
}
.about-stat.has-tooltip:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-2px);
}

.about-stat-hover-icon {
    position: absolute;
    top: 8px; right: 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    transition: color 0.2s;
}
.about-stat.has-tooltip:hover .about-stat-hover-icon {
    color: rgba(255,255,255,0.85);
}

/* Tooltip box */
.about-stat-tooltip-box {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    background: #1e293b;
    color: white;
    border-radius: 12px;
    padding: 14px 16px;
    z-index: 999;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.about-stat-tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
}

/* Show on hover (desktop) */
.about-stat-tooltip-wrap:hover .about-stat-tooltip-box {
    visibility: visible;
    opacity: 1;
}
/* Show on click (mobile) */
.about-stat-tooltip-box.active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
}

.tooltip-stat-title {
    font-weight: 700;
    font-size: 12px;
    color: #93c5fd;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.about-stat-tooltip-box p {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin: 0;
}

/* Flip tooltip for bottom 2 cards */
.about-stat-tooltip-wrap:nth-child(3) .about-stat-tooltip-box,
.about-stat-tooltip-wrap:nth-child(4) .about-stat-tooltip-box {
    bottom: auto;
    top: calc(100% + 10px);
}
.about-stat-tooltip-wrap:nth-child(3) .about-stat-tooltip-box::after,
.about-stat-tooltip-wrap:nth-child(4) .about-stat-tooltip-box::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1e293b;
}