/* Publications list (ET-14755). Figma: `Publication` 27247:86727 in Section 18 (28777:81031).

   The page is the filter bar, the reference list's rows and a Load more; all three are shared, so
   what is here is the measure they sit in and the spacing between them.

   The head carries 48 above and below; the list section carries none above -- the frames run the
   filter bar straight on from the head -- and 48 below. */
.publications__measure {
    max-width: var(--grid-xl-col-8);
    margin-inline: auto;
}

.publications-head {
    padding-block: var(--space-48);
}

/* Heading xL, a step above the section heads elsewhere: this is the page's title, not a section's.
   Left-aligned, which is what the frames draw and what a list page wants -- a centred head over a
   left-aligned list reads as two different pages. */
.publications-head__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-heading-xl-size);
    font-weight: var(--heading-weight-xl);
    line-height: var(--type-heading-xl-line);
    letter-spacing: var(--type-heading-xl-track);
    color: var(--black);
}

.publications-head__lede {
    max-width: 68ch;
    margin: var(--space-16) 0 0;
    font-size: var(--type-body-xl-size);
    line-height: var(--type-body-xl-line);
    color: var(--black-80);
}

.publications {
    padding-block: 0 var(--space-48);
}

/* 48 under the filter bar, which is the gap the frames draw between its rule and the first row. */
.publications__list {
    margin-top: var(--space-48);
}

.publications__status {
    margin: var(--space-32) 0 0;
    font-size: var(--type-body-lg-size);
    line-height: var(--type-body-lg-line);
    color: var(--black-64);
    text-align: center;
}

.publications__status[hidden] {
    display: none;
}

.publications__more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-32);
}

.publications__more [hidden] {
    display: none;
}

/* The bar sits where the first row will appear, so the eye is already in the right place when
   the list arrives. Centred because the status line under it is. */
.publications__loading {
    display: flex;
    justify-content: center;
    padding-block: var(--space-32);
}

.publications__loading[hidden] {
    display: none;
}

/* ---------- Publication disclosure ----------

   A row's title opens the rest of the record underneath it. The row itself is the shared reference
   list component, which About Us also uses, so none of this touches it: the trigger sits inside the
   existing h2 and inherits its type, and the panel is one more child of .reference-list__main, so
   it opens under the whole entry and inside the same column the title and authors already sit in.

   The behaviour is capability-card.js's -- a button carrying aria-expanded beside a panel carrying
   hidden -- so these styles follow that component's: the chevron turns over on open, the trigger
   drops its lower padding to close the gap to the panel, and both transitions are the 150ms ease
   used everywhere else. */
.publication-item__trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);
    width: 100%;
    padding: 0;
    /* The title's own type, taken from the h2 this sits in rather than restated. */
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 150ms ease;
}

.publication-item__trigger:hover {
    color: var(--brand-blue-500);
}

.publication-item__trigger:focus-visible {
    outline: 2px solid var(--brand-blue-500);
    outline-offset: 2px;
}

/* The chevron is a line-height tall so it centres on the title's FIRST line rather than on a
   two-line block, which is where the eye looks for it. */
.publication-item__icon {
    flex-shrink: 0;
    height: var(--type-heading-xs-line);
    color: var(--black-48);
    transition: transform 150ms ease;
}

.publication-item__trigger[aria-expanded='true'] .publication-item__icon {
    transform: rotate(180deg);
}

/* Grey at rest so it reads as an affordance rather than a second piece of the title; it takes the
   trigger's colour on hover, and the rotation above is what marks the open state. */
.publication-item__trigger:hover .publication-item__icon {
    color: inherit;
}

/* Set off from the entry above it by a rule rather than by space alone: the rows are only separated
   by space themselves, so an open panel needs something that says it belongs to the row it opened
   from and not to the next one. */
.publication-item__panel {
    margin-top: var(--space-16);
    padding-left: var(--space-16);
    border-left: 2px solid var(--black-12);
}

.publication-item__panel[hidden] {
    display: none;
}

.publication-item__abstract {
    margin: 0;
    font-size: var(--type-body-md-size);
    line-height: var(--type-body-md-line);
    color: var(--black-80);
}

.publication-item__abstract + .publication-item__abstract {
    margin-top: var(--space-12);
}

.publication-item__fields {
    margin: var(--space-16) 0 0;
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line);
    color: var(--black-64);
}

/* The same uppercase caption the section heads wear, in the row's own grey rather than the head's
   teal: this labels a line inside a panel, it does not open a section. */
.publication-item__fields-label {
    display: block;
    font-size: var(--type-caption-sm-size);
    font-weight: var(--caption-weight);
    letter-spacing: var(--type-caption-sm-track);
    text-transform: uppercase;
    color: var(--black-48);
}

.publication-item__link {
    display: inline-block;
    margin-top: var(--space-16);
    font-size: var(--type-body-sm-size);
    font-weight: var(--body-weight-bold);
    line-height: var(--type-body-sm-line);
    color: var(--brand-blue-500);
}