/* ==========================================================================
   IBRA programmes
   A vertical tab list beside a detail panel. The rule between them is the
   only separator, so the two columns read as one object.
   ========================================================================== */

/* No gutter here: the theme already pads every dnd-section by 1rem,
   and adding another would inset this section past its neighbours. */
.ibra-programs__inner {
  max-width: var(--ibra-max, 1240px);
  margin-inline: auto;
}

.ibra-programs__heading {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.ibra-programs__intro {
  max-width: 78ch;
  margin: 0 0 28px;
  line-height: 1.65;
}

.ibra-programs__grid {
  display: grid;
  grid-template-columns: var(--list-w, 32%) 1fr;
  gap: 0;
  align-items: start;
}

/* The list ---------------------------------------------------------------
   The theme styles every <button> as a solid purple pill — border, radius,
   53px of side padding, white text on hover. All of it has to come off
   before these can read as a quiet list of names, and the colour
   declarations need !important because the theme's hover rule sets a white
   foreground that would otherwise leave the text invisible on the tint. */

.ibra-programs__list {
  display: flex;
  flex-direction: column;
  padding-right: 30px;
}

/* The list follows the reader down a long programme and stops when the
   section runs out, which is what a sticky element does inside a grid
   track: it can never travel past its own column. align-self keeps the
   track from stretching, since a stretched item has nothing to stick
   within. */
.ibra-programs__grid.is-sticky .ibra-programs__list {
  position: sticky;
  top: var(--sticky-top, 24px);
  align-self: start;
}

.ibra-programs__tab {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 15px 16px 15px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #33475B !important;
  font: inherit !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: color .22s ease, background-color .22s ease;
}

/* A hairline between names rather than a box around each */
.ibra-programs__tab + .ibra-programs__tab {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .07);
}

/* The accent bar. It grows from the centre, which reads as the list
   responding rather than a block appearing. */
.ibra-programs__tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent, #7E1220);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
  opacity: 0;
}

