/*
 * speaker-orgs.css — Legal Marketing Speaker "Speaking for..." logos.
 *
 * Cream surface. Heading + intro, then three labelled groups, each a
 * 4-up logo grid (Figma 513:8016). Group label is prefixed by a short
 * 40px rule. Logos sit centred in 100px-tall cells, rendered greyscale
 * + slightly dimmed so the mixed-source marks read as one set; full
 * colour + opacity on hover.
 *
 * Grid: 2-up mobile, 4-up tablet+.
 */

.tlm-speaker-orgs {
  background: var(--color-white);
  padding-block: var(--space-2xl);
}

.tlm-speaker-orgs__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* --- Head --- */

.tlm-speaker-orgs__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tlm-speaker-orgs__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2-mobile);          /* 32 mobile */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  text-wrap: balance;
}

.tlm-speaker-orgs__intro {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-navy-muted);
}

/* --- Logo grid --- */

.tlm-speaker-orgs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.tlm-speaker-orgs__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: var(--space-md);
}

.tlm-speaker-orgs__logo {
  display: block;
  max-width: 100%;
  max-height: 66px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Mixed-source logos read as one set: greyscale + dimmed at rest,
     full colour on hover. Guarded so touch taps don't stick. */
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 200ms ease, opacity 200ms ease;
}

@media (hover: hover) {
  .tlm-speaker-orgs__logo:hover {
    filter: grayscale(0);
    opacity: 1;
  }
}

/* --small: logos that render visually heavier than their neighbours
   (Clio, Law Society of Tasmania). Cap 20% smaller so the row reads evenly. */
.tlm-speaker-orgs__logo--small {
  max-height: 53px;   /* 66 * 0.8 */
  max-width: 80%;
}

/* --lexis: LexisNexis, capped 25% smaller per Paul. */
.tlm-speaker-orgs__logo--lexis {
  max-height: 49.5px;   /* 66 * 0.75 */
  max-width: 75%;
}

/* --xsmall: a further step down for the heaviest marks (ALTA, LawFest). */
.tlm-speaker-orgs__logo--xsmall {
  max-height: 42px;   /* 66 * 0.8 * 0.8 */
  max-width: 64%;
}

/* --large: logos that render visually lighter than neighbours (Icon).
   Bump 20% bigger. */
.tlm-speaker-orgs__logo--large {
  max-height: 79px;   /* 66 * 1.2 */
}

/* --- Tablet+: 4-up grid --- */

@media (min-width: 768px) {
  .tlm-speaker-orgs__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }

  .tlm-speaker-orgs__heading {
    font-size: var(--text-h3);               /* 40 — Figma group H2 */
  }
}

@media (min-width: 1024px) {
  .tlm-speaker-orgs {
    padding-block: var(--space-5xl);
  }

  .tlm-speaker-orgs__inner {
    gap: var(--space-2xl);
  }

  .tlm-speaker-orgs__heading {
    font-size: var(--text-h2);               /* 56 */
  }
}