/* Talk pages: the Event, Date and Speaker callout in the hero, the square talk thumbnail, and the small talks block.
   Loaded by talk pages, the home page and the technical pages that show the small block. */

/* Hero callout: three labelled cells in one panel. Values at body size, labels in the mono label style, a line icon in the site blue before each label. */
.s7-talk-facts {
  display: inline-grid;
  grid-auto-flow: column;
  margin: 0 0 1.25rem;
  padding: 0;
  max-width: 100%;
  border: 1px solid var(--brand--lines);
  border-radius: 1rem;
  background: rgba(7, 7, 9, 0.24);
}

.s7-talk-facts__cell {
  min-width: 0;
  padding: 0.9rem 1.4rem 1rem;
  border-left: 1px solid var(--brand--lines);
}

.s7-talk-facts__cell:first-child {
  border-left: 0;
}

.s7-talk-facts__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  color: var(--text--alternate);
  font-family: Ibmplexmono, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.s7-talk-facts__icon {
  display: inline-flex;
  flex: none;
  color: var(--brand--accent);
}

.s7-talk-facts__value {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.4;
}

.s7-talk-facts__value a {
  color: var(--brand--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.s7-talk-facts__value a:hover,
.s7-talk-facts__value a:focus-visible {
  color: var(--brand--secondary);
}

@media screen and (max-width: 767px) {
  .s7-talk-facts {
    display: grid;
    grid-auto-flow: row;
    width: 100%;
  }

  .s7-talk-facts__cell {
    padding: 0.85rem 1.1rem 0.95rem;
    border-left: 0;
    border-top: 1px solid var(--brand--lines);
  }

  .s7-talk-facts__cell:first-child {
    border-top: 0;
  }
}

/* Square talk thumbnail, drawn from the talk's data: label, the slide whole with a play mark, the event. It scales with its box. */
.s7-talk-square {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0a0a0c;
  color: #ffffff;
}

.s7-talk-square__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4cqw;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 7cqw;
}

.s7-talk-square__label {
  color: var(--brand--accent);
  font-family: Notosans, sans-serif;
  font-size: clamp(0.6875rem, 3.4cqw, 0.875rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.s7-talk-square__slide {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--brand--lines);
  border-radius: 1.5cqw;
}

.s7-talk-square__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s7-talk-square__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11cqw;
  height: 11cqw;
  margin: -5.5cqw 0 0 -5.5cqw;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.78);
}

.s7-talk-square__play::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2.2cqw 0 0 -1.4cqw;
  border-style: solid;
  border-width: 2.2cqw 0 2.2cqw 3.6cqw;
  border-color: transparent transparent transparent #ffffff;
}

.s7-talk-square__event {
  color: var(--text--alternate);
  font-family: Notosans, sans-serif;
  font-size: clamp(0.75rem, 3.4cqw, 0.9375rem);
  line-height: 1.3;
}

/* Narrow square (the small talks block): the slide and play mark only. */
@container (max-width: 160px) {
  .s7-talk-square__inner {
    justify-content: center;
    padding: 8cqw;
  }

  .s7-talk-square__label,
  .s7-talk-square__event {
    display: none;
  }

  .s7-talk-square__play {
    width: 24cqw;
    height: 24cqw;
    margin: -12cqw 0 0 -12cqw;
  }

  .s7-talk-square__play::before {
    margin: -5cqw 0 0 -3cqw;
    border-width: 5cqw 0 5cqw 8cqw;
  }
}

/* "More to read" card on a talk page: a true square frame, nothing cut. */
.resource-blog_image-wrapper.s7-talk-square-frame {
  width: 100%;
  padding-top: 0;
  aspect-ratio: 1 / 1;
  background: #0a0a0c;
}

.s7-talk-square-frame .s7-talk-square {
  height: 100%;
}

/* Small talks block: a short list of linked rows. */
.s7-talks-small__heading {
  margin: 0 0 1.25rem;
}

.s7-talks-small__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s7-talks-small__row {
  margin: 0;
  padding: 0;
}

.s7-talks-small__link {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  color: inherit;
  text-decoration: none;
}

.s7-talks-small__link:focus-visible {
  outline: 2px solid var(--brand--accent);
  outline-offset: 4px;
  border-radius: 0.75rem;
}

.s7-talks-small__thumb {
  display: block;
  flex: none;
  width: 5.5rem;
  overflow: hidden;
  border: 1px solid var(--brand--lines);
  border-radius: 0.75rem;
}

.s7-talks-small__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  text-align: left;
}

.s7-talks-small__title {
  color: #ffffff;
  font-family: Ibmplexmono, monospace;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  transition: color 0.2s;
}

.s7-talks-small__link:hover .s7-talks-small__title,
.s7-talks-small__link:focus-visible .s7-talks-small__title {
  color: var(--brand--secondary);
}

.s7-talks-small__meta {
  color: var(--text--alternate);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.s7-talks-small__go {
  color: var(--brand--accent);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.s7-talks-small__go::after {
  content: ' \203A';
}

.s7-talks-small__link:hover .s7-talks-small__go,
.s7-talks-small__link:focus-visible .s7-talks-small__go {
  color: var(--brand--secondary);
}

@media screen and (max-width: 767px) {
  .s7-talks-small__link {
    gap: 1rem;
  }
}

/* Desktop: two talks side by side (Ben, 11 Nov 2026: "this could be 2 columns on desktop"). One talk keeps the full row. */
@media screen and (min-width: 768px) {
  .s7-talks-small__list:has(> .s7-talks-small__row:nth-child(2)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.5rem;
    align-items: start;
  }
}

/* Speaker rows under the callout stay a photo beside the name on a phone (the base style stacks and centres them). */
@media screen and (max-width: 767px) {
  .s7-talk-speakers .s7-talk-speakers__item {
    flex-flow: row;
    align-items: center;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .s7-talk-speakers .blog-post-header_author-image-wrapper {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 50%;
  }

  .s7-talk-speakers .blog-post-header_author-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .s7-talk-speakers .text-size-small.authorbio,
  .s7-talk-speakers .authorbio {
    text-align: left;
  }
}