/*
  Talks & Teaching (sections/talks.html).

  Two ROWS on a laptop and up, so cards side by side share their top and
  bottom edges: the Miro card beside Teaching, then the two talks beside
  "Invite me to speak", which carries the photography line. It was two
  independent columns with the photography line in a card of its own, and
  the user found the ragged edges unbalanced. Below 1024px everything stacks
  in reading order.

  Type is sized against the viewport's HEIGHT as well as its width, like the
  landing page, because the screen has to clear one fold from 1280x720 up and
  the video thumbnails are the tallest thing on it.
*/

.talks {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas:
    "miro teach"
    "talks speak";
  gap: clamp(var(--space-3), 2vh, var(--space-4));
}

.talks__miro {
  grid-area: miro;
}

.talks__talks {
  grid-area: talks;
  display: grid;
}

.talks__teach {
  grid-area: teach;
}

.talks__speak {
  grid-area: speak;
}

.talks .card {
  padding: clamp(var(--space-3), 2.2vh, var(--space-4));
}

.talks__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.55rem + 1.3vh, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--card-text);
  text-wrap: balance;
}

.talks__copy {
  margin: 0;
  font-size: clamp(0.9rem, 0.6rem + 0.75vh, 1.1rem);
  line-height: 1.45;
}

.talks .card .talks__copy strong {
  color: var(--card-text);
}


/* ---- The ambassador card ---- */

.talks__miro {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 2vw, var(--space-4));
}

.talks__miro .talks__name {
  margin-bottom: 0.35em;
}

.talks__badge {
  flex: none;
  width: auto;
  height: clamp(5rem, 11vh, 8rem);
  aspect-ratio: 320 / 337;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
}


/* ---- Talks ----
   A card per talk: the thumbnail, then its title and one line. The
   thumbnail is a link to YouTube until js/video-card.js turns it into the
   player.

   Two show at a time and the row scrolls sideways (js/carousel.js adds the
   arrows once it overflows). Three across made the thumbnails too small, and
   a second row ran past the fold at 1280x720. Sizes are in container units
   of the column so the arrows can sit on the thumbnails' middle line. */

.talks__talks {
  --talk-gap: clamp(var(--space-3), 2vh, var(--space-4));
  --talk-pad: var(--space-2);
  --talk-w: calc((100cqi - var(--talk-gap)) / 2);
  /* How far a card's shadow and glow reach: the scroller's padding, so its
     overflow doesn't cut them off above and below. */
  --talk-bleed-top: 2.5rem;
  --talk-bleed-bottom: 5rem;
  position: relative;
  container-type: inline-size;
}

/* The bleed hangs 50px past the screen's foot at 1280x720, into space the
   section's `overflow: hidden` (css/layout.css) cuts off. Hidden is still
   scrollable by script, though, and the track's snapping after an arrow
   click scrolled the whole screen up by that much. `clip` cuts off the same
   and can't be scrolled. Flow mode (below 1024px) is `visible`; left alone. */
@media (min-width: 1024px) {
  .section[data-section="talks"] {
    overflow: clip;
  }
}

.talks__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--talk-w);
  gap: var(--talk-gap);
  margin-block: calc(-1 * var(--talk-bleed-top)) calc(-1 * var(--talk-bleed-bottom));
  padding-block: var(--talk-bleed-top) var(--talk-bleed-bottom);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.talks__list::-webkit-scrollbar {
  display: none;
}

.talks__list > .talk {
  scroll-snap-align: start;
}

/* Round buttons over the thumbnails, just inside the outer cards' edges,
   centred on the thumbnail: the card's top padding plus half a 16:9 image
   the card's width less its padding. */
.talks__arrow {
  position: absolute;
  z-index: 1;
  top: calc(var(--talk-pad) + (var(--talk-w) - 2 * var(--talk-pad)) * 9 / 32);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: clamp(2.25rem, 5.5vh, 2.75rem);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(16, 10, 28, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
  transition: background-color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.talks__arrow[hidden] {
  display: none;
}

.talks__arrow--prev {
  left: calc(var(--talk-pad) + 0.5rem);
}

.talks__arrow--next {
  right: calc(var(--talk-pad) + 0.5rem);
}

.talks__arrow svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.talks__arrow:hover {
  background-color: rgba(16, 10, 28, 0.82);
  transform: scale(1.06);
}

.talks__arrow:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* At an end: still there, so the other arrow doesn't look lopsided, but
   plainly spent. */
.talks__arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.talk {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.talks .talk {
  padding: var(--talk-pad) var(--talk-pad) clamp(var(--space-3), 2vh, var(--space-4));
}

.talk > :not(.talk__media) {
  margin-inline: var(--talk-pad);
}

.talk__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.35em;
  overflow: hidden;
  border-radius: calc(var(--card-radius) - var(--space-2));
  background: #000;
}

.talk__media img,
.talk__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.talk__media img {
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.3, 1), filter 350ms ease;
}

.talk__play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: clamp(3rem, 7vh, 4.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: linear-gradient(145deg, var(--coral-400), var(--coral-600));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 24px -6px rgba(0, 0, 0, 0.6);
  transition: transform 200ms ease;
}

.talk__play svg {
  width: 48%;
  height: 48%;
  fill: currentColor;
  /* The triangle's optical centre sits left of its box's. */
  translate: 6% 0;
}

.talk__media:hover img,
.talk__media:focus-visible img {
  transform: scale(1.03);
  filter: brightness(0.85);
}

.talk__media:hover .talk__play,
.talk__media:focus-visible .talk__play {
  transform: scale(1.08);
}

.talk__media:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.talk__title {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.55rem + 1vh, 1.3rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--card-text);
  text-wrap: balance;
}

