/* /behaviours. The index of ten.
   Measured off BIF_02_The_Program_index.pdf. Rows on an 80px pitch, columns
   158 / 663 / 5 / 214 inside the 1040 column, rails inset 11px top and bottom.

   Everything here is prefixed ix. The score page already owns .brow. */

.ix h1{margin-top:14px}
.ix .big{margin-top:20px;max-width:78ch}

.ixstart{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:34px}
.ixstart p{max-width:56ch;margin:0}

.ixlist{display:grid;grid-template-columns:158px 1fr 5px 214px;grid-auto-rows:80px;
  margin-top:36px}

/* the whole row is the target, not just the name */
.ixrow{grid-column:1/3;display:grid;grid-template-columns:158px 1fr;align-items:center;
  border-top:1px solid var(--hair)}
.ixrow:last-of-type{border-bottom:1px solid var(--hair)}
.ixicon{display:flex;align-items:center}
.ixicon img{height:46px;width:auto;display:block}
.ixtext{padding-left:4px}
.ixtext .n{display:block}
.ixq{display:block;font-size:1.13rem;font-weight:700;letter-spacing:-.3px;line-height:1.25;
  margin-top:5px;color:var(--ink);border-bottom:2px solid transparent}
.ixrow:hover .ixq{border-bottom-color:var(--yellow)}

/* the arc, as four rails down the right */
.ixrail{grid-column:3;background:var(--yellow);width:5px;justify-self:center;
  align-self:center;height:calc(100% - 22px)}
.ixcap{grid-column:4;padding-left:22px;align-self:center}
.ixcap b{display:block;font-size:.98rem;font-weight:800}
.ixcap span{display:block;font-size:.9rem;color:var(--muted);line-height:1.4;margin-top:2px}

@media (max-width:1000px){
  .ixlist{grid-template-columns:120px 1fr 5px 170px}
  .ixrow{grid-template-columns:120px 1fr}
  .ixq{font-size:1.02rem}
}
@media (max-width:820px){
  .ixstart{flex-direction:column;align-items:flex-start;gap:20px}
  .ixlist{grid-template-columns:96px 1fr;grid-auto-rows:auto}
  /* source order takes over, so the pinned rows have to let go */
  .ixrow,.ixcap{grid-row:auto!important}
  .ixrow{grid-column:1/3;grid-template-columns:96px 1fr;padding:16px 0}
  .ixrail{display:none}
  /* the arc becomes a heading above the behaviours it covers */
  .ixcap{grid-column:1/3;padding:22px 0 4px;border-top:2px solid var(--yellow);margin-top:16px}
  .ixcap span{max-width:60ch}
  .ixicon img{height:38px}
}
@media (max-width:560px){
  .ixlist{grid-template-columns:1fr}
  .ixrow{grid-template-columns:1fr;gap:10px}
  .ixcap{grid-column:1}
  .ixicon img{height:34px}
}