/* =========================================================================
   Block · Item / Logo Row — Figma 7029:52838 (page Global: Blocks)
   A 1px Black 15 line on top (in the layout). The states are two layouts:
     State=Closed  Large: one row, spacing/stack-xl apart, centred — Logo
                   (249 × 60), Headline (Body/Default) growing, Category
                   (Label/Eyebrow, Black 50, right, 255 wide), chevron 44;
                   32 above and below.
                   Small: Category, then Logo (183 × 44) over the Headline
                   (12 apart) beside the chevron 32 (32 apart); 32 above and below.
     State=Open    Large: a row 32 apart, top-aligned — the text column
                   (Category; 40; Logo 312 × 111, then Headline in Body/Lead
                   over Body/Default 20 apart, then the CTA, spacing/stack-l
                   apart), the video (16:9, growing) and the chevron turned up.
                   Small: a column 20 apart — the text column (Category;
                   spacing/stack-l; Logo beside the chevron turned up, then the
                   text spacing/stack-m apart, then the CTA, 32 apart) over
                   the video. 32 above, 48 below.
     → .b-item-logo-row--open, .b-item-logo-row--large / --small
   The video: 16:9, radius/box, Gray/Placeholder under Black 20, the play
   button (Filled 44) 24 from its bottom-left corner.
   no_media (code only) → .b-item-logo-row--no-media: no preview; Large
   keeps its empty column so the words keep their measure.
   Hover (the old accordion's): a closed row a script makes clickable
   (.u-hit on __closed) turns its headline Blue; the chevron does its own.
   Raw in Figma: most distances here are Spacing primitives (space/8, 20,
   32, 48) instead of Breakpoint tokens; the logo boxes; the Category width
   255; the play button's 24; the chevron turned 180° for Open.
   ========================================================================= */
.b-item-logo-row {
  box-sizing: border-box;
  border-top: 1px solid var(--color-black-15);
  color: var(--color-black);
}
.b-item-logo-row__toggle { flex: none; display: flex; }
.b-item-logo-row__toggle--up { rotate: 180deg; }
.b-item-logo-row__logo { flex: none; display: block; background: var(--color-placeholder); }
.b-item-logo-row__logo:has(img) { background: none; }
.b-item-logo-row__logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }

/* Closed */
.b-item-logo-row__closed { padding-block: var(--space-32); }
.b-item-logo-row--large .b-item-logo-row__closed > .b-item-logo-row__category { display: none; }
.b-item-logo-row--large .b-item-logo-row__closed .b-item-logo-row__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-xl);
}
.b-item-logo-row--large .b-item-logo-row__closed .b-item-logo-row__tag { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--spacing-stack-xl); }
.b-item-logo-row--large .b-item-logo-row__closed .b-item-logo-row__logo { width: 249px; height: 60px; }
.b-item-logo-row--large .b-item-logo-row__closed .b-item-logo-row__headline { flex: 1 1 0; min-width: 0; }
.b-item-logo-row__category--side { flex: none; width: 255px; text-align: right; color: var(--color-black-50); }
.b-item-logo-row--small .b-item-logo-row__category--side { display: none; }
.b-item-logo-row--small .b-item-logo-row__closed { display: flex; flex-direction: column; gap: var(--space-32); }
.b-item-logo-row--small .b-item-logo-row__closed .b-item-logo-row__title { display: flex; align-items: center; justify-content: space-between; }
.b-item-logo-row--small .b-item-logo-row__closed .b-item-logo-row__tag { display: flex; flex-direction: column; gap: var(--space-12); }
.b-item-logo-row--small .b-item-logo-row__logo { width: 183px; height: 44px; }

/* Open */
.b-item-logo-row__open { display: flex; padding-top: var(--space-32); padding-bottom: var(--space-48); }
.b-item-logo-row--large .b-item-logo-row__open { align-items: flex-start; gap: var(--space-32); }
.b-item-logo-row--small .b-item-logo-row__open { flex-direction: column; gap: var(--space-20); }
.b-item-logo-row__main {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-8);
}
.b-item-logo-row--large .b-item-logo-row__main { flex: 1 1 0; min-width: 0; gap: var(--space-40); }
.b-item-logo-row--small .b-item-logo-row__main { gap: var(--spacing-stack-l); }
.b-item-logo-row__group { display: flex; flex-direction: column; align-items: flex-start; }
.b-item-logo-row--large .b-item-logo-row__group { gap: var(--spacing-stack-l); }
.b-item-logo-row--small .b-item-logo-row__group { gap: var(--space-32); }
.b-item-logo-row__open .b-item-logo-row__title { align-self: stretch; display: flex; align-items: center; justify-content: space-between; }
.b-item-logo-row--large .b-item-logo-row__open .b-item-logo-row__logo { width: 312px; height: 111.14px; }
.b-item-logo-row--large .b-item-logo-row__open .b-item-logo-row__title .b-item-logo-row__toggle { display: none; }
.b-item-logo-row__content { align-self: stretch; display: flex; flex-direction: column; }
.b-item-logo-row--large .b-item-logo-row__content { gap: var(--space-20); }
.b-item-logo-row--small .b-item-logo-row__content { gap: var(--spacing-stack-m); }

