/* ================================================================
   INTI ÑAN — GLOBAL RESPONSIVE STANDARDS (Fluid-First)
   ================================================================
   
   Version: 2.0.0
   Date: February 2026
   Approach: Fluid-first with clamp() + minimal layout breakpoints
   Source: class-brand-standards.php
   
   PHILOSOPHY:
   - Typography, spacing, and sizing use clamp() — smooth at every px
   - Breakpoints ONLY for structural layout changes (grid→stack, etc.)
   - 3 layout breakpoints replace 6 sizing breakpoints
   
   LAYOUT BREAKPOINTS (structural only):
   900px  - Multi-column → fewer columns
   768px  - Sidebar → stacked, buttons → stacked
   480px  - Final compact adjustments, iOS zoom prevention
   
   SPECIAL QUERIES (unchanged):
   Landscape  - max-height: 500px + orientation: landscape
   Touch      - pointer: coarse (44px tap targets)
   Print      - @media print
   
   SCOPED SECTIONS:
   1. :root                — Fluid design tokens (all page types)
   2. .pw-*                — 189 Individual Pathway Pages
   3. .pathways-page       — Pathways Directory
   4. .about-page          — About Page
   5. .article-*           — Foundational Articles / Blog Posts
   6. .module-container    — Academy Modules
   7. .karpay-*            — Karpay Initiation / Delivery
   8. .locked-section etc  — CTA Boxes
   
   ================================================================ */


/* ================================================================
   FLUID DESIGN TOKENS
   These custom properties scale smoothly across all screen sizes.
   Any page using these variables gets fluid behavior automatically.
   ================================================================ */

:root {
    /* -----------------------------------------
       FLUID TYPOGRAPHY SCALE
       Format: clamp(min, preferred, max)
       min = small phone, max = desktop
       ----------------------------------------- */
    --in-text-xs:   clamp(0.7rem,   1.5vw,  0.85rem);
    --in-text-sm:   clamp(0.8rem,   1.8vw,  0.95rem);
    --in-text-base: clamp(0.95rem,  2vw,    1.1rem);
    --in-text-lg:   clamp(1.05rem,  2.2vw,  1.25rem);
    --in-text-xl:   clamp(1.2rem,   2.5vw,  1.5rem);
    --in-text-2xl:  clamp(1.4rem,   3vw,    1.8rem);
    --in-text-3xl:  clamp(1.6rem,   4vw,    2.2rem);
    --in-text-4xl:  clamp(1.8rem,   5vw,    2.8rem);
    --in-text-5xl:  clamp(2rem,     6vw,    3.2rem);
    --in-text-hero: clamp(2.2rem,   7vw,    3.8rem);

    /* -----------------------------------------
       FLUID SPACING SCALE
       ----------------------------------------- */
    --in-space-xs:  clamp(0.25rem,  0.5vw,  0.5rem);
    --in-space-sm:  clamp(0.5rem,   1vw,    1rem);
    --in-space-md:  clamp(0.75rem,  1.5vw,  1.5rem);
    --in-space-lg:  clamp(1rem,     2vw,    2rem);
    --in-space-xl:  clamp(1.5rem,   3vw,    3rem);
    --in-space-2xl: clamp(2rem,     4vw,    4rem);
    --in-space-3xl: clamp(2.5rem,   5vw,    5rem);
    --in-space-4xl: clamp(3rem,     6vw,    6rem);

    /* -----------------------------------------
       FLUID PADDING (container-specific)
       ----------------------------------------- */
    --in-pad-page:    clamp(16px, 4vw, 60px);
    --in-pad-section: clamp(20px, 4vw, 50px);
    --in-pad-card:    clamp(18px, 3vw, 40px);
    --in-pad-hero:    clamp(40px, 8vw, 100px) clamp(16px, 4vw, 40px);

    /* -----------------------------------------
       FLUID COMPONENT SIZES
       ----------------------------------------- */
    --in-badge-font:    clamp(0.7rem,  1.5vw, 0.85rem);
    --in-badge-pad:     clamp(5px, 1vw, 10px) clamp(10px, 2vw, 18px);
    --in-btn-font:      clamp(0.85rem, 1.8vw, 1rem);
    --in-btn-pad:       clamp(12px, 2vw, 18px) clamp(20px, 3vw, 36px);
    --in-trait-font:    clamp(0.7rem,  1.3vw, 0.8rem);
    --in-trait-pad:     clamp(4px, 0.8vw, 6px) clamp(8px, 1.5vw, 14px);
}


