/* ============================================================
   Global Voices — session modal additions

   The live site at globalvoices-edu.com shows six fields per
   session; the original local build showed three. These are the
   styles for the three that were missing — Central Idea,
   Speaking Focus and Final Output — matching the tinted-block
   pattern already used by .modal__block--theme/hook/act in
   css/styles.css.
   ============================================================ */

/* Central Idea — the conceptual spine of the session, so it gets
   the gold of the brand rather than a third accent colour. */
.modal__block--idea {
  background: rgba(255, 210, 122, 0.09);
  border-color: rgba(255, 210, 122, 0.26);
}

.modal__block--idea h4 { color: var(--gold); }

/* Speaking Focus — the language outcome. Teal reads as distinct
   from the orange/blue/coral already in the modal. */
.modal__block--skill {
  background: rgba(56, 189, 178, 0.1);
  border-color: rgba(56, 189, 178, 0.28);
}

.modal__block--skill h4 { color: #5fd6c9; }

/* Final Output & Take Action — the closing block, so it carries a
   little more weight than the rest. */
.modal__block--out {
  background: rgba(122, 168, 255, 0.1);
  border-color: rgba(122, 168, 255, 0.3);
  box-shadow: inset 3px 0 0 rgba(122, 168, 255, 0.55);
}

.modal__block--out h4 { color: #a8c6ff; }

/* The modal body is a grid, and a block hides itself when its
   session has no value for that field. Author display rules beat
   the user-agent [hidden] rule, so this is stated explicitly. */
.modal__body .modal__block[hidden] { display: none !important; }

/* Six blocks instead of three makes the modal long, so the body
   scrolls inside the panel rather than the panel outgrowing the
   viewport. The head and footer stay put. */
.modal { display: flex; flex-direction: column; max-height: 92vh; }
.modal__head { flex: 0 0 auto; }
.modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal__footer { flex: 0 0 auto; }

/* A scroll that has to happen should at least be visible. The base
   .modal is itself scrollable in css/styles.css; with the body taking
   that job the outer element must not scroll too, or the head detaches
   from the content. */
.modal { overflow: hidden; max-height: min(92vh, 60rem); }

.modal__body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 138, 30, 0.55) transparent;
  overscroll-behavior: contain;
}

.modal__body::-webkit-scrollbar { width: 8px; }
.modal__body::-webkit-scrollbar-track { background: transparent; }

.modal__body::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(255, 138, 30, 0.55);
}

/* On the longest sessions the last row is clipped by the footer. This
   fades the cut so it reads as "there is more below" rather than as a
   layout fault — overlay scrollbars alone are too easy to miss. */
.modal__footer { position: relative; }

.modal__footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 2.25rem;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg-2) 30%, rgba(10, 19, 38, 0));
}

/* Two columns from tablet up. All six blocks share the grid so the
   session fits without scrolling on a normal screen — nothing spans,
   because Final Output is the block a reader most needs to see and it
   should not be pushed under the fold. */
@media (min-width: 46rem) {
  .modal__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.9rem;
  }
  .modal__block { padding: 1rem 1.15rem; }
  .modal__block h4 { font-size: 1rem; }
  .modal__block p { font-size: 0.95rem; line-height: 1.6; }
}