/* ==========================================================================
   IBRA — Award list

   The problem this layout solves is a long award name on the left and a
   short stack of links on the right, repeated fifteen times. Floated
   columns drift apart as soon as one description runs to four lines; a
   grid row keeps the links level with the name they belong to, which is
   what makes the list scannable rather than a wall.
   ========================================================================== */

.ibra-awards__inner {
  max-width: var(--ibra-max, 1240px);
  margin-inline: auto;
}

/* Heading ---------------------------------------------------------------- */

.ibra-awards__heading {
  position: relative;
  margin: 0 0 14px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.ibra-awards__heading--center { text-align: center; }

/* A short bar rather than a full underline: it marks the heading without
   drawing a line across the page that the rows below already own. */
.ibra-awards__heading.has-rule { padding-bottom: 14px; }

.ibra-awards__heading.has-rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 190px;
  max-width: 40%;
  height: 3px;
  background: var(--accent, #7E1220);
}

.ibra-awards__heading--center.has-rule::after {
  left: 50%;
  transform: translateX(-50%);
}

/* The copy runs the full width of the list below it and reads from the
   left, whatever the heading above is doing. A centred heading is a title;
   centred body copy is a ragged left edge the eye has to find again on
   every line. */
.ibra-awards__intro {
  margin: 0 0 34px;
  line-height: 1.65;
  text-align: left;
}

.ibra-awards__intro p { margin: 0 0 .8em; }
.ibra-awards__intro p:last-child { margin-bottom: 0; }

/* The list --------------------------------------------------------------- */

.ibra-awards__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ibra-awards__item { padding: 24px 0; }

/* The row is a grid INSIDE the item, not the item itself: a panel has to
   span both columns, and a grid child cannot do that from within a cell. */
.ibra-awards__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--actions-w, 260px);
  align-items: start;
  gap: 10px 40px;
}

.ibra-awards--actions-left .ibra-awards__row {
  grid-template-columns: var(--actions-w, 260px) minmax(0, 1fr);
}

.ibra-awards--actions-left .ibra-awards__main { order: 2; }
.ibra-awards--actions-left .ibra-awards__actions { order: 1; }

/* A rule between rows, not around the block: the first row needs no line
   above it and the last none below. */
.ibra-awards.has-rules .ibra-awards__item + .ibra-awards__item {
  border-top: 1px solid rgba(16, 38, 48, .12);
}

/* Left: the award ---------------------------------------------------------
   The name carries the accent; the description is set back so a reader
   scanning names is not fighting the body copy for attention. */

.ibra-awards__main { min-width: 0; }

.ibra-awards__title {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--accent, #7E1220);
  text-wrap: pretty;
}

.ibra-awards__title a {
  color: inherit !important;
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .3s ease;
}

.ibra-awards__title a:hover,
.ibra-awards__title a:focus { background-size: 100% 1px; }

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

.ibra-awards__detail {
  font-size: .89rem;
  line-height: 1.6;
  color: #4A5862;
  max-width: 72ch;
}

.ibra-awards__detail p { margin: 0 0 .6em; }
.ibra-awards__detail p:last-child { margin-bottom: 0; }
.ibra-awards__detail ul { margin: .4em 0; padding-left: 1.1em; }

/* Right: what a reader can do --------------------------------------------
   Stacked, right aligned to the column edge, each with an arrow that
   moves on hover. The arrow is what tells the reader these are links
   rather than a caption, without underlining four lines of text. */

.ibra-awards__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.ibra-awards--actions-right .ibra-awards__actions { align-items: flex-end; text-align: right; }
.ibra-awards--actions-left .ibra-awards__actions { align-items: flex-start; }

.ibra-awards__actions:empty { display: none; }

.ibra-awards__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.35;
  color: #22333F !important;
  text-decoration: none !important;
  transition: color .2s ease;
}

.ibra-awards--actions-right .ibra-awards__action { flex-direction: row-reverse; }