/* The bottom margin is the least room above the transcript pill, whose
   `margin-top: auto` only takes up what the row has spare. */
.talk__desc {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: clamp(0.85rem, 0.6rem + 0.6vh, 1rem);
  line-height: 1.4;
}


/* "Read transcript": a small outlined pill at the card's foot, so the three
   buttons line up across the row whatever the lines above them run to. */
.talk__transcript {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: auto;
  padding: 0.45em 0.9em;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--card-text-accent);
  font: 600 clamp(0.75rem, 0.55rem + 0.5vh, 0.875rem) / 1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.talk__transcript .icon {
  width: 1.15em;
  height: 1.15em;
}

.talk__transcript:hover {
  background-color: rgba(242, 117, 92, 0.12);
  border-color: var(--coral-400);
}

.talk__transcript:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}


/* ---- The transcript modal (js/transcript.js) ----
   Dressed like the lightbox (css/lightbox.css), at the user's request: the
   same dim, the same frosted mat round the content, the same round close
   button on the frame's corner (it IS .lightbox__close). The content is a
   page of text instead of a picture, on the card surface so it reads in
   both themes, at a comfortable line length rather than the screen's. */
.transcript {
  width: min(760px, 94vw);
  max-width: none;
  max-height: 94vh;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--card-text);
  overflow: visible;
}

.transcript::backdrop {
  background: rgba(10, 8, 18, 0.82);
  backdrop-filter: blur(6px);
}

/* The close button is positioned against this. */
.transcript__inner {
  position: relative;
}

/* The lightbox's mat. */
.transcript__frame {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 94vh;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--frame-line);
  background: linear-gradient(180deg, var(--frame-top), var(--frame-bottom));
  box-shadow: var(--frame-shadow);
}

/* Where the lightbox has its caption, but above the page: the title is
   what the reader checks first. */
.transcript__head {
  padding: var(--space-2) calc(var(--space-4) + 20px) 0;
  text-align: center;
}

.transcript .transcript__kicker {
  margin: 0 0 0.25em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--card-text-accent);
}

.transcript__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--card-text);
  text-wrap: balance;
}

/* The talk's own page (talks/<slug>/): for a reader who wants to link to
   it or read it without the dim. */
.transcript__page {
  display: inline-block;
  margin-top: 0.35em;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--card-text-accent);
}

.transcript__page:hover {
  color: var(--card-text);
}

/* The page, where the lightbox has its picture: the same 12px corners
   inside the mat. */
.transcript__body {
  min-height: 6rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: linear-gradient(var(--card-fill-top), var(--card-fill-bottom));
  font-size: 1rem;
  line-height: 1.65;
}

.transcript__body:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.transcript .transcript__body p {
  margin: 0 0 1em;
  color: var(--card-text);
}

.transcript .transcript__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .transcript__body {
    padding: var(--space-3);
  }
}

/* An audience question or an interviewer: set off to the side, in the
   muted tone, so the speaker's answer that follows reads as the main text.
   Unscoped (`p.` for weight over cards.css's `.card p`), because the talk
   pages (css/talk-page.css) print the same markup outside the modal. */
p.transcript__q {
  padding-left: 0.9em;
  border-left: 3px solid var(--coral-400);
  color: var(--card-text-muted);
  font-style: italic;
}

.transcript__q strong {
  color: var(--card-text-accent);
  font-style: normal;
  font-weight: 700;
}

/* A time call, an announcement, or an off-mic question paraphrased. */
.transcript__note {
  color: var(--card-text-muted);
}

.transcript .transcript__body .transcript__status {
  color: var(--card-text-muted);
  font-style: italic;
}

/* The lightbox's width below a laptop, so the close button (which moves to
   -10px there, css/lightbox.css) still clears the screen's edge. */
@media (max-width: 1023.98px) {
  .transcript {
    width: 94vw;
  }
}


/* ---- The right column ---- */

.talks__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(0.4rem, 2.2vh - 0.6rem, 1rem);
}

