/**
 * CSS for News Blocks
 */
/* Bootstrap 5 dropped .btn-default, so the "Read more" button and the Prev/Next
 * pagination render as bare text: measured transparent background and
 * transparent border against v3's white fill, 1px #ccc border and 12px text.
 * No stock BS5 class reproduces it - .btn-secondary is solid grey with white
 * text, .btn-light is a grey fill with no visible border - so the v3 values are
 * restored here rather than by swapping the class in the template, which would
 * also change what a school's own CSS can target.
 *
 * Scoped to .news-blocks: .btn-default does not exist in SP4, and defining it
 * globally would resurrect a Bootstrap 3 class estate-wide.
 *
 * The scope goes in :where() so it costs no specificity. Bootstrap 3's
 * .btn-default was (0,1,0), and a school styling .btn in its own smart_css -
 * Gesher paints it brand yellow - is also (0,1,0), so on v3 the school's rule
 * won on document order. Written as `.news-blocks .btn-default` this would be
 * (0,2,0) and would beat them, turning a deliberately yellow button white:
 * a divergence from v3 introduced by the very rule meant to restore it.
 * :where() keeps the weight at (0,1,0), exactly as v3 had it.
 *
 * The v3 values go in through Bootstrap 5's own --bs-btn-* variables rather
 * than raw properties. .btn:hover and .btn:focus-visible (0,2,0) and
 * .btn:active (0,3,0) outrank this rule and take the fill, border and text
 * colour from var(--bs-btn-hover-*) and var(--bs-btn-active-*), which only
 * Bootstrap's colour variants set - on a bare .btn they are unset or
 * transparent. So with raw properties the button went transparent with a
 * transparent border the moment it was hovered or focused, and on click the
 * border took the text colour. v3 held #ebebeb with an #adadad border in all
 * three states. */
:where(.news-blocks) .btn-default {
  --bs-btn-color: #333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: #ebebeb;
  --bs-btn-hover-border-color: #adadad;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: #ebebeb;
  --bs-btn-active-border-color: #adadad;
  --bs-btn-focus-shadow-rgb: 102, 175, 233; }
:where(.news-blocks) .btn-sm {
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 10px; }
/* Bootstrap 5 renamed .pull-right to .float-end, so the pagination's Next
 * button lost its float and sits at the left of the row, against Prev: measured
 * at x=82 on UCL Academy's /about-us/academy-news/ (1280px) against v3's x=809,
 * flush with the right edge of the row. Restored here, as .btn-default is
 * above, rather than by swapping the class in the template.
 *
 * Bootstrap 3 declared it `float: right !important` at (0,1,0), and :where()
 * keeps that weight, so a school's own float rule loses to it as on v3.
 *
 * The row still contains the float without a clearfix: .news-blocks is a .row,
 * a flex container in Bootstrap 5, and a flex item establishes its own
 * formatting context. v3 got the same containment from col-xs-12 being a float
 * itself. */
:where(.news-blocks) .pull-right {
  float: right !important; }
.news-blocks .block-style-list .block {
  animation: loadUp 0.4s ease-in-out;
  animation-fill-mode: forwards;
  margin-bottom: 20px;
  opacity: 0; }
  /* The row's two columns have to float.
   *
   * The template nests an anchor inside an anchor - the "Read more" button sits
   * inside .block-post-info, which is itself inside the <a> wrapping the whole
   * row. That is invalid HTML, so the parser closes the outer anchor early and
   * .block-post-info ends up a SIBLING of the anchor rather than a child of it.
   * The two columns therefore never share a parent.
   *
   * Bootstrap 3 did not care, because col-xs-* are floats and floats lay out
   * against the nearest block container (.block) whatever the nesting, with
   * .clearfix cleaning up after them. Bootstrap 5 col-* are flex children with
   * no float, so on SP4 the same markup stacks the text under the image -
   * measured 0/0/300 + 300/0/900 on v3 against 0/0/300 + 0/160/900 here.
   * display:flex cannot fix it: the only flex parent available is the anchor,
   * which contains just the image. */
  .news-blocks .block-style-list .block .block-post-image {
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 4px;
    float: left;
    height: 140px;
    overflow: hidden; }
    @media (min-width: 992px) {
      .news-blocks .block-style-list .block .block-post-image {
        height: 160px; } }
    .news-blocks .block-style-list .block .block-post-image:hover {
      opacity: 0.9;
      transition: opacity 0.25s ease-in-out; }
  .news-blocks .block-style-list .block .block-post-info {
    float: left; }
  .news-blocks .block-style-list .block .block-post-info a {
    color: #606060; }
  .news-blocks .block-style-list .block .block-post-info .block-post-title {
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0.25em; }
  .news-blocks .block-style-list .block .block-post-info .block-post-date {
    color: #999;
    display: block;
    font-size: 0.8em;
    margin-bottom: 0.5em; }
.news-blocks .block-style-grid .block {
  animation: loadUp 0.4s ease-in-out;
  animation-fill-mode: forwards;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 4px;
  height: 200px;
  margin-bottom: 20px;
  opacity: 0;
  overflow: hidden;
  position: relative; }
  @media (min-width: 992px) {
    .news-blocks .block-style-grid .block {
      height: 240px;
      margin-bottom: 30px; } }
  .news-blocks .block-style-grid .block > a {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0; }
  .news-blocks .block-style-grid .block .block-post-info {
    background: rgba(0, 0, 0, 0.75);
    bottom: 0;
    left: 0;
    padding: 1em 1.2em;
    position: absolute;
    width: 100%; }
    .news-blocks .block-style-grid .block .block-post-info .block-post-title {
      color: white;
      display: block;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 0.25em; }
    .news-blocks .block-style-grid .block .block-post-info .block-post-date {
      color: rgba(255, 255, 255, 0.5);
      display: block; }
  .news-blocks .block-style-grid .block:hover > a {
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.25s ease-in-out; }
.news-blocks .block-wrapper:nth-child(1) .block {
  animation-delay: 0.5s; }
.news-blocks .block-wrapper:nth-child(2) .block {
  animation-delay: 0.7s; }
.news-blocks .block-wrapper:nth-child(3) .block {
  animation-delay: 0.9s; }
.news-blocks .block-wrapper:nth-child(4) .block {
  animation-delay: 0.9s; }
.news-blocks .block-wrapper:nth-child(5) .block {
  animation-delay: 0.9s; }
.news-blocks .block-wrapper:nth-child(6) .block {
  animation-delay: 0.9s; }
.news-blocks .block-wrapper:nth-child(7) .block {
  animation-delay: 0.9s; }
.news-blocks .block-wrapper:nth-child(8) .block {
  animation-delay: 0.9s; }
.news-blocks .block-wrapper:nth-child(9) .block {
  animation-delay: 0.9s; }
.news-blocks .block-wrapper:nth-child(10) .block {
  animation-delay: 0.9s; }

@keyframes loadUp {
  from {
    opacity: 0;
    transform: translateY(15px); }
  to {
    opacity: 1;
    transform: translateY(0); } }