/* ==========================================================================
   Centre For Faculty Development Programme  —  /page/centre-faculty-development/
   Loaded alongside two shared files: page-head.css for the photo banner and
   the heading with its rule, and tabs.css for the four pills, their mobile
   dropdown and the show/hide of the panels.

   This file is what sits INSIDE a panel: the numbered blue heading chips, the
   icon bullets under them, and the report cards in the fourth panel.

   Mission, Vision and Objectives are all the same two shapes — a chip with a
   numbered heading, then bullets. Report is a stack of cards, each opening
   its own write-up behind Read More on the site's shared accordion.
   ========================================================================== */

.fdp-section { background: var(--paper); }

/* The name of the open panel, sitting under the pills. Quieter than
   .page-heading, which is the heading of the whole page. */
.fdp-pane__title {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
}

/* ============================================== NUMBERED HEADING CHIP ==== */
/* Square rather than rounded, and shrink-to-fit, so the tint ends where the
   words do. It is a heading, so it is an <h4>: the bullets under it belong to
   it, and a screen reader should say so.

   The number is typed into the text rather than generated by a list, because
   these headings are not one list — they are separate blocks with bullets
   between them, and an <ol> cannot carry that without the numbering breaking
   the moment a block is moved. */
.fdp-tag {
  display: table;
  margin: 0 0 16px;
  padding: 9px 17px;
  background: #d3e6f8;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
/* Space above every chip after the first, to separate one numbered block from
   the bullets of the one before it. */
* + .fdp-tag { margin-top: 30px; }

/* ==================================================== ICON BULLETS ======= */
.fdp-points {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fdp-points li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  color: var(--ink-soft);
  font-size: .94rem;
  line-height: 1.7;
}
.fdp-points li + li { margin-top: 18px; }

/* The marker. flex: none so a long line cannot squeeze it, and a little top
   padding so it sits on the first line's baseline rather than its box top. */
.fdp-points__icon {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  fill: var(--red);
}

/* ====================================================== REPORT CARDS ===== */
.fdp-reports {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fdp-report {
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition);
}
.fdp-report:hover { box-shadow: var(--shadow-sm); }

/* Icon beside the title, both on one row. */
.fdp-report__head {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.fdp-report__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--red);
}
.fdp-report__icon svg { width: 28px; height: 28px; fill: currentColor; }

.fdp-report__title {
  margin: 0;
  color: var(--ink);
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.4;
}

/* --------------------------------------------------- the Read More ------ */
/* A <button>, so the browser's defaults all have to be undone: it does not
   inherit the page font and arrives with a border, a grey face and padding. */
.fdp-report__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--transition);
}
.fdp-report__toggle:hover { color: #a80217; text-decoration: underline; }
.fdp-report__toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.fdp-report__caret {
  flex: none;
  width: 9px;
  height: 9px;
  fill: currentColor;
  transition: transform var(--transition);
}
.fdp-report__toggle[aria-expanded="true"] .fdp-report__caret { transform: rotate(90deg); }

/* Two labels, one hidden. Swapping them off aria-expanded keeps the wording
   in the markup where it can be edited rather than in a string in main.js. */
.fdp-report__less { display: none; }
.fdp-report__toggle[aria-expanded="true"] .fdp-report__more { display: none; }
.fdp-report__toggle[aria-expanded="true"] .fdp-report__less { display: inline; }

/* ---------------------------------------------------------- the body ---- */
/* hidden in the markup, so it is shut before any script runs and stays shut
   if the script never does. The explicit display:none is not redundant: the
   hidden attribute is only a UA rule, and ANY display declaration that
   matches the element overrides it. */
.fdp-report__body {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: .89rem;
  line-height: 1.8;
}
.fdp-report__body[hidden] { display: none; }

/* Reset and re-space at the SAME specificity, so source order decides. A
   ".fdp-report__body p { margin: 0 }" here would be one type selector heavier
   and would silently kill the gap under every paragraph. */
.fdp-report__body > *     { margin: 0; }
.fdp-report__body > * + * { margin-top: 14px; }
.fdp-report__body strong { color: var(--ink); font-weight: 700; }

/* Justified, the way the rest of the site sets a paragraph of body copy —
   except on a phone, where justification opens rivers in a narrow measure. */
.fdp-report__body p { text-align: justify; }

/* The pale label chips inside a report: Introduction, Objectives, Methodology,
   Key Topics Covered, Outcomes, Conclusion. */
.fdp-label {
  display: table;
  padding: 6px 15px;
  background: #d3e6f8;
  color: var(--ink);
  font-size: .87rem;
  font-weight: 700;
  line-height: 1.4;
}
/* A chip is the heading for what follows it, so the two belong closer
   together than two ordinary blocks do. */
.fdp-label + * { margin-top: 10px; }

/* The poster. Floated so the copy runs beside it on a desktop and wraps under
   it on a phone — see the responsive block, where the float is dropped. */
.fdp-poster {
  float: right;
  width: 250px;
  max-width: 42%;
  margin: 4px 0 16px 26px;
}
.fdp-poster img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
/* A float is out of flow, so nothing below it knows how tall it is. Without
   this the next chip can ride up beside the poster instead of clearing it. */
.fdp-clear { clear: both; }

/* Stands in for a poster that is not uploaded yet — see the note in the
   template. Keeps the column width so the copy does not reflow when the real
   image lands. */
.fdp-poster--missing {
  display: grid;
  place-items: center;
  min-height: 170px;
  background: repeating-linear-gradient(
    -45deg, #e8e8e8 0 10px, #e2e2e2 10px 20px);
  color: var(--muted);
}
.fdp-poster--missing svg { width: 26px; height: 26px; fill: currentColor; opacity: .55; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767.98px) {
  .fdp-points li { font-size: .9rem; gap: 11px; }
  .fdp-points li + li { margin-top: 14px; }
  .fdp-tag { font-size: .93rem; padding: 8px 14px; }
  * + .fdp-tag { margin-top: 24px; }
  /* Justified type opens rivers in a narrow measure. */
  .fdp-report__body p { text-align: left; }
}

@media (max-width: 575.98px) {
  .fdp-report { padding: 14px 15px; }
  .fdp-report__head { gap: 11px; }
  .fdp-report__icon { width: 26px; height: 26px; }
  .fdp-report__icon svg { width: 22px; height: 22px; }
  .fdp-report__title { font-size: .9rem; }
  .fdp-report__body { font-size: .86rem; line-height: 1.75; }
  .fdp-points__icon { width: 16px; height: 16px; }
  /* The poster stops floating and runs the full measure: at this width a
     250px float leaves the copy beside it about six words to a line. */
  .fdp-poster {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fdp-report,
  .fdp-report__toggle,
  .fdp-report__caret { transition: none; }
}