.talks__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(2.25rem, 5vh, 3rem);
  aspect-ratio: 1;
  border-radius: 30%;
  background-image: linear-gradient(145deg, var(--coral-400), var(--coral-600));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 18px -8px rgba(226, 80, 58, 0.75);
}

.talks__icon .icon {
  width: 56%;
  height: 56%;
}

.talks__courses {
  display: grid;
  gap: clamp(0.6rem, 1.6vh, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The Resume's logo tiles (.logo in css/content.css, filled by
   js/resume.js), at one fixed size so the two rows line up. */
.talks__course {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.talks__course > .logo {
  width: clamp(4.5rem, 6vw, 5.5rem);
  height: clamp(2.25rem, 3vw, 2.75rem);
}

.talks .card .talks__course-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.6rem + 0.85vh, 1.2rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--card-text);
}

.talks .card .talks__course-where {
  margin: 0.1em 0 0;
  font-size: clamp(0.85rem, 0.6rem + 0.6vh, 1rem);
  line-height: 1.4;
  color: var(--card-text-muted);
}

/* The two schools' marks, inline after "for", sized to the line like the
   timeline's (.tl__schools). */
.talks__schools {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  vertical-align: middle;
}

.talks__schools .logo {
  height: 1.6em;
  width: calc((1.6em - 0.4em - 2px) * var(--ar, 2.7) + 0.7em + 2px);
  padding: 0.2em 0.35em;
  border-radius: 0.4em;
}

.talks__topics {
  display: grid;
  gap: 0.3em;
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.9rem, 0.6rem + 0.75vh, 1.1rem);
  line-height: 1.35;
  color: var(--card-text);
}

.talks__topics li {
  position: relative;
  padding-left: 1.1em;
}

.talks__topics li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--coral-400);
}

/* The card runs to the talks' height; the button sits at its foot. */
.talks__speak {
  display: flex;
  flex-direction: column;
}

.talks .talks__cta {
  margin: auto 0 0;
  padding-top: clamp(0.6rem, 3vh - 0.9rem, 1.25rem);
  text-align: center;
}

/* The quiet outline button, at the lock screen's "Browse My Background"
   size: the band's Back/Next are the screen's primary controls, and a full
   primary pill here was the biggest button in the deck (the user's call,
   2026-09-18). */
.talks .talks__cta .btn {
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem);
  padding: 0.8em 1.6em;
}

/* The photography talks: an aside, so a quieter line under the topics,
   set off by a hairline. */
.talks .card .talks__beyond {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: clamp(0.45rem, 2.4vh - 0.75rem, 1rem) 0 0;
  padding-top: clamp(0.45rem, 2.4vh - 0.75rem, 1rem);
  border-top: 1px solid var(--card-divider);
  font-size: clamp(0.8rem, 0.55rem + 0.6vh, 0.95rem);
  line-height: 1.4;
}

.talks__beyond .icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.05em;
  color: var(--card-text-accent);
}

.talks .card .talks__beyond strong {
  color: var(--card-text);
}

@media (prefers-reduced-motion: reduce) {
  .talk__media img,
  .talk__play,
  .talks__arrow,
  .talk__transcript {
    transition: none;
  }
}


/* ---- Narrow laptops, 1024-1279px ----
   The columns are narrow here, so every title and the button wrapped and the
   screen ran 64px past the fold at 1024x768. Moving the photography line or
   evening the columns only moved the overflow from one column to the other
   (the thumbnails get taller as the left column widens), so what changes is
   the type and the padding: a step smaller, the same composition. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .talks {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .talks {
    gap: 0.625rem;
  }

  .talks__talks {
    --talk-gap: 0.625rem;
    --talk-pad: 0.375rem;
  }

  .talks .card {
    padding: 0.875rem;
  }

  .talks .talk {
    padding-bottom: 0.75rem;
  }

  .talk__media {
    border-radius: calc(var(--card-radius) - 0.375rem);
  }

  .talks__name {
    font-size: 1rem;
  }

  .talks__copy,
  .talks__topics {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .talk__title,
  .talks .card .talks__course-name {
    font-size: 0.875rem;
  }

  .talk__desc,
  .talks .card .talks__course-where,
  .talks .card .talks__beyond {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .talks__badge {
    height: 4.5rem;
  }

  .talks__head {
    margin-bottom: 0.5rem;
  }

  .talks__icon {
    width: 2rem;
  }

  .talks .talks__cta {
    margin-top: 0.75rem;
  }

}


/* ---- Below a laptop: one column, in reading order ---- */
@media (max-width: 1023.98px) {
  .talks {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "miro" "talks" "teach" "speak";
  }
}

@media (max-width: 640px) {
  /* A plain stack on a phone (the user's call, 2026-09-18): the page
     already scrolls down, so a sideways row inside it is one gesture too
     many. Nothing overflows, so js/carousel.js leaves the arrows hidden. */
  .talks__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .talks__miro {
    align-items: flex-start;
  }

  .talks__badge {
    height: 4.5rem;
  }
}