/**
 * @file
 * Front-end styling for the rendered YouTube embed + "Skip introduction" link.
 * Uses the theme tokens (loaded site-wide via global-styling) with safe
 * fallbacks so the component also works outside the AbroadLink theme.
 */
.al-youtube {
  margin: 1.5rem 0;
}

.al-youtube__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.al-youtube__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* aspect-ratio fallback for very old browsers. */
@supports not (aspect-ratio: 16 / 9) {
  .al-youtube__frame {
    height: 0;
    padding-bottom: 56.25%;
  }
}

.al-youtube__skip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.55rem 1.05rem;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--al-orange, #f3792b);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.al-youtube__skip:hover {
  background: var(--al-orange-dark, #d9641b);
}

.al-youtube__skip:active {
  transform: translateY(1px);
}

.al-youtube__skip:focus-visible {
  outline: 3px solid var(--al-orange, #f3792b);
  outline-offset: 2px;
}

.al-youtube__skip svg {
  width: 0.95em;
  height: 0.95em;
  flex: 0 0 auto;
}

.al-youtube--skipped .al-youtube__skip {
  opacity: 0.55;
}