/* ================================================
   Statistics Report Page – chart.css
   Layout & component styles for hero-section2
   ================================================ */


/* ---- Main section ---- */

.hero-section2 {
    background-color: var(--background-background-white);
}

/* Inner centred wrapper */
.hero-section-website {
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-5xl);
    direction: rtl;
}


/* ---- Page header ---- */

.hero-section-content2 {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-lg);
    align-self: stretch;
}

.hero-section-subtitle2 {
    color: var(--text-text-primary);
}

.hero-section-text-symbol1 {
    color: var(--text-text-primary-paragraph);
}


/* ---- Statistics cards ---- */

.hero-section-statistics {
    /*display: grid;*/
    grid-template-columns: repeat(3, 1fr);
    gap: var(--global-spacing-3xl);
    width: 100%;
}

.card4,
.card5,
.card6 {
    gap: var(--global-spacing-3xl);
    min-width: 0;
}

/* Circular icon backgrounds */
.circle-featured-icon1,
.circle-featured-icon2,
.circle-featured-icon3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
}

.circle-featured-icon1 {
    background-color: var(--icon-background-brand-light);
}

.circle-featured-icon2 {
    background-color: var(--icon-background-brand-light);
    /*border: 1px solid var(--border-border-neutral-primary);*/
}

.circle-featured-icon3 {
    background-color: var(--icon-background-brand-light);
}

.circle-featured-icon-bounce-right,
.circle-featured-icon-web-design,
.circle-featured-icon-view {
    width: 28px;
    height: 28px;
}


/* ---- Pie charts – section 1 ---- */

.hero-section-charts1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--global-spacing-3xl);
    width: 100%;
}

.card-pie-chart1,
.card-pie-chart2 {
    gap: var(--global-spacing-xl);
    align-items: flex-start;
    width: 100%;
    min-width: 0;
}

.card-pie-chart-text1 {
    align-self: stretch;
    text-align: center;
}

.card-pie-chart-text2 {
    align-self: stretch;
    color: var(--text-text-default);
    font-size: 20px;
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
}

/* Pie-chart flex containers */
.pie-chart1,
.pie-chart2,
.pie-chart3,
.pie-chart4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--global-spacing-3xl);
    align-self: stretch;
    width: 100%;
}

/* Static SVG images (replaced by canvas after JS init) */
.pie-chart-pie-chart1,
.pie-chart-pie-chart2,
.pie-chart-pie-chart3,
.pie-chart-pie-chart4 {
    width: 240px;
    height: 240px;
    flex-shrink: 0;
}

/* Chart.js canvases */
.pie-chart1 canvas,
.pie-chart2 canvas,
.pie-chart3 canvas,
.pie-chart4 canvas {
    flex-shrink: 0;
}


/* ---- Legend B – vertical layout (search keywords) ---- */

.legend-b {
    display: flex;
    flex-wrap: wrap;
    /*flex-direction: column;*/
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--global-spacing-lg);
    /*align-self: stretch;*/
    justify-content: center;
    direction: ltr;
}

.legend-series-b {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.legend-series-text2 {
    color: var(--text-text-primary-paragraph);
    font-size: 14px;
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    line-height: 1.429;
    letter-spacing: 0;
    text-align: right;
}

.legend-series-circle2 {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}


/* ---- Legend C – wrap layout (helpful chart) ---- */

.legend-c {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--global-spacing-lg);
    row-gap: 12px;
    padding-bottom: 1px;
    direction: ltr;
}


/* ---- Legend colour dots ---- */

/* Chart 1 – Device types */
.legend1 .legend-series1 .circle { background-color: #b8eacb; }
.legend1 .legend-series2 .circle { background-color: #1b8354; }
.legend1 .legend-series3 .circle { background-color: #54c08a; }

/* Chart 2 – Search keywords */
.legend2 .legend-series4 .legend-series-circle2 { background-color: #079455; }
.legend2 .legend-series5 .legend-series-circle2 { background-color: #54c08a; }
.legend2 .legend-series6 .legend-series-circle2 { background-color: #b8eacb; }

/* Chart 3 – Not helpful reasons */
.legend3 .legend-series1 .circle { background-color: #1b8354; }
.legend3 .legend-series2 .circle { background-color: #079455; }
.legend3 .legend-series3 .circle { background-color: #b8eacb; }

/* Chart 4 – Helpful reasons */
.legend4 .legend-series7  .circle { background-color: #1b8354; }
.legend4 .legend-series8  .circle { background-color: #079455; }
.legend4 .legend-series9  .circle { background-color: #54c08a; }
.legend4 .legend-series10 .circle { background-color: #b8eacb; }


/* ---- Data tables ---- */

.hero-section-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--global-spacing-3xl);
    width: 100%;
}

.card-table1,
.card-table2 {
    gap: var(--global-spacing-xl);
    align-items: flex-start;
    width: 100%;
    min-width: 0;
}

.card-table-text1,
.card-table-text2 {
    align-self: stretch;
    text-align: center;
}

.card-table-table1,
.card-table-table2 {
    align-self: stretch;
    width: 100%;
    /*overflow-x: auto;*/
}


/* ---- Feedback header ---- */

.hero-section-content3 {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-md);
    align-self: stretch;
    align-items: unset;
    text-align: center;
}

.hero-section-text-symbol2 {
    color: var(--text-text-default);
}

.hero-section-text {
    color: var(--text-text-primary-paragraph);
}


/* ---- Feedback charts ---- */

.hero-section-charts2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--global-spacing-3xl);
    width: 100%;
}

.card-chart1,
.card-chart2 {
    gap: var(--global-spacing-xl);
    align-items: flex-start;
    width: 100%;
    min-width: 0;
}


/* ================================================
   Responsive
   ================================================ */

/* Tablet – reduce outer padding */
@media (max-width: 1024px) {
    .hero-section2.section {
        padding: var(--global-spacing-5xl) var(--margin-md);
    }
}

/* Mobile landscape */
@media (max-width: 768px) {
    .hero-section2.section {
        padding: var(--global-spacing-4xl) var(--margin-sm);
    }

    .hero-section-statistics {
        grid-template-columns: 1fr;
    }

    .hero-section-charts1,
    .hero-section-data,
    .hero-section-charts2 {
        grid-template-columns: 1fr;
    }

    .pie-chart-pie-chart1,
    .pie-chart-pie-chart2,
    .pie-chart-pie-chart3,
    .pie-chart-pie-chart4 {
        width: 160px;
        height: 160px;
    }

    .content-title {
        font-size: 36px;
    }

    .table-header-text-table-header-cell {
        font-size: 11px;
        min-width: 80px;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .hero-section-website {
        gap: var(--global-spacing-4xl);
    }

    .pie-chart-pie-chart1,
    .pie-chart-pie-chart2,
    .pie-chart-pie-chart3,
    .pie-chart-pie-chart4 {
        width: 140px;
        height: 140px;
    }

    .content-title {
        font-size: 28px;
    }

    .table-row-text-cell1,
    .table-row-text-cell2,
    .table-row-text-cell3,
    .table-row-text-cell4,
    .table-row-text-cell5,
    .table-row-text-cell6 {
        font-size: 13px;
        min-width: 70px;
    }
}