/* ============================================================
   KY TRAK — Featured Insights page
   (/featured-insights/<slug>, template featured_insight.html)
   Same look as Operational Plan Goal 3: one row per report, each with
   its summary in a light blue panel beside the Power BI report (side set
   per section in app.py); stacks on narrower screens.
   ============================================================ */

.feature-page {
    padding-bottom: 3rem;
}

/* Heading */
.feature-header {
    padding: 1.5rem 0 2rem;
}
.feature-title {
    color: var(--trak-navy);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    line-height: 1.2;
    max-width: 900px;
    margin: 0 auto;
}

/* Space between report rows */
.feature-layout + .feature-layout {
    margin-top: 2.5rem;
}

/* ---------- Report ---------- */
/* Hold the Power BI page's shape as the column resizes; the extra height
   covers the report's own bottom bar. */
.feature-report {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #fff;
    border: 1px solid var(--trak-line);
    border-radius: var(--trak-radius);
    box-shadow: var(--trak-shadow);
    overflow: hidden;
}
.feature-report iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Summary panel ---------- */
.feature-summary {
    background: #EEF2F8;               /* same light panel as the sidebar */
    border-left: 4px solid var(--trak-bright);
    border-radius: var(--trak-radius);
    padding: 1.5rem 1.5rem 1.25rem;
}
.feature-summary-title {
    color: var(--trak-navy);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .75rem;
}
.feature-summary p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--trak-ink);
    margin-bottom: 1rem;
}

/* ---------- Back link ---------- */
.feature-back {
    margin-top: 2rem;
}
.feature-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    text-decoration: none;
}
.feature-back-link:hover,
.feature-back-link:focus {
    text-decoration: underline;
}

/* Below lg the columns stack in page order. A taller ratio gives the
   report's visuals room on tablets and phones. */
@media (max-width: 991.98px) {
    .feature-report { aspect-ratio: 4 / 3; }
}
@media (max-width: 575.98px) {
    .feature-report { aspect-ratio: 3 / 4; }
}

/* ---------- Print ---------- */
.feature-print-notice { display: none; }

@media print {
    .skip-link,
    .trak-header,
    .sidebar,
    .trak-breadcrumb,
    .trak-footer,
    .feature-report,
    .feature-back {
        display: none !important;
    }
    .feature-layout .col-lg-8 { display: none; }
    .feature-layout .col-lg-4 { width: 100%; }
    .feature-layout + .feature-layout { margin-top: .25in; }
    .feature-summary {
        background: none;
        border: 0;
        padding: 0;
    }
    .feature-print-notice {
        display: block;
        margin-top: .25in;
        font-size: .9rem;
        color: #000;
    }
}