/**
 * @file
 * Styles for the social post iframe embeds.
 */

.cw-social-embed iframe {
  /* The iframe carries a fixed width attribute taken from the formatter
     settings. Without this it overflows any container narrower than that
     width — the wrapper's Max width setting, a narrow column, or a phone
     viewport — and pushes a horizontal scrollbar onto the page. */
  max-width: 100%;

  /* An iframe is inline by default, which leaves a baseline gap under it. */
  display: block;
  border: 0;
  overflow: hidden;
}

/**
 * Per-placement height, driven by a block's "Embed height" field.
 *
 * cw_social_embeds_preprocess_block() puts the .cw-social-embed-host class and
 * a --cw-social-embed-height custom property on the block wrapper when the
 * field is filled in. The provider page inside the iframe is cross-origin, so
 * its content height cannot be measured or styled from here: the height has to
 * be stated, and whatever the provider renders past it is clipped.
 *
 * A percentage resolves against the nearest ancestor with a definite height, so
 * it only takes effect where the surrounding layout sets one. Pixels always
 * apply.
 */
.cw-social-embed-host .cw-social-embed {
  height: var(--cw-social-embed-height);
  overflow: hidden;
}

.cw-social-embed-host .cw-social-embed iframe {
  /* Fill the stated height instead of keeping the iframe's height attribute,
     which would overflow the wrapper and be clipped mid-content. */
  width: 100%;
  height: 100%;
}