.b-item-logo-row__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--color-placeholder);
}
.b-item-logo-row__media::after { content: ""; position: absolute; inset: 0; background: var(--color-black-20); pointer-events: none; }
.b-item-logo-row--large .b-item-logo-row__media { flex: 1 1 0; min-width: 0; }
.b-item-logo-row__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-item-logo-row__media > .e-button-round { position: absolute; z-index: 1; left: var(--space-24); bottom: var(--space-24); }

.b-item-logo-row--no-media .b-item-logo-row__media { visibility: hidden; height: 0; aspect-ratio: auto; }
.b-item-logo-row--small.b-item-logo-row--no-media .b-item-logo-row__media { display: none; }

.b-item-logo-row__closed.u-hit { cursor: pointer; }
.b-item-logo-row__headline { transition: color var(--ds-title-duration) var(--ds-hover-ease); }
@media (any-hover: hover) {
  .b-item-logo-row__closed.u-hit:is(:hover, :has(:focus-visible)) .b-item-logo-row__headline { color: var(--color-blue); }
}
@media (prefers-reduced-motion: reduce) {
  .b-item-logo-row__headline { transition: none; }
}

/* Size auto (code only): the Small rules up to 1023, the Large ones from
   1024 — the same rules as above, on .b-item-logo-row--auto; the markup
   carries both chevrons of a closed row and the breakpoint shows one */
@media (max-width: 1023px) {
  .b-item-logo-row--auto .b-item-logo-row__category--side { display: none; }
  .b-item-logo-row--auto .b-item-logo-row__closed { display: flex; flex-direction: column; gap: var(--space-32); }
  .b-item-logo-row--auto .b-item-logo-row__closed .b-item-logo-row__title { display: flex; align-items: center; justify-content: space-between; }
  .b-item-logo-row--auto .b-item-logo-row__closed .b-item-logo-row__tag { display: flex; flex-direction: column; gap: var(--space-12); }
  .b-item-logo-row--auto .b-item-logo-row__logo { width: 183px; height: 44px; }
  .b-item-logo-row--auto .b-item-logo-row__open { flex-direction: column; gap: var(--space-20); }
  .b-item-logo-row--auto .b-item-logo-row__main { gap: var(--spacing-stack-l); }
  .b-item-logo-row--auto .b-item-logo-row__group { gap: var(--space-32); }
  .b-item-logo-row--auto .b-item-logo-row__content { gap: var(--spacing-stack-m); }
  .b-item-logo-row--auto.b-item-logo-row--no-media .b-item-logo-row__media { display: none; }
  .b-item-logo-row--auto .b-item-logo-row__toggle--l,
  .b-item-logo-row--auto .b-item-logo-row__open > .b-item-logo-row__toggle { display: none; }
}
@media (min-width: 1024px) {
  .b-item-logo-row--auto .b-item-logo-row__closed > .b-item-logo-row__category { display: none; }
  .b-item-logo-row--auto .b-item-logo-row__closed .b-item-logo-row__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-stack-xl);
  }
  .b-item-logo-row--auto .b-item-logo-row__closed .b-item-logo-row__tag { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--spacing-stack-xl); }
  .b-item-logo-row--auto .b-item-logo-row__closed .b-item-logo-row__logo { width: 249px; height: 60px; }
  .b-item-logo-row--auto .b-item-logo-row__closed .b-item-logo-row__headline { flex: 1 1 0; min-width: 0; }
  .b-item-logo-row--auto .b-item-logo-row__open { align-items: flex-start; gap: var(--space-32); }
  .b-item-logo-row--auto .b-item-logo-row__main { flex: 1 1 0; min-width: 0; gap: var(--space-40); }
  .b-item-logo-row--auto .b-item-logo-row__group { gap: var(--spacing-stack-l); }
  .b-item-logo-row--auto .b-item-logo-row__open .b-item-logo-row__logo { width: 312px; height: 111.14px; }
  .b-item-logo-row--auto .b-item-logo-row__open .b-item-logo-row__title .b-item-logo-row__toggle { display: none; }
  .b-item-logo-row--auto .b-item-logo-row__content { gap: var(--space-20); }
  .b-item-logo-row--auto .b-item-logo-row__media { flex: 1 1 0; min-width: 0; }
  .b-item-logo-row--auto .b-item-logo-row__toggle--s { display: none; }
}
.b-item-logo-row__toggle--l, .b-item-logo-row__toggle--s { display: flex; }

/* the state shows one of the two layouts (after the layouts, and one class
   stronger, so a layout's own display never brings the other back) */
.b-item-logo-row.b-item-logo-row--open .b-item-logo-row__closed,
.b-item-logo-row.b-item-logo-row:not(.b-item-logo-row--open) .b-item-logo-row__open { display: none; }