/* ================================================================
   1. PATHWAY PAGES (.pw-*)
   Fluid typography + spacing, breakpoints only for grid/stack
   ================================================================ */

/* --- Fluid sizes (no breakpoints needed) --- */

.pw-hero {
    padding: var(--in-pad-hero);
}

.pw-hero h1 {
    font-size: var(--in-text-hero);
}

.pw-hero-pathway-label {
    font-size: var(--in-text-xs);
}

.pw-hero-essence {
    font-size: var(--in-text-lg);
}

.pw-hero-tagline {
    font-size: var(--in-text-base);
}

.pw-badge {
    font-size: var(--in-badge-font);
    padding: var(--in-badge-pad);
}

.pw-container {
    padding: 0 var(--in-pad-page);
}

.pw-opening-text {
    font-size: var(--in-text-lg);
}

.pw-section-label {
    font-size: var(--in-text-xs);
}

.pw-section-title {
    font-size: var(--in-text-3xl);
}

.pw-world-card {
    padding: var(--in-pad-card);
}

.pw-world-name {
    font-size: var(--in-text-xl);
}

.pw-world-subtitle {
    font-size: var(--in-text-sm);
}

.pw-world-body {
    font-size: var(--in-text-base);
}

.pw-trait {
    font-size: var(--in-trait-font);
    padding: var(--in-trait-pad);
}

.pw-callout-text {
    font-size: var(--in-text-xl);
    padding: var(--in-pad-card);
}

.pw-dual-title {
    font-size: var(--in-text-lg);
}

.pw-rel-label {
    font-size: var(--in-text-xs);
}

.pw-rel-title {
    font-size: var(--in-text-lg);
}

.pw-rel-desc {
    font-size: var(--in-text-base);
}

.pw-rel-card {
    padding: var(--in-pad-card);
}

.pw-related-name {
    font-size: var(--in-text-lg);
}

.pw-related-combo,
.pw-related-shared {
    font-size: var(--in-text-sm);
}

.pw-seo-content {
    padding: var(--in-pad-section);
}

.pw-seo-body {
    font-size: var(--in-text-base);
}

.pw-faq-q {
    font-size: var(--in-text-lg);
}

.pw-faq-a {
    font-size: var(--in-text-base);
}

.pw-cta h2 {
    font-size: var(--in-text-3xl);
}

.pw-cta-sub {
    font-size: var(--in-text-lg);
}

.pw-btn {
    font-size: var(--in-btn-font);
    padding: var(--in-btn-pad);
}

.pw-disclaimer {
    font-size: var(--in-text-sm);
    padding: var(--in-space-lg) var(--in-pad-page);
}

/* --- Pathway layout breakpoints (structural only) --- */