.ibra-awards__arrow {
  flex: none;
  width: 18px;
  height: 8px;
  opacity: .55;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}

.ibra-awards--actions-right .ibra-awards__arrow { transform: scaleX(-1); }

.ibra-awards__action:hover { color: var(--accent, #7E1220) !important; }
.ibra-awards__action:hover .ibra-awards__arrow { opacity: 1; transform: translateX(3px); }
.ibra-awards--actions-right .ibra-awards__action:hover .ibra-awards__arrow { transform: scaleX(-1) translateX(3px); }

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

/* A button in the links column ------------------------------------------
   The theme styles every <button> as a solid pill. These are links that
   happen to open a panel, so everything the theme applies is undone and
   the anchor's appearance is used instead. */

.ibra-awards__action {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  cursor: pointer;
}

.ibra-awards__chev {
  flex: none;
  width: 10px;
  height: 6px;
  opacity: .55;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}

.ibra-awards__action:hover .ibra-awards__chev { opacity: 1; }
.ibra-awards__action.is-open .ibra-awards__chev { transform: rotate(180deg); opacity: 1; }
.ibra-awards__action.is-open { color: var(--accent, #7E1220) !important; }

/* Panels -----------------------------------------------------------------
   Height is animated from a measured pixel value and handed back to auto
   once the transition ends, so a photograph that loads late or a form
   that resizes is never clipped. */

.ibra-awards__panel.is-collapsible {
  overflow: hidden;
  transition: height .35s cubic-bezier(.4, 0, .2, 1);
}

/* The closed height must NOT apply while the panel is open. The script
   animates to a measured height and then clears the inline value so the
   panel can grow — a photograph loading late, a form resizing itself. If
   this rule were unguarded, clearing that value would fall back to zero
   and the panel would snap shut the moment it finished opening. */
.ibra-awards__panel.is-collapsible:not(.is-open) { height: 0; }

/* No padding on the panel itself: with height 0 the padding would still
   add its own height and leave a closed panel showing a gap. The space
   goes on the first child, where it collapses away with the content. */
.ibra-awards__panel { padding: 0; }
.ibra-awards__panel > * { margin-top: 0; }
.ibra-awards__panel > *:first-child { margin-top: 20px; }
.ibra-awards__panel > * + * { margin-top: 18px; }

.ibra-awards__panel-copy {
  max-width: 72ch;
  font-size: .89rem;
  line-height: 1.65;
  color: #4A5862;
}

.ibra-awards__panel-copy p { margin: 0 0 .7em; }
.ibra-awards__panel-copy p:last-child { margin-bottom: 0; }

.ibra-awards__pending {
  padding: 14px 18px;
  border: 1px dashed rgba(16, 38, 48, .25);
  border-radius: 6px;
  font-size: .85rem;
  color: #6B7A85;
  background: rgba(16, 38, 48, .02);
}

.ibra-awards__form { max-width: 620px; }

/* The awardee grid -------------------------------------------------------
   Square photographs rather than circles, which is what a formal portrait
   wants: a circle crops the shoulders and pushes every face to the same
   size whether the original was tight or wide.

   auto-fill rather than a fixed column count, so the number per row
   follows the width instead of a guess at one. */

.ibra-awards__people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 170px), 1fr));
  gap: 26px 22px;
  padding: 0 0 6px;
  list-style: none;
}

.ibra-awards__person {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ibra-awards__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #E7EDF1;
  display: grid;
  place-items: center;
}

.ibra-awards--photo-4-5 .ibra-awards__photo { aspect-ratio: 4 / 5; }
.ibra-awards--photo-3-4 .ibra-awards__photo { aspect-ratio: 3 / 4; }
.ibra-awards--photo-4-3 .ibra-awards__photo { aspect-ratio: 4 / 3; }

.ibra-awards__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit high in a portrait, so a square crop should keep the top */
  object-position: 50% 22%;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.ibra-awards__person:hover .ibra-awards__photo img { transform: scale(1.03); }

.ibra-awards__initials {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9DAEBA;
}