.ibra-programs__tab:hover,
.ibra-programs__tab:focus-visible {
  color: var(--accent, #7E1220) !important;
  background: rgba(0, 0, 0, .022) !important;
}

.ibra-programs__tab:hover::before,
.ibra-programs__tab:focus-visible::before {
  transform: scaleY(.5);
  opacity: .45;
}

.ibra-programs__tab:focus-visible {
  outline: 2px solid var(--accent, #7E1220);
  outline-offset: -2px;
}

.ibra-programs__tab.is-active {
  color: var(--accent, #7E1220) !important;
  font-weight: 700 !important;
  background: color-mix(in srgb, var(--accent, #7E1220) 6%, transparent) !important;
}

.ibra-programs__tab.is-active::before {
  transform: scaleY(1);
  opacity: 1;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .ibra-programs__tab.is-active { background: rgba(126, 18, 32, .06) !important; }
}

/* The panel ------------------------------------------------------------ */

.ibra-programs__panels {
  min-width: 0;
  padding-left: 36px;
  border-left: 1px solid rgba(0, 0, 0, .1);
}

.ibra-programs__panel {
  min-width: 0;
  animation: ibra-programs-in .3s ease both;
}

@keyframes ibra-programs-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.ibra-programs__panel[hidden] { display: none; }

/* Shown only where the tab strip is not, so the name is never doubled */
.ibra-programs__panel-name { display: none; }

/* The status sits on a row of its own above the copy.

   It was floated, which let the text wrap around it and left the first two
   lines short while the third ran full width — the ragged edge that gives
   a layout away. A block-level pill with `width: fit-content` and an auto
   left margin sits right-aligned on its own line and nothing flows beside
   it. The rule beneath separates the programme's metadata from its
   description without adding another box. */
.ibra-programs__status {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 4px auto;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* A dot carries the state at a glance, before the words are read */
.ibra-programs__status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .ibra-programs__status::before { box-shadow: none; }
}

/* The hairline closes the metadata row off from the copy below it */
.ibra-programs__status + .ibra-programs__detail {
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .09);
}

.ibra-programs__status span {
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .75;
}

.ibra-programs__status strong {
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ibra-programs__status--closed {
  color: var(--accent, #7E1220);
  background: color-mix(in srgb, var(--accent, #7E1220) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #7E1220) 20%, transparent);
}

.ibra-programs__status--open {
  color: #17693C;
  background: rgba(23, 105, 60, .08);
  box-shadow: inset 0 0 0 1px rgba(23, 105, 60, .2);
}

.ibra-programs__status--neutral {
  color: #4A5862;
  background: rgba(74, 88, 98, .08);
  box-shadow: inset 0 0 0 1px rgba(74, 88, 98, .18);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .ibra-programs__status--closed {
    background: rgba(126, 18, 32, .08);
    box-shadow: inset 0 0 0 1px rgba(126, 18, 32, .2);
  }
}

.ibra-programs__detail { line-height: 1.7; }

.ibra-programs__detail p { margin: 0 0 1.05em; }
.ibra-programs__detail p:last-child { margin-bottom: 0; }

.ibra-programs__detail ul,
.ibra-programs__detail ol { margin: 0 0 1.05em; padding-left: 1.2em; }
.ibra-programs__detail li { margin-bottom: .4em; }

.ibra-programs__cta {
  display: inline-block;
  margin-top: 22px;
  padding: 13px 30px;
  border-radius: 4px;
  background: var(--accent, #7E1220);
  color: #fff !important;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: opacity .2s ease, transform .2s ease;
}

.ibra-programs__cta:hover { opacity: .9; transform: translateY(-1px); }

/* Stacked ---------------------------------------------------------------
   Below this width the two columns would each be too narrow to read, so
   the tab strip is hidden and every panel is shown in sequence, each under
   its own name. No JavaScript is involved in that switch. */

@media (max-width: 860px) {
  .ibra-programs__grid { grid-template-columns: 1fr; gap: 0; }

  .ibra-programs__list { display: none; }

  /* One column: the rule and its indent have nothing to separate */
  .ibra-programs__panels { padding-left: 0; border-left: 0; }

  .ibra-programs__panel,
  .ibra-programs__panel[hidden] {
    display: block;
    padding: 22px 0;
    border-top: 1px solid rgba(0, 0, 0, .14);
  }

  .ibra-programs__panel:first-child { border-top: 0; padding-top: 0; }

  .ibra-programs__panel-name {
    display: block;
    margin: 0 0 10px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--accent, #7E1220);
  }

  .ibra-programs__status { margin: 0 0 4px; }
  .ibra-programs__panel { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ibra-programs__tab,
  .ibra-programs__cta { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   Accordion inside a programme
   Built on <details>, so it works with JavaScript off and is announced
   properly. A <summary> is not a <button>, which also keeps the theme's
   purple button styling from reaching it.
   ========================================================================== */

.ibra-programs__accordion {
  margin-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.ibra-programs__row {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.ibra-programs__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 2px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  color: #33475B;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}

/* The default disclosure triangle, in both engines */
.ibra-programs__row-head::-webkit-details-marker { display: none; }
.ibra-programs__row-head::marker { content: ""; }

.ibra-programs__row-head:hover { color: var(--accent, #7E1220); }

.ibra-programs__row-head:focus-visible {
  outline: 2px solid var(--accent, #7E1220);
  outline-offset: 2px;
  border-radius: 2px;
}

.ibra-programs__row[open] > .ibra-programs__row-head {
  color: var(--accent, #7E1220);
  font-weight: 700;
}

.ibra-programs__chev {
  flex: none;
  width: 13px;
  height: 9px;
  color: currentColor;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}

.ibra-programs__row[open] > .ibra-programs__row-head .ibra-programs__chev {
  transform: rotate(180deg);
}

.ibra-programs__row-body {
  padding: 0 2px 20px;
  line-height: 1.7;
  /* Opening is instant in the DOM, so the copy fades in rather than
     appearing abruptly — details cannot transition its own height. */
  animation: ibra-programs-row .26s ease both;
}

.ibra-programs__row-body p { margin: 0 0 1em; }
.ibra-programs__row-body p:last-child { margin-bottom: 0; }

.ibra-programs__row-body ul,
.ibra-programs__row-body ol { margin: 0 0 1em; padding-left: 1.2em; }
.ibra-programs__row-body li { margin-bottom: .4em; }

@keyframes ibra-programs-row {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ibra-programs__chev { transition: none !important; }
  .ibra-programs__row-body { animation: none !important; }
}