/* ============================================================
   KY TRAK — Operational Plan goal landing page
   (/operational-plan/<goal>, template operational_plan_goal.html)
   One row per report, each with a written summary beside its Power BI
   report (side set per report in app.py); stacks on narrower screens.
   A section with layout='clean' (Goal 4) keeps the report on the left (2/3)
   and the light blue summary panel on the right (1/3), with round
   headshots and names under the text inside the panel.
   ============================================================ */

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

/* Heading — same treatment as the Roads and Bridges / Follow
   Transportation Projects landing pages. */
.goal-header {
    padding: 1.5rem 0 2rem;
}
.goal-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 */
.goal-layout + .goal-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. */
.goal-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;
}
.goal-report iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Summary ---------- */
.goal-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;
}
.goal-summary-title {
    color: var(--trak-navy);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .75rem;
}
.goal-summary p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--trak-ink);
    margin-bottom: 1rem;
}
.goal-summary-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    text-decoration: none;
}
.goal-summary-back:hover,
.goal-summary-back:focus {
    text-decoration: underline;
}

/* ---------- Clean sections (Goal 4) ---------- */
/* Report on the left (2/3), light blue summary panel on the right (1/3)
   holding navy strategy lines over body text. */
.goal-strategy {
    color: var(--trak-navy);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .75rem;
}
.goal-section-title {
    color: var(--trak-navy);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .35rem;
}
.goal-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--trak-ink);
    margin-bottom: 1rem;
}
/* Second panel (the Chief Data Officers): its own row under the report,
   the same width as the report. */
.goal-people-row {
    margin-top: 0;            /* cancel g-4's negative top margin so the column's
                                 1.5rem gutter shows as a gap under the report */
}

/* ---------- People: round headshots, name centered underneath ---------- */
.goal-people {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin: 1rem 0 0;
    padding: 0;
}
.goal-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    width: 120px;
    text-align: center;
}
.goal-person-photo {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;        /* keep faces in frame on tall portraits */
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--trak-line);
}
/* Shown until a person's photo is added: their initials. */
.goal-person-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EEF2F8;
    color: var(--trak-navy);
    font-size: 2rem;
    font-weight: 700;
}
.goal-person-name {
    color: var(--trak-navy);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.goal-back {
    margin-top: 2rem;
}

/* 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) {
    .goal-report { aspect-ratio: 4 / 3; }
}
@media (max-width: 575.98px) {
    .goal-report { aspect-ratio: 3 / 4; }
}

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

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