@media (max-width: 900px) {
    .pw-tri-badges {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .pw-dual-grid {
        grid-template-columns: 1fr;
    }

    .pw-rel-grid {
        grid-template-columns: 1fr;
    }

    .pw-related-grid {
        grid-template-columns: 1fr;
    }

    .pw-world-header {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .pw-world-traits {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .pw-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .pw-btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}


/* ================================================================
   2. PATHWAYS DIRECTORY (.pathways-page)
   ================================================================ */

/* --- Fluid sizes --- */

.pathways-page .hero h1 {
    font-size: var(--in-text-hero);
}

.pathways-page .hero-subtitle {
    font-size: var(--in-text-lg);
}

.pathways-page .hero-label {
    font-size: var(--in-text-xs);
}

.pathways-page .equation-item {
    font-size: var(--in-text-sm);
    padding: clamp(8px, 1.5vw, 14px) clamp(12px, 2vw, 22px);
}

.pathways-page .filter-tab {
    font-size: var(--in-text-sm);
    padding: clamp(8px, 1.5vw, 14px) clamp(12px, 2vw, 20px);
}

.pathways-page .soul-name {
    font-size: var(--in-text-3xl);
}

.pathways-page .soul-quechua {
    font-size: var(--in-text-sm);
}

.pathways-page .soul-description {
    font-size: var(--in-text-base);
}

.pathways-page .soul-section {
    padding: var(--in-pad-section);
}

.pathways-page .pathway-name {
    font-size: var(--in-text-xl);
}

.pathways-page .pathway-essence {
    font-size: var(--in-text-sm);
}

.pathways-page .pathway-tagline {
    font-size: var(--in-text-base);
}

.pathways-page .pathway-card {
    padding: var(--in-pad-card);
}

.pathways-page .combo-tag {
    font-size: var(--in-text-xs);
}

/* --- Directory layout breakpoints --- */

@media (max-width: 900px) {
    .pathways-page .pathways-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pathways-page .filter-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .pathways-page .pathways-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .pathways-page .hero-equation {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .pathways-page .filter-tab .count {
        display: none;
    }
}


/* ================================================================
   3. ABOUT PAGE (.about-page)
   ================================================================ */

/* --- Fluid sizes --- */

.about-page .hero {
    padding: var(--in-pad-hero);
}

.about-page .hero h1 {
    font-size: var(--in-text-hero);
}

.about-page .hero-intro {
    font-size: var(--in-text-lg);
}

.about-page .hero-label {
    font-size: var(--in-text-xs);
}

.about-page .content-section {
    padding: var(--in-pad-section);
}

.about-page .lead {
    font-size: var(--in-text-lg);
}

.about-page .revelation {
    font-size: var(--in-text-xl);
}

.about-page .tagline-text {
    font-size: var(--in-text-lg);
}

.about-page .world-name {
    font-size: var(--in-text-xl);
}

.about-page .world-description {
    font-size: var(--in-text-base);
}

.about-page .world-card {
    padding: var(--in-pad-card);
}

.about-page .story-block {
    padding: var(--in-pad-card);
}

.about-page .cta-button {
    font-size: var(--in-btn-font);
    padding: var(--in-btn-pad);
}

/* --- About layout breakpoints --- */

@media (max-width: 900px) {
    .about-page .worlds-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .about-page .creator-inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .about-page .tagline-text {
        flex-direction: column;
        gap: 8px;
    }

    .about-page .tagline-separator {
        display: none;
    }

    .about-page .cta-button {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}


/* ================================================================
   4. FOUNDATIONAL ARTICLES (.article-*)
   ================================================================ */

/* --- Fluid sizes --- */

.article-hero {
    padding: var(--in-pad-hero);
}

.article-hero h1 {
    font-size: var(--in-text-hero);
}

.article-hero .hero-hook {
    font-size: var(--in-text-lg);
}

.article-hero .hero-label {
    font-size: var(--in-text-xs);
}

.article-container {
    padding: 0 var(--in-pad-page);
}

.article-main .section-title {
    font-size: var(--in-text-2xl);
}

.article-main .content-section p {
    font-size: var(--in-text-base);
}

.article-main .highlight-box {
    padding: var(--in-pad-card);
}

.article-main .type-card {
    padding: var(--in-pad-card);
}

.article-main .toc-box {
    padding: var(--in-pad-card);
}

.article-main .toc-title {
    font-size: var(--in-text-lg);
}

.article-main .toc-list {
    font-size: var(--in-text-sm);
}

.hero-guardian {
    max-width: clamp(120px, 20vw, 250px);
}

.sidebar-box {
    padding: var(--in-pad-card);
}

.sidebar-title {
    font-size: var(--in-text-lg);
}

.sidebar-text {
    font-size: var(--in-text-sm);
}

.karpay-cta-box {
    padding: var(--in-pad-card);
}

.cta-label {
    font-size: var(--in-text-lg);
}

.cta-body {
    font-size: var(--in-text-base);
}

.cta-body-secondary {
    font-size: var(--in-text-sm);
}

.btn-karpay,
.btn-comparison {
    font-size: var(--in-btn-font);
    padding: var(--in-btn-pad);
}

.disclaimer {
    font-size: var(--in-text-sm);
}

/* --- Article layout breakpoints --- */

@media (max-width: 900px) {
    .article-container {
        flex-direction: column;
    }

    .article-main {
        width: 100%;
    }

    .article-sidebar {
        width: 100%;
        max-width: 500px;
        margin: var(--in-space-xl) auto 0;
    }
}

@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .btn-karpay,
    .btn-comparison {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}


/* ================================================================
   5. ACADEMY MODULES (.module-container)
   ================================================================ */

/* --- Fluid sizes --- */

.module-container {
    padding: var(--in-space-md);
}

.module-header {
    padding: var(--in-pad-card);
}

.module-title {
    font-size: var(--in-text-3xl);
}

.module-subtitle {
    font-size: var(--in-text-base);
}

.module-number {
    font-size: var(--in-text-sm);
}

.chapter-header {
    padding: var(--in-space-md);
}

.chapter-title {
    font-size: var(--in-text-xl);
}

.chapter-quechua {
    font-size: var(--in-text-sm);
}

.chapter-meaning {
    font-size: var(--in-text-sm);
}

.chapter-content {
    padding: var(--in-pad-card);
}

.chapter-content p {
    font-size: var(--in-text-base);
}

.personal-callout {
    padding: var(--in-pad-card);
    font-size: var(--in-text-base);
}

.journal-prompt {
    padding: var(--in-pad-card);
}

.journal-prompt .prompt {
    font-size: var(--in-text-lg);
}

.pull-quote {
    font-size: var(--in-text-xl);
    padding: var(--in-pad-card);
}

.practice-box {
    padding: var(--in-pad-card);
}

.practice-number {
    font-size: var(--in-text-sm);
}

.meditation-section {
    padding: var(--in-pad-card);
}

.meditation-title {
    font-size: var(--in-text-xl);
}

.meditation-script {
    padding: var(--in-space-md);
    font-size: var(--in-text-base);
}

.closing-ritual {
    padding: var(--in-pad-card);
}

.quipu-progress-bar {
    padding: var(--in-space-md);
}

.knot {
    width: clamp(8px, 1.5vw, 12px);
    height: clamp(8px, 1.5vw, 12px);
}

.module-container .btn {
    font-size: var(--in-btn-font);
    padding: var(--in-btn-pad);
}

/* --- Academy layout breakpoints --- */

@media (max-width: 900px) {
    .quipu-strings {
        flex-direction: column;
        gap: 16px;
    }

    .pathway-siblings {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .next-module {
        flex-direction: column;
        text-align: center;
    }
}


/* ================================================================
   6. KARPAY INITIATION / DELIVERY (.karpay-*)
   Note: initiation.css (Feb 5) already uses clamp() internally.
   These rules cover the karpay-template.html delivered documents.
   ================================================================ */

/* --- Fluid sizes --- */

.karpay-container {
    padding: var(--in-space-md);
}

.karpay-content {
    padding: var(--in-pad-card);
}

.karpay-title {
    font-size: var(--in-text-4xl);
}

.karpay-subtitle {
    font-size: var(--in-text-sm);
}

.karpay-text {
    font-size: var(--in-text-base);
}

.karpay-option {
    padding: var(--in-space-md);
}

.karpay-guardian {
    max-width: clamp(80px, 15vw, 150px);
}

.karpay-btn {
    font-size: var(--in-btn-font);
    padding: var(--in-btn-pad);
}

.karpay-figure {
    padding: var(--in-pad-card);
}

.karpay-figure-text {
    font-size: var(--in-text-base);
}

.karpay-figure-quote {
    font-size: var(--in-text-lg);
}

.karpay-progress-text {
    font-size: var(--in-text-xs);
}

.karpay-examples-list {
    font-size: var(--in-text-sm);
}

.karpay-fire-questions {
    padding: var(--in-space-md);
}

.karpay-input {
    font-size: 16px; /* Always 16px — prevents iOS zoom on focus */
}

/* --- Karpay layout breakpoints --- */

@media (max-width: 900px) {
    .karpay-options {
        grid-template-columns: 1fr;
    }

    .karpay-figures {
        flex-direction: column;
        align-items: center;
    }

    .karpay-figure {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .karpay-final-buttons {
        flex-direction: column;
        align-items: center;
    }

    .karpay-btn {
        width: 100%;
        max-width: 300px;
    }
}


/* ================================================================
   7. CTA BOXES (shared product boxes across all pages)
   ================================================================ */

/* --- Fluid sizes --- */

.locked-section {
    padding: var(--in-pad-card);
}

.locked-title {
    font-size: var(--in-text-xl);
}

.locked-copy {
    font-size: var(--in-text-base);
}

.karpay-box,
.comparison-box {
    padding: var(--in-pad-card);
}

.karpay-box .karpay-title,
.comparison-title {
    font-size: var(--in-text-2xl);
}

.karpay-hook,
.comparison-hook {
    font-size: var(--in-text-base);
}

.karpay-stat-number {
    font-size: var(--in-text-2xl);
}

.karpay-stat-label {
    font-size: var(--in-text-xs);
}

.comparison-scenario {
    padding: var(--in-space-md);
}

.comparison-scenario-title {
    font-size: var(--in-text-lg);
}

.academy-box-inner {
    padding: var(--in-pad-card);
}

.academy-title {
    font-size: var(--in-text-2xl);
}

.academy-tagline {
    font-size: var(--in-text-base);
}

.academy-price-tag {
    font-size: var(--in-text-3xl);
}

.btn-karpay,
.btn-comparison,
.btn-academy,
.btn-unlock {
    font-size: var(--in-btn-font);
    padding: var(--in-btn-pad);
}

/* --- CTA box layout breakpoints --- */

@media (max-width: 900px) {
    .karpay-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .comparison-pain-points {
        grid-template-columns: 1fr;
    }

    .academy-worlds {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .karpay-pathway-visual {
        flex-direction: column;
        gap: 8px;
    }

    .karpay-plus {
        transform: rotate(90deg);
    }

    .comparison-pricing {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .academy-chapters {
        grid-template-columns: 1fr;
    }

    .locked-section .btn-unlock,
    .karpay-box .btn-karpay,
    .comparison-box .btn-comparison,
    .academy-box-wrapper .btn-academy {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}


/* ================================================================
   SPECIAL QUERIES — All page types
   ================================================================ */

/* --- Landscape Mobile --- */
@media (max-height: 500px) and (orientation: landscape) {
    .pw-hero,
    .pathways-page .hero,
    .about-page .hero,
    .article-hero,
    .module-header,
    .karpay-content {
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 30px;
    }
}

/* --- Touch Target Accessibility (WCAG 2.5.5) --- */
@media (pointer: coarse) {
    .pw-btn,
    .pw-badge,
    .pw-related-card,
    .pathways-page .filter-tab,
    .pathways-page .pathway-card a,
    .about-page .cta-button,
    .btn-karpay,
    .btn-comparison,
    .btn-academy,
    .btn-unlock,
    .karpay-btn,
    .karpay-option,
    .module-container .btn,
    .article-container .btn-karpay,
    .article-container .btn-comparison {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .pathways-page .filter-tab {
        padding: 12px 16px;
    }

    .karpay-option,
    .pw-related-card {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* --- Print Styles --- */
@media print {
    .pw-cta,
    .pw-related,
    .pathways-page .filter-section,
    .pathways-page .cta-section,
    .about-page .cta-section,
    .about-page .scroll-indicator,
    .karpay-cta-box,
    .locked-section,
    .karpay-box,
    .comparison-box,
    .academy-box-wrapper,
    .karpay-btn,
    .btn-karpay,
    .btn-comparison,
    .btn-academy,
    .btn-unlock,
    .module-container .btn,
    .karpay-progress,
    .karpay-progress-bar {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .pw-hero,
    .pathways-page .hero,
    .about-page .hero,
    .article-hero,
    .module-header {
        background: #fff !important;
        color: #000 !important;
        padding: 20px 0;
    }

    .pw-badge {
        border: 1px solid #999;
        color: #333;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}


/* ================================================================
   END OF INTI ÑAN GLOBAL RESPONSIVE STANDARDS
   Version 2.0.0 — Fluid-First — February 2026
   ================================================================ */