/* ==========================================================
   ToolXone Calculator Layout
   Version: 2.0.0

   Shared Layout Framework
   ----------------------------------------------------------
   RESPONSIBILITY:
   - Calculator page layout
   - Calculator workspace
   - Calculator shell positioning
   - Hero layout
   - Shared layout utilities
   - Responsive layout

   DOES NOT STYLE:
   - Calculator buttons
   - Calculator display
   - Calculator-specific colors
   - Related Tools
   - Reviews
   - Feedback
   - Individual calculator logic
   ========================================================== */


/* ==========================================================
   1. CALCULATOR PAGE
   ========================================================== */

.tx-calculator-page {
    width: 100%;
}


/* ==========================================================
   2. SHARED CALCULATOR CONTAINER
   ========================================================== */

.tx-calculator-container {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}


/* ==========================================================
   3. CALCULATOR SECTION
   ========================================================== */

.tx-calculator-section {
    width: 100%;
    margin: 0 0 64px;
}


/* ==========================================================
   4. CALCULATOR WRAPPER
   ========================================================== */

.tx-calculator-wrapper {
    width: min(100%, 520px);
    margin: 0 auto;
}


/* ==========================================================
   5. CALCULATOR WORKSPACE
   ========================================================== */

.tx-calculator-workspace {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 24px 72px;
    box-sizing: border-box;
}


/* ==========================================================
   6. CALCULATOR SHELL
   ----------------------------------------------------------
   Layout container only.
   Visual calculator styling belongs elsewhere.
   ========================================================== */

.tx-calculator-shell {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.tx-calculator-shell > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   7. CALCULATOR CARD LAYOUT
   ----------------------------------------------------------
   IMPORTANT:
   This controls STRUCTURE only.
   Visual styling belongs to calculator-components.css.
   ========================================================== */

.tx-calculator-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


/* ==========================================================
   8. CALCULATOR HERO
   ========================================================== */

.tx-calculator-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 56px;
    margin-bottom: 56px;
}

.tx-calculator-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.tx-calculator-hero-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================
   9. HERO HIGHLIGHTS
   ========================================================== */

.tx-hero-highlights {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tx-hero-highlight {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ==========================================================
   10. HERO STATISTICS
   ========================================================== */

.tx-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}


/* ==========================================================
   11. HERO ACTIONS
   ========================================================== */

.tx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}


/* ==========================================================
   12. TOOL CONTENT SECTIONS
   ========================================================== */

.tx-tool-section {
    width: 100%;
    margin-top: 80px;
}

.tx-tool-section:first-child {
    margin-top: 0;
}


/* ==========================================================
   13. SHARED GRID UTILITIES
   ========================================================== */

.tx-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.tx-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.tx-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}


/* ==========================================================
   14. FLEX UTILITIES
   ========================================================== */

.tx-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tx-column {
    display: flex;
    flex-direction: column;
}

.tx-row {
    display: flex;
    align-items: center;
}

.tx-space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ==========================================================
   15. RESPONSIVE — LARGE DESKTOP
   ========================================================== */

@media (min-width: 1600px) {

    .tx-calculator-workspace {
        max-width: 1500px;
    }

}


/* ==========================================================
   16. RESPONSIVE — LAPTOP
   ========================================================== */

@media (max-width: 1200px) {

    .tx-calculator-container {
        max-width: 1000px;
    }

    .tx-calculator-hero {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tx-calculator-hero-content {
        order: 1;
    }

    .tx-calculator-hero-preview {
        order: 2;
    }

}


/* ==========================================================
   17. RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 992px) {

    .tx-calculator-workspace {
        padding: 36px 18px 60px;
    }

    .tx-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tx-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tx-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   18. RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .tx-calculator-container {
        width: 100%;
        padding-inline: 16px;
    }

    .tx-calculator-workspace {
        padding: 28px 16px 48px;
    }

    .tx-calculator-hero {
        gap: 32px;
        margin-bottom: 40px;
    }

    .tx-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .tx-grid-4,
    .tx-grid-3,
    .tx-grid-2 {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   19. RESPONSIVE — SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .tx-calculator-container {
        padding-inline: 12px;
    }

    .tx-calculator-workspace {
        padding: 20px 12px 36px;
    }

    .tx-hero-stats {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   20. RESPONSIVE — VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 360px) {

    .tx-calculator-container {
        padding-inline: 8px;
    }

    .tx-calculator-workspace {
        padding-inline: 8px;
    }

}