.smart-houses {
  display: flex
}

.smart-houses .smart-house {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(65, 68, 73, 0.2);
  display: flex;
  flex: 1;
  position: relative
}

.smart-houses .smart-house a {
  color: inherit;
  display: flex;
  flex: 1;
  text-decoration: none
}

.smart-houses .smart-house-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px
}

.smart-houses .smart-house-inner:hover .smart-house-motto {
  transform: translateY(0);
  transition: transform .2s ease-in-out
}

.smart-houses.smart-houses-list {
  flex-direction: column
}

.smart-houses.smart-houses-list .smart-house {
  margin-bottom: 16px
}

.smart-houses.smart-houses-list .smart-house:last-of-type {
  margin-bottom: 0
}

.smart-houses.smart-houses-blocks {
  flex-direction: row
}

.smart-houses.smart-houses-blocks .smart-house {
  flex: 1;
  margin-right: 20px;
  min-height: 180px
}

.smart-houses.smart-houses-blocks .smart-house:last-of-type {
  margin-right: 0
}

.smart-houses.smart-houses-blocks .smart-house-inner {
  padding: 20px
}

.smart-houses.smart-houses-blocks .smart-house-motto {
  align-items: flex-end;
  padding-right: 20px;
  padding-top: 70px
}

.smart-houses .smart-house-name {
  color: #414449;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5
}

/*
 * Never break a total between its digits: UCL Academy's showed "60,96" over
 * "9". The theme lets long words break anywhere they overflow.
 */
.smart-houses .smart-house-points {
  font-size: 36px;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal
}

.smart-houses .smart-house-points-value {
  white-space: nowrap
}

.smart-houses .smart-house-points-label {
  font-size: 15px;
  font-weight: 600
}

/* Migrated sites' "pts": it ran into the number, the same size ("33pts"). */
.smart-houses .smart-house-points > span:not([class]) {
  font-size: .42em;
  font-weight: 600;
  margin-left: .2em
}

/*
 * Room for the crest beside the name, and on a narrow card - six houses in a
 * row, or two to a row on a phone - the crest on top and the name under it,
 * centred. Keeping the room on every card split Blackwood's names mid-word.
 * Not on a site that restyled its houses (see siteRestyled() in
 * smart-houses-display.php): it stacked UCL Academy's names one letter to a
 * line and cut off St Oscar Romero's.
 */
.smart-houses:not(.smart-houses-restyled) .smart-house {
  container-type: inline-size
}

.smart-houses:not(.smart-houses-restyled) .smart-house-name {
  padding-right: 60px
}

@container (max-width: 219px) {
  .smart-houses:not(.smart-houses-restyled) .smart-house-inner {
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center
  }

  /* Sized to the card, so six houses in a column still fit "43,834". */
  .smart-houses:not(.smart-houses-restyled) .smart-house-name {
    font-size: clamp(13px, 11cqi, 18px);
    padding-right: 0
  }

  .smart-houses:not(.smart-houses-restyled) .smart-house-points {
    font-size: clamp(18px, 19cqi, 36px)
  }

  .smart-houses:not(.smart-houses-restyled) .smart-house-points-label {
    display: block;
    font-size: clamp(12px, 9cqi, 15px)
  }

  .smart-houses:not(.smart-houses-restyled) .smart-house-logo {
    flex: none;
    margin-bottom: 8px;
    order: -1;
    position: relative;
    right: auto;
    top: auto
  }
}

/* A restyled site's points never had this word under them: UCL's ran out of its pennants. */
.smart-houses-restyled .smart-house-points-label {
  display: none
}

/*
 * The crest used to hang 10px outside the card's top-right corner. The last
 * card's crest was cut off by any column that hides overflow, and on a phone
 * it pushed the page sideways. It now sits inside the corner.
 */
.smart-houses .smart-house-logo {
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(65, 68, 73, 0.2);
  height: 56px;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 56px;
  z-index: 2
}

/*
 * The whole crest, inside the circle. It was cropped to fill the circle, so a
 * tall shield lost its top and bottom. Native SmartPress-4 houses only:
 * migrated SP3 sites keep the look they were migrated with, and so does a
 * site that restyled its crests (the padding shrank UCL Academy's pennants).
 */
.smart-houses-native:not(.smart-houses-restyled) .smart-house-logo {
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: contain;
  box-sizing: border-box;
  padding: 6px
}

/*
 * No crest uploaded: a shield in the house colour with its initial
 * (defaultCrest() in smart-houses-display.php), in place of an empty circle.
 * !important because a migrated site's template colours the crest inline.
 */
.smart-houses .smart-house-logo.smart-house-logo-default {
  background: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(65, 68, 73, .35));
  padding: 0
}

.smart-houses .smart-house-crest {
  display: block;
  height: 100%;
  overflow: visible;
  width: 100%
}

.smart-houses .smart-house-crest text {
  font-family: inherit
}

/* A migrated template's motto panel with nothing in it. */
.smart-houses .smart-house-motto-mask:has(> .smart-house-motto:empty) {
  display: none
}

.smart-houses .smart-house-motto-mask {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1
}

.smart-houses .smart-house-motto {
  bottom: 0;
  color: #fff;
  display: flex;
  left: 0;
  line-height: 1.5;
  padding: 20px 75px 16px 20px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(100%);
  transition: transform .15s ease-in-out
}

/*
 * Phones: the cards stayed in one row however narrow the screen, so four
 * houses were squeezed to a quarter of a phone each, names hidden under the
 * crests and the last houses off the edge. Two to a row instead.
 */
@media (max-width: 600px) {
  .smart-houses.smart-houses-blocks {
    flex-wrap: wrap;
    gap: 12px
  }

  .smart-houses.smart-houses-blocks .smart-house {
    flex: 1 1 calc(50% - 6px);
    margin-right: 0;
    min-height: 0
  }

  .smart-houses.smart-houses-blocks .smart-house-inner {
    padding: 14px
  }

  .smart-houses .smart-house-name {
    font-size: 16px
  }

  .smart-houses .smart-house-points {
    font-size: 28px
  }

  .smart-houses .smart-house-logo {
    height: 40px;
    right: 10px;
    top: 10px;
    width: 40px
  }
}

/*
 * Touch screens cannot hover, so the motto never slid into view. Show it
 * under the points instead.
 */
@media (hover: none) {
  .smart-houses .smart-house-motto-mask {
    margin-top: 10px;
    overflow: visible;
    position: static
  }

  .smart-houses .smart-house-motto,
  .smart-houses.smart-houses-blocks .smart-house-motto {
    border-radius: 4px;
    font-size: 13px;
    padding: 4px 8px;
    position: static;
    transform: none;
    transition: none
  }
}