.ibra-awards__year {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(10, 24, 34, .74);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.ibra-awards__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ibra-awards__person-name {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  color: #22333F;
}

.ibra-awards__affil {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: #6B7A85;
}

/* The icon is the only link on the card, so it needs to look like one
   without a label taking a whole line. */
.ibra-awards__li {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 5px;
  border-radius: 3px;
  color: #5B6770 !important;
  background: rgba(16, 38, 48, .06);
  transition: background-color .2s ease, color .2s ease;
}

.ibra-awards__li svg { width: 14px; height: 14px; }

.ibra-awards__li:hover,
.ibra-awards__li:focus {
  background: #0A66C2;
  color: #fff !important;
}

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

/* An outlined box ---------------------------------------------------------
   For the one action that opens a list rather than a form — it reads as a
   thing to open rather than as a third link in a stack.

   No chevron inside: the box is already the affordance, and a chevron
   inside a bordered chip reads as a select. The open state is carried by
   the fill instead, which is a stronger signal than a rotated arrow. */

.ibra-awards__action--box {
  padding: 8px 16px !important;
  border: 1px solid color-mix(in srgb, var(--accent, #7E1220) 45%, transparent) !important;
  border-radius: 3px !important;
  color: var(--accent, #7E1220) !important;
  font-weight: 600 !important;
  background: transparent !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .ibra-awards__action--box { border-color: rgba(126, 18, 32, .45) !important; }
}

.ibra-awards__action--box .ibra-awards__chev { display: none; }

.ibra-awards__action--box:hover {
  border-color: var(--accent, #7E1220) !important;
  background: color-mix(in srgb, var(--accent, #7E1220) 7%, transparent) !important;
  color: var(--accent, #7E1220) !important;
}

.ibra-awards__action--box.is-open {
  background: var(--accent, #7E1220) !important;
  border-color: var(--accent, #7E1220) !important;
  color: #fff !important;
}

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

/* Emphasis --------------------------------------------------------------- */

.ibra-awards__action--strong {
  font-weight: 700;
  color: var(--accent, #7E1220) !important;
}

.ibra-awards__action--strong .ibra-awards__arrow,
.ibra-awards__action--strong .ibra-awards__chev { opacity: .85; }

.ibra-awards__action--quiet {
  font-weight: 500;
  font-size: .8rem;
  color: #6B7A85 !important;
}

/* Responsive --------------------------------------------------------------
   Below the breakpoint the two columns become one. The links keep their
   order under the description, but lay out in a wrapping row rather than
   a tall stack, which would otherwise double the height of every row. */

@media (max-width: 899px) {
  .ibra-awards__row,
  .ibra-awards--actions-left .ibra-awards__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ibra-awards__item { padding: 22px 0; }

  .ibra-awards--actions-left .ibra-awards__main,
  .ibra-awards--actions-left .ibra-awards__actions { order: 0; }

  .ibra-awards__actions,
  .ibra-awards--actions-right .ibra-awards__actions,
  .ibra-awards--actions-left .ibra-awards__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 8px 22px;
  }

  .ibra-awards--actions-right .ibra-awards__action { flex-direction: row; }
  .ibra-awards--actions-right .ibra-awards__arrow { transform: none; }
  .ibra-awards--actions-right .ibra-awards__action:hover svg { transform: translateX(3px); }
}

@media (max-width: 520px) {
  .ibra-awards__title { font-size: .96rem; }
  .ibra-awards__detail { font-size: .85rem; }
  .ibra-awards__heading.has-rule::after { max-width: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .ibra-awards__action,
  .ibra-awards__action--box,
  .ibra-awards__arrow,
  .ibra-awards__chev,
  .ibra-awards__panel,
  .ibra-awards__title a { transition: none !important; }
  .ibra-awards__action:hover .ibra-awards__arrow { transform: none !important; }
  .ibra-awards--actions-right .ibra-awards__action:hover .ibra-awards__arrow { transform: scaleX(-1) !important; }
}